/* =====================================================================
   AC CUP 2027 · PIEZAS COMUNES · panel interno + área del club
   ---------------------------------------------------------------------
   Necesita tokens.css delante. Todo lleva el prefijo «ac-» para convivir con
   el CSS de cada pantalla mientras se migra: aquí no hay ni un selector de
   elemento suelto (body, button, table…), así que cargar este fichero en una
   pantalla vieja no le cambia nada hasta que use una clase ac-.

   Las piezas solo leen variables (--ac-*). Nada de colores ni tamaños a mano,
   ni aquí ni en las pantallas: si falta algo, se añade a tokens.css.
   Índice:
     0 base · foco · iconos     6 tabla y lista            12 navegación del panel
     1 tipografía               7 datos (dl)               13 barra inferior
     2 botón                    8 panel lateral y hoja     14 cabecera de operación
     3 pastilla de estado       9 confirmación y diálogo   15 cabecera del club
     4 barra de pago           10 pestañas y filtros       16 marco de la app
     5 aviso y toast           11 campos y buscador        17 vacío y cargando
   ===================================================================== */

/* iconos-css:ini · lo escribe scripts/iconos-2027.py (no editar a mano)
   Iconos Lucide (https://lucide.dev) · Copyright (c) 2026 Lucide Icons and Contributors · licencia ISC.
   Algunos vienen de Feather · Copyright (c) 2013-present Cole Bemis · licencia MIT.
   Texto completo de las dos licencias: assets/2027/iconos.svg y
   https://github.com/lucide-icons/lucide/blob/main/LICENSE */
:root{
  --ac-i-circle-dashed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' d='M10.1 2.182a10 10 0 0 1 3.8 0m0 19.636a10 10 0 0 1-3.8 0m7.509-18.097a10 10 0 0 1 2.69 2.7M2.182 13.9a10 10 0 0 1 0-3.8m18.097 7.509a10 10 0 0 1-2.7 2.69M21.818 10.1a10 10 0 0 1 0 3.8M3.721 6.391a10 10 0 0 1 2.7-2.69m-.03 16.578a10 10 0 0 1-2.69-2.7'/%3E%3C/svg%3E");
  --ac-i-hourglass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' d='M5 22h14M5 2h14m-2 20v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E");
  --ac-i-circle-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9l-5.5 5.5L8 12'/%3E%3C/g%3E%3C/svg%3E");
  --ac-i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/g%3E%3C/svg%3E");
  --ac-i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/g%3E%3C/svg%3E");
  --ac-i-circle-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9l-6 6m0-6l6 6'/%3E%3C/g%3E%3C/svg%3E");
  --ac-i-triangle-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' d='m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/%3E%3C/svg%3E");
  --ac-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --ac-i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  --ac-i-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");
  --ac-i-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
}
/* iconos-css:fin */

/* =====================================================================
   0 · BASE, FOCO e ICONOS
   ===================================================================== */
[class^="ac-"],[class*=" ac-"],
[class^="ac-"]::before,[class*=" ac-"]::before,
[class^="ac-"]::after,[class*=" ac-"]::after{box-sizing:border-box}

/* Foco visible en tinta, nunca en rojo (en rojo, un campo activo parece un error) */
[data-modo] :focus-visible,[class^="ac-"]:focus-visible,[class*=" ac-"]:focus-visible{outline:2px solid var(--ac-tinta);outline-offset:2px}
.ac-nav :focus-visible,.ac-barra-op :focus-visible,.ac-cab-club :focus-visible,.ac-toast :focus-visible,
.ac-nav:focus-visible,.ac-toast__accion:focus-visible,.ac-toast__cerrar:focus-visible{outline-color:var(--ac-sobre-oscuro)}

/* Icono del sprite: <svg class="ac-ico" aria-hidden="true"><use href="/assets/2027/iconos.svg#i-check"/></svg> */
.ac-ico{width:var(--ac-ico-m);height:var(--ac-ico-m);flex:none;fill:none;stroke-width:var(--ac-ico-trazo);vertical-align:middle}
.ac-ico--xs{width:var(--ac-ico-xs);height:var(--ac-ico-xs)}
.ac-ico--s{width:var(--ac-ico-s);height:var(--ac-ico-s)}
.ac-ico--l{width:var(--ac-ico-l);height:var(--ac-ico-l)}

/* Solo para lectores de pantalla */
.ac-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ac-num{font-variant-numeric:tabular-nums}
.ac-mono{font-family:var(--ac-f-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* Objetivo táctil ≥ 44 px: en pantallas táctiles, lo pequeño crece por dentro sin moverse */
.ac-btn,.ac-filtro,.ac-pestana,.ac-nav__item,.ac-nav__sub,.ac-barra-inf__item,.ac-toast__accion,.ac-toast__cerrar,.ac-kpi,.ac-segmentado__op{position:relative}
@media (pointer:coarse){
  .ac-btn::after,.ac-filtro::after,.ac-pestana::after,.ac-nav__item::after,.ac-nav__sub::after,.ac-toast__accion::after,.ac-toast__cerrar::after,.ac-segmentado__op::after{
    content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--ac-tactil));height:max(100%,var(--ac-tactil));transform:translate(-50%,-50%)}
}

/* =====================================================================
   1 · TIPOGRAFÍA · Akrobat solo en títulos y cifras (D3)
   ===================================================================== */
.ac-titulo{margin:0;font:var(--ac-p-marca) var(--ac-t-titulo)/var(--ac-lh-titulo) var(--ac-f-marca);text-transform:uppercase;letter-spacing:.01em;color:var(--ac-texto)}
.ac-cifra{font:var(--ac-p-marca) var(--ac-t-cifra)/1 var(--ac-f-marca);font-variant-numeric:tabular-nums;letter-spacing:.005em}
.ac-etiqueta{margin:0;font:600 var(--ac-t-12)/var(--ac-lh-ajustado) var(--ac-f-texto);text-transform:uppercase;letter-spacing:var(--ac-ls-etiqueta);color:var(--ac-texto-3)}
[data-modo="club"] .ac-etiqueta{font:700 var(--ac-t-14)/var(--ac-lh-ajustado) var(--ac-f-marca);letter-spacing:var(--ac-ls-marca);color:var(--ac-texto)}
.ac-texto-2{color:var(--ac-texto-2)}
.ac-texto-3{color:var(--ac-texto-3)}
.ac-peq{font-size:var(--ac-t-peq)}

/* =====================================================================
   2 · BOTÓN · primario / secundario / fantasma / peligro / invertido
   Rojo lleno = sigue adelante. Contorno rojo oscuro = cuidado. Uno primario por zona.
   ===================================================================== */
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ac-s-2);min-height:var(--ac-ctl);margin:0;padding:0 var(--ac-btn-pad);
  border:1px solid transparent;border-radius:var(--ac-btn-r);background:none;color:var(--ac-texto);cursor:pointer;white-space:nowrap;text-decoration:none;
  font:var(--ac-btn-p) var(--ac-btn-t)/1 var(--ac-btn-f);text-transform:var(--ac-btn-mayus);letter-spacing:var(--ac-btn-ls);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:background-color var(--ac-dur) var(--ac-ease),border-color var(--ac-dur) var(--ac-ease),color var(--ac-dur) var(--ac-ease)}
.ac-btn .ac-ico{width:var(--ac-ico-btn);height:var(--ac-ico-btn)}
.ac-btn--primario{background:var(--ac-acento);color:var(--ac-sobre-oscuro)}
.ac-btn--primario:is(:hover,:active):not([disabled],[aria-disabled="true"]){background:var(--ac-acento-pulsado)}
.ac-btn--secundario{background:var(--ac-superficie);border-color:var(--ac-linea-fuerte);color:var(--ac-texto)}
.ac-btn--secundario:hover:not([disabled],[aria-disabled="true"]){border-color:var(--ac-texto)}
.ac-btn--fantasma{background:transparent;color:var(--ac-texto)}
.ac-btn--fantasma:hover:not([disabled],[aria-disabled="true"]){background:var(--ac-linea)}
.ac-btn--peligro{background:var(--ac-superficie);border-color:var(--ac-error-filete);color:var(--ac-error-texto)}
.ac-btn--peligro:hover:not([disabled],[aria-disabled="true"]){background:var(--ac-error-fondo)}
.ac-btn--invertido{background:var(--ac-blanco);color:var(--ac-tinta)}            /* sobre el negro o el rojo de las cabeceras */
.ac-btn--invertido:hover:not([disabled],[aria-disabled="true"]){background:var(--ac-gris-50)}
.ac-btn--sm{min-height:var(--ac-ctl-sm);padding:0 var(--ac-s-3);font-size:var(--ac-btn-t-sm)}
.ac-btn--bloque{display:flex;width:100%;white-space:normal;text-align:center;line-height:var(--ac-lh-ajustado);padding-top:var(--ac-s-2);padding-bottom:var(--ac-s-2)}
.ac-btn--icono{width:var(--ac-ctl);padding:0}                                     /* solo icono: lleva aria-label */
.ac-btn--icono.ac-btn--sm{width:var(--ac-ctl-sm)}
.ac-btn[disabled],.ac-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
/* Cargando: <button class="ac-btn … is-cargando" aria-busy="true">Guardando…</button> */
.ac-btn.is-cargando{pointer-events:none;opacity:.85}
.ac-btn.is-cargando>.ac-ico:first-child{display:none}
.ac-btn.is-cargando::before{content:"";flex:none;width:var(--ac-ico-s);height:var(--ac-ico-s);border-radius:var(--ac-r-full);
  border:2px solid currentColor;border-right-color:transparent;animation:ac-giro .7s linear infinite}
