/* Txedep. El lenguaje de la web de scouting del ordenador («piel Mobbin», scouting/static/estilos.css): Inter, tinta #141414,
   bandejas grises translúcidas, píldoras, radios de 20 y los colores de valoración. Cada color sale de :root (lo vigila
   tests/test_txedep.py). Claro u oscuro según el sistema. Sin JavaScript: los filtros del teléfono se abren con una casilla. */

@font-face { font-family: "Inter"; src: url("fuentes/Inter-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fondo: #ffffff; --superficie: #ffffff; --elevada: #ffffff;
  --bandeja: hsl(0 0% 25% / .06); --bandeja-hover: hsl(0 0% 25% / .1); --bandeja-fuerte: hsl(0 0% 25% / .16);
  --texto: #141414; --texto-2: #6b6b6b; --texto-4: #adadad;
  --linea: hsl(0 0% 25% / .08); --borde: hsl(0 0% 25% / .12); --borde-fuerte: hsl(0 0% 25% / .24);
  --accion: #141414; --accion-hover: #262626; --sobre-accion: #ffffff; --foco: #141414;
  --peligro: hsl(12 96% 38%); --peligro-fondo: hsl(17 100% 92%);
  --aviso-texto: hsl(34 100% 27%); --aviso-fondo: hsl(53 100% 88%);
  --ok-texto: hsl(107 88% 26%); --ok-fondo: hsl(97 100% 94%);
  --error-texto: hsl(12 96% 38%); --error-fondo: hsl(17 100% 92%);
  --v-fichar: #1f9d55; --v-interesante: #1f6fd1; --v-seguimiento: #b07a00; --v-descartar: #d13b3b; --v-sin: #6b6b6b;
  --sombra-menu: 0 0 0 1px var(--borde), 0 8px 24px #0000001f;
  --mascara: #000;  /* no es un color que se vea: la parte opaca de una máscara (el difuminado de lo que se desplaza) */

  --letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-28: 28px;
  --p-texto: 450; --p-rotulo: 500; --p-titulo: 600; --p-cifra: 700;
  --r-control: 9999px; --r-chip: 8px; --r-campo: 12px; --r-tarjeta: 20px; --r-menu: 16px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --alto-control: 36px; --alto-campo: 40px; --ancho: 1320px;  /* el de la web de scouting */
  --dur: 150ms; --curva: cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141414; --superficie: #1f1f1f; --elevada: #262626;
    --bandeja: hsl(0 0% 100% / .06); --bandeja-hover: hsl(0 0% 100% / .1); --bandeja-fuerte: hsl(0 0% 100% / .16);
    --texto: #ffffff; --texto-2: #adadad; --texto-4: #707070;
    --linea: hsl(0 0% 100% / .08); --borde: hsl(0 0% 100% / .12); --borde-fuerte: hsl(0 0% 100% / .24);
    --accion: #ffffff; --accion-hover: #ededed; --sobre-accion: #141414; --foco: #ffffff;
    --peligro: hsl(18 100% 65%); --peligro-fondo: hsl(18 100% 65% / .14);
    --aviso-texto: hsl(46 100% 56%); --aviso-fondo: hsl(46 100% 46% / .14);
    --ok-texto: hsl(95 68% 58%); --ok-fondo: hsl(95 68% 52% / .14);
    --error-texto: hsl(18 100% 70%); --error-fondo: hsl(18 100% 65% / .14);
    --v-fichar: #3ccf7a; --v-interesante: #4da3ff; --v-seguimiento: #ffcc33; --v-descartar: #ff6b6b; --v-sin: #8c8c8c;
    --sombra-menu: 0 0 0 1px var(--borde), 0 8px 24px #0000007a;
  }
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: var(--p-texto) var(--t-14)/1.45 var(--letra); font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { margin: 0; font-weight: var(--p-titulo); letter-spacing: -0.01em; }
h1 { font-size: var(--t-28); line-height: 1.2; }
h2 { font-size: var(--t-16); line-height: 1.3; }
h3 { font-size: var(--t-13); color: var(--texto-2); font-weight: var(--p-rotulo); margin-top: var(--e-4); }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.num { font-variant-numeric: tabular-nums; }
.secundario { color: var(--texto-2); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rotulo { display: block; font-size: var(--t-12); font-weight: var(--p-rotulo); color: var(--texto-2); }
.ayuda { font-size: var(--t-13); color: var(--texto-2); }
.texto-largo { white-space: pre-line; max-width: 72ch; }
.tachado { text-decoration: line-through; color: var(--texto-2); }
code { font: var(--p-rotulo) var(--t-13)/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--bandeja); padding: 2px 6px; border-radius: var(--r-chip); word-break: break-all; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.icono { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }

/* ── barra ── la de la web de scouting del ordenador (scouting/static/estilos.css, piel Mobbin, 19-oct; Ibon: «arregla el diseño
   de la cabecera… recuerda los principios de diseño de la web de scouting»): 64 de alto con un filete abajo; el escudo y
   «Real Unión / Txedep»; los módulos en texto gris de 14 y el activo en tinta con una barra de 2 px al pie (Airbnb, FotMob),
   que crece desde el centro al pasar; la cuenta, con su nombre. Los apartados del módulo, debajo, un escalón menos: 13, gris,
   y el elegido en tinta sobre su píldora. La jerarquía la marcan el tamaño y el gris, no el peso */
.barra { position: sticky; top: 0; z-index: 10; background: var(--fondo); box-shadow: inset 0 -1px 0 var(--linea); }
.barra__dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e-5); height: 64px; display: flex; align-items: center; gap: var(--e-5); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marca img { display: block; }
.marca__texto { display: flex; align-items: baseline; gap: var(--e-2); line-height: 20px; white-space: nowrap; }
.marca__club { color: var(--texto); font-size: var(--t-14); font-weight: var(--p-rotulo); letter-spacing: -0.01em; }
.marca__sep { color: var(--texto-4); font-size: var(--t-14); }
.marca__producto { color: var(--texto-2); font-size: var(--t-14); font-weight: var(--p-rotulo); letter-spacing: -0.01em; }
.pestanas { align-self: stretch; display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { position: relative; display: inline-flex; align-items: center; padding: 0 var(--e-3); color: var(--texto-2); font-size: var(--t-14);
  font-weight: var(--p-rotulo); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--curva); }
.pestanas a:hover, .pestanas a[aria-current] { color: var(--texto); }
.pestanas__marca { position: absolute; left: var(--e-3); right: var(--e-3); bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--borde-fuerte);
  transform: scaleX(0); transition: transform 280ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
@media (hover: hover) { .pestanas a:hover .pestanas__marca { transform: scaleX(1); } }
.pestanas a[aria-current] .pestanas__marca { background: var(--texto); transform: none; }
@media (prefers-reduced-motion: reduce) { .pestanas__marca { transition: none; } }
/* La barra cabe a cualquier ancho, medido de 390 a 1.440 px (los 9 módulos de quien administra; herramientas/txedep_cabecera.py).
   Hasta 1.309, la marca es el escudo y «Txedep» (como la de scouting cuando no cabe entera); hasta 1.219, los módulos pasan a
   una fila propia, con la marca entera otra vez; y lo que no cabe en una fila se desplaza, difuminado en el borde por el que
   sigue (el difuminado se va al llegar al final) */
@media (max-width: 1309px) {
  .marca__club, .marca__sep { display: none; }
  .marca__producto { color: var(--texto); font-size: var(--t-16); }
}
@media (max-width: 1219px) {
  .barra__dentro { flex-wrap: wrap; height: auto; column-gap: var(--e-5); row-gap: 0; }
  .marca, .cuenta { height: 64px; display: flex; align-items: center; }
  .cuenta { margin-left: auto; }
  .pestanas { order: 3; flex: 0 0 calc(100% + 2 * var(--e-3)); height: 44px; margin: 0 calc(-1 * var(--e-3)); }
}
@media (min-width: 601px) and (max-width: 1219px) {
  .marca__club, .marca__sep { display: inline; }
  .marca__producto { color: var(--texto-2); font-size: var(--t-14); }
}
@supports (animation-timeline: scroll()) {
  .pestanas, .sub__dentro { animation: sigue linear both; animation-timeline: scroll(self inline); }
  @keyframes sigue {
    from, 96% { mask-image: linear-gradient(to right, var(--mascara) calc(100% - 48px), transparent); }
    to { mask-image: none; }
  }
}
.sub { box-shadow: inset 0 1px 0 var(--linea); }  /* la barrita del módulo elegido se apoya en esta línea, como en scouting */
.sub__dentro { max-width: var(--ancho); margin: 0 auto; padding: var(--e-2) var(--e-5); display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none; }
.sub__dentro::-webkit-scrollbar { display: none; }
.sub a { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--e-3); border-radius: var(--r-control); color: var(--texto-2);
  font-size: var(--t-13); font-weight: var(--p-rotulo); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva); }
