/* ===================================================================== AC CUP 2027 · TOKENS · base común del panel interno y del área del club --------------------------------------------------------------------- Este fichero NO pinta nada por sí solo: define variables (--ac-*), la tipografía de marca y los dos modos. Las piezas están en componentes.css. panel interno (equipo de Dimension Football) área del coordinador (clubes) REGLA: nada de colores, tamaños ni emojis a mano. Si falta algo, se añade aquí (o una pieza en componentes.css) y se usa desde ahí. Guía completa en docs/sistema-2027.md. Decisiones de marca (auditoría UX 23/09/2026): D1 · un solo rojo de pantalla, #E30613 (#C8102E solo en hover y pulsado). D2 · el negro #0B0B0D sustituye al vino #8d0a12. D3 · Akrobat solo en títulos y cifras grandes del panel. Estados = los del correo (accup_correo_aviso). El rojo de marca nunca es un estado. ===================================================================== */ /* ---------- Tipografía de marca: Akrobat (Fontfabric) ---------- Solo Bold (700) y Black (900). El texto corrido va en la fuente del sistema. */ @font-face{font-family:"Akrobat";font-weight:700;font-style:normal;font-display:swap;src:url("fuentes/Akrobat-Bold.woff2") format("woff2")} @font-face{font-family:"Akrobat";font-weight:900;font-style:normal;font-display:swap;src:url("fuentes/Akrobat-Black.woff2") format("woff2")} :root{ /* ---------- 1 · MARCA ---------- */ --ac-rojo:#E30613; /* EL rojo: acción principal y marca. Blanco encima: 4,9:1. Texto rojo solo sobre blanco */ --ac-rojo-pulsado:#C8102E; /* hover y pulsado del rojo. Nunca fondo grande */ --ac-negro:#0B0B0D; /* cromo del panel y bandas de marca (sustituye al vino #8d0a12) */ --ac-tinta:#16181D; /* texto principal, foco y «por pagar» (el mismo del correo) */ --ac-degradado:radial-gradient(120% 100% at 0 0,#FF2C3A 0%,#E30613 45%,#B3050F 100%); /* solo cabecera del club (= correo) */ --ac-degradado-sombra:linear-gradient(90deg,rgba(11,11,13,.18) 0%,rgba(11,11,13,.1) 45%,rgba(11,11,13,0) 80%); /* garantiza 4,5:1 al texto blanco sobre el degradado */ /* ---------- 2 · NEUTRALES ---------- Contraste medido (WCAG 2.1): texto sobre blanco / gris-50 / gris-100. */ --ac-blanco:#FFFFFF; /* tarjetas, campos, paneles */ --ac-gris-50:#F7F8FA; /* fila al pasar, fondo alterno (= pie del correo) */ --ac-gris-100:#EEF0F3; /* fondo de página en los dos modos (= fondo del correo) */ --ac-gris-200:#E4E7EC; /* líneas y divisiones; tramo «por pagar» de la barra. Sin texto encima */ --ac-gris-300:#CDD2DA; /* línea fuerte, borde de botón secundario */ --ac-gris-400:#7D8490; /* borde de campo y casilla: 3,8:1 sobre blanco (mínimo de controles, 3:1) */ --ac-gris-500:#646B78; /* texto terciario: 5,4 / 5,1 / 4,7 :1 */ --ac-gris-600:#525A67; /* texto secundario: 7,0 / 6,6 / 6,1 :1 */ /* Sobre fondo oscuro (cromo negro del panel, cabecera roja del club) */ --ac-sobre-oscuro:#FFFFFF; --ac-sobre-oscuro-2:rgba(255,255,255,.74); /* 10:1 sobre el negro */ --ac-sobre-oscuro-linea:rgba(255,255,255,.16); --ac-sobre-oscuro-pasar:rgba(255,255,255,.07); --ac-sobre-oscuro-activo:rgba(255,255,255,.12); --ac-sobre-rojo-ficha:rgba(11,11,13,.2); /* fichas de datos sobre la cabecera roja */ --ac-halo:rgba(22,24,29,.14); /* halo de foco de los campos (tinta, nunca rojo) */ --ac-velo:rgba(11,11,13,.52); /* fondo detrás de hojas, paneles y diálogos */ /* ---------- 3 · ESTADOS · los del correo (accup_correo_aviso) + por pagar y bloqueado ---------- fondo · texto (≥ 4,5:1 sobre su fondo) · filete (el vivo del correo). Nunca solo color: la pastilla lleva siempre icono y palabra. */ --ac-porpagar-fondo:#FFFFFF; --ac-porpagar-texto:#16181D; --ac-porpagar-filete:#16181D; /* le toca al club · contorno de tinta · 17,8:1 */ --ac-pendiente-fondo:#FFF4E5; --ac-pendiente-texto:#B45309; --ac-pendiente-filete:#D97706; /* correo «warn» · nos toca comprobar · 4,6:1 */ --ac-confirmado-fondo:#EAFAEF; --ac-confirmado-texto:#1A7F37; --ac-confirmado-filete:#1A7F37; /* correo «ok» · hecho · 4,7:1 */ --ac-bloqueado-fondo:#EEF0F3; --ac-bloqueado-texto:#525A67; --ac-bloqueado-filete:#CDD2DA; /* aún no se puede, anulada, sin permiso · 6,1:1 */ --ac-info-fondo:#F5F6F8; --ac-info-texto:#16181D; --ac-info-filete:#9AA1AB; /* correo «info» · dato que no pide nada · 16,5:1. Sin azul (P12) */ --ac-error-fondo:#FEF2F2; --ac-error-texto:#B91C1C; --ac-error-filete:#DC2626; /* correo «err» · falló o se rechazó · 5,9:1 */ /* ---------- 4 · TIPOGRAFÍA ---------- */ --ac-f-marca:"Akrobat","Helvetica Neue",Arial,sans-serif; /* títulos y cifras */ --ac-f-texto:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif; /* todo lo demás: 0 KB */ --ac-f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* IBAN, conceptos, códigos */ /* 9 tamaños. 12 es el mínimo y solo para etiquetas en mayúsculas */ --ac-t-12:12px; --ac-t-13:13px; --ac-t-14:14px; --ac-t-16:16px; --ac-t-20:20px; --ac-t-24:24px; --ac-t-32:32px; --ac-t-44:44px; --ac-t-64:64px; /* pesos permitidos: sistema 400 · 600 · 700 · Akrobat 700 · 900 */ --ac-lh-titulo:1.08; --ac-lh-texto:1.45; --ac-lh-ajustado:1.2; --ac-ls-etiqueta:.08em; /* etiquetas en mayúsculas (sistema) */ --ac-ls-marca:.16em; /* antetítulos en Akrobat */ --ac-ls-boton:.04em; /* botones del club */ --ac-oblicua:skewX(-10deg); /* solo el nombre del club en su cabecera */ /* ---------- 5 · ESPACIADO · de 4 en 4 ---------- */ --ac-s-1:4px; --ac-s-2:8px; --ac-s-3:12px; --ac-s-4:16px; --ac-s-5:20px; --ac-s-6:24px; --ac-s-8:32px; --ac-s-10:40px; --ac-s-12:48px; --ac-s-16:64px; /* ---------- 6 · RADIOS (3) y SOMBRAS (2) ---------- */ --ac-r-1:4px; /* etiquetas, teclas, barra de pago, botones del club */ --ac-r-2:10px; /* botones del panel, campos, tarjetas, paneles */ --ac-r-full:999px; /* pastillas de estado, filtros y avatares */ --ac-sombra-1:0 1px 2px rgba(11,11,13,.06),0 1px 3px rgba(11,11,13,.04); /* en reposo: tarjetas */ --ac-sombra-2:0 16px 40px rgba(11,11,13,.18),0 2px 8px rgba(11,11,13,.08); /* flota: lateral, hoja, diálogo, toast */ /* ---------- 7 · ICONOS, MOVIMIENTO y CAPAS ---------- */ --ac-ico-trazo:1.75; /* Lucide, un solo juego (iconos.svg) */ --ac-ico-xs:14px; --ac-ico-s:16px; --ac-ico-m:20px; --ac-ico-l:24px; --ac-tactil:44px; /* objetivo táctil mínimo */ --ac-ease:cubic-bezier(.22,1,.36,1); --ac-dur:160ms; --ac-dur-lenta:260ms; --ac-z-barra:30; --ac-z-capa:40; --ac-z-dialogo:50; --ac-z-toast:60; /* 4 capas */ /* Cortes (no caben en variables): 600 móvil → tableta · 1024 aparece la barra lateral · 1440 ancho máximo */ } /* ===================================================================== MODOS · las piezas solo leen estas variables. Operación es también el valor por defecto (una pieza fuera de data-modo se ve como en el panel). Móvil primero: controles de 44 px de base. ===================================================================== */ :root,[data-modo="operacion"]{ --ac-fondo:var(--ac-gris-100); --ac-superficie:var(--ac-blanco); --ac-superficie-2:var(--ac-gris-50); --ac-linea:var(--ac-gris-200); --ac-linea-fuerte:var(--ac-gris-300); --ac-borde-control:var(--ac-gris-400); --ac-texto:var(--ac-tinta); --ac-texto-2:var(--ac-gris-600); --ac-texto-3:var(--ac-gris-500); --ac-acento:var(--ac-rojo); --ac-acento-pulsado:var(--ac-rojo-pulsado); --ac-cromo:var(--ac-negro); /* rápido, denso, neutro */ --ac-t-base:var(--ac-t-14); --ac-t-peq:var(--ac-t-13); --ac-t-titulo:var(--ac-t-24); --ac-t-titulo-tarjeta:var(--ac-t-16); --ac-t-cifra:var(--ac-t-32); --ac-p-marca:700; /* Akrobat Bold en títulos y cifras */ --ac-ctl:44px; --ac-ctl-sm:36px; /* táctil; en escritorio con ratón bajan a 36/30 */ --ac-filtro-h:36px; --ac-fila:48px; --ac-pad-tarjeta:var(--ac-s-4); --ac-hueco:var(--ac-s-4); --ac-btn-f:var(--ac-f-texto); --ac-btn-t:var(--ac-t-14); --ac-btn-t-sm:var(--ac-t-13); --ac-btn-p:600; --ac-btn-mayus:none; --ac-btn-ls:0; --ac-btn-r:var(--ac-r-2); --ac-btn-pad:var(--ac-s-4); --ac-ico-btn:var(--ac-ico-s); } @media (min-width:600px) and (pointer:fine){ :root,[data-modo="operacion"]{--ac-ctl:36px;--ac-ctl-sm:30px;--ac-filtro-h:30px;--ac-fila:44px} } /* CLUB · mismos cimientos + capa de marca 2027. Táctil primero */ [data-modo="club"]{ --ac-cromo:var(--ac-rojo); --ac-t-base:var(--ac-t-16); --ac-t-peq:var(--ac-t-14); --ac-t-titulo:var(--ac-t-32); --ac-t-titulo-tarjeta:var(--ac-t-24); --ac-t-cifra:var(--ac-t-44); --ac-p-marca:900; /* Akrobat Black */ --ac-ctl:48px; --ac-ctl-sm:40px; --ac-filtro-h:40px; --ac-fila:56px; --ac-pad-tarjeta:var(--ac-s-5); --ac-hueco:var(--ac-s-4); --ac-btn-f:var(--ac-f-marca); --ac-btn-t:var(--ac-t-20); --ac-btn-t-sm:var(--ac-t-16); --ac-btn-p:700; --ac-btn-mayus:uppercase; --ac-btn-ls:var(--ac-ls-boton); --ac-btn-r:var(--ac-r-1); --ac-btn-pad:var(--ac-s-5); --ac-ico-btn:var(--ac-ico-m); } /* El elemento que declara el modo pone fondo, letra y color de base */ [data-modo]{ font-family:var(--ac-f-texto); font-size:var(--ac-t-base); line-height:var(--ac-lh-texto); color:var(--ac-texto); background:var(--ac-fondo); -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%; }