/* Copiado: lo pone acUI.copiar() durante 2 s */
.ac-btn.is-copiado::before{content:"";flex:none;width:var(--ac-ico-btn);height:var(--ac-ico-btn);background:currentColor;
  -webkit-mask:var(--ac-i-check) center/contain no-repeat;mask:var(--ac-i-check) center/contain no-repeat}
.ac-btn.is-copiado>.ac-ico:first-child{display:none}
.ac-botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ac-s-2)}
.ac-botones--fin{justify-content:flex-end}

/* =====================================================================
   3 · PASTILLA DE ESTADO · el mismo nombre en panel, área y correo
   El icono lo pone la pastilla: <span class="ac-estado ac-e-pendiente">Pendiente de confirmar</span>
   ===================================================================== */
.ac-e-porpagar  {--ac-e-fondo:var(--ac-porpagar-fondo);  --ac-e-texto:var(--ac-porpagar-texto);  --ac-e-filete:var(--ac-porpagar-filete);  --ac-e-borde:var(--ac-porpagar-filete);--ac-e-icono:var(--ac-i-circle-dashed);--ac-e-glifo:var(--ac-i-circle-dashed)}
.ac-e-pendiente {--ac-e-fondo:var(--ac-pendiente-fondo); --ac-e-texto:var(--ac-pendiente-texto); --ac-e-filete:var(--ac-pendiente-filete); --ac-e-borde:transparent;            --ac-e-icono:var(--ac-i-hourglass);    --ac-e-glifo:var(--ac-i-hourglass)}
.ac-e-confirmado{--ac-e-fondo:var(--ac-confirmado-fondo);--ac-e-texto:var(--ac-confirmado-texto);--ac-e-filete:var(--ac-confirmado-filete);--ac-e-borde:transparent;            --ac-e-icono:var(--ac-i-circle-check); --ac-e-glifo:var(--ac-i-check)}
.ac-e-bloqueado {--ac-e-fondo:var(--ac-bloqueado-fondo); --ac-e-texto:var(--ac-bloqueado-texto); --ac-e-filete:var(--ac-bloqueado-filete); --ac-e-borde:transparent;            --ac-e-icono:var(--ac-i-lock);         --ac-e-glifo:var(--ac-i-lock)}
.ac-e-info      {--ac-e-fondo:var(--ac-info-fondo);      --ac-e-texto:var(--ac-info-texto);      --ac-e-filete:var(--ac-info-filete);      --ac-e-borde:var(--ac-info-filete);   --ac-e-icono:var(--ac-i-info);         --ac-e-glifo:var(--ac-i-info)}
.ac-e-error     {--ac-e-fondo:var(--ac-error-fondo);     --ac-e-texto:var(--ac-error-texto);     --ac-e-filete:var(--ac-error-filete);     --ac-e-borde:transparent;            --ac-e-icono:var(--ac-i-circle-x);     --ac-e-glifo:var(--ac-i-x)}

.ac-estado{display:inline-flex;align-items:center;gap:var(--ac-s-2);min-height:24px;padding:2px var(--ac-s-3) 2px var(--ac-s-2);vertical-align:middle;
  border:1px solid var(--ac-e-borde,transparent);border-radius:var(--ac-r-full);background:var(--ac-e-fondo,var(--ac-bloqueado-fondo));color:var(--ac-e-texto,var(--ac-bloqueado-texto));
  font:600 var(--ac-t-13)/var(--ac-lh-ajustado) var(--ac-f-texto);white-space:nowrap}
.ac-estado::before{content:"";flex:none;width:var(--ac-ico-xs);height:var(--ac-ico-xs);background:currentColor;
  -webkit-mask:var(--ac-e-icono,var(--ac-i-info)) center/contain no-repeat;mask:var(--ac-e-icono,var(--ac-i-info)) center/contain no-repeat}
.ac-estado:has(>.ac-ico)::before{content:none}                                      /* icono propio (p. ej. una cama en «Con alojamiento») */
.ac-estado>.ac-ico{width:var(--ac-ico-xs);height:var(--ac-ico-xs);stroke-width:2.2}
[data-modo="club"] .ac-estado{min-height:28px;font-size:var(--ac-t-14);padding-right:var(--ac-s-3)}

/* Icono de estado en círculo: pasos del club, filas de lista */
.ac-marca-estado{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--ac-r-full);
  border:1px solid var(--ac-e-borde,transparent);background:var(--ac-e-fondo,var(--ac-bloqueado-fondo));color:var(--ac-e-texto,var(--ac-bloqueado-texto))}
.ac-marca-estado::before{content:"";width:var(--ac-ico-s);height:var(--ac-ico-s);background:currentColor;
  -webkit-mask:var(--ac-e-glifo,var(--ac-i-lock)) center/contain no-repeat;mask:var(--ac-e-glifo,var(--ac-i-lock)) center/contain no-repeat}

/* =====================================================================
   4 · BARRA DE PAGO · verde confirmado · rayado ámbar avisado · gris por pagar · marca del mínimo
   El tramo «por pagar» es la pista gris con filete de control (3:1); su muestra de la leyenda
   (ac-pago__muestra--falta) se pinta igual, para que leyenda y barra digan lo mismo.
   <div class="ac-pago" style="--ac-pago-ok:20%;--ac-pago-avisado:30%;--ac-pago-min:50%">
     <div class="ac-pago__barra" role="img" aria-label="Confirmado 20 %, avisado 30 %, mínimo 50 %">
       <span class="ac-pago__pista"><span class="ac-pago__ok"></span><span class="ac-pago__avisado"></span></span>
       <span class="ac-pago__minimo"><span>Mínimo 843 €</span></span></div>
     <div class="ac-pago__leyenda">…</div></div>
   ===================================================================== */
.ac-pago{display:grid;gap:var(--ac-s-3)}
.ac-pago__barra{position:relative;height:10px}
.ac-pago__barra:has(.ac-pago__minimo){margin-bottom:var(--ac-s-5)}
[data-modo="club"] .ac-pago__barra{height:14px}
.ac-pago__pista{position:absolute;inset:0;display:flex;overflow:hidden;border-radius:var(--ac-r-1);background:var(--ac-linea);box-shadow:inset 0 0 0 1px var(--ac-borde-control)}
.ac-pago__ok{flex:none;width:var(--ac-pago-ok,0%);background:var(--ac-confirmado-filete)}
.ac-pago__avisado{flex:none;width:var(--ac-pago-avisado,0%);
  background:repeating-linear-gradient(-45deg,var(--ac-pendiente-filete) 0 4px,var(--ac-pendiente-fondo) 4px 8px)}
.ac-pago__minimo{position:absolute;top:-4px;bottom:-4px;left:var(--ac-pago-min,50%);width:2px;margin-left:-1px;border-radius:1px;background:var(--ac-tinta)}
.ac-pago__minimo>span{position:absolute;top:calc(100% + var(--ac-s-1));left:0;transform:translateX(calc(-1 * var(--ac-pago-min,50%)));
  white-space:nowrap;font:600 var(--ac-t-12)/1 var(--ac-f-texto);color:var(--ac-texto-2)}