.sub a:hover { color: var(--texto); }
.sub a[aria-current] { background-color: var(--bandeja); color: var(--texto); }

.cuenta { position: relative; flex: none; }
.cuenta summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e-2); height: 40px; padding: 0 var(--e-3) 0 var(--e-1);
  border-radius: var(--r-control); color: var(--texto); font-size: var(--t-14); font-weight: var(--p-rotulo); white-space: nowrap;
  transition: background-color var(--dur) var(--curva); }
.cuenta summary:hover, .cuenta[open] summary { background-color: var(--bandeja); }
.cuenta summary::-webkit-details-marker { display: none; }
.menu { position: absolute; right: 0; top: calc(100% + var(--e-2)); min-width: 220px; background: var(--elevada); border-radius: var(--r-menu); box-shadow: var(--sombra-menu); padding: var(--e-2); }
.menu__quien { padding: var(--e-2) var(--e-3) var(--e-3); display: grid; gap: 2px; box-shadow: 0 1px 0 var(--linea); margin-bottom: var(--e-2); }
.menu__quien span { color: var(--texto-2); font-size: var(--t-13); }
.menu__opcion { all: unset; box-sizing: border-box; display: block; width: 100%; padding: var(--e-2) var(--e-3); border-radius: var(--r-chip); cursor: pointer; }
.menu__opcion:hover { background-color: var(--bandeja); }

