/* Identidad visual de Federbache — tokens y componentes utilitarios. Todo lo que se construya después (landing, panel, correos, PDFs, Excel) consume estas variables; ningún color suelto escrito a mano. [RW | 2026-07-24] Motivo: Prompt 08.5 de plan/PlanInicial.md. */ :root { /* Paleta muestreada del escudo. */ --fb-azul: #245597; --fb-azul-claro: #2C6BB0; --fb-guinda: #B6405B; --fb-blanco: #FFFFFF; --fb-tinta: #14213D; --fb-humo: #F4F6F9; --fb-borde: #D9E0EA; --fb-gris: #5B6474; /* Derivados. */ --fb-azul-900: #14315A; --fb-azul-700: #1D4680; --fb-guinda-900: #4A1D29; --fb-guinda-700: #8E3048; --fb-guinda-100: #F7E6EA; --fb-azul-100: #E3EBF5; /* Fondo de página según la liga activa en la landing (pestaña debajo del hero) — claro/oscuro cambia con [data-tema], mismo criterio que --superficie. [RW | 2026-07-27] Motivo: pedido explícito. */ --liga-azul-fondo: var(--fb-azul-100); --liga-guinda-fondo: var(--fb-guinda-100); /* Estados de cobranza: deliberadamente distintos del guinda de marca, para no confundir "dato duro" con "alerta de saldo". */ --estado-ok: #1E7F4F; --estado-alerta: #B7791F; --estado-critico: #C2410C; --chaflan: 8px; --sombra-dura: 0 2px 0 rgba(20, 33, 61, .12); /* Tripletas RGB — solo para los tokens que Tailwind (Prompt 11) usa con modificador de opacidad (bg-fb-blanco/10, etc.). Tailwind no puede descomponer un hex en canales R G B, así que necesita esta forma para poder componer rgb(var(--x) / alpha). Deriva de los hex de arriba — si cambia un hex, actualizar su tripleta aquí también. */ --fb-azul-rgb: 36 85 151; --fb-azul-claro-rgb: 44 107 176; --fb-blanco-rgb: 255 255 255; --fb-tinta-rgb: 20 33 61; --fb-borde-rgb: 217 224 234; /* Tokens semánticos de superficie/texto — separados de --fb-blanco/--fb-tinta porque esos dos también se usan como "blanco fijo"/"tinta fija" (texto sobre botones de color, franjas siempre oscuras) que NO deben invertirse en modo oscuro. Estos sí cambian según [data-tema]. [RW | 2026-07-26] Motivo: modo oscuro pedido explícitamente para sitio público y panel. */ --superficie: var(--fb-blanco); --superficie-alterna: var(--fb-humo); --texto: var(--fb-tinta); --texto-secundario: var(--fb-gris); --borde-tema: var(--fb-borde); --borde-tema-rgb: var(--fb-borde-rgb); } :root[data-tema="oscuro"] { --superficie: #101827; --superficie-alterna: #0B1220; --texto: #E7ECF5; --texto-secundario: #98A2B8; --borde-tema: #29344A; --borde-tema-rgb: 41 52 74; --liga-azul-fondo: var(--fb-azul-900); --liga-guinda-fondo: var(--fb-guinda-900); } /* Fondo de la landing pública: neutro por defecto, o teñido según la liga activa vía --fondo-liga-actual (inline en , landing.php). El fallback protege /contacto, /partido/{token}, etc. que no tienen pestaña de liga. [RW | 2026-07-27] Motivo: pedido explícito. */ .pagina-publica { background: var(--fondo-liga-actual, var(--superficie)); } /* ---------------------------------------------------------------------- */ /* Tipografía */ /* ---------------------------------------------------------------------- */ .titular { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .cifra { font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } /* ---------------------------------------------------------------------- */ /* Botones */ /* ---------------------------------------------------------------------- */ .btn-primario, .btn-secundario, .btn-fantasma { display: inline-block; font-family: var(--fuente-base, system-ui, sans-serif); font-weight: 700; font-size: 15px; padding: var(--esp-2, 8px) var(--esp-4, 16px); border-radius: 0 0 var(--chaflan) 0; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn-primario { background: var(--fb-azul); color: var(--fb-blanco); } .btn-primario:hover { background: var(--fb-azul-700); } .btn-secundario { background: var(--fb-guinda); color: var(--fb-blanco); } .btn-secundario:hover { background: var(--fb-guinda-700); } .btn-fantasma { background: transparent; color: var(--fb-azul); border-color: var(--fb-azul); } .btn-fantasma:hover { background: var(--fb-azul-100); } /* ---------------------------------------------------------------------- */ /* Tarjetas y divisores */ /* ---------------------------------------------------------------------- */ .tarjeta { background: var(--superficie); border: 1px solid var(--borde-tema); border-radius: 0 0 var(--chaflan) 0; box-shadow: var(--sombra-dura); padding: var(--esp-4, 16px); } .divisor-federbache { height: 6px; background: linear-gradient(to right, var(--fb-azul) 50%, var(--fb-guinda) 50%); border: 0; } .avatar-iniciales { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 0 0 var(--chaflan) 0; background: linear-gradient(to right, var(--fb-azul) 50%, var(--fb-guinda) 50%); color: var(--fb-blanco); font-weight: 800; font-size: 16px; } /* ---------------------------------------------------------------------- */ /* Chip de liga (usa ligas.color_hex vía variable inline --chip-color) */ /* ---------------------------------------------------------------------- */ .chip-liga { display: inline-block; padding: 2px var(--esp-2, 8px); border-radius: 0 0 var(--chaflan) 0; font-weight: 700; font-size: 13px; color: var(--fb-blanco); background: var(--chip-color, var(--fb-azul)); } /* ---------------------------------------------------------------------- */ /* Badges de estado (semáforo de cobranza) — nunca usan --fb-guinda. */ /* ---------------------------------------------------------------------- */ .badge-estado { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--esp-2, 8px); border-radius: 0 0 var(--chaflan) 0; font-weight: 700; font-size: 13px; color: var(--fb-blanco); } .badge-estado.ok { background: var(--estado-ok); } .badge-estado.alerta { background: var(--estado-alerta); } .badge-estado.critico { background: var(--estado-critico); } .badge-estado.ok::before { content: "\2713"; } /* check */ .badge-estado.alerta::before { content: "\26A0"; } /* aviso */ .badge-estado.critico::before { content: "\2716"; } /* cruz */ /* ---------------------------------------------------------------------- */ /* Formularios — usado por /contacto y por #contacto en la landing. */ /* [RW | 2026-07-25] Motivo: el formulario de contacto se renderizaba con */ /* HTML sin clases (fuera de sistema visual); se agregan componentes */ /* reutilizables en vez de estilos ad-hoc por página. */ /* ---------------------------------------------------------------------- */ #contacto-resultado.badge-estado { display: block; width: fit-content; margin-bottom: var(--esp-4, 16px); } .formulario-federbache { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--esp-4, 16px) var(--esp-5, 20px); max-width: 720px; } .formulario-federbache.tarjeta { padding: var(--esp-6, 24px) var(--esp-5, 20px); } .campo-federbache { display: flex; flex-direction: column; gap: var(--esp-1, 4px); } .campo-federbache--ancho { grid-column: 1 / -1; } .campo-federbache label { font-weight: 700; font-size: 14px; } .control-federbache { width: 100%; font-family: var(--fuente-base, system-ui, sans-serif); font-size: 15px; padding: var(--esp-2, 8px) var(--esp-3, 12px); border: 1px solid var(--borde-tema); border-radius: 0 0 var(--chaflan) 0; background: var(--superficie); color: var(--texto); transition: border-color .15s ease; } .control-federbache:hover { border-color: var(--texto-secundario); } textarea.control-federbache { resize: vertical; min-height: 96px; } .grupo-federbache { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-4, 16px) var(--esp-5, 20px); } .consentimiento-federbache { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--esp-2, 8px); } .consentimiento-federbache input { margin-top: 4px; } .texto-legal { grid-column: 1 / -1; font-size: 12px; color: var(--texto-secundario); } .trampa-oculta { position: absolute; left: -9999px; } .pagina-angosta { max-width: 560px; margin: var(--esp-8, 32px) auto; padding: 0 var(--esp-4, 16px); } /* ---------------------------------------------------------------------- */ /* Franja "ENTORNO LOCAL" y otros usos de color por variable */ /* ---------------------------------------------------------------------- */ /* [RW | 2026-07-28] Motivo: pedido explícito — flotante para no empujar el resto del layout hacia abajo (antes era un bloque normal que sumaba su altura al documento). */ .franja-entorno-local { position: fixed; bottom: 14px; right: 14px; z-index: 9999; background: var(--estado-alerta); color: var(--fb-blanco); text-align: center; padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); font: bold 11px var(--fuente-base, sans-serif); letter-spacing: .1em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .btn-primario, .btn-secundario, .btn-fantasma { transition: none; } } /* ---------------------------------------------------------------------- */ /* Drawer lateral reutilizable (estado de cuenta, editar liga/jugador) */ /* [RW | 2026-07-28] Motivo: Prompt 22, pedido explícito — sin depender de */ /* utilidades de Tailwind que puedan no estar compiladas todavía. */ /* ---------------------------------------------------------------------- */ .drawer-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .drawer-overlay.abierto { opacity: 1; pointer-events: auto; } .drawer-lateral { position: fixed; top: 0; right: 0; z-index: 201; height: 100vh; width: 100%; max-width: 480px; background: var(--superficie); box-shadow: -8px 0 24px rgba(0, 0, 0, .25); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; } .drawer-lateral.abierto { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .drawer-overlay, .drawer-lateral { transition: none; } } /* ---------------------------------------------------------------------- */ /* Menú contextual reutilizable (acciones por fila en tablas) */ /* [RW | 2026-07-28] Motivo: Prompt 23, pedido explícito — position:fixed */ /* calculado por JS para no recortarse dentro de contenedores con */ /* overflow-hidden (ej. las tablas con esquinas redondeadas). */ /* ---------------------------------------------------------------------- */ .menu-contextual-boton { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--borde-tema); background: var(--superficie); color: var(--texto-secundario); cursor: pointer; flex-shrink: 0; } .menu-contextual-boton:hover { background: var(--superficie-alterna); } .menu-contextual { position: fixed; z-index: 150; min-width: 160px; background: var(--superficie); border: 1px solid var(--borde-tema); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .menu-contextual a, .menu-contextual button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font: 700 13px var(--fuente-base, sans-serif); color: var(--texto); text-decoration: none; } .menu-contextual a svg, .menu-contextual button svg { flex-shrink: 0; } .menu-contextual a:hover, .menu-contextual button:hover { background: var(--superficie-alterna); } .menu-contextual button.critico { color: var(--estado-critico); } .menu-contextual button.ok { color: var(--estado-ok); }