/* =========================================================================== EL CUADRO — sistema de diseno de la Quiniela LTT x Apostemos --------------------------------------------------------------------------- La idea: el producto ES un cuadro de torneo. Lineas finas, nombres alineados a la izquierda, numeros de siembra colgando en el margen, datos que se leen de un vistazo. Landing y panel comparten los mismos componentes. Marca: naranja Apostemos #FF5200 | azul Loto #0062B0 | indigo LTT #231357 Tipos: Big Shoulders Display (titulares) + Archivo (todo lo demas) DOS TEMAS, EL CLARO POR OMISION :root -> paleta CLARA (la que ve quien llega sin elegir) :root[data-tema="oscuro"] -> paleta OSCURA (redefine SOLO tokens de color) El atributo data-tema lo pone app.js en el . No hay prefers-color-scheme: el claro es el punto de partida y el oscuro se elige. Estructura, espaciado, tipografia y radios son identicos en los dos temas: solo cambia el color. REGLAS QUE NO SE NEGOCIAN - Sobre naranja la tinta es NEGRA (6.5:1). Blanco sobre naranja reprueba AA. - Maximo dos objetos naranjas por pantalla, un solo boton naranja solido. - La linea de cal (3px) es el UNICO indicador de estado del producto. - Mayusculas solo en Big Shoulders. Ningun rotulo pequeno en mayusculas. - Cifra primero, rotulo debajo. tabular-nums en toda cifra comparable. - Los porcentajes en style="--pct:" necesitan |unlocalize (es-HN usa coma). - Ningun objetivo tactil por debajo de 44px. 16px minimo en cualquier input. =========================================================================== */ /* =========================================================================== TEMA CLARO — el de por omision. El fondo no es blanco puro: es un hueso calido, y lo elevado (tarjetas, fichas, comprobante) sube a blanco. Se conserva la logica del oscuro: elevado = mas luminoso que el fondo. El naranja de marca no se toca como RELLENO (3.25:1 sobre blanco alcanza para superficie y texto grande) pero el texto naranja chico baja a --tinta-naranja #B83900 (5.8:1), que es un token distinto a proposito. =========================================================================== */ :root{ /* ---------- MARCA ---------- */ --naranja: #FF5200; /* Apostemos. Unico color saturado del sistema. */ --naranja-hondo: #E04600; /* presionado */ --naranja-tenue: rgba(255,82,0,.12); --naranja-linea: rgba(224,70,0,.80); /* borde: 3.1:1 sobre el hueso */ --azul: #0062B0; /* Loto. Estructura y utilidad. Nunca texto chico. */ --azul-alto: #004A85; /* hover del boton azul: en claro se oscurece */ --azul-hondo: #003A6B; /* presionado */ --sobre-azul: #FFFFFF; /* 6.2:1 sobre el azul Loto */ --azul-claro: #0062B0; /* enlaces sobre claro (6.2:1 blanco / 5.8:1 hueso) */ --indigo: #231357; /* LTT. En claro es color de texto/acento (16:1). */ /* ---------- SUPERFICIES ---------- Hueso calido de pagina, blanco para lo elevado, y por debajo del hueso una escala de tintes frios para pistas, avatares y bloques hundidos. */ --fondo: #F7F6F3; --fondo-nulo: rgba(247,246,243,0); /* el mismo fondo, transparente */ --capa-1: #FFFFFF; /* tarjetas, fichas, filas */ --capa-2: #F4F2EE; /* campos, filas activas, cabecera de tabla */ --capa-3: #EBE8E2; /* pistas de barra, hover fuerte */ --capa-4: #E2DED6; /* avatares, fondos de dato */ --hundido: #EFECE6; /* bloques de metadata tecnica */ --velo: rgba(247,246,243,.88); /* barra pegajosa del panel */ --velo-fuerte:rgba(247,246,243,.94); /* navegacion del panel */ --realce: rgba(26,19,48,.06); /* hover sutil sobre superficie */ --realce-alto:rgba(26,19,48,.10); /* presionado */ /* Comprobante: en claro ya no destaca por ser la unica superficie clara, asi que se distingue por un borde definido y un papel mas blanco que la pagina. */ --papel: #FFFFFF; --papel-tinta: #1A1330; --papel-tinta-2:#4A4459; --papel-tinta-3:#6B6478; --papel-azul: #0062B0; --papel-linea: #D9D4CB; /* hairlines y perforacion */ --papel-borde: #8E877B; /* contorno: 3.3:1 contra la pagina */ /* ---------- TEXTO (ratios medidos sobre --capa-2) ---------- */ --tinta-1: #1A1330; /* 17.2:1 */ --tinta-2: #4A4459; /* 8.9:1 */ --tinta-3: #6B6478; /* 5.4:1 — piso AA, no bajar de 13px */ --tinta-naranja:#B83900; /* 5.6:1 — texto naranja chico, NO es --naranja */ --sobre-naranja:#000000; /* OBLIGATORIO encima del naranja: 6.5:1 */ --ok: #0A7A45; /* 5.2:1 */ --ok-linea: rgba(10,122,69,.75); /* 3.2:1 contra el papel de la tarjeta */ --ok-tenue: rgba(10,122,69,.10); --falta: #C1290F; /* 5.6:1 */ --falta-linea: rgba(193,41,15,.65); /* 3.2:1 contra el papel de la tarjeta */ --falta-tenue: rgba(193,41,15,.10); --let: #8A5300; /* 6.1:1 */ /* Quiniela cerrada: el naranja apagado. Sobre claro el apagado es un gris calido oscuro, no el ladrillo del tema oscuro (que pide fondo negro). */ --apagado: #6E5F53; --apagado-hondo: #574A40; --apagado-linea: rgba(110,95,83,.55); --apagado-tenue: rgba(110,95,83,.12); --tinta-apagada: #6E5F53; /* 5.9:1 sobre capa-2 */ --sobre-apagado: #FFFFFF; /* 6.1:1 encima del apagado */ /* ---------- LINEAS DE CANCHA ---------- En claro son NEGRAS con alfa. Con los blancos del tema oscuro desaparecerian por completo. */ --linea: rgba(26,19,48,.12); --linea-fuerte: rgba(26,19,48,.24); --linea-campo: rgba(26,19,48,.55); /* 1.5px: los campos se ven bajo el sol */ --linea-campo-alta: rgba(26,19,48,.75); /* hover de campo */ --pasillo: 3px; /* separacion del pasillo de dobles */ --cal: 3px; /* grosor de la linea de cal (estado) */ /* ---------- RADIOS: tres niveles, no uno global ---------- */ --r-0: 0; /* contenedores estructurales: son lineas */ --r-1: 2px; /* controles: botones, campos, fichas, avisos */ --r-2: 4px; /* media rectangular */ --r-pill: 999px; /* chips, pistas de barra */ --r-redondo: 50%; /* avatares */ /* ---------- ELEVACION: reglas, no sombras difusas ---------- */ --alza: 0 -18px 30px -10px rgba(26,19,48,.18); /* unica sombra del sistema */ --halo: 0 0 0 5px rgba(255,255,255,.95); /* halo del anillo de foco */ --foco: #1A1330; /* color del anillo de foco */ /* ---------- ESPACIADO (base 4) ---------- */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-7:32px; --e-8:40px; --e-9:56px; --e-10:72px; --e-11:96px; --e-12:128px; --gutter: clamp(1.25rem, 0.6rem + 2.67vw, 3rem); /* 20 -> 48 */ --seccion: clamp(2.75rem, 1.17rem + 6.48vw, 7rem); /* 44 -> 112 */ --siembra: 40px; /* columna colgante del numero de siembra */ --tap: 44px; /* objetivo tactil minimo */ --control: 52px; /* alto de campo y boton */ --ancho: 1180px; --medida: 62ch; /* ---------- TIPOGRAFIA ---------- */ --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", sans-serif-condensed, system-ui, sans-serif; --texto: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --t-3xs: 0.6875rem; /* 11px micro-dato, solo escritorio */ --t-2xs: 0.75rem; /* 12px sellos, pie legal */ --t-xs: 0.8125rem; /* 13px rotulos de dato, ayudas, meta */ --t-sm: 0.875rem; /* 14px celdas, texto secundario */ --t-base: 1rem; /* 16px cuerpo y campos. Piso duro: evita el zoom de iOS */ --t-md: 1.0625rem; /* 17px nombre del jugador */ --t-lg: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem); /* 20 -> 24 */ --t-xl: clamp(1.5rem, 1.32rem + 0.76vw, 2rem); /* 24 -> 32 */ --t-2xl: clamp(2rem, 1.55rem + 1.90vw, 3rem); /* 32 -> 48 */ --t-3xl: clamp(2.75rem, 1.90rem + 3.62vw, 4.5rem); /* 44 -> 72 */ --t-cartel: clamp(3.5rem, 1.90rem + 6.83vw, 8rem); /* 56 -> 128 */ --int-cartel: 0.84; --int-titulo: 0.92; --int-cuerpo: 1.55; --int-dato: 1.30; --tr-titulo: -0.008em; --tr-cuerpo: 0; /* ---------- MOVIMIENTO ---------- */ --sale: cubic-bezier(.20,.70,.20,1); --entra: cubic-bezier(.65,0,.35,1); --v-rapido: 120ms; --v-base: 180ms; --v-tema: 170ms; /* cambio de tema: corto, para que no sea un salto */ --v-barra: 600ms; --z-barra: 30; --z-nav: 40; --z-modal: 60; color-scheme: light; } /* =========================================================================== TEMA OSCURO — el que ya existia. Solo se redefinen tokens de COLOR: ni una medida, ni un tipo, ni un radio cambian entre temas. =========================================================================== */ :root[data-tema="oscuro"]{ /* ---------- MARCA ---------- */ --naranja: #FF5200; --naranja-hondo: #E04600; --naranja-tenue: rgba(255,82,0,.12); --naranja-linea: rgba(255,82,0,.55); --azul: #0062B0; --azul-alto: #0071CC; --azul-hondo: #004A85; --sobre-azul: #FFFFFF; --azul-claro: #4D9BE0; /* enlaces sobre oscuro (6.3:1) */ --indigo: #231357; /* de aqui sale el tono de las superficies */ /* ---------- SUPERFICIES ---------- Negro real de fondo (el naranja llega a 6.5:1 encima). Las capas elevadas se tinen hacia el indigo de la LTT, nunca gris neutro. */ --fondo: #000000; --fondo-nulo: rgba(0,0,0,0); --capa-1: #0A0818; --capa-2: #120E28; --capa-3: #171232; --capa-4: #1E1940; --hundido: #050410; --velo: rgba(0,0,0,.88); --velo-fuerte:rgba(0,0,0,.94); --realce: rgba(255,255,255,.06); --realce-alto:rgba(255,255,255,.10); --papel: #EAECEE; /* comprobante: aqui SI es la unica superficie clara */ --papel-tinta: #0B0A18; --papel-tinta-2:#3A4150; --papel-tinta-3:#5A626E; /* 5.2:1 sobre papel */ --papel-azul: #0053A0; /* 6.5:1 sobre papel */ --papel-linea: #C4C8D0; --papel-borde: #C4C8D0; /* ---------- TEXTO (ratios medidos sobre --capa-2) ---------- */ --tinta-1: #FFFFFF; /* 18.8:1 */ --tinta-2: #ADA7C4; /* 8.1:1 */ --tinta-3: #8B84AC; /* 5.4:1 — piso AA, no bajar de 13px */ --tinta-naranja:#FF5200; /* 5.8:1 sobre capa-2, 6.5:1 sobre negro */ --sobre-naranja:#000000; /* OBLIGATORIO encima del naranja: 6.5:1 */ --ok: #4FD08A; /* 9.6:1 */ --ok-linea: rgba(79,208,138,.5); --ok-tenue: rgba(79,208,138,.10); --falta: #FF6B57; /* 6.7:1 */ --falta-linea: rgba(255,107,87,.5); --falta-tenue: rgba(255,107,87,.12); --let: #FFC24D; /* 11.7:1 */ --apagado: #7A3A1A; --apagado-hondo: #5E2C14; --apagado-linea: rgba(122,58,26,.55); --apagado-tenue: rgba(122,58,26,.14); --tinta-apagada: #C98A66; /* 7.3:1 sobre negro */ --sobre-apagado: #FFFFFF; /* el naranja apagado pide tinta clara: 8.6:1 */ /* ---------- LINEAS DE CANCHA: blancas con alfa ---------- */ --linea: rgba(214,208,255,.14); --linea-fuerte: rgba(214,208,255,.28); /* Sube de .38 a .55 (mismo tono, mas presencia): a .38 el borde del campo daba 1.8:1 contra --capa-2 y no llegaba al 3:1 que pide un elemento de interfaz. Es el ajuste que contempla la regla de oro 12. */ --linea-campo: rgba(170,160,225,.55); --linea-campo-alta: rgba(190,182,235,.72); /* ---------- ELEVACION ---------- */ --alza: 0 -18px 30px -10px rgba(0,0,0,.95); --halo: 0 0 0 5px rgba(0,0,0,.95); --foco: #FFFFFF; color-scheme: dark; } /* Quiniela cerrada: se apaga el naranja en un solo lugar y el sistema entero cambia de tono. cuando CONFIG.esta_abierta es False. Los valores del apagado viven en los tokens de cada tema, asi que esta regla es la misma en claro y en oscuro. */ body.is-cerrada{ --naranja: var(--apagado); --naranja-hondo: var(--apagado-hondo); --naranja-linea: var(--apagado-linea); --naranja-tenue: var(--apagado-tenue); --tinta-naranja: var(--tinta-apagada); --sobre-naranja: var(--sobre-apagado); } /* ===================================================================== EL CUADRO — Quiniela LTT x Apostemos static/css/app.css · BLOQUE 2: componentes Sin framework. Sin build. Clases en espanol, igual que el codigo Django. ===================================================================== */ /* ========================================================= 1. BASE ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background: var(--fondo); } body{ margin:0; background: var(--fondo); color: var(--tinta-2); font-family: var(--texto); font-size: var(--t-base); line-height: var(--int-cuerpo); letter-spacing: var(--tr-cuerpo); font-variant-numeric: tabular-nums; /* Sin -webkit-font-smoothing:antialiased: sobre negro adelgaza el texto. */ } h1, h2, h3, .display{ margin:0; font-family: var(--display); font-weight:800; line-height: var(--int-titulo); letter-spacing: var(--tr-titulo); text-transform: uppercase; color: var(--tinta-1); overflow-wrap: break-word; } h1{ font-size: var(--t-3xl); } h2{ font-size: var(--t-2xl); } h3{ font-size: var(--t-xl); } /* h4 es titulo de bloque dentro del panel: ahi el impacto estorba. */ h4{ margin:0 0 var(--e-3); font-family: var(--texto); font-size: var(--t-base); font-weight:700; line-height:1.3; letter-spacing:0; text-transform:none; color: var(--tinta-1); } p{ margin:0 0 1em; max-width: var(--medida); } ul, ol{ margin:0 0 1em; padding-left:1.2em; } li{ margin-bottom:.35em; } a{ color: var(--azul-claro); text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:3px; } a:hover{ color: var(--tinta-1); } img, svg{ max-width:100%; display:block; } fieldset{ margin:0; padding:0; border:0; min-width:0; } legend{ padding:0; } /* Anillo blanco + halo negro: legible sobre negro, sobre indigo y sobre naranja. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline: 3px solid var(--foco); outline-offset: 2px; box-shadow: var(--halo); } ::selection{ background: var(--naranja); color: var(--sobre-naranja); } .u-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .u-cifras{ font-variant-numeric: tabular-nums; } .u-medida{ max-width: var(--medida); } .u-nowrap{ white-space:nowrap; } /* Cambio de tema: las superficies grandes cruzan en 170ms para que pasar de claro a oscuro no sea un parpadeo. Solo se listan piezas que NO declaran su propia transicion (campos, fichas, botones y chips ya traen la suya). El bloque de prefers-reduced-motion de mas abajo la anula por completo. */ html, body, .panel__barra, .panel__nav, .tabla-caja, .tabla th, .tabla td, .placa, .aviso, .vacio, .hundido, .comprobante, .remate__elegido, .sello, .ficha__foto, .reparto__pista{ transition: background-color var(--v-tema) var(--sale), border-color var(--v-tema) var(--sale), color var(--v-tema) var(--sale); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ========================================================= 2. LAYOUT Y DIVISORES La regla de pasillo (dos hairlines a 3px) es el divisor firma: es el pasillo de dobles de una cancha, y ata landing y panel. ========================================================= */ .envoltura{ width:100%; max-width: var(--ancho); margin-inline:auto; padding-inline: var(--gutter); } .envoltura--angosta{ max-width: 720px; } .envoltura--caja{ max-width: 420px; } .seccion{ padding-block: var(--seccion); } .seccion--corta{ padding-block: var(--e-8); } .pasillo{ height: var(--pasillo); border-top:1px solid var(--linea-fuerte); border-bottom:1px solid var(--linea); margin-block: var(--e-8); } .pasillo--marca{ border-top-color: var(--naranja); } .regla{ height:0; border:0; border-top:1px solid var(--linea); margin-block: var(--e-6); } /* Sangra hasta el borde del gutter. Nunca 100vw: cero riesgo de scroll lateral. */ .a-sangre{ margin-inline: calc(var(--gutter) * -1); } /* Cabecera de seccion: titulo a la izquierda, dato real a la derecha. */ .cabecera{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--e-4); flex-wrap:wrap; padding-bottom: var(--e-3); border-bottom:1px solid var(--linea-fuerte); margin-bottom: var(--e-6); } .cabecera__dato{ font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; } /* Titular rayado por lineas de cancha: cada linea lleva su regla debajo. */ .cartel{ display:grid; margin:0; } .cartel span{ display:block; font-family: var(--display); font-weight:800; font-size: var(--t-cartel); line-height: var(--int-cartel); letter-spacing:-.012em; text-transform:uppercase; color: var(--tinta-1); padding-block:.06em .10em; border-bottom:1px solid var(--linea); } .cartel span:last-child{ border-bottom-color: var(--linea-fuerte); } .cartel.a-sangre{ padding-inline: var(--gutter); } /* Pliego: una columna en movil, spread de dos con la izquierda fija en escritorio. */ .pliego{ display:grid; gap: var(--e-8); } @media (min-width:1024px){ .pliego{ grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap: var(--e-10); align-items:start; } .pliego__fija{ position:sticky; top:80px; } } /* Ficha de datos del torneo: rotulo a la izquierda, valor a la derecha. */ .datos{ margin:0; } .datos__par{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--e-4); padding-block: var(--e-3); border-bottom:1px solid var(--linea); } .datos__par dt{ margin:0; flex:none; font-size: var(--t-xs); color: var(--tinta-3); } .datos__par dd{ margin:0; text-align:right; font-weight:700; color: var(--tinta-1); font-variant-numeric: tabular-nums; overflow-wrap:anywhere; } /* ========================================================= 3. BOTONES Primario: NEGRO sobre naranja. Blanco sobre naranja da 3.25:1 y reprueba AA; negro da 6.5:1. Un solo boton naranja solido por pantalla. ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height: var(--control); padding-inline: var(--e-6); border:2px solid transparent; border-radius: var(--r-1); background:none; font-family: var(--texto); font-size: var(--t-base); font-weight:700; line-height:1; letter-spacing:.01em; text-align:center; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--v-base) var(--sale), border-color var(--v-base) var(--sale), color var(--v-base) var(--sale), transform var(--v-rapido) var(--sale); } .btn:hover{ text-decoration:none; } .btn--primario{ background: var(--naranja); border-color: var(--naranja); color: var(--sobre-naranja); } @media (hover:hover){ .btn--primario:hover{ background: var(--fondo); color: var(--tinta-naranja); } } .btn--primario:active{ background: var(--naranja-hondo); border-color: var(--naranja-hondo); color: var(--sobre-naranja); transform: translateY(1px); } .btn--linea{ border-color: var(--linea-fuerte); color: var(--tinta-1); } @media (hover:hover){ .btn--linea:hover{ border-color: var(--tinta-1); background: var(--realce); } } .btn--linea:active{ background: var(--realce-alto); transform: translateY(1px); } /* Utilidad del panel (exportar, filtrar): azul Loto, texto blanco (6.2:1). */ .btn--azul{ background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); } .btn--azul:hover{ background: var(--azul-alto); border-color: var(--azul-alto); } .btn--azul:active{ background: var(--azul-hondo); border-color: var(--azul-hondo); transform: translateY(1px); } .btn--quieto{ color: var(--tinta-2); padding-inline: var(--e-3); } .btn--quieto:hover{ color: var(--tinta-1); background: var(--capa-2); } .btn--peligro{ border-color: var(--falta-linea); color: var(--falta); } .btn--peligro:hover{ background: var(--falta-tenue); border-color: var(--falta); } .btn--bloque{ display:flex; width:100%; } /* Ancho completo con el pulgar, ancho natural en escritorio. */ .btn--bloque-movil{ display:flex; width:100%; } @media (min-width:720px){ .btn--bloque-movil{ display:inline-flex; width:auto; min-width:280px; } } .btn--sm{ min-height: var(--tap); padding-inline: var(--e-4); font-size: var(--t-sm); } .btn--lg{ min-height:56px; font-size: var(--t-md); } .btn[disabled], .btn[aria-disabled="true"]{ opacity:.42; cursor:not-allowed; transform:none; pointer-events:none; } /* ========================================================= 4. CAMPOS .campo y .casilla son las clases que ya emiten los widgets de forms.py. No las renombres: el CSS se escribio para el HTML que Django ya produce. ========================================================= */ .grupo{ display:block; margin-bottom: var(--e-5); } .grupo__rotulo{ display:block; margin-bottom: var(--e-2); font-size: var(--t-sm); font-weight:600; line-height:1.3; color: var(--tinta-2); } .grupo__rotulo .req{ color: var(--tinta-naranja); margin-left:3px; } .grupo__ayuda{ margin:6px 0 0; font-size: var(--t-xs); color: var(--tinta-3); } .grupo__error{ margin:6px 0 0; font-size: var(--t-xs); font-weight:600; color: var(--falta); } .grupo__error ul{ margin:0; padding:0; list-style:none; } /* Nombre + apellido comparten fila a partir de tableta. */ .grupo--par{ display:grid; gap:0; } @media (min-width:640px){ .grupo--par{ grid-template-columns:repeat(2, minmax(0,1fr)); gap: var(--e-4); } .grupo--par > .grupo{ margin-bottom: var(--e-5); } } .campo{ width:100%; min-height: var(--control); padding: 13px var(--e-4); background: var(--capa-2); color: var(--tinta-1); border:1.5px solid var(--linea-campo); /* grueso a proposito: la gente se registra en la cancha, con sol */ border-bottom-width:2px; border-radius: var(--r-1); font-family: var(--texto); font-size: var(--t-base); /* 16px: sin zoom automatico en iOS */ line-height:1.25; font-variant-numeric: tabular-nums; transition: background-color var(--v-base) var(--sale), border-color var(--v-base) var(--sale); } textarea.campo{ min-height:120px; line-height:1.5; resize:vertical; } .campo::placeholder{ color: var(--tinta-3); } .campo:hover{ border-color: var(--linea-campo-alta); } .campo:focus{ outline:none; background: var(--capa-3); border-color: var(--linea-fuerte); border-bottom-color: var(--naranja); /* la linea de fondo de la cancha */ } .campo:focus-visible{ outline:3px solid var(--foco); outline-offset:2px; box-shadow: var(--halo); } .campo[aria-invalid="true"], .grupo--malo .campo{ border-bottom-color: var(--falta); } .campo:autofill, .campo:-webkit-autofill{ -webkit-text-fill-color: var(--tinta-1); box-shadow: 0 0 0 1000px var(--capa-2) inset; } select.campo{ appearance:none; -webkit-appearance:none; padding-right: var(--e-8); background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px); background-size:6px 6px, 6px 6px; background-repeat:no-repeat; } input[type="file"].campo{ padding:10px var(--e-3); line-height:1.6; } input[type="file"].campo::file-selector-button{ margin-right: var(--e-3); padding:8px 14px; border:1px solid var(--linea-fuerte); border-radius: var(--r-1); background: var(--capa-3); color: var(--tinta-1); font:inherit; font-size: var(--t-sm); font-weight:600; cursor:pointer; } /* Casilla: 24px de caja dentro de una fila tactil de 44px. */ .consentimiento{ display:grid; grid-template-columns:24px 1fr; gap: var(--e-3); align-items:start; min-height: var(--tap); padding-block:12px; cursor:pointer; font-size: var(--t-sm); line-height:1.45; color: var(--tinta-2); } .consentimiento a{ color: var(--azul-claro); } .casilla{ appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:0; flex:none; background: var(--capa-2); border:2px solid var(--linea-campo); border-radius: var(--r-1); cursor:pointer; background-repeat:no-repeat; background-position:center; background-size:16px 16px; transition: background-color var(--v-rapido) var(--sale), border-color var(--v-rapido) var(--sale); } .casilla:checked{ background-color: var(--naranja); border-color: var(--naranja); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4l3.1 3.1 6.5-6.5'/%3E%3C/svg%3E"); } .casilla:focus-visible{ outline:3px solid var(--foco); outline-offset:2px; box-shadow: var(--halo); } /* ========================================================= 5. FICHA DE CANDIDATO El estado vive en la LINEA DE CAL: una barra de 3px pegada al borde izquierdo, corta y apagada en reposo, que crece y se enciende al elegir. Es el unico indicador de estado del producto y reaparece igual en la fila de tabla, en el aviso y en la navegacion del panel. Marcado (el es hermano directo de .ficha__cara, asi que el estado se resuelve con el combinador ~ : cero :has(), cero JavaScript): ========================================================= */ .cuadro{ display:grid; gap: var(--e-3); margin:0; padding:0; border:0; } @media (min-width:640px){ .cuadro{ grid-template-columns:repeat(2, minmax(0,1fr)); } } .ficha{ position:relative; display:block; cursor:pointer; } .ficha__radio{ position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; } .ficha__cara{ --f-fondo: var(--capa-1); --f-borde: var(--linea); --f-siembra: var(--tinta-3); --f-corchete:var(--linea-fuerte); --f-cal: var(--linea-fuerte); --f-alto: .34; /* escala vertical de la linea de cal */ --f-marca: var(--linea-fuerte); --f-punto: 0; position:relative; display:grid; grid-template-columns: var(--siembra) 56px minmax(0,1fr) 24px; gap: var(--e-3); align-items:center; min-height:76px; padding: 14px var(--e-4) 14px 6px; background: var(--f-fondo); border:1px solid var(--f-borde); border-radius: var(--r-1); overflow:hidden; transition: background-color var(--v-base) var(--sale), border-color var(--v-base) var(--sale); } .ficha__cal{ position:absolute; left:0; top:0; bottom:0; width: var(--cal); background: var(--f-cal); transform: scaleY(var(--f-alto)); transform-origin:50% 50%; transition: transform var(--v-base) var(--sale), background-color var(--v-base) var(--sale); } .ficha__siembra{ justify-self:center; font-family: var(--display); font-weight:800; font-size:1.375rem; line-height:1; color: var(--f-siembra); font-variant-numeric: tabular-nums; transition: color var(--v-base) var(--sale); } .ficha__siembra::before{ content:"["; margin-right:1px; color: var(--f-corchete); } .ficha__siembra::after { content:"]"; margin-left:1px; color: var(--f-corchete); } .ficha__siembra--vacia{ visibility:hidden; } .ficha__foto{ width:56px; height:56px; border-radius: var(--r-redondo); display:grid; place-items:center; overflow:hidden; background: var(--capa-4); border:1px solid var(--linea); font-family: var(--display); font-weight:700; font-size:1.25rem; color: var(--tinta-2); } .ficha__foto img{ width:100%; height:100%; object-fit:cover; } .ficha__cuerpo{ min-width:0; } .ficha__nombre{ display:block; font-family: var(--display); font-weight:700; font-size: var(--t-lg); line-height:1.06; text-transform:uppercase; letter-spacing:.005em; color: var(--tinta-1); overflow-wrap:anywhere; } .ficha__meta{ display:block; margin-top:3px; font-family: var(--texto); font-size: var(--t-xs); line-height:1.3; color: var(--tinta-3); overflow:hidden; text-overflow:ellipsis; } /* El separador es una linea, no un punto medio: se compone con , nunca con una cadena unida por " · ". */ .ficha__meta span + span{ margin-left: var(--e-2); padding-left: var(--e-2); border-left:1px solid var(--linea-fuerte); } /* La marca de eleccion cambia forma y lleva glifo: no depende solo del color. */ .ficha__marca{ width:24px; height:24px; flex:none; border:2px solid var(--f-marca); border-radius: var(--r-redondo); display:grid; place-items:center; transition: border-color var(--v-base) var(--sale); } .ficha__marca::after{ content:""; width:10px; height:10px; border-radius: var(--r-redondo); background: var(--naranja); transform: scale(var(--f-punto)); transition: transform var(--v-base) var(--sale); } @media (hover:hover){ .ficha:hover .ficha__cara{ --f-fondo: var(--capa-2); --f-borde: var(--linea-fuerte); --f-siembra: var(--tinta-2); --f-alto: .6; } } .ficha__radio:focus-visible ~ .ficha__cara{ outline:3px solid var(--foco); outline-offset:2px; box-shadow: var(--halo); } .ficha__radio:checked ~ .ficha__cara{ --f-fondo: var(--capa-2); --f-borde: var(--naranja); --f-siembra: var(--tinta-naranja); --f-corchete: var(--tinta-naranja); --f-cal: var(--naranja); --f-alto: 1; --f-marca: var(--naranja); --f-punto: 1; } /* Lectura: misma pieza, ya elegida, sin interaccion (gracias, detalle, cerrada). */ .ficha--lectura{ cursor:default; } .ficha--lectura .ficha__cara{ --f-fondo: var(--capa-2); --f-borde: var(--naranja); --f-siembra: var(--tinta-naranja); --f-corchete: var(--tinta-naranja); --f-cal: var(--naranja); --f-alto: 1; --f-marca: var(--naranja); --f-punto: 1; } .ficha--inactiva{ opacity:.45; pointer-events:none; } @media (min-width:1024px){ .ficha__cara{ grid-template-columns: var(--siembra) 64px minmax(0,1fr) 24px; min-height:88px; } .ficha__foto{ width:64px; height:64px; font-size:1.375rem; } } /* ========================================================= 6. PLACA DE METRICA — cifra primero, rotulo debajo. Se lee como marcador de estadio, no como panel de SaaS. ========================================================= */ .marcador{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap: var(--e-3); } .marcador > .placa--ancha{ grid-column:1 / -1; } @media (min-width:900px){ .marcador{ grid-template-columns:repeat(4, minmax(0,1fr)); gap: var(--e-4); } .marcador > .placa--ancha{ grid-column:span 2; } } .placa{ position:relative; padding: var(--e-6) var(--e-4) var(--e-4); background: var(--capa-1); border:1px solid var(--linea); border-top:2px solid var(--linea-fuerte); border-radius: var(--r-1); } .placa__cifra{ display:block; font-family: var(--display); font-weight:800; font-size: clamp(2.5rem, 11vw, 3.25rem); line-height:.86; color: var(--tinta-1); font-variant-numeric: tabular-nums; } .placa__cifra .unidad{ font-size:.42em; color: var(--tinta-3); margin-left:5px; } .placa__rotulo{ display:block; margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); } .placa__nota{ display:block; margin-top:3px; font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; } .placa__nota--sube{ color: var(--ok); } .placa__nota--baja{ color: var(--falta); } .placa--lider{ border-top-color: var(--naranja); } .placa--lider .placa__cifra{ color: var(--tinta-naranja); } /* ========================================================= 7. REPARTO DE VOTOS Solo el lider lleva naranja. Una sola barra cromatica por pantalla. Django: style="--pct: {{ fila.porcentaje|unlocalize }}%" ← ver reglas de oro. ========================================================= */ .reparto{ margin:0; } .reparto__fila{ display:grid; grid-template-columns: var(--siembra) minmax(0,1fr) auto; gap: var(--e-2) var(--e-3); align-items:baseline; padding-block: var(--e-4); border-bottom:1px solid var(--linea); } .reparto__fila:last-child{ border-bottom:0; } .reparto__siembra{ text-align:center; font-family: var(--display); font-weight:800; font-size:1.125rem; line-height:1; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .reparto__siembra::before{ content:"["; margin-right:1px; opacity:.55; } .reparto__siembra::after { content:"]"; margin-left:1px; opacity:.55; } .reparto__nombre{ min-width:0; font-size: var(--t-sm); font-weight:600; color: var(--tinta-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reparto__cifra{ font-family: var(--display); font-weight:800; font-size:1.25rem; line-height:1; color: var(--tinta-1); font-variant-numeric: tabular-nums; } .reparto__cifra small{ font-size:.64em; color: var(--tinta-3); margin-left:7px; font-weight:700; } .reparto__pista{ grid-column:2 / -1; height:6px; margin-top:2px; background: var(--capa-3); border-radius: var(--r-pill); overflow:hidden; } .reparto__relleno{ display:block; height:100%; border-radius:inherit; background: var(--tinta-3); width: var(--pct, 0%); transition: width var(--v-barra) var(--sale); } .reparto__fila--lider .reparto__nombre{ color: var(--tinta-1); font-weight:700; } .reparto__fila--lider .reparto__siembra{ color: var(--tinta-naranja); } .reparto__fila--lider .reparto__relleno{ background: var(--naranja); } /* ========================================================= 8. SERIE DIARIA (contexto serie_dias del dashboard) Columnas de registro por dia. Cifra arriba, dia abajo: mismo orden de lectura que las placas. ========================================================= */ .serie{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap: var(--e-2); align-items:end; padding-top: var(--e-2); } .serie__col{ display:grid; justify-items:center; gap:6px; min-width:0; } .serie__n{ font-family: var(--display); font-weight:700; font-size: var(--t-sm); line-height:1; color: var(--tinta-2); font-variant-numeric: tabular-nums; } .serie__pista{ width:100%; height:88px; display:flex; align-items:flex-end; background:linear-gradient(var(--linea), var(--linea)) bottom / 100% 1px no-repeat; } .serie__barra{ width:100%; height: max(2px, var(--h, 0%)); background: var(--capa-4); border-top:2px solid var(--linea-fuerte); border-radius: var(--r-1) var(--r-1) 0 0; transition: height var(--v-barra) var(--sale); } .serie__col--hoy .serie__barra{ background: var(--naranja-tenue); border-top-color: var(--naranja); } .serie__col--hoy .serie__n{ color: var(--tinta-naranja); } .serie__dia{ font-size: var(--t-2xs); line-height:1.1; color: var(--tinta-3); text-align:center; white-space:nowrap; } /* ========================================================= 9. TABLA RESPONSIVA Un solo semantico. Bajo 768px cada fila colapsa a tarjeta con los rotulos en data-rotulo; arriba vuelve a ser tabla con cabecera pegajosa. ========================================================= */ .tabla-caja{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; background: var(--capa-1); border:1px solid var(--linea); border-radius: var(--r-1); } .tabla{ width:100%; border-collapse:collapse; font-variant-numeric: tabular-nums; } .tabla th{ position:sticky; top:0; z-index:2; background: var(--capa-2); text-align:left; white-space:nowrap; padding: var(--e-3) var(--e-4); border-bottom:1px solid var(--linea-fuerte); font-family: var(--texto); /* sentence case, no mayusculas */ font-size: var(--t-xs); font-weight:700; color: var(--tinta-2); } .tabla th a{ color:inherit; text-decoration:none; } .tabla th a:hover{ color: var(--tinta-1); text-decoration:underline; } .tabla td{ padding: var(--e-4); border-bottom:1px solid var(--linea); font-size: var(--t-sm); line-height: var(--int-dato); color: var(--tinta-2); vertical-align:middle; } .tabla tbody tr:last-child td{ border-bottom:0; } .tabla .fuerte{ color: var(--tinta-1); font-weight:600; } .tabla .num{ text-align:right; font-variant-numeric: tabular-nums; } .tabla a{ color: var(--azul-claro); } @media (min-width:768px){ .tabla{ min-width:720px; } .tabla tbody tr{ position:relative; } /* La misma linea de cal, ahora como marca de fila enfocada. */ .tabla tbody tr td:first-child{ box-shadow: inset var(--cal) 0 0 transparent; } @media (hover:hover){ .tabla tbody tr:hover td{ background: var(--capa-2); color: var(--tinta-1); } .tabla tbody tr:hover td:first-child{ box-shadow: inset var(--cal) 0 0 var(--naranja); } } .tabla tbody tr:focus-within td:first-child{ box-shadow: inset var(--cal) 0 0 var(--naranja); } } /* Dentro del panel la barra superior mide 56px: la cabecera se pega debajo. */ .panel__main .tabla th{ top:56px; } @media (max-width:767px){ .tabla-caja{ overflow-x:visible; background:transparent; border:0; border-radius:0; } .tabla, .tabla thead, .tabla tbody, .tabla tr, .tabla th, .tabla td{ display:block; } .tabla thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .tabla tbody tr{ position:relative; padding: var(--e-4) var(--e-4) var(--e-4) var(--e-5); margin-bottom: var(--e-3); background: var(--capa-1); border:1px solid var(--linea); border-radius: var(--r-1); overflow:hidden; } .tabla tbody tr::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width: var(--cal); background: var(--linea-fuerte); } .tabla td{ display:flex; justify-content:space-between; align-items:baseline; gap: var(--e-4); padding:0 0 var(--e-2); border:0; } .tabla td:last-child{ padding-bottom:0; } .tabla td::before{ content: attr(data-rotulo); flex:none; font-size: var(--t-xs); font-weight:600; color: var(--tinta-3); } .tabla td[data-rotulo=""]::before{ display:none; } .tabla td.num{ text-align:right; } } /* ========================================================= 10. BARRA DE UTILIDADES, CHIPS Y PAGINACION ========================================================= */ .utilidades{ display:grid; gap: var(--e-2); margin-bottom: var(--e-4); } @media (min-width:720px){ .utilidades{ grid-template-columns: minmax(0,1fr) 200px auto; align-items:center; } } .chips{ display:flex; gap: var(--e-2); overflow-x:auto; scroll-snap-type:x proximity; padding-block: var(--e-2); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); margin-bottom: var(--e-4); scrollbar-width:none; } .chips::-webkit-scrollbar{ display:none; } .chip{ flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; min-height: var(--tap); padding-inline: var(--e-4); border:1px solid var(--linea-fuerte); border-radius: var(--r-pill); background:transparent; color: var(--tinta-2); font-size: var(--t-sm); font-weight:600; white-space:nowrap; text-decoration:none; cursor:pointer; transition: border-color var(--v-rapido) var(--sale), color var(--v-rapido) var(--sale), background-color var(--v-rapido) var(--sale); } .chip:hover{ color: var(--tinta-1); border-color: var(--tinta-1); text-decoration:none; } .chip[aria-current="true"], .chip[aria-pressed="true"]{ border-color: var(--naranja); background: var(--naranja-tenue); color: var(--tinta-naranja); } .paginacion{ display:flex; align-items:center; justify-content:space-between; gap: var(--e-3); margin-top: var(--e-6); padding-top: var(--e-4); border-top:1px solid var(--linea); } .paginacion__rango{ font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; text-align:center; } /* ========================================================= 11. SELLO (badge) — delineado por defecto. El naranja solido se reserva al boton primario y al candidato elegido. ========================================================= */ .sello{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--linea-fuerte); border-radius: var(--r-pill); background:transparent; font-family: var(--texto); font-size: var(--t-2xs); font-weight:700; line-height:1.2; color: var(--tinta-2); white-space:nowrap; } .sello__punto{ width:6px; height:6px; border-radius: var(--r-redondo); background:currentColor; flex:none; } .sello--naranja{ border-color: var(--naranja-linea); background: var(--naranja-tenue); color: var(--tinta-naranja); } .sello--solido{ border-color: var(--naranja); background: var(--naranja); color: var(--sobre-naranja); } .sello--activo{ border-color: var(--ok-linea); background: var(--ok-tenue); color: var(--ok); } .sello--inactivo{ border-color: var(--linea); color: var(--tinta-3); } /* ========================================================= 12. AVISO (mensajes de Django) Los modificadores calzan con message.tags: success, error, warning, info, debug. {% for m in messages %}
…{% endfor %} ========================================================= */ .aviso{ position:relative; padding: var(--e-4) var(--e-4) var(--e-4) var(--e-5); margin-bottom: var(--e-5); background: var(--capa-1); border:1px solid var(--linea); border-radius: var(--r-1); overflow:hidden; font-size: var(--t-sm); line-height:1.5; color: var(--tinta-2); } .aviso::before{ content:""; position:absolute; left:0; top:0; bottom:0; width: var(--cal); background: var(--linea-fuerte); } .aviso__titulo{ margin:0 0 3px; font-family: var(--texto); font-size: var(--t-sm); font-weight:700; line-height:1.35; color: var(--tinta-1); } .aviso p{ margin:0; max-width: var(--medida); } .aviso .btn{ margin-top: var(--e-3); } .aviso--success::before{ background: var(--ok); } .aviso--success .aviso__titulo{ color: var(--ok); } .aviso--error::before{ background: var(--falta); } .aviso--error .aviso__titulo{ color: var(--falta); } .aviso--warning::before{ background: var(--let); } .aviso--warning .aviso__titulo{ color: var(--let); } .aviso--info::before, .aviso--debug::before{ background: var(--azul-claro); } .aviso--info .aviso__titulo, .aviso--debug .aviso__titulo{ color: var(--azul-claro); } /* ========================================================= 13. INTERRUPTOR (activar / desactivar candidato) Es un ========================================================= */ .tema{ flex:none; display:inline-grid; place-items:center; width: var(--tap); height: var(--tap); padding:0; background:transparent; border:1px solid var(--linea); border-radius: var(--r-1); color: var(--tinta-2); cursor:pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--v-rapido) var(--sale), border-color var(--v-rapido) var(--sale), color var(--v-rapido) var(--sale); } @media (hover:hover){ .tema:hover{ background: var(--realce); border-color: var(--linea-fuerte); color: var(--tinta-1); } } .tema:active{ background: var(--realce-alto); } .tema svg{ width:20px; height:20px; fill:none; stroke:currentColor; } /* El selector lleva .tema adelante a proposito: `img, svg{display:block}` de la base gana por especificidad si estas dos reglas van con una sola clase, y se verian los dos iconos a la vez. */ .tema .tema__sol{ display:none; } .tema .tema__luna{ display:block; } :root[data-tema="oscuro"] .tema__sol{ display:block; } :root[data-tema="oscuro"] .tema__luna{ display:none; } /* Acceso al panel: el logo a la izquierda y el alternador de tema a la derecha. */ .entrada__cabecera{ display:flex; align-items:center; justify-content:space-between; gap: var(--e-4); }