/* =========================================
   CANCHAPRO - ESTILOS GENERALES
   Diseño adaptable a PC, tablet y móvil
   ========================================= */

:root {
  --primary: #118457;
  --primary-dark: #08613e;
  --sidebar: #0d281e;
  --background: #f2f5f8;
  --surface: #ffffff;
  --text: #14253c;
  --muted: #64748b;
  --border: #dbe4ef;
  --danger: #dc2626;
  --success: #15803d;
  --radius: 14px;
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

* {
  box-sizing: border-box;
}

html {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 11px 15px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  transition: background 0.2s, transform 0.2s;
}

button:hover {
  background: var(--primary-dark);
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.secondary,
button[data-act="edit"],
button[data-act="players"] {
  background: #e9eef2;
  color: #183047;
}

button.secondary:hover {
  background: #dce5eb;
}

button.danger {
  background: var(--danger);
}

button.small {
  padding: 7px 11px;
  font-size: 12px;
}

h1, h2, h3, p {
  margin-top: 0;
}

h2 {
  font-size: 17px;
  margin-bottom: 16px;
}

/* =========================================
   PANELES Y CONTENEDORES
   ========================================= */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.bar h2 {
  margin: 0;
}

.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.actions-cell {
  white-space: nowrap;
}

.muted,
.foot {
  color: var(--muted);
}

.foot {
  font-size: 12px;
  margin-top: 12px;
}

.notice {
  padding: 13px 15px;
  background: #eff8f4;
  border-radius: 9px;
  color: #176044;
  margin-bottom: 16px;
}

/* =========================================
   FORMULARIOS
   ========================================= */

.formgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field label {
  color: #334c70;
  font-size: 12px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea,
#roundFilter {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #cbd7e6;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
#roundFilter:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(17, 132, 87, 0.12);
}

/* =========================================
   TABLAS
   ========================================= */

.tablewrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: #476183;
  background: #f5f7fa;
  padding: 12px 10px;
}

td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:hover td {
  background: #fafcfd;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 28px;
}

/* =========================================
   TARJETAS DE RESUMEN
   ========================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 18px;
}

.stat {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
}

.stat .label {
  font-size: 12px;
  color: var(--muted);
}

.stat .value {
  font-size: 27px;
  font-weight: 800;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.positive {
  color: #15803d;
}

.negative {
  color: #dc2626;
}

/* =========================================
   NOTIFICACIONES
   ========================================= */

#toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  max-width: min(380px, calc(100vw - 30px));
  padding: 15px 20px;
  border-radius: 12px;
  background: var(--success);
  color: white;
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

#toast.hidden {
  display: none !important;
}

#toast.toast-success {
  background: var(--success);
}

#toast.toast-error {
  background: var(--danger);
}

/* =========================================
   TABLETS
   ========================================= */

@media (max-width: 1100px) {
  .formgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   CELULARES
   ========================================= */

@media (max-width: 650px) {
  body {
    font-size: 13px;
  }

  .panel {
    padding: 15px;
    border-radius: 12px;
  }

  .formgrid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat {
    padding: 13px;
  }

  .stat .value {
    font-size: 20px;
  }

  button {
    min-height: 42px;
  }

  .actions-cell {
    white-space: normal;
  }

  .bar {
    align-items: flex-start;
  }

  #toast {
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* CANCHAPRO - NOTIFICACIONES */

#toast {
  position: fixed;
  top: 20px;
  right: 20px;
  left: auto;
  bottom: auto;

  width: max-content;
  max-width: min(360px, calc(100vw - 40px));
  height: auto;
  min-height: 0;

  padding: 14px 18px;
  border-radius: 10px;

  background: #15803d;
  color: white;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  overflow-wrap: anywhere;
}

#toast.hidden {
  display: none !important;
}

#toast.error {
  background: #dc2626;
}

#toast.success {
  background: #15803d;
}