[data-modo="club"] .ac-pago__minimo>span{font-size:var(--ac-t-14)}
.ac-pago__leyenda{display:flex;flex-wrap:wrap;gap:var(--ac-s-1) var(--ac-s-4);margin:0;font-size:var(--ac-t-peq);color:var(--ac-texto-2)}
.ac-pago__leyenda>*{display:inline-flex;align-items:center;gap:var(--ac-s-2)}
.ac-pago__leyenda b{color:var(--ac-texto);font-weight:700;font-variant-numeric:tabular-nums}
[data-modo="club"] .ac-pago__leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:var(--ac-s-3)}
[data-modo="club"] .ac-pago__leyenda>*{display:grid;grid-template-columns:auto 1fr;gap:var(--ac-s-1) var(--ac-s-2);align-items:center}
[data-modo="club"] .ac-pago__leyenda b{grid-column:1 / -1;font:var(--ac-p-marca) var(--ac-t-32)/1 var(--ac-f-marca)}
.ac-pago__muestra{display:inline-block;flex:none;width:12px;height:12px;border-radius:2px;background:var(--ac-linea)}
.ac-pago__muestra--ok{background:var(--ac-confirmado-filete)}
.ac-pago__muestra--avisado{background:repeating-linear-gradient(-45deg,var(--ac-pendiente-filete) 0 3px,var(--ac-pendiente-fondo) 3px 6px)}
.ac-pago__muestra--falta{background:var(--ac-linea);box-shadow:inset 0 0 0 1px var(--ac-borde-control)}   /* = el tramo gris de la pista */

/* =====================================================================
   5 · AVISO EN LÍNEA (fondo + filete, como el aviso del correo) y TOAST
   ===================================================================== */
.ac-aviso{position:relative;display:grid;gap:var(--ac-s-1);padding:var(--ac-s-3) var(--ac-s-4) var(--ac-s-3) calc(var(--ac-s-4) + var(--ac-ico-m) + var(--ac-s-3));
  border-radius:var(--ac-r-2);background:var(--ac-e-fondo,var(--ac-info-fondo));box-shadow:inset 4px 0 0 var(--ac-e-filete,var(--ac-info-filete));color:var(--ac-texto)}
.ac-aviso::before{content:"";position:absolute;left:var(--ac-s-4);top:calc(var(--ac-s-3) + 1px);width:var(--ac-ico-m);height:var(--ac-ico-m);background:var(--ac-e-texto,var(--ac-info-texto));
  -webkit-mask:var(--ac-e-icono,var(--ac-i-info)) center/contain no-repeat;mask:var(--ac-e-icono,var(--ac-i-info)) center/contain no-repeat}
.ac-aviso__titulo{margin:0;font-weight:700;color:var(--ac-e-texto,var(--ac-texto))}
.ac-aviso__texto{margin:0;font-size:var(--ac-t-peq);color:var(--ac-texto)}
.ac-aviso__acciones{display:flex;flex-wrap:wrap;gap:var(--ac-s-2);margin-top:var(--ac-s-2)}

.ac-toasts{position:fixed;left:0;right:0;bottom:calc(var(--ac-s-4) + env(safe-area-inset-bottom));z-index:var(--ac-z-toast);
  display:grid;justify-items:center;gap:var(--ac-s-2);padding:0 var(--ac-s-4);pointer-events:none}
.ac-toasts--arriba{top:calc(var(--ac-s-4) + env(safe-area-inset-top));bottom:auto}
.ac-toasts--arriba .ac-toast{animation-name:ac-baja}
.ac-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--ac-s-3);width:100%;max-width:440px;min-height:48px;
  padding:var(--ac-s-2) var(--ac-s-2) var(--ac-s-2) var(--ac-s-3);border-radius:var(--ac-r-2);background:var(--ac-tinta);color:var(--ac-sobre-oscuro);
  box-shadow:var(--ac-sombra-2);font:600 var(--ac-t-14)/1.3 var(--ac-f-texto);animation:ac-sube var(--ac-dur-lenta) var(--ac-ease)}
.ac-toast.is-saliendo{opacity:0;transform:translateY(8px);transition:opacity var(--ac-dur) var(--ac-ease),transform var(--ac-dur) var(--ac-ease)}
.ac-toast__ico{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--ac-r-full);background:var(--ac-e-filete,var(--ac-confirmado-filete))}
.ac-toast__ico::before{content:"";width:var(--ac-ico-xs);height:var(--ac-ico-xs);background:var(--ac-sobre-oscuro);
  -webkit-mask:var(--ac-e-glifo,var(--ac-i-check)) center/contain no-repeat;mask:var(--ac-e-glifo,var(--ac-i-check)) center/contain no-repeat}
.ac-toast.ac-e-porpagar .ac-toast__ico,.ac-toast.ac-e-info .ac-toast__ico{background:transparent}
.ac-toast.ac-e-porpagar .ac-toast__ico::before,.ac-toast.ac-e-info .ac-toast__ico::before{width:var(--ac-ico-m);height:var(--ac-ico-m)}
.ac-toast__texto{flex:1;min-width:0}
.ac-toast__accion{flex:none;min-height:36px;padding:0 var(--ac-s-2);border:0;border-radius:var(--ac-r-1);background:none;color:var(--ac-sobre-oscuro);cursor:pointer;
  font:700 var(--ac-t-14)/1 var(--ac-f-texto);text-decoration:underline;text-underline-offset:3px}
.ac-toast__accion:hover{background:var(--ac-sobre-oscuro-activo)}
.ac-toast__cerrar{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:var(--ac-r-1);background:none;color:var(--ac-sobre-oscuro-2);cursor:pointer}
.ac-toast__cerrar::before{content:"";width:var(--ac-ico-s);height:var(--ac-ico-s);background:currentColor;
  -webkit-mask:var(--ac-i-x) center/contain no-repeat;mask:var(--ac-i-x) center/contain no-repeat}
.ac-toast__cerrar:hover{color:var(--ac-sobre-oscuro);background:var(--ac-sobre-oscuro-activo)}

/* =====================================================================
   6 · TARJETA, CIFRA, TABLA (operación) y LISTA (club)
   ===================================================================== */
.ac-tarjeta{display:grid;gap:var(--ac-s-3);align-content:start;padding:var(--ac-pad-tarjeta);border:1px solid var(--ac-linea);border-radius:var(--ac-r-2);
  background:var(--ac-superficie);box-shadow:var(--ac-sombra-1)}
.ac-tarjeta__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ac-s-2) var(--ac-s-3)}
.ac-tarjeta__titulo{margin:0;font:700 var(--ac-t-titulo-tarjeta)/var(--ac-lh-ajustado) var(--ac-f-texto);color:var(--ac-texto)}
[data-modo="club"] .ac-tarjeta__titulo{font:900 var(--ac-t-titulo-tarjeta)/1 var(--ac-f-marca);text-transform:uppercase}
.ac-tarjeta__texto{margin:0;color:var(--ac-texto-2)}
.ac-tarjeta__texto b{color:var(--ac-texto)}

/* Cifra que filtra: <button class="ac-kpi" aria-pressed="false"> */
.ac-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--ac-s-3)}
.ac-kpi{display:grid;gap:var(--ac-s-2);align-content:start;margin:0;padding:var(--ac-s-3) var(--ac-s-4);border:1px solid var(--ac-linea);border-radius:var(--ac-r-2);
  background:var(--ac-superficie);color:var(--ac-texto);text-align:left;font:inherit;cursor:pointer}
div.ac-kpi,span.ac-kpi{cursor:default}
button.ac-kpi:hover{border-color:var(--ac-linea-fuerte)}
.ac-kpi[aria-pressed="true"]{border-color:var(--ac-tinta);box-shadow:inset 0 0 0 1px var(--ac-tinta)}
.ac-kpi__cifra{font:var(--ac-p-marca) var(--ac-t-32)/1 var(--ac-f-marca);font-variant-numeric:tabular-nums}
.ac-kpi__cifra.ac-e-pendiente{color:var(--ac-pendiente-texto)}
.ac-kpi__cifra.ac-e-error{color:var(--ac-error-texto)}
.ac-kpi__etq{display:flex;align-items:center;gap:var(--ac-s-2);font:600 var(--ac-t-12)/var(--ac-lh-ajustado) var(--ac-f-texto);text-transform:uppercase;letter-spacing:var(--ac-ls-etiqueta);color:var(--ac-texto-2)}
.ac-kpi__sub{font-size:var(--ac-t-13);color:var(--ac-texto-3)}
/* Cifras en banda (operación): una sola caja con un filete entre celdas, como la maqueta del panel.
   <div class="ac-cifras ac-cifras--banda"><div class="ac-kpi"><span class="ac-kpi__etq">Hoteles</span>
     <span class="ac-kpi__cifra">12</span><span class="ac-kpi__sub">3 operativos</span></div> …</div>
   Etiquetas cortas, de una línea (la explicación, en la ayuda): así todas las cifras quedan a la misma altura.
   Cuántas columnas, lo decide la pantalla (p. ej. 3×2 en vez de 4+2). */
