/* ─────────────────────────────────────────────────────────────────────────────
   App de gestión nueva (control.php, config.php, plantillas.php, anuncios.php,
   mensajes.php, videos.php, autorizaciones_club.php, login y superadmin nuevos).
   Es la ÚNICA hoja de esas páginas: no cargan css/main.css ni css/publico2.css.

   Mismo lenguaje que el directo y el histórico (css/publico2.css): claro, Figtree para
   el texto y Bricolage Grotesque para los títulos, tarjetas blancas, el color del club
   por variables y un bloque oscuro tipo pantalla del campo solo para el partido.
   Los colores del club llegan del PHP (appColores() en includes/app2.php).
   Móvil primero. Cortes: 380 y 480 (pantallas estrechas), 640 (tablas a fichas), 768 (hoja → ventana),
   992 (pestañas en la barra), 993 (.solo-movil siempre abierto) y 1200 (.tabla.ancha pasa a tabla).
   Catálogo con ejemplos: app2-muestra.html
   ───────────────────────────────────────────────────────────────────────────── */

/* ══ 1. Tokens (los de publico2.css, con los mismos nombres y valores) ══ */
:root{
  /* siempre claro: sin esto, el «tema oscuro para sitios» de Chrome en Android oscurece la app entera */
  color-scheme:only light;
  --fondo:#f2f5fa; --papel:#fff; --tinta:#0f172a; --gris:#55657d; --claro:#8795aa; --linea:#e2e8f1;
  --club:#1e6bff; --club-texto:#1e6bff; --club-suave:#e8f0ff; --sobre-club:#fff;
  /* texto en color del club ENCIMA de --club-suave (botón suave, insignia info, sección actual del
     menú). appColores() lo manda calculado para que llegue a 4,5:1; esto es solo el respaldo */
  --club-texto-suave:var(--club-texto);
  /* fondo de lo que lleva texto encima del color del club (.btn-primary, .insignia.tu…): appColores()
     lo manda oscurecido o aclarado para que --sobre-club llegue a 4,5:1; esto es solo el respaldo */
  --club-boton:var(--club);
  --local:#ff9800; --rival:#fff;
  --vivo:#16a34a; --parado:#d97706; --roja:#e11d48; --amarilla:#facc15;
  --pantalla:#0b1220; --pantalla2:#17223a;
  --radio:22px;
  --sombra:0 1px 2px rgba(15,23,42,.04),0 8px 26px rgba(15,23,42,.07);
  --f-tit:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --f-txt:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --abajo:66px;
  /* propios de la app */
  --ancho:1120px;
  --barra:64px;
  --borde:#d3dbe7;
  /* --claro (#8795aa, 3:1) solo para iconos y adornos; la letra pequeña gris clara va en --claro-txt (5,2:1) */
  --claro-txt:#5f6e84;
  --sombra-alta:0 24px 60px rgba(15,23,42,.22);
  --ok:#15803d; --ok-suave:#e8f6ee; --ok-texto:#14532d;
  --peligro:#d31a44; --peligro-suave:#fdeef1; --peligro-texto:#8f1232;
  --aviso:#d97706; --aviso-suave:#fff5e1; --aviso-texto:#7a4304;
  --info:#2563eb; --info-suave:#ecf2ff; --info-texto:#1e3a8a;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* lo que una página pega debajo de la barra (una banda de estado): se suma al scroll-padding-top */
  --pegado-extra:0px;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  :root{--club-texto-suave:color-mix(in srgb,var(--club-texto) 85%,var(--tinta))}
}
/* páginas anchas: solo el contenido pasa a 1320px. La barra y el menú miden siempre 1120 (--ancho de :root),
   en todas las pantallas: el escudo y las pestañas no se mueven al cambiar de sección. Desde la v5 la
   opción 'ancha' de appCabecera() ya no hace nada (se admite para no romper las páginas que la pasan) */
.app-main.ancha{--ancho:1320px}

/* ══ 2. Base ══ */
*,*::before,*::after{box-sizing:border-box}
/* scrollbar-gutter: al abrir un modal (overflow:hidden) la página no salta de lado en Windows. Solo en las
   páginas con la barra de la app: en las demás (login, formulario público) el hueco dejaba una franja del
   color del fondo a la derecha de las bandas a todo el ancho. scroll-padding-top: la barra y lo que la página
   pegue debajo (--pegado-extra), para que el foco al tabular nunca quede tapado */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--barra) + 20px + var(--pegado-extra,0px));scrollbar-gutter:stable}
html:not(:has(.app-barra)){scrollbar-gutter:auto}   /* aparte: sin :has() se queda stable, como antes */
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--fondo);color:var(--tinta);font-family:var(--f-txt);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);overflow-x:hidden}
body.app-bloqueo{overflow:hidden}
img,video{max-width:100%}
a{color:var(--club-texto)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-tit);letter-spacing:-.02em;line-height:1.2;margin:0 0 .5em;font-weight:800}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--linea);margin:18px 0}
code,kbd{font-family:var(--f-mono);font-size:.88em}
/* tecla o separador suelto («;» «,»): con fondo y borde, que no parezca puntuación. También el code de las ayudas */
kbd,.form-hint code,.ayuda code{display:inline-block;min-width:1.7em;text-align:center;background:var(--fondo);border:1px solid var(--linea);
  border-radius:6px;padding:0 6px;font-weight:800;color:var(--tinta);line-height:1.45}
:focus-visible{outline:3px solid var(--club-texto);outline-offset:2px}
[hidden]{display:none!important}
::selection{background:var(--club-suave);color:var(--tinta)}

/* iconos del sprite (appIco): sin fill ni stroke propios */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle}
.ic.p{width:16px;height:16px}
.ic.g{width:24px;height:24px}
.ic.gira{animation:app-gira .8s linear infinite}

