/* Clubdy CRM — hoja base: tokens de marca, armazón y componentes de panel.
   Los colores son EXACTAMENTE los de Theme.swift de la app iOS: si allí se
   tocan, aquí también, o el club ve dos productos distintos.
   Los --lui-* son el puente con la librería UI de la casa (tarjeta-spotlight):
   se mapean a los de Clubdy, nunca al revés. */
:root{
  --fondo:#0B1721;
  --superficie:#17232D;
  --superficie-alta:#1E2C37;
  --linea:#232F39;
  --acento:#22D9A6;
  --sobre-acento:#06231C;
  --texto:#FFFFFF;
  --atenuado:#8FA39C;
  --aviso:#E3B23C;
  --peligro:#EB4D4D;
  --azul:#0097FF;

  /* Menta de Clubdy. Fija a propósito: --acento se lo queda el color del
     club (ver sesion.js), y el logotipo de Clubdy no es del club. */
  --marca-menta:#22D9A6;

  --lui-acento:var(--acento);
  --lui-texto:var(--texto);
  --lui-superficie:var(--superficie);
  --lui-linea:var(--linea);
  --lui-atenuado:var(--atenuado);

  --r:14px;          /* radio de tarjeta */
  --barra:236px;     /* ancho de la barra lateral */
  --sombra:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.22);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ───────────────────────── armazón ───────────────────────── */
.app{display:grid;grid-template-columns:var(--barra) 1fr;min-height:100vh}
.app[hidden]{display:none}

.lateral{
  background:var(--superficie);
  border-right:1px solid var(--linea);
  display:flex;flex-direction:column;gap:6px;
  padding:18px 12px;position:sticky;top:0;height:100vh;
}
.marca{display:flex;align-items:center;gap:9px;padding:4px 8px 18px}
.marca .palabra{font-size:19px;font-weight:700;letter-spacing:-.02em}
/* El «dy» y la «C» del isotipo llevan el color del club, como en la app: los
   dos cambian juntos. La PELOTA no se tiñe nunca — un balón dorado o azul deja
   de leerse como balón. */
.marca .palabra i{font-style:normal;color:var(--acento)}

/* Isotipo en dos capas: la C va como MÁSCARA (así toma --acento sea cual sea,
   cosa que un filtro de tono no puede hacer con un color arbitrario) y la
   pelota va encima como imagen normal. Las dos salen del mismo lienzo, así que
   encajan solas. */
.iso{position:relative;display:inline-block;width:var(--iso,30px);aspect-ratio:160/134;flex:none}
.iso .c,.iso img{position:absolute;inset:0;width:100%;height:100%}
.iso .c{
  background:linear-gradient(135deg,var(--acento),color-mix(in srgb,var(--acento) 72%,transparent));
  -webkit-mask:url(../assets/isoc.png) center/contain no-repeat;
          mask:url(../assets/isoc.png) center/contain no-repeat;
}
.iso img{object-fit:contain}

.navitem{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:10px;color:var(--atenuado);
  cursor:pointer;border:0;background:none;width:100%;text-align:left;
  transition:background .16s ease,color .16s ease;
}
.navitem:hover{background:var(--superficie-alta);color:var(--texto)}
.navitem[aria-current="page"]{background:color-mix(in srgb,var(--acento) 14%,transparent);color:var(--acento)}
.navitem svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.nav-pie{margin-top:auto;border-top:1px solid var(--linea);padding-top:12px}
/* «Ver como»: solo sale cuando la persona tiene más de un rol en el club.
   La pastilla de aviso es parte del componente a propósito — una vista
   simulada que no se anuncia se confunde con un fallo de permisos. */
.ver-como{display:block;padding:0 11px 10px}
.ver-como>span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--atenuado);margin-bottom:5px}
.ver-como select{padding:7px 9px;font-size:13px}
.ver-como .pastilla{display:block;margin-top:7px;text-align:center;font-weight:600;white-space:normal;line-height:1.3}
.nav-usuario{padding:4px 11px 10px;line-height:1.35}
.nav-usuario b{display:block;font-weight:600;font-size:14px}
.nav-usuario span{color:var(--atenuado);font-size:12.5px}

.principal{min-width:0;padding:26px 30px 46px;max-width:1320px}
.cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.cabecera h1{font-size:25px}
.cabecera p{margin:4px 0 0;color:var(--atenuado);font-size:14px}

/* ───────────────────────── piezas ───────────────────────── */
.tarjeta{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r);padding:18px;box-shadow:var(--sombra);
}
.rejilla-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi .cifra{font-size:31px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .rotulo{color:var(--atenuado);font-size:13px;margin-top:2px}
.kpi .icono{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:12px;
  background:color-mix(in srgb,var(--acento) 14%,transparent);color:var(--acento);
}
.kpi .icono svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}

.dos-columnas{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}