.ac-cifras--banda{gap:0;overflow:hidden;border:1px solid var(--ac-linea);border-radius:var(--ac-r-2);background:var(--ac-superficie);box-shadow:var(--ac-sombra-1)}
.ac-cifras--banda>.ac-kpi{gap:var(--ac-s-1);padding:var(--ac-s-3) var(--ac-s-4);border:0;border-radius:0;box-shadow:-1px -1px 0 var(--ac-linea)}
.ac-cifras--banda .ac-kpi__etq{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ac-t-13);text-transform:none;letter-spacing:0}
.ac-cifras--banda .ac-kpi__cifra{font-size:var(--ac-t-24)}

.ac-escudo{flex:none;width:28px;height:28px;padding:2px;border:1px solid var(--ac-linea);border-radius:var(--ac-r-1);background:var(--ac-blanco);object-fit:contain}
.ac-escudo--m{width:40px;height:40px;padding:3px}
.ac-escudo--l{width:64px;height:64px;padding:6px;border-radius:var(--ac-r-2)}
/* Club sin escudo: sus iniciales (<span class="ac-escudo ac-escudo--iniciales" aria-hidden="true">CDE</span>) */
.ac-escudo--iniciales{display:inline-grid;place-items:center;padding:0;background:var(--ac-gris-50);color:var(--ac-texto-2);
  font:700 var(--ac-t-12)/1 var(--ac-f-marca);letter-spacing:.02em;text-transform:uppercase}
.ac-escudo--m.ac-escudo--iniciales{font-size:var(--ac-t-14)}
.ac-escudo--l.ac-escudo--iniciales{font-size:var(--ac-t-20)}
.ac-avatar{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--ac-r-full);background:var(--ac-tinta);color:var(--ac-sobre-oscuro);
  font:700 var(--ac-t-12)/1 var(--ac-f-texto);letter-spacing:.02em}

/* Tabla densa. Va siempre dentro de .ac-tabla-marco (bordes y desplazamiento lateral).
   Con .ac-tabla--apilable y data-etq en cada <td>, cuando el marco mide menos de 600 px
   (móvil, o un panel lateral estrecho) cada fila pasa a ficha. */
.ac-tabla-marco{container:ac-tabla / inline-size;width:100%;min-width:0;overflow-x:auto;border:1px solid var(--ac-linea);border-radius:var(--ac-r-2);background:var(--ac-superficie);box-shadow:var(--ac-sombra-1)}
.ac-tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ac-t-peq);font-variant-numeric:tabular-nums;color:var(--ac-texto)}
.ac-tabla th{position:sticky;top:0;z-index:1;padding:var(--ac-s-3);border-bottom:1px solid var(--ac-linea);background:var(--ac-superficie-2);text-align:left;white-space:nowrap;
  font:600 var(--ac-t-12)/1 var(--ac-f-texto);text-transform:uppercase;letter-spacing:var(--ac-ls-etiqueta);color:var(--ac-texto-3)}
.ac-tabla td{height:var(--ac-fila);padding:var(--ac-s-2) var(--ac-s-3);border-bottom:1px solid var(--ac-linea);vertical-align:middle}
.ac-tabla tbody tr:last-child td{border-bottom:0}
.ac-tabla tbody tr[data-href],.ac-tabla--clic tbody tr{cursor:pointer}
.ac-tabla tbody tr:hover td{background:var(--ac-superficie-2)}
.ac-tabla tbody tr[aria-selected="true"] td{background:var(--ac-superficie-2)}
.ac-tabla tbody tr[aria-selected="true"] td:first-child{box-shadow:inset 3px 0 0 var(--ac-acento)}
.ac-tabla .ac-dcha{text-align:right}
.ac-tabla__club{display:flex;align-items:center;gap:var(--ac-s-2);font-weight:600;min-width:0}
.ac-tabla__club span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container ac-tabla (max-width:599px){
  .ac-tabla--apilable,.ac-tabla--apilable tbody,.ac-tabla--apilable tr,.ac-tabla--apilable td{display:block}
  .ac-tabla--apilable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ac-tabla--apilable tr{padding:var(--ac-s-2) 0;border-bottom:1px solid var(--ac-linea)}
  .ac-tabla--apilable tbody tr:last-child{border-bottom:0}
  .ac-tabla--apilable td{display:flex;align-items:center;justify-content:space-between;gap:var(--ac-s-3);height:auto;min-height:36px;border:0;padding:var(--ac-s-1) var(--ac-s-4);text-align:right}
  .ac-tabla--apilable td[data-etq]::before{content:attr(data-etq);flex:none;font:600 var(--ac-t-12)/1 var(--ac-f-texto);text-transform:uppercase;letter-spacing:var(--ac-ls-etiqueta);color:var(--ac-texto-3);text-align:left}
  .ac-tabla--apilable td:first-child{font-size:var(--ac-t-base)}
  .ac-tabla--apilable tbody tr[aria-selected="true"] td{box-shadow:inset 3px 0 0 var(--ac-acento)}
}

/* Lista táctil (club): filas de 56 px con icono de estado, texto y dato al final */
.ac-lista{margin:0;padding:0;list-style:none}
.ac-lista>li{display:flex;align-items:center;gap:var(--ac-s-3);min-height:var(--ac-fila);padding:var(--ac-s-3) 0;border-bottom:1px solid var(--ac-linea)}
.ac-lista>li:last-child{border-bottom:0}
.ac-lista>li>a{display:flex;align-items:center;gap:var(--ac-s-3);flex:1;min-height:var(--ac-fila);margin:calc(-1 * var(--ac-s-3)) 0;padding:var(--ac-s-3) 0;color:inherit;text-decoration:none}
.ac-lista>li>a:hover .ac-lista__titulo{text-decoration:underline;text-underline-offset:3px}
.ac-lista__txt{flex:1;min-width:0}
.ac-lista__titulo{display:block;font-weight:600;color:var(--ac-texto)}
.ac-lista__sub{display:block;font-size:var(--ac-t-peq);color:var(--ac-texto-2)}
.ac-lista__fin{flex:none;display:inline-flex;align-items:center;gap:var(--ac-s-2);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ac-texto)}
.ac-lista__fin .ac-ico{color:var(--ac-texto-3)}

/* =====================================================================
   7 · DATOS · pares etiqueta / valor (<dl class="ac-datos">)
   ===================================================================== */
.ac-datos{margin:0}
.ac-dato{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ac-s-3);padding:var(--ac-s-3) 0;border-bottom:1px solid var(--ac-linea)}
.ac-dato:last-child{border-bottom:0}
.ac-dato dt{flex:none;color:var(--ac-texto-2)}
.ac-dato dd{margin:0;min-width:0;font-weight:600;text-align:right;overflow-wrap:anywhere}

/* =====================================================================
   8 · PANEL LATERAL (operación) y HOJA INFERIOR (club y móvil)
   Una sola forma: cabecera, cuerpo que se desplaza y pie fijo con las acciones.
   Se abren con acUI.hoja(el): velo, foco atrapado, Esc y vuelta del foco.
   ===================================================================== */