.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bandeja-hover); color: var(--texto-2); display: inline-grid; place-items: center; font-size: var(--t-13); font-weight: var(--p-titulo); flex: none; letter-spacing: .02em; }
.avatar--p { width: 32px; height: 32px; font-size: var(--t-12); color: var(--texto); }

/* ── página ── */
.pagina { max-width: var(--ancho); margin: 0 auto; padding: var(--e-6) var(--e-5) var(--e-7); display: grid; gap: var(--e-5); align-content: start; grid-template-columns: minmax(0, 1fr); }  /* una sola columna que no pasa del ancho: lo ancho se desplaza en su sitio */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.cabecera__cifra { color: var(--texto-2); margin-top: var(--e-1); }
.cabecera__acciones { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.volver { color: var(--texto-2); text-decoration: none; font-weight: var(--p-rotulo); justify-self: start; margin-bottom: calc(-1 * var(--e-3)); }
.volver::before { content: "‹ "; }
.volver:hover { color: var(--texto); }

/* ── avisos ── */
.aviso { padding: var(--e-3) var(--e-4); border-radius: var(--r-campo); font-weight: var(--p-rotulo); }
.aviso--ok { background: var(--ok-fondo); color: var(--ok-texto); }
.aviso--error { background: var(--error-fondo); color: var(--error-texto); }

/* ── botones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); height: var(--alto-control); padding: 0 var(--e-4); border: 0; border-radius: var(--r-control); font: var(--p-rotulo) var(--t-14)/1 var(--letra); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur) var(--curva); list-style: none; }
.boton::-webkit-details-marker { display: none; }
.boton--primario { background-color: var(--accion); color: var(--sobre-accion); }
.boton--primario:hover { background-color: var(--accion-hover); }
.boton--secundario { background-color: var(--bandeja); color: var(--texto); }
.boton--secundario:hover { background-color: var(--bandeja-hover); }
.boton--terciario { background-color: transparent; color: var(--texto-2); }
.boton--terciario:hover { background-color: var(--bandeja); color: var(--texto); }
.boton--peligro { background-color: var(--peligro); color: var(--sobre-accion); }
.boton--peligro-suave { background-color: transparent; color: var(--peligro); }
.boton--peligro-suave:hover { background-color: var(--peligro-fondo); }
.boton--p { height: 32px; padding: 0 var(--e-3); font-size: var(--t-13); }
.boton--ancho { width: 100%; height: var(--alto-campo); }

.confirma { position: relative; display: inline-block; }
.confirma__caja { position: absolute; z-index: 5; right: 0; top: calc(100% + var(--e-2)); width: min(320px, 80vw); background: var(--elevada); border-radius: var(--r-menu); box-shadow: var(--sombra-menu); padding: var(--e-4); display: grid; gap: var(--e-3); }
.zona-peligro { justify-self: start; }
.zona-peligro .confirma__caja { left: 0; right: auto; top: auto; bottom: calc(100% + var(--e-2)); }
.acciones-linea { display: flex; gap: var(--e-2); margin-top: var(--e-4); align-items: center; }
.en-linea { display: inline; }

/* ── formularios ── */
.formulario { display: grid; gap: var(--e-4); align-content: start; }
.formulario--ancho { max-width: 880px; }
.formulario--p { gap: var(--e-3); margin-top: var(--e-3); }
.formulario--fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-4); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span:first-child { font-size: var(--t-13); font-weight: var(--p-rotulo); color: var(--texto-2); }
.campo--doble { grid-column: span 2; }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .campo select, .campo textarea {
  width: 100%; min-height: var(--alto-campo); padding: 0 var(--e-3); border: 0; border-radius: var(--r-campo);
  background-color: var(--bandeja); color: var(--texto); font: var(--p-texto) var(--t-14)/1.4 var(--letra); box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--dur) var(--curva), background-color var(--dur) var(--curva);
}
.campo textarea { padding: var(--e-3); resize: vertical; min-height: 88px; }
.campo input:hover, .campo select:hover, .campo textarea:hover { background-color: var(--bandeja-hover); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background-color: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--foco); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-4); }
.campo input[type="file"] { font: inherit; color: var(--texto-2); max-width: 100%; }
.campo input[type="file"]::file-selector-button { height: 32px; padding: 0 var(--e-3); margin-right: var(--e-3); border: 0; border-radius: var(--r-control); background-color: var(--bandeja); color: var(--texto); font: var(--p-rotulo) var(--t-13)/1 var(--letra); cursor: pointer; }
.campo input[type="file"]::file-selector-button:hover { background-color: var(--bandeja-hover); }
.campo--p input:not([type="checkbox"]), .campo--p select { min-height: var(--alto-control); }
.campo--nota input { text-align: center; }
.campo--dorsal { width: 96px; }
.campo--con-boton { display: flex; align-items: flex-end; gap: var(--e-2); }
.campo--con-boton .campo { flex: 1; }
.campo--con-boton .boton { height: var(--alto-campo); }
.notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e-3); }
.bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-4); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.tarjeta { display: grid; gap: var(--e-4); }
legend { font-size: var(--t-16); font-weight: var(--p-titulo); padding: 0; margin-bottom: var(--e-4); float: left; width: 100%; }
legend + * { clear: both; }
.grupo legend { font-size: var(--t-13); font-weight: var(--p-rotulo); color: var(--texto-2); margin-bottom: var(--e-2); }
.pie-formulario { display: flex; gap: var(--e-2); position: sticky; bottom: 0; padding: var(--e-3) 0; background: var(--fondo); box-shadow: 0 -1px 0 var(--linea); }