.titulo-bloque{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.titulo-bloque h2{font-size:16px}

/* Tabla de datos. Sin halo a propósito: el índice de la librería avisa de que
   el spotlight distrae en tablas, y aquí se viene a leer. */
table.datos{width:100%;border-collapse:collapse;font-size:14px}
table.datos th{
  text-align:left;color:var(--atenuado);font-weight:600;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:0 12px 10px;
}
table.datos td{padding:11px 12px;border-top:1px solid var(--linea);vertical-align:middle}
table.datos tbody tr{transition:background .14s ease}
table.datos tbody tr:hover{background:var(--superficie-alta)}
table.datos td.num{font-variant-numeric:tabular-nums;color:var(--atenuado)}
.fila-pulsable{cursor:pointer}

.dorsal{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--superficie-alta);border:1px solid var(--linea);
  font-variant-numeric:tabular-nums;font-weight:650;font-size:13px;
}
.jugador-celda{display:flex;align-items:center;gap:11px;min-width:0}
.jugador-celda b{font-weight:600}
table.datos small,.jugador-celda small{display:block;color:var(--atenuado);font-size:12.5px;margin-top:2px}
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--superficie-alta);border:1px solid var(--linea);
  display:grid;place-items:center;font-size:12.5px;font-weight:650;color:var(--atenuado);
}

.pastilla{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap;
}
.pastilla.ok{background:color-mix(in srgb,var(--acento) 13%,transparent);color:var(--acento)}
.pastilla.aviso{background:color-mix(in srgb,var(--aviso) 14%,transparent);color:var(--aviso)}
.pastilla.mal{background:color-mix(in srgb,var(--peligro) 14%,transparent);color:var(--peligro)}
.pastilla.neutra{background:var(--superficie-alta);color:var(--atenuado);border-color:var(--linea)}

/* Barra de progreso. El ancho se pone en el cuadro siguiente (ver ui.js):
   una transición de CSS necesita estado anterior o aparece llena de golpe. */
.progreso{height:6px;border-radius:999px;background:var(--superficie-alta);overflow:hidden;min-width:64px}
.progreso i{display:block;height:100%;width:0;border-radius:999px;background:var(--acento);transition:width .55s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.progreso i{transition:none}}

/* Anillo de progreso (los "donuts" de la referencia). SVG, sin JS de animación. */
.anillo{display:grid;place-items:center;position:relative;width:132px;height:132px;margin:6px auto 2px}
.anillo svg{transform:rotate(-90deg);width:100%;height:100%}
.anillo circle{fill:none;stroke-width:11;stroke-linecap:round}
.anillo .pista{stroke:var(--superficie-alta)}
.anillo .valor{stroke:var(--acento);transition:stroke-dashoffset .7s cubic-bezier(.22,.8,.3,1)}
.anillo .centro{position:absolute;text-align:center}
.anillo .centro b{display:block;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.anillo .centro span{color:var(--atenuado);font-size:12px}
@media (prefers-reduced-motion:reduce){.anillo .valor{transition:none}}

/* ───────────────────────── controles ───────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:10px;border:1px solid var(--linea);
  background:var(--superficie-alta);cursor:pointer;font-weight:600;font-size:14px;
  transition:filter .15s ease,border-color .15s ease;
}
.btn:hover:not(:disabled){filter:brightness(1.16)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.principal{background:var(--acento);color:var(--sobre-acento);border-color:transparent}
.btn.fantasma{background:none}
.btn.peligro{color:var(--peligro)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.btn.ancho{width:100%}

.campo{display:block;margin-bottom:14px}
.campo>span{display:block;font-size:13px;color:var(--atenuado);margin-bottom:6px}
.campo>span em{font-style:normal;color:var(--peligro)}
input,select,textarea{
  width:100%;padding:10px 12px;border-radius:10px;
  background:var(--fondo);border:1px solid var(--linea);
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 18%,transparent);
}
input::placeholder{color:color-mix(in srgb,var(--atenuado) 70%,transparent)}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.pista-campo{font-size:12.5px;color:var(--atenuado);margin:-8px 0 14px}

/* ───────────────────────── diálogo ───────────────────────── */
dialog{
  border:1px solid var(--linea);border-radius:16px;background:var(--superficie);
  color:var(--texto);padding:0;width:min(560px,calc(100vw - 32px));box-shadow:0 24px 70px rgba(0,0,0,.55);
}
dialog::backdrop{background:rgba(3,8,7,.66);backdrop-filter:blur(2px)}
dialog .dlg-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0}
dialog .dlg-cab h2{font-size:18px}
dialog form{padding:16px 20px 20px}
dialog .dlg-pie{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.cerrar{background:none;border:0;color:var(--atenuado);cursor:pointer;font-size:22px;line-height:1;padding:2px 6px;border-radius:8px}
.cerrar:hover{background:var(--superficie-alta);color:var(--texto)}

/* ───────────────────────── estados ───────────────────────── */
.vacio{text-align:center;padding:34px 18px;color:var(--atenuado)}
.vacio b{display:block;color:var(--texto);margin-bottom:5px;font-weight:600}
.error{
  background:color-mix(in srgb,var(--peligro) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--peligro) 34%,transparent);
  color:#FFD9D9;border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:14px;
}
.exito{
  background:color-mix(in srgb,var(--acento) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acento) 34%,transparent);
  border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:14px;
}
/* Esqueleto de carga: pulso de opacidad, no de posición (no repinta layout). */
.cargando{color:var(--atenuado);padding:26px 4px;font-size:14px;animation:latido 1.3s ease-in-out infinite}
@keyframes latido{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.cargando{animation:none}}