.ac-velo{position:fixed;inset:0;z-index:var(--ac-z-capa);background:var(--ac-velo);animation:ac-aparece var(--ac-dur) var(--ac-ease)}
.ac-lateral,.ac-hoja{position:fixed;z-index:var(--ac-z-capa);display:flex;flex-direction:column;background:var(--ac-superficie);color:var(--ac-texto);box-shadow:var(--ac-sombra-2)}
.ac-lateral:focus,.ac-hoja:focus,.ac-dialogo__caja:focus,.ac-confirma:focus{outline:none}   /* reciben el foco al abrirse: el anillo va en sus controles */
.ac-lateral{top:0;right:0;bottom:0;width:min(520px,100%);animation:ac-entra-dcha var(--ac-dur-lenta) var(--ac-ease)}
.ac-lateral--ancho{width:min(880px,100%)}   /* para una ficha con tabla (p. ej. los costes de un hotel) */
.ac-hoja{left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;border-radius:var(--ac-r-2) var(--ac-r-2) 0 0;padding-bottom:env(safe-area-inset-bottom);animation:ac-sube var(--ac-dur-lenta) var(--ac-ease)}
.ac-hoja::before{content:"";flex:none;align-self:center;width:40px;height:4px;margin-top:var(--ac-s-2);border-radius:2px;background:var(--ac-linea-fuerte)}
@media (min-width:600px){
  .ac-hoja{left:50%;right:auto;bottom:var(--ac-s-6);width:min(560px,calc(100% - var(--ac-s-8)));border-radius:var(--ac-r-2);transform:translateX(-50%);animation-name:ac-sube-centro}
  .ac-hoja::before{content:none}
}
.ac-lateral__cab,.ac-hoja__cab{flex:none;display:flex;align-items:flex-start;gap:var(--ac-s-3);padding:var(--ac-s-4) var(--ac-s-5);border-bottom:1px solid var(--ac-linea)}
.ac-hoja__cab{border-bottom:0;padding-bottom:var(--ac-s-2)}
.ac-lateral__id,.ac-hoja__id{flex:1;min-width:0;display:grid;gap:var(--ac-s-1);justify-items:start}
.ac-lateral__id>.ac-estado,.ac-hoja__id>.ac-estado{max-width:100%;white-space:normal}   /* en 320 px, dos líneas antes que salirse */
.ac-lateral__nombre,.ac-hoja__titulo{margin:0;font:var(--ac-p-marca) var(--ac-t-20)/1.1 var(--ac-f-marca);text-transform:uppercase;letter-spacing:.01em;color:var(--ac-texto)}
[data-modo="club"] .ac-hoja__titulo{font-size:var(--ac-t-24)}
.ac-lateral__sub,.ac-hoja__sub{margin:0;font-size:var(--ac-t-peq);color:var(--ac-texto-2)}
.ac-lateral__cuerpo,.ac-hoja__cuerpo{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:var(--ac-s-4);align-content:start;padding:var(--ac-s-4) var(--ac-s-5)}
.ac-lateral__cuerpo>*,.ac-hoja__cuerpo>*{min-width:0}   /* lo ancho (tabla, pestañas) se desplaza dentro; no ensancha la columna */
.ac-lateral__pie,.ac-hoja__pie{flex:none;display:flex;flex-wrap:wrap;gap:var(--ac-s-2);justify-content:flex-end;padding:var(--ac-s-3) var(--ac-s-5);border-top:1px solid var(--ac-linea);background:var(--ac-superficie)}
.ac-hoja__pie{border-top:0;padding-bottom:var(--ac-s-5)}
.ac-hoja__pie .ac-btn--bloque{flex:1 1 100%}
/* Botón de cerrar (icono x). Lleva aria-label */
.ac-cerrar{display:grid;place-items:center;flex:none;width:var(--ac-tactil);height:var(--ac-tactil);margin:calc(-1 * var(--ac-s-2)) calc(-1 * var(--ac-s-3)) 0 0;
  border:0;border-radius:var(--ac-r-2);background:none;color:var(--ac-texto-2);cursor:pointer}
.ac-cerrar::before{content:"";width:var(--ac-ico-m);height:var(--ac-ico-m);background:currentColor;-webkit-mask:var(--ac-i-x) center/contain no-repeat;mask:var(--ac-i-x) center/contain no-repeat}
.ac-cerrar:hover{background:var(--ac-linea);color:var(--ac-texto)}

/* =====================================================================
   9 · CONFIRMACIÓN EN LÍNEA y DIÁLOGO · sustituyen a alert() / confirm() / prompt()
   Los pinta acUI.confirmar(). Lo irreversible pide escribir el nombre del club.
   ===================================================================== */
.ac-confirma{display:grid;gap:var(--ac-s-3);padding:var(--ac-s-3) var(--ac-s-4);border:1px solid var(--ac-linea-fuerte);border-radius:var(--ac-r-2);background:var(--ac-superficie-2);
  color:var(--ac-texto);animation:ac-aparece var(--ac-dur) var(--ac-ease)}
.ac-confirma--peligro{border-color:var(--ac-error-filete);background:var(--ac-error-fondo)}
.ac-confirma__titulo{margin:0;font-weight:700;color:var(--ac-texto)}
.ac-confirma__texto{margin:0;font-size:var(--ac-t-peq);color:var(--ac-texto-2)}
.ac-confirma__cab{display:grid;gap:var(--ac-s-1)}
.ac-confirma__acciones{display:flex;flex-wrap:wrap;gap:var(--ac-s-2);justify-content:flex-end;align-items:center}

.ac-dialogo{position:fixed;inset:0;z-index:var(--ac-z-dialogo);display:grid;place-items:end center;padding:var(--ac-s-4) 0 0}
.ac-dialogo::before{content:"";position:absolute;inset:0;background:var(--ac-velo);animation:ac-aparece var(--ac-dur) var(--ac-ease)}
.ac-dialogo__caja{position:relative;display:grid;gap:var(--ac-s-4);width:100%;max-height:100%;overflow:auto;padding:var(--ac-s-5) var(--ac-s-5) calc(var(--ac-s-5) + env(safe-area-inset-bottom));
  border-radius:var(--ac-r-2) var(--ac-r-2) 0 0;background:var(--ac-superficie);color:var(--ac-texto);box-shadow:var(--ac-sombra-2);animation:ac-sube var(--ac-dur-lenta) var(--ac-ease)}
.ac-dialogo__caja.ac-confirma--peligro{border:0;box-shadow:var(--ac-sombra-2),inset 0 4px 0 var(--ac-error-filete)}
.ac-dialogo .ac-confirma__titulo{font-size:var(--ac-t-16)}
[data-modo="club"] .ac-dialogo .ac-confirma__titulo{font:900 var(--ac-t-24)/1.05 var(--ac-f-marca);text-transform:uppercase}
@media (min-width:600px){
  .ac-dialogo{place-items:center;padding:var(--ac-s-6)}
  .ac-dialogo__caja{width:min(460px,100%);border-radius:var(--ac-r-2);padding-bottom:var(--ac-s-5)}
}
@media (max-width:599px){ .ac-dialogo .ac-confirma__acciones .ac-btn{flex:1 1 0} }

/* =====================================================================
   10 · PESTAÑAS y FILTROS
   ===================================================================== */
/* Van a todo el ancho de su contenedor y se desplazan de lado si no caben. contain:inline-size = no aportan
   ancho mínimo: la suma de las pestañas no empuja a la rejilla que las contiene (sin él, la página se
   desborda en el móvil). En una fila flex, dales flex:1 o un ancho. */
.ac-pestanas{display:flex;gap:var(--ac-s-1);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ac-linea);contain:inline-size}
.ac-pestanas::-webkit-scrollbar{display:none}
.ac-pestana{display:inline-flex;align-items:center;gap:var(--ac-s-2);flex:none;min-height:var(--ac-ctl);margin:0 0 -1px;padding:0 var(--ac-s-3);border:0;border-bottom:2px solid transparent;
  background:none;color:var(--ac-texto-2);cursor:pointer;white-space:nowrap;text-decoration:none;font:600 var(--ac-t-base)/1 var(--ac-f-texto)}
.ac-pestana:hover{color:var(--ac-texto)}
.ac-pestana[aria-selected="true"],.ac-pestana[aria-current="page"]{color:var(--ac-texto);border-bottom-color:var(--ac-acento)}
.ac-pestana .ac-ico{width:var(--ac-ico-s);height:var(--ac-ico-s)}
.ac-pestana__n{min-width:20px;height:20px;padding:0 6px;border-radius:var(--ac-r-full);background:var(--ac-gris-100);color:var(--ac-texto);
  font:700 var(--ac-t-12)/20px var(--ac-f-texto);text-align:center;font-variant-numeric:tabular-nums}

.ac-filtros{display:flex;flex-wrap:wrap;gap:var(--ac-s-2)}
.ac-filtro{display:inline-flex;align-items:center;gap:var(--ac-s-2);min-height:var(--ac-filtro-h);margin:0;padding:0 var(--ac-s-3);border:1px solid var(--ac-linea-fuerte);border-radius:var(--ac-r-full);
  background:var(--ac-superficie);color:var(--ac-texto);cursor:pointer;white-space:nowrap;font:600 var(--ac-t-13)/1 var(--ac-f-texto)}
.ac-filtro:hover{border-color:var(--ac-texto)}
.ac-filtro .ac-ico{width:var(--ac-ico-xs);height:var(--ac-ico-xs)}
.ac-filtro b{font-weight:600;color:var(--ac-texto-3);font-variant-numeric:tabular-nums}
.ac-filtro[aria-pressed="true"]{border-color:var(--ac-tinta);background:var(--ac-tinta);color:var(--ac-sobre-oscuro)}
.ac-filtro[aria-pressed="true"] b{color:var(--ac-sobre-oscuro-2)}
[data-modo="club"] .ac-filtro{font-size:var(--ac-t-14)}