/* utilidades */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.suave{color:var(--gris);font-size:.9rem}
.num{font-variant-numeric:tabular-nums}
.trunca{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fila.separa{justify-content:space-between}
.fila.fin{justify-content:flex-end}
.pila{display:flex;flex-direction:column;gap:12px}
.rejilla{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.rejilla.dos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:992px){.rejilla.tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
.saltar{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:12px;
  font-weight:800;text-decoration:none;transition:top .15s}
.saltar:focus{top:calc(10px + env(safe-area-inset-top))}

/* ══ 3. Barra de arriba de la app ══ */
.app-barra{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--linea);padding-top:env(safe-area-inset-top)}
.app-barra-in{max-width:var(--ancho);margin:0 auto;height:var(--barra);display:flex;align-items:center;gap:10px;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.app-club{display:flex;align-items:center;gap:11px;min-width:0;min-height:44px;flex:1;text-decoration:none;color:inherit;border-radius:14px}
.app-escudo{width:40px;height:40px;border-radius:12px;object-fit:contain;background:#fff;flex:none;
  box-shadow:0 0 0 1px var(--linea),0 4px 12px rgba(15,23,42,.08)}
.app-escudo.ini{display:grid;place-items:center;background:var(--club-boton,var(--club));color:var(--sobre-club);font:800 1.05rem/1 var(--f-tit)}
.app-club-txt{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.app-club-txt b{font:800 1.05rem/1.2 var(--f-tit);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-club-txt small{font-size:.8rem;color:var(--gris);font-weight:700;display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-club-txt small .punto{width:7px;height:7px}
.app-barra-extra{display:flex;align-items:center;gap:8px;flex:none}
.app-pestanas{display:none}
.app-menu-bt{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:46px;height:46px;
  border-radius:14px;border:0;background:var(--fondo);color:var(--tinta);font-weight:800;font-size:.92rem;
  transition:background .2s,color .2s,transform .12s}
.app-menu-bt:active{transform:scale(.96)}
.app-menu-bt .ic{width:22px;height:22px}
.app-menu-bt .ic-cerrar,.app-menu-bt[aria-expanded="true"] .ic-menu{display:none}
.app-menu-bt[aria-expanded="true"] .ic-cerrar{display:inline-block}
.app-menu-bt[aria-expanded="true"]{background:var(--tinta);color:#fff}
/* en el móvil el texto «Menú» no se ve, pero es el nombre del botón para el lector */
.app-menu-bt-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(hover:hover){.app-menu-bt:hover{background:#e6ebf3}.app-menu-bt[aria-expanded="true"]:hover{background:var(--tinta)}}
@media(min-width:768px){
  .app-menu-bt{width:auto;padding:0 16px 0 13px;border-radius:999px}
  .app-menu-bt-txt{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
@media(min-width:992px){
  .app-pestanas{display:flex;gap:2px;background:var(--fondo);border-radius:999px;padding:4px;flex:none;min-width:0}
  .app-pestanas a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 14px;height:38px;border-radius:999px;text-decoration:none;
    color:var(--gris);font-weight:700;font-size:.88rem;white-space:nowrap}
  .app-pestanas a[aria-current="page"]{background:var(--papel);color:var(--tinta);box-shadow:0 1px 4px rgba(15,23,42,.1)}
  .app-pestanas a[aria-current="page"] .ic{color:var(--club-texto)}
  .app-pestanas .ic{width:17px;height:17px}
}
@media(min-width:992px) and (hover:hover){.app-pestanas a:hover{color:var(--tinta)}}
/* iPad en horizontal y portátiles táctiles: 44px de zona también en las pestañas de la barra (44 + 8 caben en 64) */
@media(min-width:992px) and (pointer:coarse){.app-pestanas a{height:44px;min-width:44px;justify-content:center}}
/* entre 992 y 1180 las pestañas que no son la actual se quedan en icono (con su nombre para el lector),
   salvo con .con-texto (appCabecera 'pestanas_texto': son la única forma de cambiar de sección, el superadmin) */
@media(min-width:992px) and (max-width:1179px){
  .app-pestanas:not(.con-texto) a:not([aria-current="page"]){padding:0 11px}
  .app-pestanas:not(.con-texto) a:not([aria-current="page"]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ══ 4. Menú de la app: hoja de abajo en el móvil, panel desplegable desde 768px ══ */
.app-menu-fondo{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.45);opacity:0;visibility:hidden;
  transition:opacity .25s,visibility 0s .25s}
.app-menu-fondo.visible{opacity:1;visibility:visible;transition:opacity .25s}
.app-menu{position:fixed;z-index:91;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--papel);border-radius:26px 26px 0 0;box-shadow:0 -20px 60px rgba(15,23,42,.25);
  padding:8px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  transform:translateY(100%);visibility:hidden;transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s .32s}
.app-menu.visible{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.app-menu-asa{width:46px;height:5px;border-radius:9px;background:#d5dce8;margin:2px auto 10px}
.app-menu-cab{display:flex;align-items:center;gap:12px;padding:4px 2px 12px;border-bottom:1px solid var(--linea);margin-bottom:6px}
.app-menu-cab .app-escudo{width:44px;height:44px}
.app-menu-cab-txt{flex:1;min-width:0;line-height:1.2}
.app-menu-cab-txt b{display:block;font:800 1.08rem/1.2 var(--f-tit);letter-spacing:-.02em;overflow-wrap:anywhere}
.app-menu-cab-txt small{display:block;color:var(--gris);font-size:.82rem;font-weight:600;overflow-wrap:anywhere}
.app-menu-grupo{padding:10px 0 4px}
.app-menu-grupo+.app-menu-grupo{border-top:1px solid var(--linea)}
.app-menu-tit{margin:0 4px 6px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--claro-txt);font-weight:800}
.app-menu-lista{display:flex;flex-direction:column;gap:2px}
.app-menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:5px 10px 5px 6px;border:0;border-radius:15px;
  background:transparent;color:var(--tinta);font-weight:700;font-size:.97rem;text-align:left;text-decoration:none;line-height:1.25}
.app-menu-item:disabled{opacity:.5;cursor:wait}
.app-menu-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--fondo);color:var(--gris);flex:none}
.app-menu-ic .ic{width:19px;height:19px}
.app-menu-item>.ic:last-child{margin-left:auto;color:var(--claro);width:17px;height:17px}
.app-menu-item[aria-current="page"]{background:var(--club-suave);color:var(--club-texto-suave);font-weight:800}
.app-menu-item[aria-current="page"] .app-menu-ic{background:var(--club);color:var(--sobre-club)}
.app-menu-item.peligro{color:var(--peligro-texto)}
.app-menu-item.peligro .app-menu-ic{background:var(--peligro-suave);color:var(--peligro)}
@media(min-width:768px) and (pointer:fine){.app-menu-item{min-height:44px}.app-menu-ic{width:34px;height:34px}}
@media(hover:hover){.app-menu-item:hover{background:var(--fondo)}.app-menu-item[aria-current="page"]:hover{background:var(--club-suave)}}
/* botones de acción del control dentro del menú (Tuya, Mimarcador, avisos): el JS los muestra con
   style.display='inline-flex' y los oculta con 'none'; dentro de la lista se comportan como filas */
.app-menu-acciones:not(:has(.app-menu-item:not([style*="none"]))){display:none}
/* con 'acciones_primero' el grupo va justo después de la cabecera: si está oculto, Secciones no lleva raya encima */
.app-menu-cab+.app-menu-acciones[hidden]+.app-menu-grupo{border-top:0}
.app-menu-cab+.app-menu-acciones:not(:has(.app-menu-item:not([style*="none"])))+.app-menu-grupo{border-top:0}
.tuya-status-dot{width:11px;height:11px;border-radius:50%;background:var(--claro);flex:none;margin-left:auto;
  box-shadow:0 0 0 3px rgba(15,23,42,.06)}
.app-menu .nav-idioma{margin:2px 0 4px}
@media(min-width:768px){
  .app-menu-fondo{background:rgba(15,23,42,.12)}
  .app-menu{left:auto;bottom:auto;top:calc(var(--barra) + env(safe-area-inset-top) + 8px);
    right:max(16px,calc((100vw - var(--ancho)) / 2 + 16px));width:370px;
    max-height:calc(100vh - var(--barra) - 24px - env(safe-area-inset-top));
    max-height:calc(100dvh - var(--barra) - 24px - env(safe-area-inset-top));
    border-radius:22px;border:1px solid var(--linea);box-shadow:var(--sombra-alta);padding:10px 12px 12px;
    opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;
    transition:opacity .18s,transform .18s,visibility 0s .18s}
  .app-menu.visible{opacity:1;transform:none;transition:opacity .18s,transform .18s}
  .app-menu-asa{display:none}
}

/* selector de idioma (contrato de js/i18n.js: un solo .nav-idioma por página) */
.nav-idioma{display:flex;gap:4px;padding:4px;background:var(--fondo);border-radius:15px}
.btn-idioma{flex:1;min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--gris);font-weight:800;
  font-size:.9rem;letter-spacing:.04em}
.btn-idioma.activo{background:var(--papel);color:var(--tinta);box-shadow:0 1px 4px rgba(15,23,42,.12);cursor:default}
@media(hover:hover){.btn-idioma:not(.activo):hover{color:var(--tinta);background:rgba(255,255,255,.6)}}

/* ══ 5. Contenido ══ */
.app-main{max-width:var(--ancho);margin:0 auto;padding:18px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
.app-main.estrecha{max-width:720px}
.app-cab{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin:4px 2px 18px}
.app-cab-txt{flex:1 1 260px;min-width:0}
.app-cab h1{font-size:clamp(1.45rem,5.2vw,2rem);line-height:1.12;letter-spacing:-.03em;margin:0}
.app-cab p{margin:6px 0 0;color:var(--gris);max-width:62ch}
.app-cab-acc{display:flex;flex-wrap:wrap;gap:8px}
.app-titulo{display:flex;align-items:center;gap:9px;font:800 1.15rem/1.2 var(--f-tit);letter-spacing:-.02em;margin:28px 2px 12px}
.app-titulo:first-child{margin-top:6px}
.app-titulo .ic{color:var(--club-texto)}
.cuenta{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 8px;border-radius:999px;
  background:var(--tinta);color:#fff;font:800 .74rem/1 var(--f-txt);font-variant-numeric:tabular-nums}
.cuenta:empty{display:none}

/* ══ 6. Tarjetas / secciones ══ */
.seccion{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:16px;min-width:0}
.seccion+.seccion{margin-top:16px}
.rejilla>.seccion+.seccion{margin-top:0}   /* en una rejilla las columnas empiezan a la misma altura */
@media(min-width:640px){.seccion{padding:20px 22px}}
.seccion-cab{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:16px}
/* sin párrafo debajo del título, el título va centrado con su icono (arriba se veía descolgado) */
.seccion-cab:not(:has(.seccion-tit p)){align-items:center}
.seccion-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--club-suave);color:var(--club-texto);flex:none}
.seccion-ic .ic{width:21px;height:21px}
.seccion-tit{flex:1 1 180px;min-width:0}
.seccion-tit h2,.seccion-tit h3{font-size:1.14rem;margin:0;overflow-wrap:break-word}
.seccion-tit p{margin:3px 0 0;color:var(--gris);font-size:.9rem;line-height:1.45}
.seccion-tit h2 .cuenta,.seccion-tit h3 .cuenta{margin-left:6px;vertical-align:2px}   /* el h2 no es flex: separada del texto */
.seccion-acc{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.seccion-pie{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;border-top:1px solid var(--linea);margin-top:18px;padding-top:16px}
@media(max-width:479px){.seccion-pie>.btn{flex:1 1 100%}}   /* como .form-acciones y .modal-pie */
.seccion.plana{box-shadow:none}
.seccion.resalta{border-color:transparent;box-shadow:0 0 0 2px var(--club),var(--sombra)}

/* ══ 7. Acordeón plegable (.collapsed pliega; compatible con #seccion-configuracion de control.js) ══ */
.plegable{padding:0}   /* sin overflow:hidden: recortaría el foco del botón y los menús ⋮ de dentro */
.plegable-cab{margin:0;font-size:inherit}
.plegable-bt{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px;border:0;background:transparent;
  text-align:left;color:inherit;border-radius:calc(var(--radio) - 1px)}
/* el botón ocupa todo el ancho de la tarjeta: el contorno de foco va por dentro */
.plegable-bt:focus-visible{outline-offset:-3px}
.plegable-tit{flex:1;min-width:0;display:flex;flex-direction:column;font:800 1.1rem/1.25 var(--f-tit);letter-spacing:-.02em}
.plegable-tit small{font:600 .85rem/1.35 var(--f-txt);letter-spacing:0;color:var(--gris);margin-top:2px}
.plegable-flecha{color:var(--gris);transition:transform .2s;flex:none}
.plegable-cuerpo{padding:0 16px 18px}
@media(min-width:640px){.plegable-bt{padding:14px 22px}.plegable-cuerpo{padding:0 22px 22px}}
.plegable.collapsed .plegable-cuerpo,.collapsed>.collapsible-content,.collapsed .collapsible-content{display:none}
.plegable.collapsed .plegable-flecha,.collapsed .collapse-toggle .ic{transform:rotate(-90deg)}
@media(hover:hover){.plegable-bt:hover .plegable-flecha{color:var(--tinta)}}
/* variante que solo se pliega en el móvil (≤992px, el mismo corte que esMovil() de js/control.js) */
@media(min-width:993px){
  .plegable.solo-movil .plegable-cuerpo,.plegable.solo-movil .collapsible-content{display:block!important}
  .plegable.solo-movil .plegable-flecha,.plegable.solo-movil .collapse-toggle{display:none}
  .plegable.solo-movil .plegable-bt{cursor:default}
}
/* marcado de control.php: h2.collapsible-header con button.collapse-toggle dentro */
.collapsible-header{display:flex;align-items:center;gap:12px;margin:0;min-height:68px;padding:12px 16px;cursor:pointer;
  font:800 1.1rem/1.25 var(--f-tit)}
.collapsible-header>span:first-of-type{flex:1;min-width:0}
.collapse-toggle{width:44px;height:44px;border-radius:13px;border:0;background:var(--fondo);display:grid;place-items:center;flex:none;color:var(--gris)}
.collapse-toggle .ic{transition:transform .2s}
.collapsible-content{padding:0 16px 18px}
@media(min-width:640px){.collapsible-header{padding:14px 22px}.collapsible-content{padding:0 22px 22px}}
/* bloqueado mientras dura el partido (control.js pone .config-bloqueada y disabled en los campos) */
.config-bloqueada .plegable-cuerpo>*:not(.bloqueo-aviso),.config-bloqueada .collapsible-content>*:not(.bloqueo-aviso){opacity:.55;pointer-events:none;filter:saturate(.6)}

/* ══ 8. Botones ══ */
/* relleno vertical de 6px: con el texto en dos o tres líneas (traducciones largas) no toca el borde; en una línea
   manda min-height y no cambia nada */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:6px 18px;border-radius:14px;border:0;
  background:var(--papel);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--borde);font-weight:800;font-size:.95rem;line-height:1.15;
  text-decoration:none;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;
  transition:background .15s,box-shadow .15s,color .15s,filter .15s,transform .1s}
.btn .ic{width:19px;height:19px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--club-boton,var(--club));color:var(--sobre-club);box-shadow:none}
.btn-secondary{background:var(--papel);color:var(--tinta)}
.btn-ghost{background:transparent;box-shadow:none;color:var(--gris)}
.btn-dark{background:var(--tinta);color:#fff;box-shadow:none}
.btn-danger{background:var(--peligro);color:#fff;box-shadow:none}
.btn-danger-outline{background:var(--papel);color:var(--peligro-texto);box-shadow:inset 0 0 0 1.5px #f3c3cf}
.btn-success{background:var(--ok);color:#fff;box-shadow:none}
.btn-suave{background:var(--club-suave);color:var(--club-texto-suave);box-shadow:none}
/* un botón deshabilitado no cambia al pasar el ratón (:where no sube la especificidad: las pantallas siguen
   pudiendo cambiar el :hover con un selector igual que antes) */
@media(hover:hover){
  .btn-secondary:hover:where(:not(:disabled,.disabled,[aria-disabled="true"])),
  .btn:not([class*="btn-"]):hover:where(:not(:disabled,.disabled,[aria-disabled="true"])){background:#f7f9fc;box-shadow:inset 0 0 0 1.5px #b9c4d4}
  .btn-primary:hover,.btn-danger:hover,.btn-success:hover,.btn-dark:hover{filter:brightness(.93)}
  .btn-ghost:hover:where(:not(:disabled,.disabled,[aria-disabled="true"])){background:var(--fondo);color:var(--tinta)}
  .btn-danger-outline:hover:where(:not(:disabled,.disabled,[aria-disabled="true"])){background:var(--peligro-suave)}
  .btn-suave:hover{filter:brightness(.97)}
}
.btn-icon{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:13px;flex:none}
.btn-icon.redondo{border-radius:50%}
.btn-small,.btn-sm{min-height:40px;padding:6px 14px;font-size:.88rem;border-radius:12px;gap:7px}
.btn-small .ic,.btn-sm .ic{width:17px;height:17px}
@media(pointer:coarse){.btn-small,.btn-sm{min-height:44px}}
.btn-large{min-height:52px;padding:6px 22px;font-size:1rem;border-radius:16px}
.btn-touch,.btn-tactil{min-height:56px;padding:6px 24px;font-size:1.05rem;border-radius:18px}
.btn-touch .ic,.btn-tactil .ic{width:22px;height:22px}
.btn-icon.btn-touch,.btn-icon.btn-tactil{width:56px;min-width:56px;height:56px;padding:0}
.btn-block{display:flex;width:100%}
.btn:disabled,.btn.disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;filter:none}
a.btn.disabled,a.btn[aria-disabled="true"]{pointer-events:none}
/* cargando: el JS pone .cargando (o aria-busy) y, si quiere, cambia el texto a «Guardando…». appCargando()
   además lo desactiva: aquí no se atenúa como un botón deshabilitado (se tiene que leer «Guardando…»).
   .gira-desactivado: para los botones cuyo JS de siempre hace disabled=true y reescribe el texto con
   textContent («Enviando...»): mientras están :disabled llevan el girador (no se les puede meter un icono) */
.btn.cargando,.btn[aria-busy="true"],.btn.gira-desactivado:disabled{pointer-events:none;cursor:wait}
.btn.cargando:disabled,.btn[aria-busy="true"]:disabled,.btn.gira-desactivado:disabled{opacity:.85}
.btn.cargando::before,.btn[aria-busy="true"]::before,.btn.gira-desactivado:disabled::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;
  border:2.5px solid currentColor;border-right-color:transparent;animation:app-gira .7s linear infinite}
.btn.cargando .ic,.btn[aria-busy="true"] .ic,.btn.gira-desactivado:disabled .ic{display:none}
.btn.btn-icon.cargando::before{margin:0}
.btns{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:479px){.btns.llenan>.btn{flex:1 1 100%}}
@keyframes app-gira{to{transform:rotate(360deg)}}

/* ══ 9. Formularios ══ */
.form-group{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;min-width:0}
.form-group:last-child{margin-bottom:0}
/* el JS de siempre enseña algunos con style.display='block' (config.js): siguen siendo flex (hueco de 6px) */
.form-group[style*="display: block"],.form-group[style*="display:block"]{display:flex!important}
.form-group>label:not(.toggle-switch):not(.chip):not(.form-check):not(.subida),.form-label{font-weight:800;font-size:.9rem;color:var(--tinta);line-height:1.3}
.form-label .opcional,.form-group>label .opcional{font-weight:600;color:var(--claro-txt)}
.form-hint,.ayuda{font-size:.84rem;color:var(--gris);line-height:1.45;margin:0}
.form-error{display:flex;align-items:flex-start;gap:6px;font-size:.85rem;color:var(--peligro-texto);font-weight:700;margin:0}
.form-error .ic{width:16px;height:16px;margin-top:1px;color:var(--peligro)}
.form-control,.form-input,.form-select,.form-textarea{display:block;width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--borde);
  border-radius:14px;background:#fff;color:var(--tinta);font-size:16px;line-height:1.3;-webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s}
.form-control::placeholder{color:#6a778b;opacity:1}
@media(hover:hover){.form-control:hover:not(:disabled):not(:focus){border-color:#b9c4d4}}
.form-control:focus,.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--club-texto);
  box-shadow:0 0 0 1.5px var(--club-texto),0 0 0 6px var(--club-suave)}   /* 3px en el color del club, como el resto de focos */
.form-control:disabled,.form-control[readonly]{background:#f3f6fa;color:var(--gris);cursor:not-allowed}
.form-control[readonly]{cursor:default}
.form-control[aria-invalid="true"],.con-error .form-control{border-color:var(--roja);box-shadow:0 0 0 4px var(--peligro-suave)}
/* con error también se ve el foco (la regla de arriba ganaría a :focus): anillo rojo de 3px */
.form-control[aria-invalid="true"]:focus,.con-error .form-control:focus{border-color:var(--peligro);
  box-shadow:0 0 0 1.5px var(--peligro),0 0 0 6px var(--peligro-suave)}
/* más específico que la regla de la etiqueta (si no, con error la etiqueta se quedaba en tinta), y también la
   leyenda de un fieldset.form-group */
.form-group.con-error>label:not(.toggle-switch):not(.chip):not(.form-check):not(.subida),.con-error .form-label,
fieldset.form-group.con-error>legend{color:var(--peligro-texto)}
select.form-control,.form-select{padding-right:42px;cursor:pointer;background-repeat:no-repeat;background-position:right 13px center;background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355657d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select.form-control option:disabled{color:#9aa6b8}
textarea.form-control,.form-textarea{min-height:112px;resize:vertical;line-height:1.5}
input[type="number"].form-control{font-variant-numeric:tabular-nums}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.form-control.mono{font-family:var(--f-mono);font-size:16px}   /* 16px: con menos, el iPhone amplía la página al tocarlo */
.form-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
.form-row>.form-group{margin-bottom:16px}
@media(min-width:640px){
  .form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-row.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-row.uno-dos{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}
.form-row.auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.form-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media(max-width:479px){.form-acciones>.btn{flex:1 1 100%}}
.con-boton{display:flex;gap:8px;align-items:stretch}
.con-boton>.form-control{flex:1;min-width:0}
.con-boton>.btn{flex:none}
/* botón debajo en el móvil: con un botón de texto largo («Obtener token») el campo no dejaba leer el valor */
@media(max-width:479px){.con-boton{flex-wrap:wrap}.con-boton>.btn{flex:1 1 100%}}
fieldset.form-group{border:0;padding:0;margin:0 0 16px;min-width:0}
fieldset.form-group>legend{font-weight:800;font-size:.9rem;padding:0;margin-bottom:8px}

/* casilla o radio con su texto al lado */
.form-check{display:flex;align-items:flex-start;gap:11px;min-height:44px;padding:10px 0;cursor:pointer;font-weight:600;line-height:1.35}
.form-check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--club-texto);cursor:pointer}
.form-check small{display:block;color:var(--gris);font-weight:400;font-size:.85rem}

/* contraseña con botón de ver */
.campo-pass{position:relative}
.campo-pass .form-control{padding-right:54px}
.campo-pass .pass-ver{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:11px;
  background:transparent;color:var(--gris);display:grid;place-items:center}
.campo-pass .pass-ver[aria-pressed="true"] .ojo-abierto,.campo-pass .pass-ver:not([aria-pressed="true"]) .ojo-cerrado{display:none}
.campo-pass .pass-ver:focus-visible{outline-offset:-3px}   /* el anillo, dentro del campo (no monta sobre su borde) */
/* sin el ojo propio de Edge (saldrían dos). En reglas separadas: un pseudo desconocido anula la regla entera */
.campo-pass input::-ms-reveal{display:none}
.campo-pass input::-ms-clear{display:none}

/* color con su código hex */
.color-campo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.color-campo input[type="color"]{width:58px;height:48px;padding:4px;border:1.5px solid var(--borde);border-radius:14px;background:#fff;cursor:pointer;flex:none}
.color-campo input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.color-campo input[type="color"]::-webkit-color-swatch{border:0;border-radius:9px}
.color-campo input[type="color"]::-moz-color-swatch{border:0;border-radius:9px}
.color-campo .form-control{width:9.5em;flex:none;font-family:var(--f-mono);font-size:16px;text-transform:uppercase}
.color-muestra{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;font-weight:800;font-size:.85rem}

/* subir un fichero: zona de soltar (el input ocupa toda la zona, así arrastrar funciona sin JS) */
.subida{position:relative;display:flex;align-items:center;gap:14px;min-height:86px;padding:16px;border:2px dashed #c6d0df;border-radius:18px;
  background:#fafbfd;cursor:pointer;transition:border-color .15s,background .15s}
.subida input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
.subida-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--papel);color:var(--club-texto);flex:none;
  box-shadow:0 1px 3px rgba(15,23,42,.1)}
.subida-ic .ic{width:22px;height:22px}
.subida-txt{min-width:0;line-height:1.35}
.subida-txt b{display:block;font-weight:800;font-size:.95rem}
.subida-txt small{display:block;color:var(--gris);font-size:.84rem;margin-top:2px}
.subida.vertical{flex-direction:column;justify-content:center;text-align:center;padding:24px 18px}
.subida.encima{border-color:var(--club-texto);background:var(--club-suave)}
@media(hover:hover){.subida:hover{border-color:var(--club-texto);background:var(--club-suave)}}
/* foco de la zona: solo cuando el input llega por teclado. Con :focus-within se quedaba el contorno tras tocar
   la zona y elegir el fichero (el input sigue con el foco), y en una zona con un botón dentro que abre el selector
   (input oculto) salían dos contornos: el del botón y el de la zona. :focus-within queda de respaldo sin :has() */
.subida:focus-within{outline:3px solid var(--club-texto);outline-offset:2px}
@supports selector(:has(a)){
  .subida:focus-within{outline:none}
  .subida:has(input[type="file"]:focus-visible){outline:3px solid var(--club-texto);outline-offset:2px}
}
.subida.deshabilitada{opacity:.5;pointer-events:none}
.subida-previa{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 10px;border:1px solid var(--linea);border-radius:16px;background:var(--papel);margin-top:10px}
.subida-previa img,.subida-previa video{width:64px;height:64px;object-fit:contain;border-radius:12px;flex:none}
.subida-previa-txt{flex:1;min-width:0;line-height:1.3}
.subida-previa-txt b{display:block;font-weight:800;font-size:.92rem;overflow-wrap:anywhere}
.subida-previa-txt small{color:var(--gris);font-size:.82rem}
.subida-previa.grande{flex-direction:column;align-items:stretch}
.subida-previa.grande img{width:100%;height:auto;max-height:260px}
.tablero{background-color:#fff;background-image:conic-gradient(#e9edf3 25%,transparent 0 50%,#e9edf3 0 75%,transparent 0);background-size:16px 16px}
.progreso{height:8px;border-radius:9px;background:var(--fondo);overflow:hidden}
.progreso i{display:block;height:100%;width:0;border-radius:inherit;background:var(--club);transition:width .25s}
.progreso.ok i{background:var(--vivo)}

/* ══ 10. Interruptor (.toggle-switch con .slider, como publico2, o con .toggle-slider, como config.php) ══ */
.toggle-switch{position:relative;display:inline-block;width:52px;height:32px;flex:none;vertical-align:middle;margin:0}
.toggle-switch input{position:absolute;top:-6px;right:-4px;bottom:-6px;left:-4px;width:calc(100% + 8px);height:calc(100% + 12px);
  margin:0;opacity:0;cursor:pointer;z-index:1}
/* apagado en #7b8aa0 (3,2:1 sobre el fondo): un control necesita 3:1 para que se vea sin fijarse en el círculo */
.toggle-switch .slider,.toggle-switch .toggle-slider{position:absolute;inset:0;background:#7b8aa0;border-radius:999px;transition:background .25s}
.toggle-switch .slider::before,.toggle-switch .toggle-slider::before{content:"";position:absolute;width:26px;height:26px;left:3px;top:3px;
  background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s}
.toggle-switch input:checked+.slider,.toggle-switch input:checked+.toggle-slider{background:var(--vivo)}
.toggle-switch input:checked+.slider::before,.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}
.toggle-switch input:focus-visible+.slider,.toggle-switch input:focus-visible+.toggle-slider{outline:3px solid var(--club-texto);outline-offset:2px}
.toggle-switch input:disabled{cursor:not-allowed}
.toggle-switch input:disabled+.slider,.toggle-switch input:disabled+.toggle-slider{opacity:.45}
/* fila con texto a la izquierda y el interruptor a la derecha (toda la fila es la etiqueta) */
.interruptor{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:12px 14px 12px 16px;
  background:var(--fondo);border-radius:16px;cursor:pointer}
.interruptor+.interruptor{margin-top:8px}
.interruptor-txt{min-width:0;line-height:1.3}
.interruptor-txt b{display:block;font-weight:800;font-size:.96rem}
.interruptor-txt small{display:block;color:var(--gris);font-size:.84rem;margin-top:2px}
.interruptor.blanco{background:var(--papel);border:1px solid var(--linea)}
/* interruptor que guarda al momento (fetch al cambiar): <div class="interruptor"> con <label for> solo en el
   título; la ayuda fuera de la etiqueta, así un toque al leerla no cambia ni guarda nada */
div.interruptor{cursor:default}
div.interruptor .interruptor-txt label{display:block;cursor:pointer}

/* ══ 11. Elección: segmentado, radios con aspecto de botón y chips ══ */
.pestanas,.segmentado{display:flex;gap:4px;padding:4px;background:#e7ecf4;border-radius:16px;max-width:100%}
.pestanas{position:relative;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin-bottom:16px}
.pestanas::-webkit-scrollbar{display:none}
/* js/app2.js pone .mas-der / .mas-izq cuando hay pestañas fuera de la vista: el borde se difumina */
.pestanas.mas-der{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.pestanas.mas-izq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.pestanas.mas-izq.mas-der{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.pestana,.segmentado label>span,.segmentado>button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  padding:0 15px;border-radius:12px;border:0;background:transparent;color:var(--gris);font-weight:800;font-size:.9rem;white-space:nowrap;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.pestana .ic{width:18px;height:18px}
.pestana:focus-visible,.segmentado>button:focus-visible{outline-offset:-3px}
.pestana[aria-selected="true"],.pestana[aria-current="page"],.segmentado input:checked+span,.segmentado>button[aria-pressed="true"]{
  background:var(--papel);color:var(--tinta);box-shadow:0 1px 4px rgba(15,23,42,.12)}
.pestana[aria-selected="true"] .ic,.pestana[aria-current="page"] .ic{color:var(--club-texto)}
@media(hover:hover){.pestana:hover,.segmentado label:hover>span{color:var(--tinta)}}
.pestanas.llenas .pestana,.segmentado.llenas label,.segmentado.llenas>button{flex:1}
.segmentado label{position:relative;display:flex;flex:none}
.segmentado.llenas label>span{flex:1}
.segmentado input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%;z-index:1}
.segmentado input:focus-visible+span{outline:3px solid var(--club-texto);outline-offset:1px}
.segmentado input:disabled+span{opacity:.45}
.pestana-panel:focus-visible{outline-offset:4px}
/* con un #enlace al panel, el navegador no baja hasta él (tapaba el aviso de arriba tras un envío): el # elige
   la pestaña y la página se queda donde estaba (js/app2.js tampoco desplaza si el destino es el panel o su pestaña) */
[role="tabpanel"]{scroll-margin-top:100vh}
/* pestaña con cambios sin guardar (js/app2.js, data-avisar-cambios dentro de su panel): un punto ámbar */
.pestana.con-cambios::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--aviso);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
/* .rejilla: por debajo de 992px, todas las pestañas a la vista en una rejilla en vez de una tira que desliza; por
   debajo de 640, el icono encima del texto y el número o el punto en la esquina del icono. Desde 992, la tira de
   siempre. Columnas según cuántas hay: 2 o 3 en una fila, 4 (4), 5-6 en 3+3, 7-8 en 4+4 (3 por debajo de 380);
   --pestanas-columnas en la página manda sobre eso */
.pestanas.rejilla{--pestanas-auto:4}
.pestanas.rejilla:not(:has(>.pestana:nth-child(4))){--pestanas-auto:3}
.pestanas.rejilla:not(:has(>.pestana:nth-child(3))){--pestanas-auto:2}
.pestanas.rejilla:has(>.pestana:nth-child(5)):not(:has(>.pestana:nth-child(7))){--pestanas-auto:3}
@media(max-width:379px){.pestanas.rejilla:has(>.pestana:nth-child(7)){--pestanas-auto:3}}
@media(max-width:991px){
  .pestanas.rejilla{display:grid;grid-template-columns:repeat(var(--pestanas-columnas,var(--pestanas-auto,4)),minmax(0,1fr));overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .pestanas.rejilla .pestana{position:relative;min-width:0;padding:6px 8px;white-space:normal;text-align:center;line-height:1.15}
}
@media(max-width:639px){
  .pestanas.rejilla .pestana{flex-direction:column;gap:4px;min-height:58px;padding:6px 2px;font-size:.76rem;overflow-wrap:anywhere}
  .pestanas.rejilla .pestana>.cuenta{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;margin:0;font-size:.66rem}
  .pestanas.rejilla .pestana>.punto{position:absolute;top:6px;left:calc(50% + 8px);margin:0;box-shadow:0 0 0 2px #e7ecf4}
  .pestanas.rejilla .pestana[aria-selected="true"]>.punto{box-shadow:0 0 0 2px var(--papel)}
  .pestanas.rejilla .pestana.con-cambios::after{position:absolute;top:7px;left:7px}
}

.eleccion{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.eleccion.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:359px){.eleccion.dos{grid-template-columns:minmax(0,1fr)}}
.eleccion-op{position:relative;display:flex}
.eleccion-op input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%;z-index:1}
.eleccion-op>span{flex:1;display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;border-radius:16px;background:var(--papel);
  box-shadow:inset 0 0 0 1.5px var(--borde);font-weight:700;line-height:1.3;transition:background .15s,box-shadow .15s}
.eleccion-op>span::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px #b7c2d2;background:#fff;
  transition:box-shadow .15s}
.eleccion-op input[type="checkbox"]+span::before{border-radius:6px}
.eleccion-op input:checked+span{background:var(--club-suave);box-shadow:inset 0 0 0 2px var(--club-texto)}
.eleccion-op input:checked+span::before{box-shadow:inset 0 0 0 6px var(--club-texto)}
.eleccion-op.si input:checked+span{background:var(--ok-suave);box-shadow:inset 0 0 0 2px var(--ok);color:var(--ok-texto)}
.eleccion-op.si input:checked+span::before{box-shadow:inset 0 0 0 6px var(--ok)}
.eleccion-op.no input:checked+span{background:var(--peligro-suave);box-shadow:inset 0 0 0 2px var(--peligro);color:var(--peligro-texto)}
.eleccion-op.no input:checked+span::before{box-shadow:inset 0 0 0 6px var(--peligro)}
/* .neutra: la opción elegida en tinta y no en el color del club (con un club rojo, marcada parecía un error) */
.eleccion.neutra .eleccion-op:not(.si):not(.no) input:checked+span{background:#eef2f8;box-shadow:inset 0 0 0 2px var(--tinta);color:var(--tinta)}
.eleccion.neutra .eleccion-op:not(.si):not(.no) input:checked+span::before{box-shadow:inset 0 0 0 6px var(--tinta)}
.eleccion-op input:focus-visible+span{outline:3px solid var(--club-texto);outline-offset:2px}
.eleccion-op input:disabled+span{opacity:.5}
.eleccion-op>span>span{min-width:0}
.eleccion-op small{display:block;font-weight:400;color:var(--gris);font-size:.84rem}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;max-width:100%;margin:0}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%;z-index:1}
.chip>span,button.chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:999px;border:0;
  background:var(--papel);box-shadow:inset 0 0 0 1.5px var(--borde);color:var(--tinta);font-weight:700;font-size:.9rem;line-height:1.2;
  max-width:100%;overflow-wrap:anywhere;transition:background .15s,color .15s}
.chip .ic{width:16px;height:16px}
.chip .ic-si{display:none}
.chip input:checked+span,button.chip[aria-pressed="true"]{background:var(--tinta);color:#fff;box-shadow:none}
.chip input:checked+span .ic-si,button.chip[aria-pressed="true"] .ic-si{display:inline-block}
.chip input:focus-visible+span{outline:3px solid var(--club-texto);outline-offset:2px}
.chip input:disabled+span,button.chip:disabled{opacity:.45;cursor:not-allowed}
.chip small{color:var(--claro-txt);font-weight:600}
.chip input:checked+span small{color:rgba(255,255,255,.7)}

/* ══ 12. Buscador con contador ══ */
.buscador{position:relative;display:flex;align-items:center}
.buscador>.ic{position:absolute;left:15px;color:var(--claro);pointer-events:none}
.buscador .form-control{padding-left:46px;padding-right:48px}
.buscador-limpiar{position:absolute;right:3px;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--gris);
  display:grid;place-items:center}
.buscador .form-control:placeholder-shown~.buscador-limpiar{display:none}
.buscador-cuenta{margin:8px 2px 0;font-size:.84rem;font-weight:700;color:var(--gris)}
.buscador-cuenta:empty{display:none}   /* sin búsqueda, sin hueco */

/* ══ 13. Listas de gestión con acciones por fila ══ */
.lista{list-style:none;margin:0;padding:0;background:var(--papel);border:1px solid var(--linea);border-radius:18px}
/* sin overflow:hidden (recortaría el menú ⋮): las esquinas las redondean la primera y la última fila */
.lista>li:first-child,.lista>.lista-fila:first-child{border-top-left-radius:17px;border-top-right-radius:17px}
.lista>li:last-child,.lista>.lista-fila:last-child{border-bottom-left-radius:17px;border-bottom-right-radius:17px}
.seccion .lista{box-shadow:none}
.lista>li,.lista-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;min-height:64px;padding:11px 12px 11px 14px}
.lista>li+li{border-top:1px solid var(--linea)}
.lista-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--fondo);color:var(--gris);flex:none;overflow:hidden}
.lista-ic img{width:100%;height:100%;object-fit:contain}
.lista-ic.redondo{border-radius:50%}
.lista-ic.club{background:var(--club-suave);color:var(--club-texto)}
/* icono decorativo que se repite en todas las filas: fuera por debajo de 380px, que quepan nombre y acciones */
@media(max-width:379px){.lista-ic.prescindible{display:none}}
.lista-txt{flex:1 1 100px;min-width:0;line-height:1.3}
.lista-txt b{display:block;font-weight:800;font-size:.98rem;overflow-wrap:anywhere}
.lista-txt small{display:block;color:var(--gris);font-size:.84rem;margin-top:2px;overflow-wrap:anywhere}
.lista-txt .insignia{vertical-align:1px;margin-left:4px}
.lista-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lista-acc{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.lista>li.inactiva .lista-ic{opacity:.5}
.lista>li.inactiva .lista-txt b,.lista>li.inactiva .lista-txt small{color:var(--gris)}   /* sin opacidad: se sigue leyendo */
.lista>li.resaltada{background:#fffbeb}
.lista.sin-borde{border:0;border-radius:0;background:transparent}
.lista.sin-borde>li{border-radius:0}
.lista.sin-borde>li{padding-left:0;padding-right:0}
/* ordenable con SortableJS: handle '.asa', ghostClass/chosenClass/dragClass por defecto */
.asa{width:44px;height:44px;margin-left:-10px;border:0;border-radius:11px;background:transparent;color:var(--claro);display:grid;place-items:center;
  cursor:grab;touch-action:none;flex:none}
.asa:active{cursor:grabbing}
@media(hover:hover){.asa:hover{background:var(--fondo);color:var(--tinta)}}
.sortable-ghost{opacity:.45;background:var(--club-suave)!important}
.sortable-chosen{box-shadow:0 12px 30px rgba(15,23,42,.18);background:var(--papel)}
.sortable-drag{opacity:.95}
/* en táctil SortableJS arrastra un clon con style="opacity:0.8" en línea: a través se leía la fila de debajo */
.sortable-fallback{opacity:1!important}

/* menú de opciones de una fila (⋮) */
.opciones{position:relative;display:inline-flex}
/* js/app2.js lo abre con position:fixed junto al botón (top/left calculados), así no lo recorta ninguna lista,
   acordeón ni tabla con scroll; se cierra al desplazar o cambiar el tamaño. Lo de aquí es el respaldo */
/* Si no cabe y desliza por dentro, una sombra arriba o abajo avisa de que hay más opciones (las dos primeras capas
   tapan las sombras cuando no hay nada más que ver: van con el contenido, «local») */
.opciones-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:210px;max-width:calc(100vw - 32px);padding:6px;
  border:1px solid var(--linea);border-radius:16px;box-shadow:0 16px 40px rgba(15,23,42,.16);display:none;
  overscroll-behavior:contain;
  background:
    linear-gradient(var(--papel) 40%,rgba(255,255,255,0)) center top/100% 44px no-repeat local,
    linear-gradient(rgba(255,255,255,0),var(--papel) 60%) center bottom/100% 44px no-repeat local,
    linear-gradient(rgba(15,23,42,.2),rgba(15,23,42,0)) center top/100% 16px no-repeat scroll,
    linear-gradient(rgba(15,23,42,0),rgba(15,23,42,.2)) center bottom/100% 16px no-repeat scroll,
    var(--papel)}
.opciones.abierto .opciones-menu{display:block}
.opciones.arriba .opciones-menu{top:auto;bottom:calc(100% + 6px)}
/* las opciones largas (en alemán) parten línea en vez de cortarse por la derecha */
.opciones-menu button,.opciones-menu a{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:11px;
  background:none;color:var(--tinta);font-weight:700;font-size:.93rem;line-height:1.25;text-align:left;text-decoration:none;white-space:normal}
.opciones-menu form{margin:0}   /* un <form> con su botón es una opción más, a todo el ancho */
.opciones-menu .ic{width:18px;height:18px;color:var(--gris)}
.opciones-menu .peligro,.opciones-menu .peligro .ic{color:var(--peligro-texto)}
.opciones-menu hr{margin:5px 6px}
@media(hover:hover){.opciones-menu button:hover,.opciones-menu a:hover{background:var(--fondo)}}

/* ══ 14. Tabla (en el móvil cada fila pasa a ficha: data-titulo en cada celda) ══ */
.tabla{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla table{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th{text-align:left;background:#f7f9fc;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:800;
  padding:11px 14px;white-space:nowrap;border-bottom:1px solid var(--linea)}
.tabla td{padding:12px 14px;vertical-align:middle;overflow-wrap:break-word}
.tabla tr+tr td{border-top:1px solid var(--linea)}
.tabla td.acciones,.tabla th.acciones{text-align:right;white-space:nowrap}
.tabla td.acciones{display:table-cell}
/* un <form> en la columna de acciones va en línea, junto al botón de al lado (salvo dentro de un menú ⋮) */
.tabla td.acciones form{display:inline-flex;margin:0;vertical-align:middle}
.tabla td.acciones .opciones-menu form{display:block}
.tabla td.acciones .btn+.btn,.tabla td.acciones form+form,.tabla td.acciones .btn+form,.tabla td.acciones form+.btn,
.tabla td.acciones .btn+.opciones,.tabla td.acciones form+.opciones{margin-left:6px}
.tabla td.num,.tabla th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla td.corta,.tabla th.corta{white-space:nowrap}   /* celdas cortas que no deben partirse («Alevín A») */
.tabla tr.atenuada td:not(.acciones){color:var(--gris)}
/* si la tabla no cabe y desliza (js/app2.js pone .desborda), la columna de acciones se queda fija a la derecha */
.tabla.desborda td.acciones,.tabla.desborda th.acciones{position:sticky;right:0;z-index:1;background:var(--papel);
  box-shadow:-12px 0 12px -10px rgba(15,23,42,.18)}
.tabla.desborda th.acciones{background:#f7f9fc}
.tabla.desborda tr.resaltada td.acciones{background:#fffbeb}
.tabla tr.resaltada td{background:#fffbeb}
.tabla caption{text-align:left;padding:12px 14px;font-weight:800}
@media(max-width:640px){
  .tabla{background:transparent;border:0;border-radius:0;overflow:visible}
  .tabla table,.tabla tbody,.tabla tr,.tabla td{display:block}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla tr{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:8px 0;margin-bottom:12px;box-shadow:var(--sombra)}
  .tabla tr+tr td{border-top:0}
  .tabla td{position:relative;padding:7px 16px 7px 126px;min-height:34px}
  .tabla td::before{content:attr(data-titulo);position:absolute;left:16px;top:9px;width:100px;font-size:.7rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--claro-txt);font-weight:800;line-height:1.3}
  .tabla td:not([data-titulo]),.tabla td.principal{padding-left:16px}
  .tabla td:not([data-titulo])::before,.tabla td.principal::before{display:none}
  .tabla td.principal{font-weight:800;font-size:1rem}
  .tabla td.num{text-align:left}
  .tabla td.corta{white-space:normal}
  .tabla td.acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;white-space:normal;padding:12px 16px 6px;
    margin-top:6px;border-top:1px solid var(--linea)}
  .tabla td.acciones::before{display:none}
  .tabla td.acciones .btn+.btn,.tabla td.acciones form+form,.tabla td.acciones .btn+form,.tabla td.acciones form+.btn,
  .tabla td.acciones .btn+.opciones,.tabla td.acciones form+.opciones{margin-left:0}
  .tabla td.acciones:empty,.tabla td.acciones.vacia{display:none}   /* sin acciones (una revocada): sin raya ni pie vacío */
  .tabla tr.resaltada{background:#fffbeb}
  .tabla tr.resaltada td{background:transparent}
}
/* .tabla.ancha en el ordenador: menos relleno entre columnas, para que 8 columnas quepan en 1088px */
@media(min-width:1200px){
  .tabla.ancha th,.tabla.ancha td{padding-left:10px;padding-right:10px}
  .tabla.ancha th:first-child,.tabla.ancha td:first-child{padding-left:14px}
  .tabla.ancha th:last-child,.tabla.ancha td:last-child{padding-right:14px}
}
/* .tabla.ancha (8 columnas o más): también fichas en la tableta y en el iPad en horizontal, dos por fila */
@media(min-width:641px) and (max-width:1199px){
  .tabla.ancha{background:transparent;border:0;border-radius:0;overflow:visible}
  .tabla.ancha table,.tabla.ancha tbody,.tabla.ancha tr,.tabla.ancha td{display:block}
  .tabla.ancha thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla.ancha table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .tabla.ancha tr{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:8px 0;margin-bottom:0;box-shadow:var(--sombra)}
  .tabla.ancha tr+tr td{border-top:0}
  .tabla.ancha td{position:relative;padding:7px 16px 7px 126px;min-height:34px}
  .tabla.ancha td::before{content:attr(data-titulo);position:absolute;left:16px;top:9px;width:100px;font-size:.7rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--claro-txt);font-weight:800;line-height:1.3}
  .tabla.ancha td:not([data-titulo]),.tabla.ancha td.principal{padding-left:16px}
  .tabla.ancha td:not([data-titulo])::before,.tabla.ancha td.principal::before{display:none}
  .tabla.ancha td.principal{font-weight:800;font-size:1rem}
  .tabla.ancha td.num{text-align:left}
  .tabla.ancha td.corta{white-space:normal}
  .tabla.ancha td.acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;white-space:normal;padding:12px 16px 6px;
    margin-top:6px;border-top:1px solid var(--linea)}
  .tabla.ancha td.acciones::before{display:none}
  .tabla.ancha td.acciones .btn+.btn,.tabla.ancha td.acciones form+form,.tabla.ancha td.acciones .btn+form,.tabla.ancha td.acciones form+.btn,
  .tabla.ancha td.acciones .btn+.opciones,.tabla.ancha td.acciones form+.opciones{margin-left:0}
  .tabla.ancha td.acciones:empty,.tabla.ancha td.acciones.vacia{display:none}
  .tabla.ancha tr.resaltada{background:#fffbeb}
  .tabla.ancha tr.resaltada td{background:transparent}
}
/* .tabla.muy-ancha (12 columnas; EN VEZ de .ancha, no con ella): fichas hasta 1279px (dos por fila y, desde
   1200, tres) y tabla desde 1280, con el relleno corto de .ancha */
@media(min-width:1280px){
  .tabla.muy-ancha th,.tabla.muy-ancha td{padding-left:10px;padding-right:10px}
  .tabla.muy-ancha th:first-child,.tabla.muy-ancha td:first-child{padding-left:14px}
  .tabla.muy-ancha th:last-child,.tabla.muy-ancha td:last-child{padding-right:14px}
}
@media(min-width:641px) and (max-width:1279px){
  .tabla.muy-ancha{background:transparent;border:0;border-radius:0;overflow:visible}
  .tabla.muy-ancha table,.tabla.muy-ancha tbody,.tabla.muy-ancha tr,.tabla.muy-ancha td{display:block}
  .tabla.muy-ancha thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla.muy-ancha table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .tabla.muy-ancha tr{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:8px 0;margin-bottom:0;box-shadow:var(--sombra)}
  .tabla.muy-ancha tr+tr td{border-top:0}
  .tabla.muy-ancha td{position:relative;padding:7px 16px 7px 126px;min-height:34px}
  .tabla.muy-ancha td::before{content:attr(data-titulo);position:absolute;left:16px;top:9px;width:100px;font-size:.7rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--claro-txt);font-weight:800;line-height:1.3}
  .tabla.muy-ancha td:not([data-titulo]),.tabla.muy-ancha td.principal{padding-left:16px}
  .tabla.muy-ancha td:not([data-titulo])::before,.tabla.muy-ancha td.principal::before{display:none}
  .tabla.muy-ancha td.principal{font-weight:800;font-size:1rem}
  .tabla.muy-ancha td.num{text-align:left}
  .tabla.muy-ancha td.corta{white-space:normal}
  .tabla.muy-ancha td.acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;white-space:normal;padding:12px 16px 6px;
    margin-top:6px;border-top:1px solid var(--linea)}
  .tabla.muy-ancha td.acciones::before{display:none}
  .tabla.muy-ancha td.acciones .btn+.btn,.tabla.muy-ancha td.acciones form+form,.tabla.muy-ancha td.acciones .btn+form,.tabla.muy-ancha td.acciones form+.btn,
  .tabla.muy-ancha td.acciones .btn+.opciones,.tabla.muy-ancha td.acciones form+.opciones{margin-left:0}
  .tabla.muy-ancha td.acciones:empty,.tabla.muy-ancha td.acciones.vacia{display:none}
  .tabla.muy-ancha tr.resaltada{background:#fffbeb}
  .tabla.muy-ancha tr.resaltada td{background:transparent}
}
@media(min-width:1200px) and (max-width:1279px){.tabla.muy-ancha table tbody{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ══ 15. Insignias de estado ══ */
.insignia,.badge{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:3px 9px;border-radius:999px;background:var(--fondo);
  color:var(--gris);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.15;white-space:nowrap;vertical-align:middle}
.insignia .ic{width:13px;height:13px;stroke-width:2.4}
.insignia.activo,.insignia.ok,.badge-success{background:#e1f5e8;color:#166534}
.insignia.inactivo,.badge-secondary{background:#edf0f4;color:#5b6778}
.insignia.ocupado,.insignia.alerta,.badge-warning{background:#fff0d6;color:#8a4b00}
.insignia.en-juego{background:#e1f5e8;color:#166534}
.insignia.en-juego::before,.insignia.detenido::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.insignia.en-juego::before{background:var(--vivo);animation:app-latido 1.6s ease-out infinite}
.insignia.detenido{background:#fff0d6;color:#8a4b00}
.insignia.tu{background:var(--club-boton,var(--club));color:var(--sobre-club)}
.insignia.bloqueado{background:#1e293b;color:#fff}
.insignia.error,.badge-danger{background:var(--peligro-suave);color:var(--peligro-texto)}
.insignia.info,.badge-info{background:var(--club-suave);color:var(--club-texto-suave)}
.insignia.minus{text-transform:none;letter-spacing:0;font-size:.78rem}

/* ══ 16. Avisos (banner) y toast ══ */
.aviso,.alert{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:16px;border:1px solid var(--linea);background:var(--papel);
  font-size:.93rem;line-height:1.45;margin:0 0 16px}
.aviso>.ic,.alert>.ic{width:21px;height:21px;margin-top:0;flex:none}
.aviso-txt{flex:1;min-width:0}
.aviso-txt b{display:block}
.aviso-txt p{margin:2px 0 0}
.aviso .btn-icon{margin:-10px -10px -10px auto;width:44px;height:44px;min-height:44px;background:transparent;box-shadow:none;color:inherit;opacity:.7}
.aviso.ok,.aviso-ok,.alert-success{background:#ecf8f1;border-color:#c5e9d3;color:var(--ok-texto)}
.aviso.ok>.ic,.aviso-ok>.ic,.alert-success>.ic{color:var(--vivo)}
.aviso.error,.aviso-error,.alert-error,.alert-danger{background:#fdf0f3;border-color:#f6cbd6;color:var(--peligro-texto)}
.aviso.error>.ic,.aviso-error>.ic,.alert-error>.ic,.alert-danger>.ic{color:var(--roja)}
.aviso.info,.aviso-info,.alert-info{background:var(--info-suave);border-color:#d4e1fd;color:var(--info-texto)}
.aviso.info>.ic,.aviso-info>.ic,.alert-info>.ic{color:var(--info)}
.aviso.alerta,.aviso-alerta,.alert-warning{background:var(--aviso-suave);border-color:#fbdca0;color:var(--aviso-texto)}
.aviso.alerta>.ic,.aviso-alerta>.ic,.alert-warning>.ic{color:var(--aviso)}
.aviso.compacto{padding:9px 12px;font-size:.88rem;border-radius:13px}
/* aviso de «bloqueado durante el partido» (sección 7): oculto hasta que control.js pone .config-bloqueada.
   Aquí, detrás de .aviso y con más especificidad, para que .aviso{display:flex} no lo enseñe siempre */
.bloqueo-aviso,.aviso.bloqueo-aviso{display:none}
.config-bloqueada .bloqueo-aviso,.config-bloqueada .aviso.bloqueo-aviso{display:flex}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:500;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:min(460px,calc(100% - 32px));padding:12px 16px;border-radius:15px;background:var(--tinta);color:#fff;
  font-weight:700;font-size:.92rem;line-height:1.35;box-shadow:0 14px 34px rgba(15,23,42,.32);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.ver{opacity:1;transform:translate(-50%,0)}   /* pointer-events:none siempre: no tapa los botones de debajo */
.toast .ic{width:20px;height:20px}
.toast.ok .ic,.toast.success .ic{color:#4ade80}   /* success: el tipo de los toast() de siempre (appToast usa ok) */
.toast.error{background:#9f1239}
.toast.error .ic{color:#fecdd3}
.toast.info .ic{color:#93c5fd}
/* Avisos que monta un JS de siempre, con el mismo aspecto. js/app2.js los coloca como appToast (encima de una
   .barra-acciones visible y del botón que se acaba de pulsar, si lo taparían):
   · varios apilados: toast() crea div.toast.success|error|info dentro de un .toast-container (#toast-container).
     Dentro del contenedor el .toast deja de ser fijo y transparente hasta .ver */
.toast-container{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:500;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);pointer-events:none}
.toast-container .toast{position:static;left:auto;bottom:auto;width:auto;max-width:min(460px,100%);transform:none;opacity:1;
  animation:app-aviso .25s ease-out}
/*   · uno solo que el JS rellena con textContent y enseña con style.display y colores en línea: [data-aviso-flotante]
     (#upload-message de videos). Manda el aspecto de .toast sobre esos colores; js/app2.js le pone .ok/.error (el
     rojo lo reconoce por el color en línea) y el icono (textContent lo borra) */
.aviso-flotante{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:500;transform:translateX(-50%);
  width:max-content;max-width:min(460px,calc(100% - 32px));margin:0;padding:12px 16px 12px 46px;border-radius:15px;
  border:0!important;background:var(--tinta)!important;color:#fff!important;
  font-weight:700;font-size:.92rem;line-height:1.35;overflow-wrap:anywhere;box-shadow:0 14px 34px rgba(15,23,42,.32);
  pointer-events:none;animation:app-aviso-centro .25s ease-out}
.aviso-flotante>.ic{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;color:#4ade80}
.aviso-flotante.error{background:#9f1239!important}
.aviso-flotante.error>.ic{color:#fecdd3}
/* con un modal o el menú del móvil abiertos (body.app-bloqueo), arriba: abajo tapaba Cancelar y Guardar de la hoja */
body.app-bloqueo #app-toast,body.app-bloqueo .toast-container,body.app-bloqueo .aviso-flotante{top:calc(12px + env(safe-area-inset-top));bottom:auto!important}
body.app-bloqueo #app-toast{transform:translate(-50%,-16px)}
body.app-bloqueo #app-toast.ver{transform:translate(-50%,0)}
@keyframes app-aviso{from{opacity:0;transform:translateY(12px)}}
@keyframes app-aviso-centro{from{opacity:0;transform:translate(-50%,12px)}}

/* ══ 17. Modal: hoja de abajo en el móvil, ventana centrada desde 768px ══
   Sirve tal cual para config.js, que abre con element.style.display='block' y cierra con 'none'
   (el cierre al tocar fuera funciona porque .modal es el fondo). También con .abierto (js/app2.js). */
.modal,.modal-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.5);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex-direction:column}   /* column: por si el JS abre con display:flex */
.modal.abierto,.modal-overlay.abierto,.modal.active,.modal-overlay.active{display:block}   /* .active: plantillas y el histórico */
.modal-content{position:fixed;left:0;right:0;bottom:0;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--papel);border-radius:26px 26px 0 0;box-shadow:0 -20px 60px rgba(15,23,42,.25);
  padding:8px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  animation:app-hoja .3s cubic-bezier(.4,0,.2,1)}
.modal-content:focus{outline:none}
.modal-content::before{content:"";display:block;width:46px;height:5px;border-radius:9px;background:#d5dce8;margin:2px auto 12px}
.modal-cab,.modal-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.modal-cab h2,.modal-header h2,.modal-cab h3,.modal-header h3,.modal-content>h2{flex:1;min-width:0;margin:0;font-size:1.25rem;line-height:1.25;overflow-wrap:break-word}
.modal-content>h2{margin:0 52px 14px 0}
.modal-cab p{margin:4px 0 0;color:var(--gris);font-size:.9rem}
.modal-cab-txt{flex:1;min-width:0}
.modal-cerrar,.modal-close{width:44px;height:44px;border-radius:13px;border:0;background:var(--fondo);color:var(--tinta);display:grid;place-items:center;
  flex:none;margin:-4px -4px 0 0}
.modal-content>.close-modal{position:absolute;top:20px;right:14px;width:44px;height:44px;border-radius:13px;background:var(--fondo);display:grid;
  place-items:center;font-size:1.7rem;line-height:1;color:var(--gris);cursor:pointer;-webkit-user-select:none;user-select:none;z-index:2}
.modal-cuerpo,.modal-body{min-width:0}
.modal-pie,.modal-footer{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:1;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:flex-end;margin:18px calc(-1 * max(18px,env(safe-area-inset-right))) calc(-18px - env(safe-area-inset-bottom)) calc(-1 * max(18px,env(safe-area-inset-left)));
  padding:12px max(18px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:var(--papel);border-top:1px solid var(--linea)}
@media(max-width:767px){.modal-pie>.btn,.modal-footer>.btn{flex:1 1 0}}
@media(max-width:359px){.modal-pie>.btn,.modal-footer>.btn{flex:1 1 100%}}
/* sin margen debajo de lo último del cuerpo, y del último campo aunque lo sigan campos ocultos o un <script>.
   (Antes era .form-group:last-of-type, que dejaba sin margen a un campo seguido de un label.interruptor) */
.modal-cuerpo>:last-child,.modal-body>:last-child{margin-bottom:0}
.modal .form-group:not(:has(~ :not(input[type="hidden"],script,template))){margin-bottom:0}
/* .arriba: en el móvil, ventana arriba (con margen y esquinas redondas) en vez de hoja pegada abajo. Para los
   diálogos que ponen el foco en un campo: el teclado ya no tapa los campos ni los botones (iOS sobre todo) */
@media(max-width:767px){
  .modal-content.arriba{top:calc(10px + env(safe-area-inset-top));bottom:auto;left:10px;right:10px;border-radius:22px;
    max-height:calc(100vh - 20px - env(safe-area-inset-top));max-height:calc(100dvh - 20px - env(safe-area-inset-top));
    padding:16px 18px 18px;animation:app-ventana .2s ease-out}
  .modal-content.arriba::before{display:none}
  .modal-content.arriba .modal-pie,.modal-content.arriba .modal-footer{bottom:-18px;margin:18px -18px -18px;padding:12px 18px 14px;border-radius:0 0 22px 22px}
}
@media(min-width:768px){
  .modal,.modal-overlay{padding:7vh 24px 24px}
  .modal-content{position:relative;left:auto;right:auto;bottom:auto;margin:0 auto;width:100%;flex:none;max-width:560px;max-height:none;overflow:visible;
    border-radius:22px;padding:22px 24px;box-shadow:var(--sombra-alta);animation:app-ventana .2s ease-out}
  .modal-content.ancho{max-width:780px}
  .modal-content.estrecho{max-width:440px}
  .modal-content::before{display:none}
  .modal-content>.close-modal{top:16px;right:16px}
  /* pegado abajo también en la ventana: en un modal largo «Guardar» se ve sin desplazarse. Desplaza .modal;
     -24px compensa su relleno de abajo (si no, el pie se queda 24px por encima y el contenido asoma debajo) */
  .modal-pie,.modal-footer{position:sticky;bottom:-24px;margin:22px -24px -22px;padding:14px 24px;border-radius:0 0 22px 22px;background:#fafbfd}
}
@keyframes app-hoja{from{transform:translateY(100%)}}
@keyframes app-ventana{from{opacity:0;transform:translateY(10px) scale(.98)}}

/* ══ 18. Estados: vacío, esqueleto de carga, en vivo ══ */
.vacio,.empty-state{background:var(--papel);border:1.5px dashed #ccd6e5;border-radius:var(--radio);padding:28px 20px 24px;text-align:center}
.seccion .vacio{background:#fafbfd}
.vacio-ic{width:60px;height:60px;border-radius:20px;background:var(--club-suave);color:var(--club-texto);display:grid;place-items:center;margin:0 auto 14px}
.vacio-ic .ic{width:28px;height:28px}
.vacio h3{font-size:1.12rem;margin:0 0 6px}
.vacio p{margin:0 auto 16px;color:var(--gris);max-width:40ch;font-size:.94rem}
.vacio p:last-child{margin-bottom:0}
.vacio .btns{justify-content:center}
/* appPaginaError(): la página entera de un error de entrada (sin ?id, club o autorización que no existe) */
.vacio.error .vacio-ic{background:var(--peligro-suave);color:var(--peligro)}
.vacio h1{font-size:1.3rem;margin:0 0 8px}
.app-main.pagina-error{padding-top:clamp(24px,8vh,72px)}

.esq{display:block;border-radius:14px;background:linear-gradient(100deg,#e7ecf4 30%,#f5f7fb 45%,#e7ecf4 60%);background-size:300% 100%;
  animation:app-brillo 1.3s ease-in-out infinite}
.esq-linea{height:14px;border-radius:7px;margin:8px 0}
.esq-linea.corta{width:45%}
.esq-titulo{height:22px;width:55%;border-radius:8px;margin-bottom:12px}
.esq-avatar{width:42px;height:42px;border-radius:13px;flex:none}
.esq-bloque{height:140px;border-radius:var(--radio)}
@keyframes app-brillo{from{background-position:100% 0}to{background-position:0 0}}
.girador{display:inline-block;width:22px;height:22px;border-radius:50%;border:3px solid var(--club-suave);border-top-color:var(--club-texto);
  animation:app-gira .75s linear infinite;vertical-align:middle}
.cargando-bloque{display:flex;align-items:center;justify-content:center;gap:12px;min-height:120px;color:var(--gris);font-weight:700}

.punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--claro);flex:none}
.punto.vivo{background:var(--vivo);animation:app-latido 1.6s ease-out infinite}
.punto.parado{background:var(--parado)}
.punto.error{background:var(--roja)}
.estado-linea{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:.88rem;font-weight:700;color:var(--gris)}
.estado-linea.vivo{color:var(--tinta)}
.estado-linea.error{color:var(--peligro-texto)}
@keyframes app-latido{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}100%{box-shadow:0 0 0 9px rgba(22,163,74,0)}}

/* ══ 19. Paginación, estadísticas, datos, desplegable, copiar ══ */
.paginacion{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:18px 0 4px}
.paginacion>a,.paginacion>span{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;height:44px;padding:0 12px;
  border-radius:12px;background:var(--papel);box-shadow:inset 0 0 0 1.5px var(--linea);color:var(--tinta);font-weight:800;font-size:.9rem;
  text-decoration:none;font-variant-numeric:tabular-nums}
.paginacion [aria-current="page"]{background:var(--tinta);color:#fff;box-shadow:none}
.paginacion>.salto{min-width:22px;padding:0;background:none;box-shadow:none;color:var(--claro-txt)}
.paginacion [aria-disabled="true"]{opacity:.4;pointer-events:none}
@media(hover:hover){.paginacion>a:hover{box-shadow:inset 0 0 0 1.5px #b9c4d4}}
@media(max-width:420px){.paginacion .pag-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* en el móvil solo la primera, la actual y la última (appPaginacion() marca el resto con .pag-extra) */
@media(max-width:479px){.paginacion>.pag-extra{display:none}}
@media(max-width:379px){.paginacion{gap:4px}.paginacion>.salto{min-width:18px}}

.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))}
.stat{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:14px 16px;min-width:0}
.stat small{display:block;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gris);font-weight:800;line-height:1.3}
.stat b{display:block;font:800 1.85rem/1.1 var(--f-tit);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:6px}
.stat b span{font-size:.55em;color:var(--claro-txt);letter-spacing:0}
.stat>span{display:block;font-size:.84rem;color:var(--gris);margin-top:2px}
.stat .medidor{height:6px;border-radius:9px;background:var(--fondo);overflow:hidden;margin-top:10px}
.stat .medidor i{display:block;height:100%;border-radius:inherit;background:var(--club)}
.stat.alto .medidor i{background:var(--parado)}
.stat.lleno .medidor i{background:var(--roja)}

.datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 16px;margin:0;font-size:.92rem}
.datos dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--claro-txt);font-weight:800;padding-top:2px}
.datos dd{margin:0;overflow-wrap:anywhere}
@media(max-width:479px){.datos{grid-template-columns:minmax(0,1fr);gap:1px}.datos dd{margin-bottom:8px}}

details.desplegable{border:1px solid var(--linea);border-radius:14px;background:var(--papel)}
details.desplegable+details.desplegable{margin-top:8px}
details.desplegable>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;cursor:pointer;font-weight:800;
  font-size:.92rem;color:var(--club-texto);border-radius:14px}
details.desplegable>summary::-webkit-details-marker{display:none}
details.desplegable>summary .ic{width:18px;height:18px;transition:transform .2s}
details.desplegable[open]>summary .ic:last-child{transform:rotate(180deg)}
details.desplegable>summary .ic:last-child{margin-left:auto}
.desplegable-cuerpo{padding:2px 14px 14px}
.texto-legal{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.86rem;line-height:1.55;color:#34405a;background:var(--fondo);border-radius:12px;padding:12px 14px;margin:0}

.copiable{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;background:var(--fondo);border:1px solid var(--linea);border-radius:14px}
.copiable code{flex:1;min-width:0;font-size:.86rem;overflow-wrap:anywhere;line-height:1.35;padding:6px 0;color:var(--tinta)}
.copiable .btn{flex:none}
.copiable .btn.copiado{background:var(--ok);color:#fff;box-shadow:none}

/* pestañas-enlace entre las páginas de un club del superadmin (appSuperadminClubNav: Histórico, Logs, Autorizaciones) */
.sa-club-nav{margin:0 0 16px;width:max-content}
@media(max-width:479px){
  .sa-club-nav{width:auto}
  .sa-club-nav .pestana{flex:1 1 auto;padding:0 10px}
}
@media(max-width:419px){.sa-club-nav .pestana .ic{display:none}}

/* ══ 20. Barra de acciones pegada abajo (formularios largos) ══ */
.barra-acciones{position:sticky;bottom:0;z-index:40;display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:18px -16px 0;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--linea);
  box-shadow:0 -8px 24px rgba(15,23,42,.06)}
.barra-acciones>.btn{flex:1 1 0}
.barra-acciones-txt{display:none;align-items:center;gap:8px;flex:1 1 100%;font-size:.85rem;font-weight:700;color:var(--aviso-texto)}
.barra-acciones.con-cambios .barra-acciones-txt{display:flex}
.seccion>.barra-acciones{margin:20px -16px -16px;border-radius:0 0 var(--radio) var(--radio)}
@media(min-width:640px){.seccion>.barra-acciones{margin:22px -22px -20px;padding-left:22px;padding-right:22px}}
@media(min-width:768px){
  .barra-acciones{justify-content:flex-end;margin-left:0;margin-right:0;border-radius:18px;border:1px solid var(--linea);bottom:12px}
  .barra-acciones>.btn{flex:none;min-width:150px}
  .barra-acciones-txt{flex:1 1 auto;order:-1}
  .seccion>.barra-acciones{bottom:0}
}
/* con poca altura (el móvil en horizontal) deja de ir pegada, y el texto y los botones van en una sola fila:
   la barra de la app y esta ocupaban un tercio de la pantalla, y con el teclado abierto no quedaba sitio */
@media(max-height:500px){
  .barra-acciones{position:relative;bottom:auto}
  .barra-acciones-txt{flex:1 1 auto}
  .barra-acciones>.btn{flex:none}
}

/* ══ 21. Bloque oscuro del partido (como la pantalla del campo y el directo) ══ */
.pantalla{position:relative;isolation:isolate;overflow:hidden;color:#fff;border-radius:var(--radio);padding:14px 14px 16px;
  background:radial-gradient(130% 100% at 50% -10%,var(--pantalla2),var(--pantalla) 70%);box-shadow:var(--sombra)}
.pantalla::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--logo,none) center/60% auto no-repeat;opacity:.07}
.pantalla::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--local),var(--rival))}
.pantalla :focus-visible{outline-color:#fff}
.pantalla-cab{display:flex;align-items:center;gap:8px;min-width:0;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pantalla-campo{display:inline-flex;align-items:center;gap:5px;flex:none;background:rgba(255,255,255,.1);border-radius:999px;padding:4px 9px 4px 7px}
.pantalla-campo .ic{width:14px;height:14px}
.pantalla-cat{color:rgba(255,255,255,.66);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pantalla-cab .insignia{margin-left:auto}
.pantalla .insignia.en-juego{background:rgba(34,197,94,.16);color:#4ade80}
.pantalla .insignia.detenido{background:rgba(245,158,11,.16);color:#fbbf24}
.pantalla .insignia.inactivo{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
/* arriba y no centrado: con un nombre en dos líneas y el otro en una, los escudos siguen a la misma altura */
.pantalla-marcador{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:8px;margin-top:14px}
.pantalla-eq{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.pantalla-eq img,.pantalla-eq .ini{width:52px;height:52px;object-fit:contain}
.pantalla-eq .ini{display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);font:800 1.05rem/1 var(--f-tit)}
.pantalla-nom{font:800 .88rem/1.15 var(--f-tit);text-transform:uppercase;letter-spacing:.02em;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.pantalla-eq.l .pantalla-nom{color:var(--local)}
.pantalla-eq.v .pantalla-nom{color:var(--rival)}
.pantalla-res{display:flex;align-items:center;min-height:52px;gap:6px;font:800 clamp(2.6rem,13vw,3.6rem)/1 var(--f-tit);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pantalla-res span{opacity:.3;font-size:.6em}
.pantalla-tiempo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px}
.pantalla-parte{font-size:.86rem;font-weight:700;color:rgba(255,255,255,.75)}
.pantalla-reloj{font:800 1.6rem/1 var(--f-tit);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pantalla-reloj.grande{font-size:clamp(2.4rem,12vw,3.4rem)}
.pantalla-reloj.tiempo-excedido,.tiempo-excedido{color:#fbbf24}
.pantalla-prog{height:5px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:10px}
.pantalla-prog i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--local),#fff);transition:width .9s linear}
.pantalla-bts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:14px}
.btn-pant{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:56px;padding:0 12px;border:0;border-radius:16px;
  background:rgba(255,255,255,.1);color:#fff;font-weight:800;font-size:.95rem;line-height:1.15;text-align:center;transition:background .15s,transform .1s}
.btn-pant .ic{width:22px;height:22px}
.btn-pant:active{transform:scale(.97)}
.btn-pant.fuerte{background:#fff;color:var(--pantalla)}
.btn-pant.club{background:var(--club-boton,var(--club));color:var(--sobre-club)}
.btn-pant:disabled{opacity:.35;cursor:not-allowed;transform:none}
/* en el móvil el icono va encima del texto, para que quepan tres o cuatro por fila (o siempre, con .apilado) */
@media(max-width:479px){.btn-pant{flex-direction:column;gap:3px;padding:6px 4px;font-size:.82rem}.btn-pant .ic{width:21px;height:21px}}
.btn-pant.apilado{flex-direction:column;gap:3px;padding:6px 4px;font-size:.82rem}
.btn-pant .tarj{margin:3px 0}   /* 15px + 6 = los 21 de un icono: el texto queda a la misma altura que en «Cambio» */
/* goles: cada pareja (quitar / sumar) debajo de su equipo, con su color, para no tocar la del otro */
.pantalla-goles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.pantalla-gol{min-width:0;display:grid;grid-template-columns:minmax(44px,1fr) minmax(0,1.7fr);gap:6px;padding:6px;border-radius:20px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 3px 0 var(--local)}
.pantalla-gol.v{box-shadow:inset 0 3px 0 var(--rival)}
.pantalla-gol-nom{grid-column:1/-1;padding:4px 6px 0;font:800 .7rem/1.2 var(--f-txt);letter-spacing:.08em;text-transform:uppercase;
  color:var(--local);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pantalla-gol.v .pantalla-gol-nom{color:var(--rival)}
@media(hover:hover){.btn-pant:hover:not(:disabled){background:rgba(255,255,255,.18)}.btn-pant.fuerte:hover:not(:disabled){background:#e9eef6}}

/* marcador pequeño en claro para listas (partidos en curso, histórico) */
.mini-marcador{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.mini-marcador>span{min-width:0;font-weight:700;font-size:.93rem;line-height:1.25;overflow-wrap:anywhere}
.mini-marcador>span:first-child{text-align:right}
.mini-marcador b{font:800 1.35rem/1 var(--f-tit);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;
  background:var(--fondo);border-radius:10px;padding:6px 10px}
.mini-marcador b i{font-style:normal;color:var(--claro-txt);margin:0 3px}

/* tarjeta amarilla / roja dibujadas (mismo aspecto que el directo) */
.tarj{display:inline-block;width:11px;height:15px;border-radius:2.5px;box-shadow:0 1px 2px rgba(0,0,0,.2);vertical-align:middle;flex:none}
.tarj.am{background:var(--amarilla)}
.tarj.ro{background:var(--roja)}

/* ══ 22. Accesibilidad de movimiento e impresión ══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff;color:#000;padding:0;font-size:12pt}
  .app-barra,.app-menu,.app-menu-fondo,.barra-acciones,.toast,.toast-container,.aviso-flotante,.modal,.opciones,.saltar,.btn,.btn-pant,.no-imprimir{display:none!important}
  .app-main{max-width:none;padding:0}
  .seccion,.stat,.lista,.tabla,.vacio{box-shadow:none;border-color:#bbb;break-inside:avoid}
  .pantalla{background:#fff;color:#000;border:1px solid #bbb}
  .pantalla::before,.pantalla::after{display:none}
  a{color:inherit;text-decoration:none}
  .plegable.collapsed .plegable-cuerpo,.collapsed .collapsible-content{display:block!important}
}