/* ───────────────────────── entrada (login) ───────────────────────── */
.entrar{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
/* Dos conos de luz muy tenues detrás — de la idea de `fondo-ambiente` de la
   librería, sin animación: esto es un panel de trabajo, no una landing. */
.entrar::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:70vh;pointer-events:none;
  background:
    radial-gradient(50% 55% at 22% 0%,color-mix(in srgb,var(--acento) 26%,transparent),transparent 70%),
    radial-gradient(46% 52% at 82% 8%,color-mix(in srgb,var(--azul) 18%,transparent),transparent 72%);
}
.entrar .caja{width:min(400px,100%);position:relative}
.entrar .marca{justify-content:center;padding:0 0 22px}
.entrar .marca .iso{width:38px}
.entrar .marca .palabra{font-size:24px}
.entrar h1{font-size:20px;margin-bottom:6px}
.entrar .sub{color:var(--atenuado);font-size:14px;margin:0 0 20px}
.entrar .pie{text-align:center;color:var(--atenuado);font-size:12.5px;margin-top:18px}
.entrar .pie button{background:none;border:0;color:var(--atenuado);text-decoration:underline;cursor:pointer;font-size:12.5px}
input.codigo{
  text-align:center;font-size:28px;letter-spacing:.34em;font-variant-numeric:tabular-nums;
  padding:12px;text-indent:.34em;
}

/* ─────────────────── documentos y celdas de acciones ─────────────────── */
.zona-soltar{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 18px;margin-bottom:16px;cursor:pointer;
  border:1.5px dashed var(--linea);border-radius:var(--r);background:var(--superficie-alta);
  transition:border-color .15s ease,background .15s ease;
}
.zona-soltar:hover,.zona-soltar:focus-visible{border-color:var(--acento)}
/* `.encima` la pone el JS mientras se arrastra un fichero por encima: sin
   señal visible no se sabe si la zona acepta el soltar o no. */
.zona-soltar.encima{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--superficie-alta))}
.zona-soltar.con-archivo{border-style:solid;border-color:var(--acento)}
.zona-soltar .icono{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:color-mix(in srgb,var(--acento) 13%,transparent);color:var(--acento)}
.zona-soltar .icono svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
.zona-soltar b{font-weight:600;font-size:14px;word-break:break-word}
.zona-soltar span{color:var(--atenuado);font-size:12.5px}

.icono-doc{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;
  background:var(--superficie-alta);color:var(--atenuado)}
.icono-doc svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Botones de una fila: a la derecha, sin partirse en dos líneas y con el
   mismo aire entre ellos que en las cabeceras. */
td.acciones{text-align:right;white-space:nowrap}
td.acciones>*{margin-left:6px}
td.acciones .btn{padding:7px 11px}

/* Una tabla ancha se desplaza DENTRO de su tarjeta; el <body> nunca. */
.tabla-ancha{overflow-x:auto}

/* ───────────────────────── responsive ─────────────────────────
   Por debajo de 1040 px la barra se queda en iconos (el texto se apaga con
   font-size:0, que no alcanza a un nodo suelto con display:none), y por
   debajo de 720 px pasa a barra superior horizontal. */
@media (max-width:1040px){
  :root{--barra:70px}
  .lateral{padding:16px 10px;align-items:center}
  .navitem{justify-content:center;padding:11px}
  .navitem span,.marca .palabra,.nav-usuario{font-size:0}
  .nav-usuario{display:none}
  .principal{padding:22px 20px 40px}
  .dos-columnas{grid-template-columns:1fr}
}
@media (max-width:720px){
  .app{grid-template-columns:1fr}
  .lateral{
    position:sticky;top:0;height:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--linea);z-index:5;
  }
  .lateral .marca{display:none}
  /* En horizontal los enlaces tienen que ir en FILA, y viven todos dentro de
     #nav: poner flex-direction:row sólo en .lateral no los alcanza, porque
     #nav es un único hijo y ellos siguen apilándose dentro. */
  .lateral #nav{display:flex;flex-direction:row;align-items:center;gap:6px;width:100%}
  .navitem{width:auto}
  .nav-pie{margin:0 0 0 auto;border:0;padding:0;display:flex;align-items:center}
  /* El «ver como» no entra en la barra horizontal: con las cinco secciones y
     el desplegable, «Salir» se salía de la pantalla. Es una herramienta de
     revisión —se usa desde el escritorio—, así que aquí no se enseña; el rol
     simulado, si lo hubiera, se sigue respetando. */
  .ver-como{display:none}
  .principal{padding:18px 16px 36px}
  .dos-campos{grid-template-columns:1fr}
  /* Por CLASE y no por nth-child(4): la cuarta columna es la posición del
     jugador en una tabla y el concepto de la cuota en otra, y esconder el
     concepto deja la fila sin decir de qué se cobra. */
  table.datos th.col-opcional,table.datos td.col-opcional{display:none}
}