/* Conmutador segmentado (Tabla / Tarjetas, Lista / Tabla): una opción marcada sobre una pista gris.
   <div class="ac-segmentado" role="group" aria-label="Vista">
     <button type="button" class="ac-segmentado__op" aria-pressed="true"><svg class="ac-ico">…</svg>Tabla</button> …</div> */
.ac-segmentado{display:inline-flex;flex:none;gap:2px;padding:2px;border-radius:var(--ac-r-2);background:var(--ac-linea)}
.ac-segmentado__op{display:inline-flex;align-items:center;gap:var(--ac-s-2);min-height:calc(var(--ac-ctl-sm) - 4px);margin:0;padding:0 var(--ac-s-3);border:0;border-radius:var(--ac-r-1);
  background:none;color:var(--ac-texto-2);cursor:pointer;white-space:nowrap;font:600 var(--ac-t-13)/1 var(--ac-f-texto)}
.ac-segmentado__op:hover{color:var(--ac-texto)}
.ac-segmentado__op[aria-pressed="true"]{background:var(--ac-superficie);color:var(--ac-texto);box-shadow:var(--ac-sombra-1)}
.ac-segmentado__op .ac-ico{width:var(--ac-ico-s);height:var(--ac-ico-s)}

/* =====================================================================
   11 · CAMPOS y BUSCADOR · etiqueta visible, ayuda y error con icono y texto
   ===================================================================== */
.ac-campo{display:grid;gap:var(--ac-s-2);min-width:0}
.ac-campo__etq{font:600 var(--ac-t-peq)/var(--ac-lh-ajustado) var(--ac-f-texto);color:var(--ac-texto)}
.ac-campo__etq small{font-weight:400;color:var(--ac-texto-2)}
.ac-input{display:block;width:100%;min-height:var(--ac-ctl);margin:0;padding:0 var(--ac-s-3);border:1px solid var(--ac-borde-control);border-radius:var(--ac-r-2);
  background:var(--ac-blanco);color:var(--ac-texto);font:400 var(--ac-t-16)/var(--ac-lh-ajustado) var(--ac-f-texto);
  -webkit-appearance:none;appearance:none}
@media (min-width:600px) and (pointer:fine){ .ac-input{font-size:var(--ac-t-base)} }   /* en el móvil, 16 px: iOS no hace zoom al entrar */
textarea.ac-input{min-height:96px;padding:var(--ac-s-3);line-height:var(--ac-lh-texto);resize:vertical}
.ac-input::placeholder{color:var(--ac-texto-3);opacity:1}
.ac-input:hover{border-color:var(--ac-texto-2)}
.ac-input:focus,.ac-input.is-foco{outline:0;border-color:var(--ac-tinta);box-shadow:0 0 0 3px var(--ac-halo)}
.ac-input[disabled],.ac-input[readonly]{background:var(--ac-superficie-2);color:var(--ac-texto-2)}
.ac-select{position:relative;display:block}
.ac-select .ac-input{padding-right:calc(var(--ac-s-3) + var(--ac-ico-s) + var(--ac-s-2));cursor:pointer}
.ac-select::after{content:"";position:absolute;right:var(--ac-s-3);top:50%;width:var(--ac-ico-s);height:var(--ac-ico-s);margin-top:calc(var(--ac-ico-s) / -2);pointer-events:none;
  background:var(--ac-texto-2);-webkit-mask:var(--ac-i-chevron-down) center/contain no-repeat;mask:var(--ac-i-chevron-down) center/contain no-repeat}
.ac-campo__ayuda{margin:0;font-size:var(--ac-t-peq);color:var(--ac-texto-2)}
.ac-campo--error .ac-input,.ac-input[aria-invalid="true"]{border-color:var(--ac-error-filete)}
.ac-campo--error .ac-input:focus,.ac-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--ac-error-fondo)}
.ac-campo__error{display:flex;align-items:flex-start;gap:var(--ac-s-2);margin:0;font:600 var(--ac-t-peq)/1.3 var(--ac-f-texto);color:var(--ac-error-texto)}
.ac-campo__error::before{content:"";flex:none;width:var(--ac-ico-s);height:var(--ac-ico-s);margin-top:1px;background:currentColor;
  -webkit-mask:var(--ac-i-triangle-alert) center/contain no-repeat;mask:var(--ac-i-triangle-alert) center/contain no-repeat}
.ac-campo__error:empty{display:none}
.ac-casilla{display:flex;align-items:flex-start;gap:var(--ac-s-3);min-height:var(--ac-tactil);padding:var(--ac-s-2) 0;cursor:pointer}
.ac-casilla input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ac-tinta);cursor:pointer}

.ac-buscador{position:relative}
.ac-buscador__campo{display:flex;align-items:center;gap:var(--ac-s-2);min-height:var(--ac-ctl);padding:0 var(--ac-s-2) 0 var(--ac-s-3);border:1px solid var(--ac-borde-control);
  border-radius:var(--ac-r-2);background:var(--ac-superficie);color:var(--ac-texto-3)}
.ac-buscador__campo:focus-within{border-color:var(--ac-tinta);box-shadow:0 0 0 3px var(--ac-halo)}
.ac-buscador__campo input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--ac-texto);font:400 var(--ac-t-16) var(--ac-f-texto)}
@media (min-width:600px) and (pointer:fine){ .ac-buscador__campo input{font-size:var(--ac-t-base)} }
.ac-tecla{display:inline-block;min-width:22px;padding:3px 6px;border:1px solid var(--ac-linea-fuerte);border-bottom-width:2px;border-radius:var(--ac-r-1);
  background:var(--ac-superficie-2);color:var(--ac-texto-2);font:600 var(--ac-t-12)/1 var(--ac-f-texto);text-align:center}

/* =====================================================================
   12 · NAVEGACIÓN DEL PANEL · barra lateral negra con filete rojo (D2, D4)
   5 entradas por trabajo (Hoy · Clubes · Alojamiento · Comercial · Tareas internas),
   separador y, abajo, Ajustes y Usuarios.
   ===================================================================== */
.ac-nav{display:flex;flex-direction:column;gap:2px;min-height:100%;padding:0 var(--ac-s-3) var(--ac-s-4);background:var(--ac-negro);color:var(--ac-sobre-oscuro)}
.ac-nav__marca{display:flex;align-items:center;gap:var(--ac-s-3);margin:0 calc(-1 * var(--ac-s-3)) var(--ac-s-3);padding:var(--ac-s-4) var(--ac-s-5);
  box-shadow:inset 0 -3px 0 var(--ac-rojo);color:inherit;text-decoration:none}
.ac-nav__marca img{width:32px;height:auto;flex:none}
.ac-nav__marca b{display:block;font:700 var(--ac-t-20)/1 var(--ac-f-marca);letter-spacing:.06em;text-transform:uppercase}
.ac-nav__marca small{display:block;margin-top:var(--ac-s-1);font:700 var(--ac-t-12)/1 var(--ac-f-marca);letter-spacing:var(--ac-ls-marca);text-transform:uppercase;color:var(--ac-sobre-oscuro-2)}
.ac-nav__item{display:flex;align-items:center;gap:var(--ac-s-3);min-height:40px;padding:0 var(--ac-s-3);border-radius:var(--ac-r-2);color:var(--ac-sobre-oscuro-2);
  text-decoration:none;font:600 var(--ac-t-14)/1.2 var(--ac-f-texto)}
.ac-nav__item:hover{background:var(--ac-sobre-oscuro-pasar);color:var(--ac-sobre-oscuro)}
.ac-nav__item[aria-current="page"]{background:var(--ac-sobre-oscuro-activo);color:var(--ac-sobre-oscuro);box-shadow:inset 3px 0 0 var(--ac-rojo)}
.ac-nav__n{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:var(--ac-r-full);background:var(--ac-blanco);color:var(--ac-tinta);
  font:700 var(--ac-t-12)/20px var(--ac-f-texto);text-align:center;font-variant-numeric:tabular-nums}
.ac-nav__sub{display:flex;align-items:center;min-height:32px;margin:-2px 0 2px calc(var(--ac-s-3) + var(--ac-ico-m) / 2);padding:0 var(--ac-s-3) 0 var(--ac-s-5);
  border-left:1px solid var(--ac-sobre-oscuro-linea);color:var(--ac-sobre-oscuro-2);text-decoration:none;font:600 var(--ac-t-13)/1.2 var(--ac-f-texto)}