.casilla { display: inline-flex; align-items: center; gap: var(--e-2); cursor: pointer; min-height: 32px; }
.casilla input, .tabla input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accion); flex: none; }
.lista-casillas { display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--e-3); border-radius: var(--r-control); background-color: var(--bandeja); font-size: var(--t-13); font-weight: var(--p-rotulo); color: var(--texto-2); transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva); white-space: nowrap; }
.chip:hover span { background-color: var(--bandeja-hover); color: var(--texto); }
.chip input:checked + span { background-color: var(--accion); color: var(--sobre-accion); }
.chip input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.segmentado { display: inline-flex; padding: 2px; border-radius: var(--r-control); background: var(--bandeja); min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }  /* lo que no cabe se desplaza dentro (a 360 px, «Todos · Ganados · Empatados · Perdidos») */
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentado span { display: inline-flex; height: 32px; align-items: center; padding: 0 var(--e-4); border-radius: var(--r-control); font-weight: var(--p-rotulo); color: var(--texto-2); }
.segmentado input:checked + span { background: var(--elevada); color: var(--texto); box-shadow: var(--sombra-menu); }
.segmentado input:focus-visible + span { outline: 2px solid var(--foco); }

/* ── buscador y filtros ── */
.buscador { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; grid-column: 1 / -1; }
.buscador__campo { flex: 1 1 320px; display: flex; align-items: center; gap: var(--e-2); height: 44px; padding: 0 var(--e-4); border-radius: var(--r-control); background-color: var(--bandeja); color: var(--texto-2); transition: box-shadow var(--dur) var(--curva), background-color var(--dur) var(--curva); }
.buscador__campo:focus-within { background-color: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--foco); }
.buscador__campo input { all: unset; flex: 1; min-width: 0; height: 100%; color: var(--texto); font: var(--p-texto) var(--t-14)/1 var(--letra); }
.buscador__campo input::placeholder { color: var(--texto-2); }
.lista-con-filtros { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e-5) var(--e-6); align-items: start; }
.filtros { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; }
.filtros__titulo { font-weight: var(--p-titulo); font-size: var(--t-16); display: none; align-items: center; gap: var(--e-2); cursor: pointer; }
.filtros__titulo::after { content: "›"; margin-left: auto; color: var(--texto-2); font-size: var(--t-20); transition: transform var(--dur) var(--curva); }
.filtros__interruptor:checked + .filtros__titulo::after { transform: rotate(90deg); }
.filtros__interruptor:focus-visible + .filtros__titulo { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-chip); }
.filtros__cuerpo { display: grid; gap: var(--e-5); }
.filtros__pie { display: flex; gap: var(--e-2); position: sticky; bottom: 0; background: var(--fondo); padding: var(--e-2) 0; }
.insignia { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-control); background: var(--accion); color: var(--sobre-accion); font-size: var(--t-11); font-weight: var(--p-cifra); }