/* CanchaPro V10 · Interfaz cómoda y ventanas emergentes */
:root { --cp-accent:#0f766e; --cp-ink:#172b4d; --cp-soft:#f4f8fc; }
button { transition:background .18s,transform .18s,box-shadow .18s; }
button:focus-visible, input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #64c9b3; outline-offset:2px; }
button:not(:disabled):hover { box-shadow:0 5px 14px rgba(16,91,75,.16); }
.panel { border-radius:17px; box-shadow:0 7px 24px rgba(25,48,72,.055); }
.cp-workflow-note { background:#edf9f6; border:1px solid #b8e3d8; border-radius:12px; padding:12px 15px; margin:15px 0; color:#145c50; line-height:1.65; }
.cp-match-tabs { display:flex; flex-wrap:wrap; gap:9px; padding:9px; background:#eaf0f6; border-radius:14px; margin:14px 0; }
.cp-match-tabs button { flex:1 1 155px; border-radius:11px; min-height:46px; }
.cp-match-tabs button.cp-tab-active { box-shadow:0 5px 13px rgba(13,116,88,.2); }
.cp-dialog { border:0; border-radius:20px; width:min(1060px,96vw); max-width:96vw; max-height:92dvh; padding:0; background:#fff; box-shadow:0 28px 90px rgba(7,22,45,.32); overflow:auto; color:var(--text); }
.cp-dialog::backdrop { background:rgba(11,28,49,.64); backdrop-filter:blur(4px); }
.cp-dialog-head { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; background:#123f37; color:white; border-radius:20px 20px 0 0; }
.cp-dialog-head h2 { color:white; margin:0; font-size:1.12rem; }
.cp-dialog-head button { background:#fff; color:#143f36; white-space:nowrap; }
.cp-dialog-hint { margin:15px 20px; padding:12px 14px; border-radius:12px; background:#eff8ff; border:1px solid #cfe5f7; color:#28506a; }
.cp-dialog #lineupForm { padding:0 18px 16px; }
.cp-lineup-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; }
.cp-lineup-tools button { padding:8px 11px; }
.cp-lineup-tools span { color:#64748b; font-size:12px; margin-left:auto; }
.cp-lineup-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px; }
.cp-team-fold { border:1px solid #d7e4ed; border-radius:15px; background:#fff; overflow:hidden; min-width:0; }
.cp-team-fold > summary { list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:15px; cursor:pointer; background:#edf7f4; font-weight:800; color:#14594b; }
.cp-team-fold > summary::-webkit-details-marker { display:none; }
.cp-team-count { font-size:12px; font-weight:700; white-space:nowrap; color:#4c7069; }
.cp-team-body { padding:12px; }
.cp-helper { margin:0 0 10px; color:#64748b; font-size:12px; }
.cp-player-row { padding:12px; margin:8px 0; border:1px solid #e0e8f0; border-radius:12px; background:#fff; display:flex; flex-direction:column; gap:8px; }
.cp-player-row:has(input:checked) { border-color:#8ad5bd; background:#f1fbf7; }
.cp-player-blocked { border-color:#f2d0d0; background:#fff9f9; }
.cp-player-label { display:flex; align-items:flex-start; gap:9px; line-height:1.55; cursor:pointer; flex-wrap:wrap; }
.cp-player-label input { width:18px; height:18px; flex-shrink:0; accent-color:#118457; margin-top:2px; }
.cp-player-row [data-act="payPlayerFine"] { align-self:flex-start; background:#146c57; color:white; white-space:normal; text-align:left; }
.cp-dialog-actions { position:sticky; bottom:0; z-index:2; background:#fff; border-top:1px solid #e3ebf1; padding:13px 0 3px; display:flex; justify-content:flex-end; }
.cp-dialog-actions button { min-height:45px; }
#cpFineDialog { width:min(640px,94vw); }
#cpFineDialogBody { padding:20px; }
.cp-fine-payment { border:1px solid #e0e8f0; border-radius:13px; padding:13px; margin:12px 0; background:#f9fbfe; display:grid; grid-template-columns:1fr 125px auto; align-items:end; gap:12px; }
.cp-fine-payment .field { margin:0; }
.cp-fine-payment button { min-height:42px; }
@media (max-width:800px) { .cp-lineup-columns {grid-template-columns:1fr;} .cp-dialog {max-height:96dvh;width:98vw;max-width:98vw;} .cp-dialog-head {padding:13px;} .cp-dialog #lineupForm {padding:0 12px 12px;} .cp-fine-payment {grid-template-columns:1fr;} .cp-lineup-tools span {margin-left:0;} }
@media (prefers-reduced-motion:reduce) { button {transition:none;} }


/* ===== CanchaPro V11: estructura y navegacion restauradas ===== */
.hidden, input.hidden { display:none !important; }
.layout { display:grid; grid-template-columns:258px minmax(0,1fr); min-height:100dvh; }
.side { position:sticky; top:0; height:100dvh; overflow-y:auto; background:linear-gradient(175deg,#103a2e,#0b251e); color:#e9fff5; padding:22px 14px; display:flex; flex-direction:column; gap:20px; box-shadow:5px 0 24px rgba(13,37,29,.12); z-index:20; }
.brand { padding:8px 12px 18px; border-bottom:1px solid rgba(255,255,255,.13); font-size:25px; font-weight:850; letter-spacing:-.7px; color:white; }
.brand span { color:#64e1ac; }
.nav { display:flex; flex-direction:column; gap:5px; }
.nav button { width:100%; display:flex; align-items:center; text-align:left; background:transparent; color:#cbe7dc; padding:13px 14px; border-radius:11px; font-size:13px; font-weight:650; line-height:1.3; }
.nav button:hover { background:rgba(255,255,255,.11); color:white; box-shadow:none; }
.nav button.active { background:#13855e; color:white; box-shadow:0 4px 15px rgba(0,0,0,.12); }
.side-note { margin-top:auto; padding:15px 12px; border-top:1px solid rgba(255,255,255,.13); color:#a8c7b9; font-size:12px; line-height:1.7; }
.main { min-width:0; width:100%; }
.top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; padding:24px 28px; background:#fff; border-bottom:1px solid var(--border); }
.top h1 { font-size:25px; letter-spacing:-.6px; margin:0 0 5px; }
.top p { color:var(--muted); margin:0; }
.top .actions { justify-content:flex-end; }
.content { padding:25px 28px 42px; max-width:1700px; margin:0 auto; }
.connection { display:inline-flex; align-items:center; gap:8px; color:#14734f; background:#eaf8f1; padding:10px 12px; border-radius:10px; font-weight:650; font-size:12px; }
.connection.offline { background:#fff3df; color:#a75c11; }
.dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.cp-dialog:not([open]) { display:none; }
.cp-dialog[open] { display:block; }
.cp-dialog .cp-dialog-head { position:sticky; }
.cp-dialog .cp-lineup-columns { margin-bottom:10px; }
.cp-match-summary { display:flex; flex-wrap:wrap; gap:10px; margin:15px 0; }
.cp-match-summary > span { background:#f3f8f6; border:1px solid #dceae5; border-radius:10px; padding:10px 12px; }
.cp-lineup-preview { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.cp-lineup-preview > span { background:#f2f7fa; padding:10px 12px; border-radius:9px; }
@media (max-width:1050px) { .layout {grid-template-columns:215px minmax(0,1fr);} .side {padding:16px 10px;} .content {padding:20px;} .top {padding:20px;} }
@media (max-width:760px) { .layout {display:block;} .side {position:relative;height:auto;padding:12px;gap:10px;} .brand {font-size:21px;padding:4px 8px 10px;} .nav {display:flex;flex-direction:row;overflow-x:auto;gap:7px;padding:4px 0 7px;} .nav button {width:auto;flex:0 0 auto;white-space:nowrap;padding:10px 12px;} .side-note {display:none;} .top {padding:16px;align-items:flex-start;} .top h1 {font-size:22px;} .top .actions {justify-content:flex-start;} .content {padding:14px;} }
@media (max-width:430px) { .stats {grid-template-columns:1fr 1fr;} .top .actions button {padding:9px 11px;} .cp-dialog-head h2 {font-size:1rem;} }

/* CanchaPro V12: componentes tipo Bootstrap, 100% locales y offline */
:root { --cp-primary:#087b57; --cp-primary-soft:#e8f7f1; --cp-danger:#b42332; --cp-warning:#9b5a00; }
.cp-dialog { border:1px solid #d5e5e0; }
.cp-dialog-hint { margin:14px 20px 8px; }
.cp-team-fold { box-shadow:0 3px 12px rgba(10,35,30,.05); }
.cp-team-fold > summary { min-height:54px; }
.cp-team-body { padding:14px; }
.cp-player-row { padding:12px 14px; gap:9px; transition:border-color .15s,background .15s; }
.cp-player-label { display:grid; grid-template-columns:22px minmax(110px,1fr) auto; align-items:center; gap:12px; width:100%; }
.cp-player-label input { margin:0; }
.cp-player-identity { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cp-player-identity strong { overflow-wrap:anywhere; color:#18324a; font-size:13px; }
.cp-player-identity small { color:#708199; font-size:11px; }
.cp-player-status { display:inline-block; max-width:235px; font-size:11px; font-weight:700; padding:6px 9px; border-radius:999px; line-height:1.35; text-align:center; }
.cp-status-success { background:#e9f8f0; color:#0c7651; }
.cp-status-warning { background:#fff3d9; color:#8e5500; }
.cp-status-danger { background:#fff0f0; color:#a31e30; }
.cp-player-row:has(input:checked:not(:disabled)) { border-color:#40a985; background:#f0fbf6; box-shadow:inset 3px 0 #16845e; }
.cp-player-row:has(input:disabled) { background:#f9fafb; }
.cp-player-blocked { border-color:#e8c8c9 !important; }
.cp-alert { border-radius:10px; padding:11px 13px; font-size:12px; margin:0 0 12px; line-height:1.6; }
.cp-alert-warning { color:#754900; background:#fff8e7; border:1px solid #f2d89e; }
.cp-alert-info { color:#21526d; background:#eef7fc; border:1px solid #cde5f1; }
.cp-inline-link { background:none; color:#075d83; padding:2px 4px; text-decoration:underline; font-size:12px; }
.cp-inline-link:hover { background:transparent; box-shadow:none; color:#043f60; }
.cp-field-help { font-size:11px; color:#6b7d92; margin-top:3px; }
.cp-dialog-actions { padding:14px 2px 8px; }
.cp-dialog-actions button { border-radius:10px; padding:12px 20px; }
#eventForm .field select { border:1px solid #c9d9e8; }
#eventForm .field select:focus { box-shadow:0 0 0 3px rgba(17,132,87,.14); }
@media(max-width:1100px) { .cp-player-label {grid-template-columns:22px minmax(0,1fr);} .cp-player-status {grid-column:2; justify-self:start; max-width:100%;} }
@media(max-width:600px) { .cp-dialog-hint {margin:10px 12px;} .cp-team-body {padding:9px;} .cp-player-row {padding:10px;} }

/* V14 · Pagos claros, sin modificar el diseño V12 de convocatoria */
.cp-match-tab-content[hidden] {display:none!important;}
.cp-payment-info {display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;background:#edf7ff;border:1px solid #c9e4f9;color:#254e69;border-radius:12px;padding:13px 16px;margin:12px 0 17px;line-height:1.5;}
.cp-payment-info strong {white-space:nowrap;}
.cp-payment-info span {flex:1 1 350px;}
.cp-pay-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
.cp-payment-card {border:1px solid #d7e5ee;background:white;border-radius:17px;overflow:hidden;min-width:0;box-shadow:0 6px 22px rgba(16,47,63,.06);}
.cp-payment-team-head {display:flex;align-items:center;gap:10px;padding:16px 18px;background:#eaf6f1;border-bottom:1px solid #d7e8e1;}
.cp-payment-team-head h3 {margin:0;color:#115b47;font-size:16px;overflow-wrap:anywhere;}
.cp-payment-team-icon {display:grid;place-items:center;background:white;border-radius:10px;width:37px;height:37px;font-size:19px;flex-shrink:0;}
.cp-payment-card-body {padding:15px;display:grid;gap:14px;}
.cp-payment-item {padding:15px;border:1px solid #e0e9f1;border-radius:13px;background:#fafcfe;min-width:0;}
.cp-payment-item-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.cp-payment-item h4 {font-size:14px;margin:0 0 3px;color:#142d42;}
.cp-payment-item small {font-size:12px;color:#657b90;}
.cp-payment-badge {font-size:11px;font-weight:800;border-radius:999px;padding:5px 9px;white-space:nowrap;}
.cp-badge-done {background:#def7e9;color:#17633f;}.cp-badge-ready {background:#e2f5ec;color:#146348;}.cp-badge-wait {background:#fff0db;color:#92500e;}
.cp-payment-amounts {display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:15px 0 10px;}
.cp-payment-amounts>div {background:#fff;border:1px solid #e5ecf2;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.cp-payment-amounts strong {font-size:19px;overflow-wrap:anywhere;}.cp-amount-due {color:#b45309;}.cp-amount-done {color:#15803d;}
.cp-payment-progress {height:7px;background:#e5edf2;border-radius:999px;overflow:hidden;}.cp-payment-progress span {display:block;height:100%;background:#168a63;border-radius:999px;transition:width .2s;}
.cp-payment-inline-form {display:flex;gap:9px;align-items:flex-end;margin-top:14px;}
.cp-payment-inline-form .field {flex:1 1 130px;min-width:0;}.cp-payment-inline-form .field input {width:100%;min-height:44px;background:white;}
.cp-payment-inline-form button {flex:0 0 auto;min-height:44px;white-space:nowrap;}
.cp-payment-complete {margin:13px 0 0;color:#16804c;font-weight:700;font-size:12px;}
@media(max-width:1000px) {.cp-pay-grid {grid-template-columns:1fr;}}
@media(max-width:530px) {.cp-payment-inline-form {flex-direction:column;align-items:stretch;}.cp-payment-inline-form button {width:100%;}.cp-payment-amounts strong {font-size:16px;}.cp-payment-card-body {padding:10px;}.cp-payment-item {padding:12px;}}


/* CANCHAPRO V15 · Diseño de administración profesional, sin dependencias externas */
:root { --primary:#087a5c;--primary-dark:#065f49;--background:#f3f6fa;--text:#1a3044;--border:#e1e8f0;--radius:16px;--shadow:0 5px 24px rgba(24,47,70,.045); }
body {font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;letter-spacing:-.005em}
.layout {grid-template-columns:255px minmax(0,1fr)}
.side {background:#11283b;box-shadow:none;border-right:1px solid #1c3c4c;padding:25px 13px;gap:22px}
.brand {display:flex;align-items:center;gap:12px;padding:4px 10px 22px;border-color:#284358;font-size:23px;letter-spacing:-.8px}
.cp-brand-mark {display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;background:#0b765d;border-radius:13px;font-size:23px}
.cp-brand-word {display:flex;flex-wrap:wrap;align-items:baseline;gap:0;font-weight:850}
.cp-brand-word>span {color:#51d5a8}
.cp-brand-word small {display:block;flex:0 0 100%;font-size:9px;font-weight:700;color:#a3b8c7;letter-spacing:1.1px;margin-top:-1px}
.nav {gap:4px}
.nav button {font-weight:600;font-size:13px;color:#bdccd7;border-radius:11px;padding:12px 14px;min-height:45px}
.nav button:hover {background:#203f50;color:#fff}
.nav button.active {background:#0d775f;box-shadow:inset 3px 0 #7fe1bb,0 4px 16px #051b2740;color:white}
.side-note {color:#91aabc;border-color:#284358}
.main {background:var(--background)}
.top {padding:21px 29px;min-height:98px;box-shadow:0 1px 0 #e6edf3;gap:14px}
.top h1 {font-size:25px;font-weight:800;color:#173047}
.top .actions button {border:1px solid #dce6ef;background:#f8fafc;color:#264359;font-weight:700;box-shadow:none}
.top .actions button:hover {background:#eaf1f6}
.connection {border-radius:999px;padding:8px 13px}
.cp-breadcrumb {padding:17px 29px 0;font-size:11px;font-weight:750;color:#8997a7;letter-spacing:1px}
.cp-breadcrumb span {margin-left:7px;color:#48687d}
.content {padding:17px 29px 55px;max-width:1650px}
.panel {border-radius:17px;border-color:#e3eaf2;padding:23px;box-shadow:0 4px 22px #19364e08}
.panel h2 {font-size:17px;letter-spacing:-.3px}
.stats {gap:16px;margin-bottom:20px}
.stat {border:1px solid #e2eaf2;border-radius:17px;padding:21px 22px;box-shadow:0 5px 18px #152e4508;position:relative;overflow:hidden}
.stat::before {content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#0d9972}
.stat:nth-child(2)::before {background:#4f84d8}.stat:nth-child(3)::before {background:#c78d2d}.stat:nth-child(4)::before {background:#3dafa2}
.stat .label {font-size:12px;font-weight:650;color:#607489}
.stat .value {font-size:29px;color:#153047;letter-spacing:-.8px}
.cp-welcome {display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:27px 30px;border-radius:18px;margin-bottom:20px;background:linear-gradient(110deg,#113c43,#0c715a);color:white;box-shadow:0 9px 25px #0c665528}
.cp-welcome h2 {font-size:24px;margin:5px 0 6px;letter-spacing:-.5px;color:white}
.cp-welcome p {margin:0;color:#c8e7e2}
.cp-eyebrow {font-size:10px;font-weight:850;letter-spacing:1.4px;color:#138968}
.cp-welcome .cp-eyebrow {color:#9ce7d2}
.cp-welcome-button {background:#fff;color:#135744;box-shadow:none;white-space:nowrap}
.cp-welcome-button:hover {background:#e5f7f1;color:#0e4b3d}
.cp-section-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cp-section-head h2 {margin:3px 0 0;font-size:20px}
.cp-section-count {border:1px solid #dce9e5;background:#edf7f3;color:#0b7053;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:750}
.cp-match-filters {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.cp-filter-search {display:flex;align-items:center;gap:9px;flex:1 1 240px;background:white;border:1px solid #d6e1eb;border-radius:11px;padding:0 12px;font-size:20px;color:#8194a5}
.cp-filter-search:focus-within {border-color:#139b76;box-shadow:0 0 0 3px #1199741a}
.cp-filter-search input {width:100%;border:0;outline:none;min-height:44px;font-size:13px;color:#163248}
.cp-match-filters select {border:1px solid #d6e1eb;border-radius:11px;min-height:45px;padding:0 12px;background:#fff;color:#2d465b;max-width:100%}
.cp-filter-count {font-size:12px;color:#65798d;white-space:nowrap}
.cp-round-pill {display:inline-block;background:#eaf5f1;color:#0b7256;padding:6px 9px;border-radius:8px;font-weight:800;font-size:12px}
tr[hidden] {display:none!important}
.tablewrap {border:1px solid #e5edf3;border-radius:12px}
th {background:#f5f8fb;font-size:11px;letter-spacing:.4px;color:#577087}
td {border-color:#edf1f5}
tbody tr:hover td {background:#f5fbf8}
button {border-radius:10px}
button:focus-visible,a:focus-visible {outline:3px solid #54c5a4;outline-offset:2px}
.field input,.field select,.field textarea,#roundFilter {border-radius:10px}
.cp-payment-card {box-shadow:0 5px 24px #122c420b}
.cp-dialog {box-shadow:0 30px 90px #091e3260}
.cp-menu-toggle {display:none;background:#eef5f8;color:#244256;border:1px solid #d8e5ee;min-height:42px}
.cp-mobile-overlay[hidden] {display:none!important}
@media(max-width:1050px){.layout{grid-template-columns:215px minmax(0,1fr)}.content{padding:18px 20px}.cp-breadcrumb{padding-left:20px}}
@media(max-width:760px){
 .layout{display:block}.side{position:fixed;top:0;left:0;bottom:0;width:min(290px,85vw);height:100dvh;transform:translateX(-105%);transition:transform .2s;z-index:100;padding:24px 14px}
 .side.cp-side-open{transform:translateX(0)}.side .nav{flex-direction:column;overflow:visible}.side .nav button{width:100%;white-space:normal}.side-note{display:block}
 .cp-mobile-overlay:not([hidden]){display:block;position:fixed;inset:0;background:#071a2ba8;z-index:99}
 .cp-menu-toggle{display:block}.top{padding:14px 16px;min-height:78px}.top h1{font-size:21px}.top .actions{width:100%;justify-content:flex-start}.cp-breadcrumb{padding:12px 16px 0}.content{padding:13px 14px 35px}
 .cp-welcome{padding:22px 19px}.cp-welcome h2{font-size:21px}.cp-welcome-button{width:100%}
}
@media(max-width:520px){.cp-match-filters select{flex:1 1 160px}.cp-filter-count{margin-left:auto}.panel{padding:15px}.stat{padding:15px}}
@media(prefers-reduced-motion:reduce){.side{transition:none}}

/* V16: Interfaz deportiva profesional, sin dependencias externas */
.cp-v16-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.cp-v16-widget{margin:0;padding:20px;overflow:hidden}.cp-v16-widget-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.cp-v16-widget-head h2{margin:0;font-size:16px}.cp-v16-link{border:0;background:none!important;color:#1475c3!important;padding:6px!important;font-size:12px;white-space:nowrap}.cp-v16-link:hover{text-decoration:underline}.cp-v16-next{padding:13px 15px;border:1px solid #e2eaf3;border-radius:12px;margin-bottom:9px;background:#f9fbfe}.cp-v16-versus{display:flex;align-items:center;gap:10px;justify-content:space-between}.cp-v16-versus strong{flex:1;min-width:0;font-size:13px}.cp-v16-versus strong:last-child{text-align:right}.cp-v16-versus>span{font-size:11px;font-weight:900;color:#8394a8}.cp-v16-meta{font-size:12px;color:#718299;margin-top:6px}.cp-v16-table-wrap{overflow:auto}.cp-v16-table{width:100%;border-collapse:collapse;min-width:320px}.cp-v16-table th{text-transform:uppercase;font-size:10px;letter-spacing:.06em;color:#7186a3;text-align:left}.cp-v16-table td,.cp-v16-table th{padding:10px 7px;border-bottom:1px solid #edf1f7}.cp-v16-table td{font-size:12px}.cp-v16-table td:last-child,.cp-v16-table th:last-child{text-align:right}.cp-v16-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#12b981;margin-right:8px}.cp-v16-movement{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf1f7}.cp-v16-movement strong{font-size:13px}.cp-v16-movement small{display:block;color:#718299;margin-top:3px}.cp-v16-in{color:#08885e}.cp-v16-out{color:#d13b50}.cp-v16-empty{color:#718299;font-size:13px;padding:20px 0}.cp-v16-stats .stat{position:relative;overflow:hidden}.cp-v16-stat-icon{position:absolute;right:18px;top:16px;font-size:21px;opacity:.8}
.cp-v16-team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:15px}.cp-v16-team-card{border:1px solid #dfe8f2;border-radius:15px;background:linear-gradient(150deg,#fff,#f9fbff);padding:17px;min-width:0;box-shadow:0 3px 10px #102a4510}.cp-v16-team-heading{display:flex;gap:12px;align-items:center}.cp-v16-team-avatar{width:46px;height:46px;border-radius:12px;background:var(--team-accent);color:white;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}.cp-v16-team-heading h3{font-size:15px;margin:0 0 3px}.cp-v16-team-heading span{font-size:12px;color:#70849a}.cp-v16-team-detail{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}.cp-v16-team-detail span{font-size:11px;border:1px solid #dfe8f2;background:#f2f6fb;border-radius:20px;padding:5px 8px}.cp-v16-team-actions{display:flex;flex-wrap:wrap;gap:6px}.cp-v16-team-actions button{flex:1 1 auto}
.cp-v16-matches{display:grid;gap:12px}.cp-v16-match{border:1px solid #dfe8f2;border-radius:15px;padding:16px;background:linear-gradient(125deg,#fff,#f8fbff);box-shadow:0 3px 10px #102a4510}.cp-v16-match-main{display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);align-items:center;gap:12px;min-height:65px}.cp-v16-match-team{display:flex;align-items:center;gap:9px;min-width:0}.cp-v16-match-team strong{font-size:15px;overflow-wrap:anywhere}.cp-v16-away{justify-content:flex-end;text-align:right}.cp-v16-team-bullet{height:11px;width:11px;border-radius:50%;background:#2684e8;flex:none}.cp-v16-away .cp-v16-team-bullet{background:#13ad80}.cp-v16-match-center{text-align:center;display:flex;flex-direction:column;gap:2px}.cp-v16-score{font-size:26px;font-weight:850;color:#102f47;line-height:1.2}.cp-v16-match-center small{font-size:11px;color:#70849a}.cp-v16-match-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #e7edf5}.cp-v16-status{font-size:11px;font-weight:750;border-radius:25px;padding:6px 10px;background:#eef3f9;color:#53677d}.cp-v16-status.is-played{background:#e4f7ef;color:#0b825a}.cp-v16-status.is-live{background:#fff2d7;color:#a36800}.cp-v16-match-foot button{background:#118457;color:white}.cp-v16-match[hidden]{display:none!important}
/* Toast inside modal: top-layer descendant so it is never hidden behind dialog */
.cp-dialog-toast{position:fixed!important;top:25px!important;right:25px!important;bottom:auto!important;left:auto!important;z-index:2147483647!important;max-width:min(400px,calc(100vw - 35px));padding:15px 20px;border-radius:12px;color:#fff;font-weight:700;background:#0f8a60;box-shadow:0 12px 35px #0004;pointer-events:none}.cp-dialog-toast.error,.cp-dialog-toast.toast-error{background:#c42f46}.cp-dialog-toast.hidden{display:none!important}
@media(max-width:800px){.cp-v16-dashboard-grid{grid-template-columns:1fr}.cp-v16-match-main{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)}.cp-v16-match-team strong{font-size:12px}.cp-v16-score{font-size:21px}.cp-v16-widget{padding:15px}}
@media(max-width:420px){.cp-v16-match{padding:12px}.cp-v16-match-main{gap:5px}.cp-v16-match-foot button{font-size:11px;padding:9px}.cp-v16-team-grid{grid-template-columns:1fr}}


/* V17 — Ventanas adaptables para plantillas y gestión de encuentros */
.cp-v17-modal { position:fixed; inset:0; margin:auto; padding:0; width:min(1120px,calc(100vw - 36px)); max-width:calc(100vw - 36px); height:min(850px,calc(100dvh - 36px)); max-height:calc(100dvh - 36px); border:1px solid #d9e7ed; border-radius:20px; background:#f4f8fb; box-shadow:0 35px 110px #031b2e88; overflow:hidden; color:#173047; }
.cp-v17-modal::backdrop {background:rgba(5,19,35,.68);backdrop-filter:blur(5px)}
.cp-v17-modal-scroll {height:100%; overflow-y:auto; overscroll-behavior:contain; padding:20px; scrollbar-gutter:stable; }
.cp-v17-modal-scroll > .panel { margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.cp-v17-modal-scroll > .panel > .bar {position:sticky; top:-20px; z-index:8; background:#103d34; color:white; margin:-20px -20px 18px; padding:18px 22px; min-height:75px; border-radius:19px 19px 0 0; box-shadow:0 5px 18px #153c3518; }
.cp-v17-modal-scroll > .panel > .bar h2 {color:white; font-size:18px; }
.cp-v17-modal-scroll > .panel > .bar button {background:white; color:#183d34; }
.cp-v17-modal .cp-entry-box {background:white;border:1px solid #dfebf2;border-radius:15px;padding:18px;margin-bottom:18px;}
.cp-v17-modal .cp-entry-stats {display:flex; flex-wrap:wrap; gap:10px; margin:14px 0;}
.cp-v17-modal .cp-entry-stats > span {display:flex; flex-direction:column; gap:3px; flex:1 1 160px; background:#f5f9fc;border:1px solid #e2eaf2; border-radius:12px;padding:13px; font-size:12px; color:#657b8f;}
.cp-v17-modal .cp-entry-stats b {font-size:20px;color:#163b4f;white-space:nowrap;}
.cp-v17-modal .cp-entry-form {display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:10px 0 17px;}
.cp-v17-modal .cp-entry-form .field {flex:1 1 200px;}
.cp-v17-modal .cp-entry-form button {min-height:44px;}
.cp-v17-modal #playerForm {background:white;border:1px solid #dfebf2;border-radius:15px;padding:18px;margin:0 0 18px;}
.cp-v17-modal .tablewrap {background:white;border:1px solid #dfebf2;border-radius:14px;overflow-x:auto;}
.cp-v17-modal .formgrid {grid-template-columns:repeat(2,minmax(0,1fr));}
.cp-v17-modal .cp-match-tabs {position:sticky;top:56px;z-index:6;background:#eef3f7;border-radius:12px;padding:8px;}
.cp-v17-modal button:focus-visible {outline:3px solid #5cd4af;outline-offset:2px;}
@media(min-width:900px){.cp-v17-team-modal {width:min(1040px,calc(100vw - 52px));}.cp-v17-modal .formgrid {grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:650px){.cp-v17-modal {width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0;}.cp-v17-modal-scroll {padding:12px;scrollbar-gutter:auto;}.cp-v17-modal-scroll > .panel > .bar {top:-12px;margin:-12px -12px 14px;padding:14px 15px;border-radius:0;min-height:67px;}.cp-v17-modal-scroll > .panel > .bar h2 {font-size:16px;}.cp-v17-modal .cp-entry-box,.cp-v17-modal #playerForm {padding:13px;}.cp-v17-modal .formgrid {grid-template-columns:1fr 1fr;gap:9px;}.cp-v17-modal .cp-entry-stats > span {flex-basis:90px;padding:10px;}.cp-v17-modal .cp-entry-stats b {font-size:15px;}.cp-v17-modal .cp-entry-form button {width:100%;}.cp-v17-modal .cp-match-tabs {top:49px;}}
@media(max-width:380px){.cp-v17-modal .formgrid {grid-template-columns:1fr;}}

.cp-admin-nav{padding:12px 16px}.cp-admin-nav a{display:block;padding:12px 14px;border:1px solid #4d7769;border-radius:12px;color:#e9fff6;background:#184638;text-decoration:none;font-weight:700}.cp-admin-nav a:hover{background:#276452}