.ac-nav__sub:hover{color:var(--ac-sobre-oscuro)}
.ac-nav__sub[aria-current="page"]{color:var(--ac-sobre-oscuro);border-left-color:var(--ac-rojo)}
.ac-nav__sep{height:1px;margin:var(--ac-s-3) var(--ac-s-1);background:var(--ac-sobre-oscuro-linea)}
.ac-nav__pie{margin-top:auto;display:flex;align-items:center;gap:var(--ac-s-3);padding:var(--ac-s-3) var(--ac-s-1) 0;border-top:1px solid var(--ac-sobre-oscuro-linea)}
.ac-nav__pie .ac-avatar{background:var(--ac-blanco);color:var(--ac-negro)}
.ac-nav__yo{flex:1;min-width:0;line-height:1.25}
.ac-nav__yo b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 var(--ac-t-13)/1.25 var(--ac-f-texto)}
.ac-nav__yo small{display:block;font-size:var(--ac-t-12);color:var(--ac-sobre-oscuro-2)}
.ac-nav__pie .ac-btn{min-height:32px;padding:0 var(--ac-s-3);border-color:var(--ac-sobre-oscuro-linea);color:var(--ac-sobre-oscuro);font-size:var(--ac-t-13)}
.ac-nav__pie .ac-btn:hover{background:var(--ac-sobre-oscuro-pasar)}

/* Barra superior del panel en el móvil (sin barra lateral): cromo negro con filete rojo */
.ac-barra-op{position:sticky;top:0;z-index:var(--ac-z-barra);display:flex;align-items:center;gap:var(--ac-s-3);min-height:56px;padding:var(--ac-s-2) var(--ac-s-4);
  background:var(--ac-negro);color:var(--ac-sobre-oscuro);box-shadow:inset 0 -3px 0 var(--ac-rojo)}
.ac-barra-op__marca{display:flex;align-items:center;gap:var(--ac-s-2);color:inherit;text-decoration:none}
.ac-barra-op__marca img{width:26px;height:auto}
.ac-barra-op__marca b{font:700 var(--ac-t-16)/1 var(--ac-f-marca);letter-spacing:.08em;text-transform:uppercase}
.ac-barra-op__marca small{font:700 var(--ac-t-12)/1 var(--ac-f-marca);letter-spacing:var(--ac-ls-marca);text-transform:uppercase;color:var(--ac-sobre-oscuro-2)}
.ac-barra-op__dcha{margin-left:auto;display:flex;align-items:center;gap:var(--ac-s-2)}
.ac-barra-op .ac-btn--fantasma{color:var(--ac-sobre-oscuro)}
.ac-barra-op .ac-btn--fantasma:hover:not([disabled],[aria-disabled="true"]){background:var(--ac-sobre-oscuro-activo)}

/* =====================================================================
   13 · BARRA INFERIOR · 5 secciones como máximo (área: Inicio · Pago · Inscripción · Pasos · Más)
   Fija abajo en el móvil; desde 1024 px desaparece (el panel tiene su barra lateral y el área, pestañas).
   <nav class="ac-barra-inf" aria-label="Secciones">
     <a class="ac-barra-inf__item" href="…" aria-current="page">
       <span class="ac-barra-inf__ico"><svg class="ac-ico" aria-hidden="true"><use href="…#i-credit-card"/></svg>
         <span class="ac-barra-inf__punto ac-e-pendiente"></span></span>
       <span class="ac-barra-inf__txt">Pago</span><span class="ac-sr">: pendiente de confirmar</span></a> …</nav>
   ===================================================================== */
.ac-barra-inf{position:fixed;left:0;right:0;bottom:0;z-index:var(--ac-z-barra);display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  padding:var(--ac-s-1) var(--ac-s-1) calc(var(--ac-s-1) + env(safe-area-inset-bottom));border-top:1px solid var(--ac-linea);background:var(--ac-superficie)}
.ac-barra-inf__item{display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:56px;padding:var(--ac-s-2) 0 var(--ac-s-1);border:0;background:none;color:var(--ac-texto-2);
  text-decoration:none;cursor:pointer;font:600 var(--ac-t-12)/1.1 var(--ac-f-texto);text-align:center;-webkit-tap-highlight-color:transparent}
.ac-barra-inf__item .ac-ico{width:var(--ac-ico-l);height:var(--ac-ico-l)}
.ac-barra-inf__txt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}   /* en pantallas de menos de 360 px */
.ac-barra-inf__item:hover{color:var(--ac-texto)}
.ac-barra-inf__item[aria-current="page"]{color:var(--ac-rojo)}
.ac-barra-inf__item[aria-current="page"]::before{content:"";position:absolute;top:calc(-1 * var(--ac-s-1) - 1px);left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--ac-rojo)}
.ac-barra-inf__ico{position:relative;display:inline-grid}
/* Punto de estado sobre el icono (p. ej. Pago con un aviso pendiente): el texto lo dice en .ac-sr */
.ac-barra-inf__punto{position:absolute;top:-2px;right:-5px;width:10px;height:10px;border-radius:var(--ac-r-full);border:2px solid var(--ac-superficie);background:var(--ac-e-filete,var(--ac-pendiente-filete))}
.ac-barra-inf__n{position:absolute;top:-6px;left:calc(100% - 8px);min-width:20px;height:18px;padding:0 5px;border-radius:var(--ac-r-full);border:2px solid var(--ac-superficie);
  background:var(--ac-tinta);color:var(--ac-sobre-oscuro);font:700 var(--ac-t-12)/14px var(--ac-f-texto);font-variant-numeric:tabular-nums}
@media (min-width:1024px){ .ac-barra-inf{display:none} }

/* =====================================================================
   14 · CABECERA DE OPERACIÓN · blanca, título en Akrobat, contador y acciones
   ===================================================================== */
.ac-cab-op{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ac-s-3) var(--ac-s-4);padding:var(--ac-s-4);background:var(--ac-superficie);border-bottom:1px solid var(--ac-linea)}
.ac-cab-op__txt{flex:1 1 240px;min-width:0}
.ac-cab-op__titulo{display:flex;align-items:baseline;gap:var(--ac-s-2);margin:0;font:700 var(--ac-t-24)/1 var(--ac-f-marca);text-transform:uppercase;letter-spacing:.01em;color:var(--ac-texto)}
.ac-cab-op__n{color:var(--ac-texto-3);font-variant-numeric:tabular-nums}
.ac-cab-op__sub{margin:var(--ac-s-2) 0 0;font-size:var(--ac-t-13);color:var(--ac-texto-2)}
.ac-cab-op__sub b{font-weight:600;color:var(--ac-texto)}
.ac-cab-op__acciones{display:flex;flex-wrap:wrap;gap:var(--ac-s-2)}
@media (min-width:1024px){
  .ac-cab-op{padding:var(--ac-s-5) var(--ac-s-6)}
  .ac-cab-op__titulo{font-size:var(--ac-t-32)}
}

/* =====================================================================
   15 · CABECERA DEL CLUB · degradado y triángulos del correo, escudo y nombre oblicuo
   ===================================================================== */
.ac-cab-club{container:ac-cab / inline-size;position:relative;isolation:isolate;overflow:hidden;display:grid;gap:var(--ac-s-4);padding:var(--ac-s-4) var(--ac-s-4) var(--ac-s-5);
  background:var(--ac-degradado-sombra),var(--ac-degradado);color:var(--ac-sobre-oscuro)}
.ac-cab-club::before{content:"";position:absolute;inset:0;z-index:-1;background:url("img/triangulos.webp") right center/cover no-repeat;mix-blend-mode:multiply;opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,black 75%);mask-image:linear-gradient(90deg,transparent 30%,black 75%)}
.ac-cab-club__marca{display:flex;align-items:center;gap:var(--ac-s-3)}
.ac-cab-club__logo{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--ac-r-2);background:var(--ac-blanco);box-shadow:var(--ac-sombra-1)}
.ac-cab-club__logo img{width:34px;height:auto}
.ac-cab-club__marca b{display:block;font:900 var(--ac-t-20)/1 var(--ac-f-marca);text-transform:uppercase;letter-spacing:.02em}
.ac-cab-club__marca small{display:block;margin-top:2px;font:700 var(--ac-t-13)/1.1 var(--ac-f-marca);text-transform:uppercase;letter-spacing:var(--ac-ls-marca)}
.ac-cab-club__dcha{margin-left:auto;display:flex;align-items:center;gap:var(--ac-s-2)}
.ac-cab-club__boton{display:inline-flex;align-items:center;gap:var(--ac-s-2);min-height:var(--ac-tactil);padding:0 var(--ac-s-3);border:1px solid var(--ac-sobre-oscuro-linea);border-radius:var(--ac-r-full);
  background:var(--ac-sobre-rojo-ficha);color:var(--ac-sobre-oscuro);text-decoration:none;cursor:pointer;font:700 var(--ac-t-16)/1 var(--ac-f-marca);letter-spacing:.06em}