/* ── tablas ── */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: var(--t-12); font-weight: var(--p-rotulo); color: var(--texto-2); padding: 0 var(--e-3) var(--e-2); white-space: nowrap; }
.tabla td { padding: var(--e-2) var(--e-3); box-shadow: inset 0 1px 0 var(--linea); vertical-align: middle; overflow-wrap: anywhere; }
.tabla td:first-child, .tabla th:first-child { padding-left: 0; }
.tabla tbody tr:hover td { background-color: var(--bandeja); }
.tabla .secundario { display: block; font-size: var(--t-13); }
.tabla td.num .secundario { white-space: nowrap; }
.tabla .corta { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-num { text-align: right; }
th.col-num { text-align: right; }
.col-centro { text-align: center; }
th.col-centro { text-align: center; }
.col-accion { text-align: right; width: 1%; }
.apagado td { color: var(--texto-2); }
.fila-enlace { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; min-height: 48px; }
.fila-enlace__texto { display: grid; min-width: 0; }
.fila-enlace .nombre { font-weight: var(--p-rotulo); }
.fila-enlace:hover .nombre { text-decoration: underline; text-underline-offset: 3px; }
.paginacion { display: flex; justify-content: space-between; align-items: center; padding-top: var(--e-4); color: var(--texto-2); }

/* ── valoraciones ── */
.valor { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--p-rotulo); white-space: nowrap; }
.valor::before, .punto { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--v-sin)); flex: none; display: inline-block; }
.valor--p { font-size: var(--t-13); }
.valor--fichar, .punto--fichar { --c: var(--v-fichar); }
.valor--interesante, .punto--interesante { --c: var(--v-interesante); }
.valor--seguimiento, .punto--seguimiento { --c: var(--v-seguimiento); }
.valor--descartar, .punto--descartar { --c: var(--v-descartar); }
.valor--sin, .punto--sin { --c: var(--v-sin); }

/* ── tarjetas ── */
.tarjeta { background: var(--superficie); border-radius: var(--r-tarjeta); box-shadow: 0 0 0 1px var(--linea); padding: var(--e-5); display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.tarjeta--aviso { box-shadow: 0 0 0 1.5px var(--aviso-texto); background: var(--aviso-fondo); }
.tarjeta--enlace { text-decoration: none; transition: box-shadow var(--dur) var(--curva); }
.tarjeta--enlace:hover { box-shadow: 0 0 0 1px var(--borde-fuerte); }
.tarjeta__cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.tarjeta__resumen { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e-2); }
.tarjeta__resumen::-webkit-details-marker { display: none; }
.tarjeta__resumen::after { content: "›"; margin-left: auto; color: var(--texto-2); font-size: var(--t-20); transition: transform var(--dur) var(--curva); }
details[open] > .tarjeta__resumen::after { transform: rotate(90deg); }
details.tarjeta[open] > .tarjeta__resumen { margin-bottom: var(--e-3); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-4); }
.cifra-p { font-size: var(--t-20); font-weight: var(--p-cifra); }
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-simple li { padding: var(--e-2) 0; box-shadow: inset 0 -1px 0 var(--linea); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); }
.lista-simple li:last-child { box-shadow: none; }
.lista-simple .confirma, .lista-simple .en-linea { margin-left: auto; }
.desplegable > summary { list-style: none; justify-self: start; }
.subir { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.llave code { font-size: var(--t-14); display: block; padding: var(--e-3); }

/* ── ficha ── */
.ficha-cabecera { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.ficha-cabecera .avatar { width: 64px; height: 64px; font-size: var(--t-20); }
.ficha-cabecera__texto { flex: 1; min-width: 200px; display: grid; gap: var(--e-1); }
.estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); }
.estado .valor, .estado .dato { font-size: var(--t-16); }
.dato { font-weight: var(--p-rotulo); }
.valoracion { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-3) var(--e-5); padding-top: var(--e-4); box-shadow: inset 0 1px 0 var(--linea); }
.valoracion__bloque { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px var(--e-2); }
.valoracion__bloque .rotulo { grid-column: 1 / -1; }
.barra-nota { height: 6px; border-radius: var(--r-control); background: var(--bandeja-hover); overflow: hidden; }
.barra-nota__relleno { display: block; height: 100%; border-radius: inherit; background: var(--texto); width: 0; }
.barra-nota__relleno--1 { width: 10%; } .barra-nota__relleno--2 { width: 20%; } .barra-nota__relleno--3 { width: 30%; }
.barra-nota__relleno--4 { width: 40%; } .barra-nota__relleno--5 { width: 50%; } .barra-nota__relleno--6 { width: 60%; }
.barra-nota__relleno--7 { width: 70%; } .barra-nota__relleno--8 { width: 80%; } .barra-nota__relleno--9 { width: 90%; }
.barra-nota__relleno--10 { width: 100%; }
.ficha-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--e-5); align-items: start; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--e-4); margin: 0; }
.datos dt { font-size: var(--t-12); color: var(--texto-2); font-weight: var(--p-rotulo); }
.datos dd { margin: 2px 0 0; font-size: var(--t-14); overflow-wrap: anywhere; }
.datos--linea { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e-3); }
.informes { list-style: none; margin: 0; padding: 0; }
.informe { box-shadow: inset 0 1px 0 var(--linea); }
.informe summary { list-style: none; display: grid; grid-template-columns: 110px auto 1fr; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; cursor: pointer; }
.informe summary::-webkit-details-marker { display: none; }
.informe__que { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.informe__cuerpo { padding: 0 0 var(--e-4); display: grid; gap: var(--e-2); }
.medias { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.medias .rotulo { display: inline; }
.cambios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-13); }