.ac-cab-club__fila{display:flex;align-items:center;gap:var(--ac-s-4)}
.ac-cab-club__escudo{flex:none;width:72px;height:72px;padding:var(--ac-s-2);border-radius:var(--ac-r-2);background:var(--ac-blanco);object-fit:contain;box-shadow:var(--ac-sombra-2)}
.ac-cab-club__escudo.ac-escudo--iniciales{display:grid;place-items:center;color:var(--ac-tinta);font:900 var(--ac-t-24)/1 var(--ac-f-marca);text-transform:uppercase}
.ac-cab-club__id{min-width:0}
.ac-cab-club__kicker{margin:0 0 var(--ac-s-2);font:700 var(--ac-t-16)/1 var(--ac-f-marca);text-transform:uppercase;letter-spacing:var(--ac-ls-marca)}
.ac-cab-club__nombre{margin:0;font:900 var(--ac-t-44)/.9 var(--ac-f-marca);text-transform:uppercase;letter-spacing:.005em;overflow-wrap:break-word;
  transform:var(--ac-oblicua);transform-origin:0 100%}
.ac-cab-club__nombre--largo{font-size:var(--ac-t-32)}          /* nombres de más de ~14 letras */
.ac-cab-club__sub{margin:var(--ac-s-2) 0 0;font:600 var(--ac-t-16)/1.3 var(--ac-f-texto)}
.ac-cab-club__datos{display:flex;flex-wrap:wrap;gap:var(--ac-s-2);margin:0;padding:0;list-style:none}
.ac-cab-club__datos>li{display:inline-flex;align-items:center;gap:var(--ac-s-2);min-height:32px;padding:0 var(--ac-s-3);border:1px solid var(--ac-sobre-oscuro-linea);
  border-radius:var(--ac-r-full);background:var(--ac-sobre-rojo-ficha);font:600 var(--ac-t-13)/1 var(--ac-f-texto)}
.ac-cab-club__datos .ac-ico{width:var(--ac-ico-xs);height:var(--ac-ico-xs)}
/* Cifras de la cabecera (Comienza · Quedan · Paso) */
.ac-cab-club__cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));margin:0 calc(-1 * var(--ac-s-4)) calc(-1 * var(--ac-s-5));border-top:1px solid var(--ac-sobre-oscuro-linea)}
.ac-cab-club__cifras>div{display:grid;gap:var(--ac-s-1);align-content:start;padding:var(--ac-s-3) var(--ac-s-4) var(--ac-s-4)}
.ac-cab-club__cifras>div+div{border-left:1px solid var(--ac-sobre-oscuro-linea)}
.ac-cab-club__cifras dt{font:700 var(--ac-t-14)/1 var(--ac-f-marca);text-transform:uppercase;letter-spacing:var(--ac-ls-etiqueta)}
.ac-cab-club__cifras dd{margin:0;font:900 var(--ac-t-32)/1 var(--ac-f-marca);text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-cab-club__cifras dd small{font-size:var(--ac-t-20)}
.ac-cab-club__cifras p{margin:0;font:600 var(--ac-t-14)/1.3 var(--ac-f-texto)}
/* La cabecera se mide a sí misma: se ve igual de bien a pantalla completa que en una columna */
@container ac-cab (max-width:374px){
  .ac-cab-club__cifras>div{padding:var(--ac-s-3)}
  .ac-cab-club__cifras dd{font-size:var(--ac-t-24)}
  .ac-cab-club__cifras dd small{font-size:var(--ac-t-16)}
}
@container ac-cab (min-width:600px){
  .ac-cab-club__marca,.ac-cab-club__fila,.ac-cab-club__datos{margin-left:var(--ac-s-4);margin-right:var(--ac-s-4)}
  .ac-cab-club__cifras>div{padding:var(--ac-s-4) var(--ac-s-8) var(--ac-s-5)}
}
@container ac-cab (min-width:900px){
  .ac-cab-club__nombre{font-size:var(--ac-t-64)}
  .ac-cab-club__nombre--largo{font-size:var(--ac-t-44)}
  .ac-cab-club__escudo{width:96px;height:96px;padding:var(--ac-s-3)}
}

/* =====================================================================
   16 · MARCO DE LA APP · barra lateral desde 1024 px; en el móvil, barra superior e inferior
   <div class="ac-app" data-modo="operacion"> <nav class="ac-nav">…</nav> <div class="ac-app__main">…</div> <nav class="ac-barra-inf">…</nav> </div>
   ===================================================================== */
.ac-app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh}
.ac-app>.ac-nav{display:none}
.ac-app__main{min-width:0;display:flex;flex-direction:column}
.ac-app__cont{display:grid;gap:var(--ac-hueco);align-content:start;width:100%;max-width:1440px;padding:var(--ac-s-4)}
.ac-app__cont>*{min-width:0}
.ac-app:has(>.ac-barra-inf){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
@media (min-width:1024px){
  .ac-app{grid-template-columns:232px minmax(0,1fr)}
  .ac-app>.ac-nav{display:flex;position:sticky;top:0;height:100vh;overflow-y:auto}
  .ac-app>.ac-barra-op,.ac-app__main>.ac-barra-op{display:none}
  .ac-app:has(>.ac-barra-inf){padding-bottom:0}
  .ac-app__cont{padding:var(--ac-s-6)}
}
.ac-solo-escritorio{display:none}
@media (min-width:1024px){ .ac-solo-escritorio{display:revert} .ac-solo-movil{display:none} }

/* =====================================================================
   17 · VACÍO y CARGANDO · el vacío explica qué va a aparecer; la carga respeta la forma
   ===================================================================== */
.ac-vacio{display:grid;justify-items:center;gap:var(--ac-s-2);padding:var(--ac-s-8) var(--ac-s-6);text-align:center;font-size:var(--ac-t-peq);color:var(--ac-texto-2)}
.ac-vacio__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--ac-r-full);background:var(--ac-gris-100);color:var(--ac-texto-2)}
.ac-vacio__titulo{margin:var(--ac-s-1) 0 0;font:700 var(--ac-t-base)/1.3 var(--ac-f-texto);color:var(--ac-texto)}
[data-modo="club"] .ac-vacio__titulo{font:900 var(--ac-t-20)/1 var(--ac-f-marca);text-transform:uppercase}
.ac-vacio p{margin:0;max-width:34ch}
.ac-esqueleto{display:block;height:12px;border-radius:var(--ac-r-1);background:linear-gradient(90deg,var(--ac-gris-100) 0%,var(--ac-gris-50) 50%,var(--ac-gris-100) 100%);
  background-size:200% 100%;animation:ac-brillo 1.3s linear infinite}
.ac-giro{animation:ac-giro .8s linear infinite}

@keyframes ac-giro{to{transform:rotate(360deg)}}
@keyframes ac-brillo{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes ac-aparece{from{opacity:0}}
@keyframes ac-sube{from{opacity:0;transform:translateY(12px)}}
@keyframes ac-baja{from{opacity:0;transform:translateY(-12px)}}
@keyframes ac-sube-centro{from{opacity:0;transform:translate(-50%,12px)}}
@keyframes ac-entra-dcha{from{transform:translateX(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ac-esqueleto,.ac-giro,.ac-btn.is-cargando::before{animation-duration:2.4s}
  .ac-toast,.ac-velo,.ac-lateral,.ac-hoja,.ac-confirma,.ac-dialogo::before,.ac-dialogo__caja{animation:none}
  .ac-btn,.ac-toast.is-saliendo{transition:none}
}

/* «hidden» manda sobre el display de cualquier pieza (paneles de pestañas, hojas cerradas…) */
[class^="ac-"][hidden],[class*=" ac-"][hidden]{display:none}

/* Al imprimir, fuera el cromo */
@media print{
  .ac-nav,.ac-barra-inf,.ac-barra-op,.ac-toasts,.ac-velo{display:none}
  .ac-app{display:block;padding:0}
}