/* ── vacío, entrar ── */
.vacio { text-align: center; padding: var(--e-7) var(--e-4); display: grid; gap: var(--e-3); justify-items: center; color: var(--texto-2); }
.vacio h1, .vacio h2 { color: var(--texto); }
.pagina--entrar { min-height: 100vh; place-content: center; }
.entrar { width: min(360px, 100%); display: grid; gap: var(--e-5); justify-items: center; }
.entrar .formulario { width: 100%; }
.entrar__escudo { display: block; }

/* ── teléfono y tableta ── */
/* las columnas secundarias se van antes de que la tabla se salga (de 905 a 955 px se salía la de Scouting, 19-oct) */
@media (max-width: 960px) { .col-m { display: none; } }
/* en las tablas de muchas columnas (Últimos informes: las cinco medias), las que se van antes, y las que se van en el teléfono */
@media (max-width: 1100px) { .col-l { display: none; } }
@media (max-width: 420px) { .col-s { display: none; } }
@media (max-width: 900px) {
  .lista-con-filtros { grid-template-columns: minmax(0, 1fr); }
  .filtros { position: static; max-height: none; background: var(--bandeja); border-radius: var(--r-tarjeta); padding: var(--e-3) var(--e-4); }
  .filtros__titulo { display: flex; min-height: 32px; }
  .filtros__cuerpo { display: none; }
  .filtros__interruptor:checked ~ .filtros__cuerpo { display: grid; margin-top: var(--e-4); }
  .filtros__pie { background: transparent; }
  .col-m { display: none; }
}
@media (max-width: 600px) {
  .barra__dentro, .sub__dentro { padding-left: var(--e-4); padding-right: var(--e-4); gap: var(--e-3); }
  .barra { position: static; }  /* en el teléfono, las tres filas no se quedan fijas arriba */
  .cuenta__nombre { display: none; }
  .cuenta summary { padding: 0 var(--e-1); }
  .pagina { padding: var(--e-5) var(--e-4) var(--e-7); gap: var(--e-4); }
  .tarjeta { padding: var(--e-4); }
  .campo--doble { grid-column: auto; }
  .ficha-columnas { grid-template-columns: minmax(0, 1fr); }
  .informe summary { grid-template-columns: auto 1fr; }
  .informe__que { grid-column: 1 / -1; }
  .cabecera__acciones { width: 100%; }
}

/* ── imprimir la ficha ── */
@media print {
  .barra, .cabecera__acciones, .acciones-linea, .zona-peligro, .subir, .desplegable, .volver, .confirma, .tarjeta__cabecera .boton { display: none !important; }
  body { background: #fff; color: #000; }
  .tarjeta { box-shadow: none; padding: 0; break-inside: avoid; }
  .informe details > *:not(summary) { display: block; }
}