/* ============================================================================ ELECCIONES NACIONALES DEL CONSEJO DE LA MAGISTRATURA DE LA NACIÓN Sistema de diseño (el único lugar de colores, tipos y componentes). Sistema creado por Ledesma Luciano. ---------------------------------------------------------------------------- La idea: la identidad de la Lista 1 · Abogacía Federal (kit de marca del 24/09) sobre el padrón impreso hecho pantalla. Cabeceras con el fondo oscuro del kit (azul marino que se va a ciruela y a rojo en la esquina) y filetes dorados; el cuerpo en la versión clara (gris muy claro, blanco, azul marino); títulos de sección con serifa; el rojo sólo de acento chico. El archivo conserva su nombre. Cómo se usa: · elige el acento del portal (lo pone views/partials/header.ejs con res.locals.acento, de lib/portales.js). · da vuelta a grafito (sala de situación de la central). · Tailwind (CDN) queda para maquetar (flex, grid, márgenes). Sus colores "brand", "indigo", "violet", "purple" y "slate" salen de acá (ver header.ejs): no queda nada del violeta ni de los degradés de antes. · Componentes: .t-btn(-primario|-secundario|-peligro), .t-tarjeta, .t-tabla, .t-chip(-ok|-falta|-aviso|-error|-baja|-info), .t-aviso(-ok|-error|-info|-practica), .t-campo + .t-input, .t-cabecera, .t-pie, .t-vacio, .t-confirmacion, .t-sello, .t-kpi, .t-titulo, .t-eyebrow, .t-mono. Los nombres viejos (.btn-primary, .card, table.data, .chip, .progress) se ven con este mismo sistema. ============================================================================ */ /* ---------- 1. Variables ---------- */ /* La identidad es la de la Lista 1 · Abogacía Federal (kit de marca del 24/09): azul marino, celeste, dorado, un ciruela de paso y el rojo SOLO de acento chico (nunca en un botón común: se confunde con "peligro"). En el cuarto oscuro la boleta es blanca con letras negras: estos colores son la identidad del sistema, no le dicen a nadie qué votar. Los colores de ESTADO (votó, falta, error) no son marca: son información y no cambian. */ :root { /* La paleta de la lista */ --azul: #062D64; /* azul marino (13,4:1 con blanco) */ --azul-2: #102858; /* el otro extremo del degradé */ --azul-noche: #041E45; /* bordes y rellenos fuertes (16,6:1 con blanco) */ --celeste: #6FA8DC; /* acento SOBRE azul (5,3:1); sobre claro no va como texto */ --celeste-tinta: #22609E; /* el celeste que se lee sobre claro (5,5:1 sobre papel) */ --dorado: #C9A66B; /* filetes finos; como texto, sólo sobre azul (5,8:1) */ --dorado-1: #F7D28E; /* el degradé de las líneas doradas del kit */ --dorado-2: #E0A24B; --ciruela: #512549; --rojo: #CB1521; /* acento chico: la balanza y la barra del logo, la raya del margen */ --negro: #041E45; /* lo que antes era negro puro ahora es azul noche */ /* La cabecera de todos los portales: el fondo oscuro del kit con las líneas doradas */ --fondo-cabecera: url("data:image/svg+xml;utf8,") right top / 320px 64px no-repeat, radial-gradient(150px 110px at 0 100%, rgba(203,21,33,.85), rgba(81,37,73,.55) 45%, rgba(81,37,73,0)), linear-gradient(100deg, #062D64 45%, #102858) #062D64; /* Papel y tinta: la versión CLARA del kit */ --papel: #EDEDED; --papel-2: #E1E3E8; /* hundido: fondos de tabla, cabeceras */ --hoja: #FFFFFF; /* tarjetas y campos */ --tinta: #0A1930; --tinta-2: #3B475B; /* texto secundario (8:1 sobre papel) */ --tinta-3: #505C71; /* texto terciario (5,7:1 sobre papel) */ --renglon: #D3D8E0; /* líneas de renglón */ --borde: #C5CCD7; --margen: #CB1521; /* SOLO la raya del margen, nunca texto */ /* Nombres de antes que las pantallas siguen usando, ahora dentro de la paleta */ --amarillo-senal: #F2C14E; /* "atención" y la banda de práctica: el dorado encendido */ --verde-padron: #062D64; /* era el color del portal equipo: ahora el azul de la lista */ --azul-lapicera: #062D64; --coral: #F47C74; /* alertas sobre fondo oscuro: el rojo aclarado (6,9:1 sobre azul noche) */ --grafito: #061A3A; /* tema oscuro (sala de situación, TV): azul noche */ --grafito-2: #0B2550; --grafito-3: #143264; --grafito-linea: #22417A; --grafito-texto: #EEF3FA; --grafito-texto-2: #A9BCD8; /* Estados (texto oscuro sobre fondo claro: AA o más) */ --ok: #0B6E3E; --ok-fondo: #E3F1E8; --ok-borde: #9CCBAF; --error: #A8231A; --error-fondo: #FBE9E6; --error-borde: #E8A59C; --aviso: #6B4A00; --aviso-fondo: #FFF3BF; --aviso-borde: #E5C24A; --info: #1F5F9E; --info-fondo: #EAF2FB; --info-borde: #A9C7E8; --baja: #474B54; --baja-fondo: #E9EBEF; --baja-borde: #B8BFCB; /* Tipografía: la sans negrita de la marca y la serifa de acento del kit */ --f-texto: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --f-titulo: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* cifras y rótulos */ --f-serif: "Libre Baskerville", Georgia, "Times New Roman", serif; /* títulos de sección */ --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --ancho-titulo: 125%; /* Archivo expandida para las cifras */ /* Espaciados */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; /* Radios */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 18px; --r-pill: 999px; /* Sombras */ --sombra-1: 0 1px 0 rgba(6,45,100,.05), 0 1px 3px rgba(6,45,100,.08); --sombra-2: 0 12px 28px -14px rgba(6,45,100,.45); --sombra-3: 0 30px 60px -20px rgba(0,0,0,.55); /* Zona táctil mínima */ --toque: 48px; /* Acentos: el botón fuerte es celeste con letras azules; la marca, azul marino */ --acento: #6FA8DC; /* relleno del botón fuerte */ --acento-tinta: #062D64; /* texto sobre --acento (5,3:1) */ --marca: #062D64; /* color de marca usable como texto y con texto blanco encima */ --marca-rgb: 6 45 100; --marca-oscura: #041E45; --marca-50: #EEF4FB; --marca-100: #DCE8F6; --marca-200: #B9D2EC; --foco: #22609E; /* La solapa de cada portal: FISCALES, REFERENTES, COLEGIO, CENTRAL o EN VIVO */ --solapa: #6FA8DC; --solapa-tinta: #062D64; --solapa-borde: transparent; --sab: env(safe-area-inset-bottom, 0px); } /* Cada portal se reconoce por su solapa, siempre con colores de la lista */ html[data-acento="mesa"] { --papel: #FFFFFF; } /* el fiscal: blanco puro, máximo contraste al sol */ html[data-acento="equipo"] { --solapa: #C9A66B; } html[data-acento="colegio"] { --solapa: #FFFFFF; } html[data-acento="central"] { --solapa: transparent; --solapa-tinta: #C9A66B; --solapa-borde: #C9A66B; } /* Cada portal con su propio color de cabecera (pedido del 25/09: «que se distingan por 4 colores»): central azul marino (el del kit), colegios verde bosque, referentes bordó, fiscales azul petróleo. Mismas líneas doradas y mismo rincón rojo. */ html[data-acento="colegio"] { --fondo-cabecera: url("data:image/svg+xml;utf8,") right top / 320px 64px no-repeat, radial-gradient(150px 110px at 0 100%, rgba(203,21,33,.85), rgba(81,37,73,.55) 45%, rgba(81,37,73,0)), linear-gradient(100deg, #0E4D3A 45%, #155C46) #0E4D3A; } html[data-acento="equipo"] { --fondo-cabecera: url("data:image/svg+xml;utf8,") right top / 320px 64px no-repeat, radial-gradient(150px 110px at 0 100%, rgba(203,21,33,.85), rgba(81,37,73,.55) 45%, rgba(81,37,73,0)), linear-gradient(100deg, #6E1A24 45%, #7E2430) #6E1A24; } html[data-acento="mesa"] { --fondo-cabecera: url("data:image/svg+xml;utf8,") right top / 320px 64px no-repeat, radial-gradient(150px 110px at 0 100%, rgba(203,21,33,.85), rgba(81,37,73,.55) 45%, rgba(81,37,73,0)), linear-gradient(100deg, #0F5C86 45%, #1B6B99) #0F5C86; } .t-solapa-vivo { --solapa: #CB1521; --solapa-tinta: #fff; --solapa-borde: transparent; } /* ---------- 2. Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, .t-titulo { font-family: var(--f-titulo); letter-spacing: -.01em; color: inherit; } /* Títulos de sección con la serifa del kit (las cifras siguen en la sans ancha: .t-num, .t-kpi) */ h1, h2, .t-titulo { font-family: var(--f-serif); letter-spacing: 0; } /* Tailwind (CDN) agrega su "preflight" DESPUÉS de esta hoja y deja los títulos con font-weight: inherit (los h1 salían finitos). Con "html" delante estas reglas le ganan (especificidad 0,0,2 contra 0,0,1) y las utilidades de Tailwind (una clase) siguen mandando. */ html h1, html .t-titulo { font-weight: 700; font-stretch: 100%; line-height: 1.15; } html h2 { font-weight: 700; line-height: 1.22; } html h3 { font-weight: 800; } a { color: inherit; } code, kbd, .t-mono, .font-mono { font-family: var(--f-mono) !important; } .t-num { font-family: var(--f-titulo); font-stretch: var(--ancho-titulo); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .t-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--celeste-tinta); } /* Color de estado para un renglón entero (ícono + volanta): en grafito pasa al coral */ .t-color-error, .t-color-error .t-eyebrow { color: var(--error); } .t-color-ok, .t-color-ok .t-eyebrow { color: var(--ok); } .t-color-aviso, .t-color-aviso .t-eyebrow { color: var(--aviso); } html[data-tema="oscuro"] .t-color-error, html[data-tema="oscuro"] .t-color-error .t-eyebrow { color: var(--coral); } html[data-tema="oscuro"] .t-color-ok, html[data-tema="oscuro"] .t-color-ok .t-eyebrow { color: #6EE7A8; } .t-sub { color: var(--tinta-2); } .ic { flex: none; display: inline-block; vertical-align: middle; } .vh { position: absolute !important; width: 1px; height: 1px; min-height: 0 !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Foco visible, siempre (con teclado). Sobre fondos oscuros el anillo cambia de color para verse. */ :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; } button:focus:not(:focus-visible) { outline: none; } html[data-tema="oscuro"] { --foco: #6FA8DC; } .f-barra :focus-visible, .t-impersonar :focus-visible, .t-cabecera :focus-visible, .t-pie :focus-visible, .r-cab :focus-visible, .t-ingreso-cabeza :focus-visible { outline-color: var(--celeste); } /* Portal mesa: todo lo que se toca mide al menos 48 px (se usa con el pulgar, parado, apurado) */ html[data-acento="mesa"] .t-btn, html[data-acento="mesa"] .t-btn-chico, html[data-acento="mesa"] select, html[data-acento="mesa"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 48px; } /* Campos: 16 px mínimo (el iPhone no hace zoom) y borde de tinta. "html" delante por lo mismo que los títulos: el preflight de Tailwind les pone font-size: 100%. */ html input, html select, html textarea { font-size: 16px; font-family: inherit; color: var(--tinta); } input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"], input[type="datetime-local"], input[type="time"], input:not([type]), select, textarea { background-color: var(--hoja); border: 2px solid var(--borde); border-radius: var(--r-2); min-height: 44px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta) !important; box-shadow: 0 0 0 3px var(--marca-200) !important; } input::placeholder, textarea::placeholder { color: #5F6A7E; opacity: 1; } input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); width: 20px; height: 20px; } /* ---------- 3. La marca: balanza + «ELECCIONES NACIONALES / Consejo de la Magistratura de la Nación» ---------- lib/iconos.js → logo(tam). Como en el kit de la lista: el nombre en sans negrita, el renglón de acento con serifa y la balanza de dos platos. Sobre claro: azul marino, con la balanza y la barra en rojo. Sobre oscuro (cabeceras, pie, ingreso, TV): blanco, con el acento en celeste. En el celular angosto, la forma corta: «ELECCIONES / CM de la Nación». */ .t-logo { display: inline-flex; align-items: center; gap: .55em; min-width: 0; line-height: 1; white-space: nowrap; text-transform: none; font-family: var(--f-texto); font-stretch: 100%; letter-spacing: 0; color: var(--logo-1, #062D64); } .t-logo-balanza { width: 2.3em; height: 2.3em; flex: none; fill: none; stroke: var(--logo-balanza, #CB1521); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .t-logo-txt { display: flex; flex-direction: column; gap: .3em; min-width: 0; } .t-logo-1 { font-weight: 900; letter-spacing: .06em; line-height: 1; white-space: nowrap; padding-bottom: .3em; background: linear-gradient(var(--logo-barra, #CB1521), var(--logo-barra, #CB1521)) left bottom / 100% 2px no-repeat; } .t-logo-2 { font: 700 .8em/1.15 var(--f-serif); letter-spacing: 0; color: var(--logo-2, #062D64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t-logo-corto { display: none; } @media (max-width: 440px) { .t-logo-largo { display: none; } .t-logo-corto { display: inline; } .t-logo-txt { min-width: auto; } /* la forma corta nunca se aprieta ni se pisa con lo de al lado */ .al-cabecera .t-logo-txt, .r-cab .t-logo-txt { display: none; } /* en las barras del colegio y del referente manda lo suyo: queda la balanza */ } /* Cabecera del referente hasta 640 px: la balanza y REFERENTES no se aprietan ni se pisan; el que se achica (con puntos suspensivos) es el nombre del colegio. */ @media (max-width: 640px) { .r-cab .t-logo-txt { display: none; } html .r-cab .justify-between > span:first-child { flex-shrink: 0; } html .r-cab .t-logo { flex: none; } } /* Sobre fondo oscuro: logo blanco, acento celeste y sin la barra roja */ .t-cabecera, .f-barra, .t-pie, .t-ingreso-cabeza, .r-cab, html[data-tema="oscuro"] body { --logo-1: #fff; --logo-2: #6FA8DC; --logo-balanza: #fff; --logo-barra: transparent; } /* Marca de agua del creador: «LEDESMA LUCIANO», fija y muy tenue (5 %). No se puede tocar ni seleccionar, el lector de pantalla no la lee y no baja el contraste de nada (sobre blanco queda #F3F5F8). Va debajo de la cabecera y de los diálogos. */ body::after { content: "LEDESMA LUCIANO"; content: "LEDESMA LUCIANO" / ""; position: fixed; left: 50%; top: 54%; z-index: 30; transform: translate(-50%, -50%) rotate(-28deg); font: 700 min(8vw, 96px)/1 var(--f-serif); letter-spacing: .12em; white-space: nowrap; color: #062D64; opacity: .05; pointer-events: none; user-select: none; -webkit-user-select: none; } html[data-tema="oscuro"] body::after { color: #fff; opacity: .045; } /* ---------- 3b. La marca en piezas puntuales de la central ---------- */ /* Hub de referentes (control/referidos.ejs): las cifras con la sans ancha de la marca, como los números de la sala, y el filete celeste de «nuestra gente» arriba de cada tarjeta. */ .ref-kpis .t-tarjeta { border-top: 3px solid var(--celeste); } .ref-kpis .t-mono { font-family: var(--f-titulo) !important; font-stretch: var(--ancho-titulo); font-weight: 900; letter-spacing: -.01em; } /* Herramientas del distrito (control/colegio.ejs): tarjetas azul noche con el ícono celeste y el marco dorado fino del kit al pasar o enfocar. */ html .ctl-herr a { background: var(--grafito-2); border-color: var(--grafito-linea); } html .ctl-herr a:hover, html .ctl-herr a:focus-visible { background: var(--grafito-3); border-color: var(--dorado); } html .ctl-herr .ic { color: var(--celeste); } /* ---------- 4. Botones ---------- */ .t-btn, .btn, .btn-primary, .btn-secondary, .btn-danger, a.btn, a.btn-primary, a.btn-secondary, a.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-2); border: 2px solid transparent; font-family: var(--f-texto); font-weight: 800; font-size: 15px; line-height: 1.15; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s, transform .08s; } .t-btn:active:not(:disabled), .btn:active:not(:disabled), .btn-primary:active:not(:disabled) { transform: scale(.98); } .t-btn:disabled, .btn:disabled, .btn-primary:disabled, .btn-secondary:disabled { opacity: .5; cursor: not-allowed; } /* Primario: azul marino de la lista con texto blanco */ .t-btn-primario, .btn-primary, button.btn-primary, a.btn-primary { background: var(--marca); color: #fff; border-color: var(--marca); } .t-btn-primario:hover, .btn-primary:hover { background: var(--marca-oscura); border-color: var(--marca-oscura); } /* Fuerte: celeste de la lista con letras azules (se lee igual sobre la cabecera azul y sobre blanco) */ .t-btn-fuerte { background: var(--acento); color: var(--acento-tinta); border-color: var(--azul); } .t-btn-fuerte:hover { filter: brightness(.95); } /* Secundario: contorno de tinta sobre hoja */ .t-btn-secundario, .btn-secondary, a.btn-secondary { background: var(--hoja); color: var(--tinta); border-color: var(--tinta); } .t-btn-secundario:hover, .btn-secondary:hover { background: var(--papel-2); } /* Peligro */ .t-btn-peligro, .btn-danger, a.btn-danger { background: var(--hoja); color: var(--error); border-color: var(--error); } .t-btn-peligro:hover, .btn-danger:hover { background: var(--error-fondo); } .t-btn-peligro-lleno { background: var(--error); color: #fff; border-color: var(--error); } /* Azul noche con letras doradas: el botón VOTÓ y las llamadas dentro de una caja dorada (portal mesa) */ .t-btn-negro { background: var(--negro); color: var(--amarillo-senal); border-color: var(--negro); } .t-btn-negro:hover { background: #0B2A5E; } .t-btn-fantasma { background: transparent; color: inherit; border-color: transparent; } .t-btn-fantasma:hover { background: rgba(6,45,100,.07); } .t-btn-grande { min-height: 64px; font-size: 20px; border-radius: var(--r-3); border-width: 3px; padding: 10px 22px; font-stretch: 112%; } .t-btn-chico { min-height: 36px; font-size: 14px; padding: 4px 12px; border-width: 2px; } .t-btn-bloque { width: 100%; } .t-btn-icono { width: var(--toque); height: var(--toque); min-height: var(--toque); padding: 0; } /* Un botón nunca se sale de la pantalla: si el texto no entra, baja de renglón */ .t-btn, .btn, .btn-primary, .btn-secondary, .btn-danger { max-width: 100%; } .t-btn-bloque, .t-btn-grande { white-space: normal; text-align: center; } .t-btn .t-btn-txt { display: flex; flex-direction: column; align-items: center; min-width: 0; } .t-btn .t-btn-txt small { font-size: 14px; font-weight: 700; letter-spacing: 0; font-stretch: 100%; opacity: .9; } /* ".btn" solo, sin variante: que se vea como secundario */ .btn:not([class*="bg-"]):not(.btn-primary):not(.btn-secondary):not(.btn-danger) { background: var(--hoja); color: var(--tinta); border-color: var(--tinta); } /* ---------- 5. Tarjetas ---------- */ .t-tarjeta, .card { background: var(--hoja); border: 1.5px solid var(--borde); border-radius: var(--r-3); box-shadow: var(--sombra-1); color: var(--tinta); } .t-tarjeta-tinta { border: 2px solid var(--tinta); box-shadow: none; } .t-tarjeta-marca { border-top: 5px solid var(--marca); } .t-tarjeta-peligro { border: 2px solid var(--error); } /* Resultado de una carga (Excel): verde si salió todo, amarillo si hubo algo para revisar */ .t-tarjeta-ok { background: var(--ok-fondo); border-color: var(--ok-borde); } .t-tarjeta-aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); } .t-caja-lista { background: var(--hoja); border: 1.5px solid var(--aviso-borde); } a.card:hover, a.t-tarjeta:hover { border-color: var(--tinta); } .card.overflow-hidden, .t-tarjeta.overflow-hidden { overflow: clip; } /* Renglones del padrón: la raya roja del margen y las líneas */ .t-renglones { background-color: var(--hoja); background-image: linear-gradient(90deg, transparent 46px, var(--margen) 46px, var(--margen) 48px, transparent 48px), repeating-linear-gradient(180deg, transparent 0 35px, var(--renglon) 35px 36px); } .t-margen { background-image: linear-gradient(90deg, transparent 12px, var(--margen) 12px, var(--margen) 14px, transparent 14px); } html[data-tema="oscuro"] .t-renglones { background-color: var(--grafito-2); background-image: linear-gradient(90deg, transparent 46px, var(--coral) 46px, var(--coral) 48px, transparent 48px), repeating-linear-gradient(180deg, transparent 0 35px, var(--grafito-linea) 35px 36px); } /* ---------- 6. Tablas ---------- */ .t-tabla, table.data { width: 100%; border-collapse: collapse; background: var(--hoja); } .t-tabla th, .t-tabla td, table.data th, table.data td { padding: .6rem .75rem; border-bottom: 1px solid var(--renglon); font-size: .9rem; text-align: left; vertical-align: middle; } .t-tabla thead th, table.data thead th { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); background: var(--papel-2); position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 var(--borde); } .t-tabla tbody tr:hover, table.data tbody tr:hover { background: #F5F8FC; } .t-tabla .t-orden, table.data .t-orden { font-family: var(--f-mono); color: var(--tinta-2); } /* El scroll de una tabla ancha queda DENTRO de la tabla, nunca en la página. "position: relative" hace falta: sin eso, lo posicionado adentro (textos para lectores de pantalla, globitos) se medía contra la página y el celular achicaba todo para mostrar 1.000 px de ancho. */ .tabla-scroll, .overflow-x-auto, .overflow-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; max-width: 100%; } /* ---------- 7. Chips de estado ---------- */ .t-chip, .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; min-height: 26px; border-radius: var(--r-pill); border: 1.5px solid currentColor; font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; background: var(--hoja); color: var(--tinta-2); } .t-chip-ok, .chip-emerald { color: var(--ok); background: var(--ok-fondo); border-color: var(--ok-borde); } .t-chip-falta { color: var(--tinta); background: var(--hoja); border-color: var(--tinta); border-style: dashed; } .t-chip-aviso, .chip-amber { color: var(--aviso); background: var(--aviso-fondo); border-color: var(--aviso-borde); } .t-chip-error, .chip-red, .chip-rose { color: var(--error); background: var(--error-fondo); border-color: var(--error-borde); } .t-chip-baja { color: var(--baja); background: repeating-linear-gradient(-45deg, var(--baja-fondo) 0 6px, #EDF0F5 6px 12px); border-color: var(--baja-borde); border-style: dashed; } .t-chip-info, .chip-indigo { color: var(--info); background: var(--info-fondo); border-color: var(--info-borde); } .t-chip-marca { color: var(--acento-tinta); background: var(--acento); border-color: var(--acento); } /* ---------- 8. Avisos ---------- */ .t-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-2); border: 2px solid var(--info-borde); background: var(--info-fondo); color: var(--tinta); font-size: 15px; line-height: 1.4; } .t-aviso > .ic { margin-top: 1px; } .t-aviso b, .t-aviso strong { font-weight: 800; } .t-aviso-ok { border-color: var(--ok-borde); background: var(--ok-fondo); } .t-aviso-ok > .ic { color: var(--ok); } .t-aviso-error { border-color: var(--error); background: var(--error-fondo); } .t-aviso-error > .ic { color: var(--error); } .t-aviso-aviso { border-color: var(--aviso-borde); background: var(--aviso-fondo); } .t-aviso-info > .ic { color: var(--info); } /* Práctica: banda amarilla con franjas, imposible confundirla con la votación real */ .t-aviso-practica { position: relative; border: 3px solid var(--negro); background: var(--amarillo-senal); color: var(--negro); padding-top: 22px; border-radius: var(--r-2); overflow: hidden; } .t-aviso-practica::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--negro) 0 8px, var(--amarillo-senal) 8px 16px); } /* ---------- 9. Campos ---------- */ .t-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 15px; } .t-campo > small, .t-ayuda { font-weight: 500; font-size: 14px; color: var(--tinta-2); } .t-input { display: flex; align-items: center; gap: 6px; border: 3px solid var(--tinta); border-radius: var(--r-2); min-height: 60px; padding: 0 6px 0 14px; background: var(--hoja); } .t-input:focus-within { box-shadow: 0 0 0 4px var(--acento); } .t-input input, .t-input select { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; font: 600 20px var(--f-mono); color: var(--negro); height: 100%; min-height: 54px; padding: 0; outline: none; } .t-input input.t-input-texto { font-family: var(--f-texto); font-weight: 600; } .t-input .t-btn-ver { min-height: 48px; min-width: 48px; border: 0; background: transparent; border-radius: var(--r-1); color: var(--negro); font-weight: 800; font-size: 14px; cursor: pointer; } .t-input .t-btn-ver:hover { background: rgba(0,0,0,.06); } /* ---------- 10. Cabecera: el fondo oscuro del kit en todos los portales ---------- */ /* Azul marino con el rojo que asoma por el ciruela en la esquina de abajo a la izquierda, líneas doradas finas arriba a la derecha y un filete dorado abajo. La solapa dice el portal. La barra propia del fiscal (.f-barra) y la del referente (.r-cab) son iguales. */ .t-cabecera { position: sticky; top: 0; z-index: 40; background: var(--fondo-cabecera); color: #fff; border-bottom: 2px solid var(--dorado); --foco: var(--celeste); } html .r-cab { background: var(--fondo-cabecera); color: #fff; border-bottom: 2px solid var(--dorado); } .t-cabecera-fila { max-width: 80rem; margin: 0 auto; padding: 0 12px; min-height: 60px; display: flex; align-items: center; gap: 10px; } .t-solapa { display: inline-flex; align-items: center; gap: 7px; background: var(--solapa); color: var(--solapa-tinta); box-shadow: inset 0 0 0 1.5px var(--solapa-borde); font-weight: 800; letter-spacing: .14em; font-size: 12px; text-transform: uppercase; padding: 0 10px; height: 28px; border-radius: 5px; white-space: nowrap; } .t-solapa span { font-weight: 600; letter-spacing: 0; text-transform: none; } .t-cabecera-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; flex: 0 1 auto; min-width: 0; min-height: 44px; } .t-cabecera-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; min-width: 0; overflow: hidden; } .t-cabecera-links a, .t-menu a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-1); text-decoration: none; font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; } /* Los accesos rápidos de la central van en un segundo renglón (header.ejs): a 1280, 1536 o 1920 px y con zoom entran todos, arrancando por la izquierda; si alguna vez no entran, se desplazan dentro del renglón y nunca cortan el primero. */ .t-cabecera-sub { border-top: 1px solid rgba(255,255,255,.14); background: rgba(4,30,69,.35); } .t-cabecera-sub .t-cabecera-links { max-width: 80rem; margin: 0 auto; padding: 4px 12px; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; } .t-cabecera-links a:hover, .t-menu a:hover { background: rgba(255,255,255,.1); } .t-cabecera-links a[aria-current="page"], .t-menu a[aria-current="page"] { background: #fff; color: var(--azul); } .t-cabecera-yo { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: 14px; max-width: 220px; } .t-cabecera-yo i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--celeste); color: var(--azul); display: grid; place-items: center; font-weight: 900; font-size: 13px; flex: none; } .t-cabecera .t-btn-fantasma { color: #fff; } .t-cabecera .t-btn-fantasma:hover { background: rgba(255,255,255,.12); } /* La barra propia del colegio: el nombre de la elección, claro sobre el azul */ .t-cabecera .al-colegio span { color: var(--grafito-texto-2); } .t-menu { border-top: 1px solid rgba(255,255,255,.14); background: var(--grafito-2); box-shadow: var(--sombra-3); } .t-menu-grilla { max-width: 80rem; margin: 0 auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; } .t-menu a { min-height: 48px; padding: 8px 12px; } .t-menu a .ic { color: var(--grafito-texto-2); } .t-menu a[aria-current="page"] .ic { color: var(--azul); } .t-menu-grupo { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--celeste); padding: 12px 12px 2px; } .t-menu-grupo:first-child { padding-top: 4px; } /* El banner de "estás viendo como fiscal" */ .t-impersonar { background: var(--azul-noche); color: #fff; border-bottom: 3px solid var(--celeste); } /* ---------- 11. Pie: la franja del kit (azul, el rojo en la esquina, logo | separador | texto) ---------- */ .t-pie { margin-top: 48px; padding: 18px 16px calc(18px + var(--sab)); color: #E4ECF7; font-size: 13px; background: radial-gradient(160px 110px at 0 100%, rgba(203,21,33,.85), rgba(81,37,73,.55) 45%, rgba(81,37,73,0)), linear-gradient(100deg, var(--azul) 50%, var(--azul-2)) var(--azul); border-top: 2px solid var(--dorado); } .t-pie-fila { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; } .t-pie-sep { width: 1px; height: 30px; background: rgba(255,255,255,.35); flex: none; } .t-pie-credito { font-size: 12px; letter-spacing: .04em; color: #fff; } /* Donde no va el pie entero, igual queda la firma del creador */ .t-credito { margin: 0; padding: 14px 16px calc(14px + var(--sab)); text-align: center; font-size: 12px; letter-spacing: .04em; color: var(--tinta-3); } html[data-tema="oscuro"] .t-credito { color: var(--grafito-texto-2); } /* ---------- 12. Estado vacío ---------- */ .t-vacio { text-align: center; padding: 32px 20px; border: 2px dashed var(--borde); border-radius: var(--r-3); background: var(--hoja); color: var(--tinta-2); } .t-vacio > .ic, .t-vacio > .tilde { color: var(--tinta-3); margin: 0 auto 10px; display: block; } /* El título del estado vacío es el /

suelto; las negritas dentro del texto siguen en línea */ .t-vacio > b, .t-vacio > h3, .t-vacio .t-vacio-titulo { display: block; color: var(--tinta); font-size: 18px; font-weight: 800; margin: 0 0 4px; } .t-vacio b { color: var(--tinta); } .t-vacio p { margin: 4px auto 0; max-width: 46ch; } .t-vacio .t-btn { margin-top: 14px; } .empty-state { text-align: center; padding: 32px 20px; color: var(--tinta-2); } /* ---------- 13. Confirmación (diálogo) ---------- */ .t-confirmacion-fondo { position: fixed; inset: 0; background: rgba(4,22,48,.6); display: none; align-items: center; justify-content: center; z-index: 9998; padding: 16px; } .t-confirmacion-fondo.show, .t-confirmacion-fondo[open] { display: flex; } .t-confirmacion { background: var(--hoja); color: var(--tinta); border: 3px solid var(--tinta); border-radius: var(--r-4); max-width: 440px; width: 100%; padding: 20px; box-shadow: var(--sombra-3); } .t-confirmacion h2, .t-confirmacion .t-confirmacion-titulo { font-size: 22px; font-weight: 900; font-stretch: 115%; margin: 0 0 4px; } .t-confirmacion-acciones { display: flex; gap: 8px; margin-top: 16px; } .t-confirmacion-acciones > * { flex: 1; } dialog.t-confirmacion::backdrop { background: rgba(4,22,48,.6); } /* ---------- 14. El sello «VOTÓ 11:02» ---------- */ .t-sello { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font: 900 22px/1 var(--f-titulo); font-stretch: 115%; letter-spacing: .06em; color: var(--ok); border: 3px solid var(--ok); border-radius: var(--r-1); padding: 7px 12px 6px; transform: rotate(-6deg); background: var(--hoja); white-space: nowrap; } .t-sello small { display: block; font: 700 14px/1 var(--f-mono); letter-spacing: .02em; margin-top: 3px; } .t-sello.t-sello-mesa { color: var(--negro); border-color: var(--negro); } @keyframes t-sellar { 0% { transform: rotate(-16deg) scale(1.6); opacity: 0; } 60% { transform: rotate(-4deg) scale(.94); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); } } .t-sello.t-sellando { animation: t-sellar .32s cubic-bezier(.2,.9,.3,1.2) both; } /* ---------- 15. Cifras (KPI) ---------- */ .t-kpi { background: var(--hoja); border: 1.5px solid var(--borde); border-radius: var(--r-3); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .t-kpi small, .t-kpi .t-kpi-nombre { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); } .t-kpi .t-kpi-valor { font: 900 40px/1 var(--f-titulo); font-stretch: 125%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .t-kpi .t-kpi-valor sub { font-size: .5em; vertical-align: baseline; color: var(--tinta-2); font-weight: 700; } .t-kpi .t-kpi-pie { font-size: 14px; color: var(--tinta-2); } .t-barra, .progress { position: relative; height: 12px; border: 2px solid var(--tinta); border-radius: 3px; background: var(--hoja); overflow: hidden; } .t-barra > i, .t-barra > span, .progress > span { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; background: var(--marca); transition: width .4s ease; border-radius: 0; animation: none; } html[data-acento="mesa"] .t-barra > i, html[data-acento="mesa"] .t-barra > span { background: var(--negro); } /* ---------- 16. Página: título de sección ---------- */ .t-pagina { max-width: 80rem; margin: 0 auto; padding: 20px 16px 8px; } .t-pagina-titulo { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--tinta); padding-bottom: 10px; margin-bottom: 16px; } /* El título nunca se achica para hacerle lugar a los botones: ellos bajan de renglón */ .t-pagina-titulo > :first-child { flex: 1 1 360px; min-width: min(100%, 360px); } .t-pagina-titulo > * { min-width: 0; } .t-pagina-titulo h1 { font-size: clamp(26px, 5vw, 36px); margin: 0; } .t-pagina-titulo p { margin: 0; color: var(--tinta-2); } .section-title { display: flex; align-items: center; gap: 10px; font-weight: 800; } /* ---------- 17. Ingreso (login): el fondo oscuro del kit con los arcos dorados ---------- */ /* Arriba, sobre el azul: la marca, la solapa del portal y el título con la serifa en celeste. Abajo, la tarjeta blanca con el marco dorado fino del kit (se lee al sol). */ .t-ingreso { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 16px 20px; color: #fff; background: url("data:image/svg+xml;utf8,") right top / min(34vw, 300px) auto no-repeat, url("data:image/svg+xml;utf8,") left bottom / min(36vw, 250px) auto no-repeat, linear-gradient(213deg, #062D64 0%, #0A2A5E 52%, #3A2452 78%, #8E1A33 92%, #CB1521 100%) #062D64; } .t-ingreso-cabeza { width: 100%; max-width: 440px; padding: 26px 2px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .t-ingreso-marca .t-logo, .t-ingreso-marca .t-logo-1, .t-ingreso-marca .t-logo-2 { white-space: normal; } .t-ingreso-marca .t-logo-largo { display: inline; } .t-ingreso-marca .t-logo-corto { display: none; } .t-ingreso-solapa { margin-top: 10px; } .t-ingreso-cabeza .t-eyebrow { color: #fff; margin-top: 6px; letter-spacing: .16em; } .t-ingreso-cabeza h1 { font-size: clamp(30px, 8.5vw, 40px); margin: 0; color: var(--celeste); } .t-ingreso-cabeza .t-ingreso-lema { margin: 0; font-size: 17px; line-height: 1.45; color: #DCE6F4; } .t-ingreso-caja h1 { font-size: clamp(28px, 7vw, 36px); margin: 0; color: var(--azul); } .t-ingreso-caja .t-ingreso-lema { margin: 0; font-size: 17px; line-height: 1.45; color: var(--tinta-2); } .t-ingreso-caja { position: relative; width: 100%; max-width: 440px; padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 16px; background: var(--hoja); color: var(--tinta); border-radius: var(--r-3); box-shadow: var(--sombra-3); } .t-ingreso-caja::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--dorado); border-radius: 10px; pointer-events: none; } .t-ingreso-credito { margin: auto 0 0; padding-top: 6px; font-size: 12px; letter-spacing: .06em; color: #fff; text-align: center; } /* ---------- 18. Pantalla del fiscal (portal mesa) ---------- */ .f-barra { background: var(--fondo-cabecera); color: #fff; border-bottom: 2px solid var(--dorado); } .f-barra-fila { max-width: 48rem; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px 16px; } .f-barra-mesa { display: flex; flex-direction: column; line-height: 1; } .f-barra-mesa small { font-size: 13px; font-weight: 900; letter-spacing: .14em; color: var(--celeste); } .f-barra-mesa b { font: 900 44px/1 var(--f-titulo); font-stretch: 125%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .f-barra-lugar { flex: 1; min-width: 0; font-size: 15px; line-height: 1.25; } .f-barra-lugar b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f-barra-lugar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #C9D6EA; } .f-barra .t-btn-icono { color: #fff; border: 2px solid rgba(255,255,255,.5); background: transparent; border-radius: var(--r-2); } .f-barra .t-btn-icono:hover { background: rgba(255,255,255,.12); } /* Estado de la conexión: lo arma public/js/offline-queue.js dentro de #conexion-indicator */ .f-red { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-pill); font-weight: 800; font-size: 14px; line-height: 1.1; text-align: left; background: #fff; color: var(--negro); border: 3px solid #fff; white-space: normal; max-width: 180px; } .f-red .ic { width: 22px; height: 22px; } .f-red-sin { background: var(--negro); color: #fff; border-style: dashed; } .f-red-enviando { background: var(--amarillo-senal); color: var(--negro); border-color: var(--amarillo-senal); } .f-red-entrar { background: #fff; color: var(--error); border-color: var(--error); } .f-red a { color: inherit; text-decoration: underline; } /* En la cabecera de las otras pantallas (central) el indicador va más chico */ .t-cabecera .f-red { min-height: 32px; padding: 3px 10px; font-size: 13px; border-width: 2px; border-color: currentColor; background: transparent; color: inherit; } .t-cabecera .f-red-sin { background: var(--negro); color: #fff; } .f-contenido { max-width: 48rem; margin: 0 auto; padding: 0 0 32px; } .f-banda { padding: 12px 16px; font-size: 16px; line-height: 1.4; font-weight: 700; display: flex; gap: 10px; align-items: flex-start; } .f-banda b { font-weight: 900; } .f-sinsenal { background: #fff; color: var(--negro); border-bottom: 3px dashed var(--negro); } .f-practica { position: relative; background: var(--amarillo-senal); color: var(--negro); padding: 20px 16px 12px; border-bottom: 3px solid var(--negro); font-size: 17px; line-height: 1.35; font-weight: 600; } .f-practica::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--negro) 0 8px, var(--amarillo-senal) 8px 16px); } .f-practica .f-practica-tit { display: block; font: 900 22px/1.1 var(--f-titulo); font-stretch: 125%; letter-spacing: .02em; } .f-cerrado { background: var(--negro); color: #fff; } .f-contador { padding: 12px 16px; border-bottom: 2px solid var(--negro); background: #fff; } .f-contador-fila { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .f-contador-n { font: 900 52px/1 var(--f-titulo); font-stretch: 125%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .f-contador-de { font-size: 19px; font-weight: 700; } .f-contador-pc { margin-left: auto; font: 700 22px var(--f-mono); } .f-contador .t-barra { margin-top: 8px; height: 14px; } .f-contador p { margin: 6px 0 0; font-size: 15px; color: var(--tinta-2); } .f-buscar { padding: 12px 16px 0; position: relative; z-index: 50; } .f-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--negro); border-radius: var(--r-2); overflow: hidden; margin-bottom: 10px; } .f-seg button { min-height: 48px; font: 800 16px var(--f-texto); background: #fff; color: var(--negro); border: 0; border-right: 2px solid var(--negro); cursor: pointer; padding: 0 4px; } .f-seg button:last-child { border-right: 0; } .f-seg button[aria-pressed="true"] { background: var(--negro); color: #fff; } .f-q { display: flex; align-items: center; gap: 8px; border: 3px solid var(--negro); border-radius: var(--r-3); min-height: 72px; padding: 0 6px 0 14px; background: #fff; } .f-q:focus-within { box-shadow: 0 0 0 4px var(--celeste); } .f-q > .ic { width: 30px; height: 30px; } .f-q input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; outline: none; min-height: 60px; font: 600 28px var(--f-mono); color: var(--negro); padding: 0; letter-spacing: .02em; } .f-q input::placeholder { font-size: 22px; color: #5E6A80; } .f-q .f-q-btn { min-width: 52px; min-height: 52px; border: 2px solid var(--negro); background: #fff; border-radius: var(--r-2); font: 800 15px var(--f-texto); color: var(--negro); cursor: pointer; padding: 0 8px; } .f-buscar-acciones { display: flex; gap: 8px; margin-top: 10px; } .f-buscar-acciones .t-btn { flex: 1; } .f-ayuda { margin: 8px 0 0; font-size: 15px; color: var(--tinta-2); } /* Resultados en vivo (#sugerencias): en la hoja, no flotando */ .f-res { margin-top: 12px; border: 2px solid var(--negro); border-radius: var(--r-3); overflow: hidden; background: #fff; } .f-res-cont { padding: 8px 14px; font-size: 15px; font-weight: 800; background: var(--negro); color: #fff; } .f-res-lista { background-image: linear-gradient(90deg, transparent 64px, var(--margen) 64px, var(--margen) 66px, transparent 66px); } .f-item { display: grid; grid-template-columns: 64px minmax(0,1fr); padding: 12px 14px 14px 0; border-top: 2px solid var(--negro); cursor: pointer; } .f-item:first-child { border-top: 0; } .f-item-o { font: 600 16px/1.2 var(--f-mono); padding: 4px 0 0 12px; } .f-item-o small { display: block; font: 800 10px var(--f-texto); letter-spacing: .1em; color: var(--tinta-2); } .f-item-d { padding-left: 14px; min-width: 0; } .f-item-n { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; } .f-item-dni { display: block; font: 500 18px var(--f-mono); margin-top: 2px; } .f-item.f-voto-si { background: #EEF1F6; } .f-sin { padding: 18px 16px; font-size: 17px; text-align: center; background: #fff; position: relative; } /* Renglón de estado con la votación abierta: se esconde solo si la pantalla pasa a práctica */ .f-abierta { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 16px; font-weight: 700; border-bottom: 2px solid var(--negro); background: #fff; } .f-abierta .ic { flex: none; } #mesa-root.modo-practica .f-abierta { display: none; } /* El botón VOTÓ: 72 px, todo el ancho, negro con letras amarillas */ .f-voto { flex: 1 1 100%; min-height: 72px; width: 100%; border-radius: var(--r-3); background: var(--negro); color: var(--amarillo-senal); font: 900 30px var(--f-titulo); font-stretch: 125%; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: 12px; border: 3px solid var(--negro); cursor: pointer; } .f-voto .tilde { width: 34px; height: 34px; } .f-voto:active { transform: scale(.99); } .f-hecho { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } /* Práctica: el botón se ve punteado y no invita */ #mesa-root.modo-practica .f-voto { background: #fff; color: var(--negro); border-style: dashed; } #mesa-root.modo-practica .f-voto::after { content: "(práctica)"; font: 700 14px var(--f-texto); letter-spacing: 0; font-stretch: 100%; } /* Lista del servidor (después de apretar Buscar): mismos renglones */ .f-lista { margin: 12px 16px 0; border: 2px solid var(--negro); border-radius: var(--r-3); overflow: hidden; background: #fff; } .f-fila { display: grid; grid-template-columns: 64px minmax(0,1fr); padding: 12px 14px 14px 0; border-top: 2px solid var(--negro); cursor: pointer; background-image: linear-gradient(90deg, transparent 64px, var(--margen) 64px, var(--margen) 66px, transparent 66px); } .f-fila:first-child { border-top: 0; } .f-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .f-fila .votar-btn { flex: 1 1 100%; min-height: 72px; border-radius: var(--r-3); border: 3px solid var(--negro); font: 900 30px var(--f-titulo); font-stretch: 125%; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; background: var(--negro); color: var(--amarillo-senal); } .f-fila .votar-btn[data-estado="1"] { flex: 0 0 auto; min-height: 60px; background: transparent; border-color: transparent; padding: 0 4px; } .f-fila .undo-btn, .f-deshacer { margin-left: auto; min-height: 48px; min-width: 48px; border: 2px solid var(--negro); background: #fff; border-radius: var(--r-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 16px var(--f-texto); padding: 0 12px; color: var(--negro); cursor: pointer; } .f-fila.votado, .f-fila.votado-mobile { background-color: #EEF1F6; } #mesa-root.modo-practica .votar-btn, #mesa-root.modo-practica .undo-btn, #mesa-root.modo-practica .sug-undo { opacity: .5; cursor: not-allowed; } /* Toast (lo arma mostrarToast en mesa.ejs) */ #voto-toast { font-family: var(--f-texto) !important; font-weight: 800 !important; border: 3px solid var(--negro); } /* ---------- 19. Tema oscuro: sala de situación (central) ---------- */ html[data-tema="oscuro"] { color-scheme: dark; } html[data-tema="oscuro"] body { background: var(--grafito); color: var(--grafito-texto); } html[data-tema="oscuro"] .t-tarjeta, html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .t-kpi { background: var(--grafito-2); border-color: var(--grafito-linea); color: var(--grafito-texto); box-shadow: none; } html[data-tema="oscuro"] .t-tarjeta-tinta { border-color: #3D5F99; } html[data-tema="oscuro"] .t-tarjeta-marca { border-top-color: var(--celeste); } html[data-tema="oscuro"] .t-tarjeta-peligro { border-color: var(--coral); } html[data-tema="oscuro"] .t-kpi .t-kpi-valor sub { color: var(--grafito-texto-2); } html[data-tema="oscuro"] .t-campo > small, html[data-tema="oscuro"] .t-ayuda, html[data-tema="oscuro"] .t-kpi small, html[data-tema="oscuro"] .t-kpi .t-kpi-pie, html[data-tema="oscuro"] .t-eyebrow, html[data-tema="oscuro"] .t-sub, html[data-tema="oscuro"] .t-pagina-titulo p { color: var(--grafito-texto-2); } html[data-tema="oscuro"] .t-pagina-titulo { border-bottom-color: var(--grafito-linea); } html[data-tema="oscuro"] .t-tabla, html[data-tema="oscuro"] table.data { background: transparent; } html[data-tema="oscuro"] .t-tabla th, html[data-tema="oscuro"] .t-tabla td, html[data-tema="oscuro"] table.data th, html[data-tema="oscuro"] table.data td { border-bottom-color: var(--grafito-linea); } html[data-tema="oscuro"] .t-tabla thead th, html[data-tema="oscuro"] table.data thead th { background: var(--grafito-3); color: var(--grafito-texto-2); box-shadow: none; } html[data-tema="oscuro"] .t-tabla tbody tr:hover, html[data-tema="oscuro"] table.data tbody tr:hover { background: #0F2B57; } html[data-tema="oscuro"] .t-btn-secundario, html[data-tema="oscuro"] .btn-secondary, html[data-tema="oscuro"] .btn:not([class*="bg-"]):not(.btn-primary):not(.btn-danger) { background: transparent; color: var(--grafito-texto); border-color: #3D5F99; } html[data-tema="oscuro"] .t-btn-secundario:hover, html[data-tema="oscuro"] .btn-secondary:hover { background: var(--grafito-3); } html[data-tema="oscuro"] .t-btn-primario, html[data-tema="oscuro"] .btn-primary { background: var(--grafito-texto); color: var(--grafito); border-color: var(--grafito-texto); } html[data-tema="oscuro"] .t-btn-peligro, html[data-tema="oscuro"] .btn-danger { background: transparent; color: var(--coral); border-color: var(--coral); } html[data-tema="oscuro"] .t-btn-peligro:hover, html[data-tema="oscuro"] .btn-danger:hover { background: rgba(244,124,116,.12); } html[data-tema="oscuro"] .t-btn-fantasma:hover { background: var(--grafito-3); } html[data-tema="oscuro"] input, html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea { background-color: var(--grafito-2); color: var(--grafito-texto); border-color: #3D5F99; } html[data-tema="oscuro"] input:focus, html[data-tema="oscuro"] select:focus, html[data-tema="oscuro"] textarea:focus { border-color: var(--celeste) !important; box-shadow: 0 0 0 3px rgba(111,168,220,.35) !important; } html[data-tema="oscuro"] input::placeholder { color: #8FA3C4; } html[data-tema="oscuro"] .t-input { background: var(--grafito-2); border-color: #4A6BA3; } html[data-tema="oscuro"] .t-input input, html[data-tema="oscuro"] .t-input .t-btn-ver { color: var(--grafito-texto); } html[data-tema="oscuro"] .t-input:focus-within { box-shadow: 0 0 0 4px var(--coral); } html[data-tema="oscuro"] .t-input input:focus { border: 0 !important; box-shadow: none !important; } html[data-tema="oscuro"] .t-chip { background: transparent; color: var(--grafito-texto-2); border-color: #3D5F99; } html[data-tema="oscuro"] .t-chip-ok { color: #6EE7A8; border-color: #2F6B4B; } html[data-tema="oscuro"] .t-chip-aviso { color: var(--amarillo-senal); border-color: #7A6128; } html[data-tema="oscuro"] .t-chip-error { color: var(--coral); border-color: #7A3A33; } html[data-tema="oscuro"] .t-chip-info { color: #A8CBEE; border-color: #3F6AA0; } html[data-tema="oscuro"] .t-chip-baja { color: var(--grafito-texto-2); background: repeating-linear-gradient(-45deg, #0F2B57 0 6px, #143264 6px 12px); border-color: #3D5F99; } html[data-tema="oscuro"] .t-chip-falta { color: var(--grafito-texto); border-color: var(--grafito-texto-2); } html[data-tema="oscuro"] .t-chip-marca { color: var(--grafito); background: var(--coral); border-color: var(--coral); } html[data-tema="oscuro"] .t-aviso { background: var(--grafito-2); color: var(--grafito-texto); border-color: var(--grafito-linea); border-left: 4px solid #5B79AD; } html[data-tema="oscuro"] .t-aviso-error { border-left-color: var(--coral); } html[data-tema="oscuro"] .t-aviso-error > .ic { color: var(--coral); } html[data-tema="oscuro"] .t-aviso-aviso { border-left-color: var(--amarillo-senal); } html[data-tema="oscuro"] .t-aviso-ok { border-left-color: #3DDC84; } html[data-tema="oscuro"] .t-aviso-ok > .ic { color: #3DDC84; } html[data-tema="oscuro"] .t-vacio { background: var(--grafito-2); border-color: var(--grafito-linea); color: var(--grafito-texto-2); } html[data-tema="oscuro"] .t-vacio b, html[data-tema="oscuro"] .t-vacio h3 { color: var(--grafito-texto); } html[data-tema="oscuro"] .t-barra, html[data-tema="oscuro"] .progress { background: #143264; border-color: #143264; } html[data-tema="oscuro"] .t-barra > i, html[data-tema="oscuro"] .t-barra > span, html[data-tema="oscuro"] .progress > span { background: var(--grafito-texto); } html[data-tema="oscuro"] .t-pie { border-top-color: var(--grafito-linea); color: var(--grafito-texto-2); } html[data-tema="oscuro"] .t-confirmacion { background: var(--grafito-2); color: var(--grafito-texto); border-color: var(--grafito-linea); } /* Las clases claras de Tailwind que quedan en esas pantallas, dadas vuelta */ html[data-tema="oscuro"] .bg-white { background-color: var(--grafito-2) !important; } html[data-tema="oscuro"] .bg-slate-50, html[data-tema="oscuro"] .bg-gray-50 { background-color: #12151B !important; } html[data-tema="oscuro"] .bg-slate-100, html[data-tema="oscuro"] .bg-gray-100 { background-color: var(--grafito-3) !important; } html[data-tema="oscuro"] .bg-slate-200 { background-color: #1A3A6E !important; } html[data-tema="oscuro"] .text-slate-900, html[data-tema="oscuro"] .text-slate-800, html[data-tema="oscuro"] .text-gray-900 { color: var(--grafito-texto) !important; } html[data-tema="oscuro"] .text-slate-700, html[data-tema="oscuro"] .text-slate-600 { color: #C6D3E6 !important; } html[data-tema="oscuro"] .text-slate-500, html[data-tema="oscuro"] .text-slate-400 { color: var(--grafito-texto-2) !important; } html[data-tema="oscuro"] .border-slate-100, html[data-tema="oscuro"] .border-slate-200, html[data-tema="oscuro"] .border-slate-300 { border-color: var(--grafito-linea) !important; } html[data-tema="oscuro"] .divide-slate-100 > * + *, html[data-tema="oscuro"] .divide-slate-200 > * + * { border-color: var(--grafito-linea) !important; } html[data-tema="oscuro"] [class*="bg-emerald-50"], html[data-tema="oscuro"] [class*="bg-green-50"] { background-color: rgba(61,220,132,.1) !important; } html[data-tema="oscuro"] [class*="bg-red-50"], html[data-tema="oscuro"] [class*="bg-rose-50"] { background-color: rgba(244,124,116,.12) !important; } html[data-tema="oscuro"] [class*="bg-amber-50"], html[data-tema="oscuro"] [class*="bg-yellow-50"], html[data-tema="oscuro"] [class*="bg-orange-50"] { background-color: rgba(242,193,78,.12) !important; } html[data-tema="oscuro"] [class*="bg-sky-50"], html[data-tema="oscuro"] [class*="bg-blue-50"], html[data-tema="oscuro"] [class*="bg-brand-50"] { background-color: rgba(111,168,220,.12) !important; } html[data-tema="oscuro"] [class*="text-emerald-7"], html[data-tema="oscuro"] [class*="text-emerald-8"], html[data-tema="oscuro"] [class*="text-green-7"], html[data-tema="oscuro"] [class*="text-emerald-6"] { color: #6EE7A8 !important; } html[data-tema="oscuro"] [class*="text-red-6"], html[data-tema="oscuro"] [class*="text-red-7"], html[data-tema="oscuro"] [class*="text-red-8"], html[data-tema="oscuro"] [class*="text-rose-7"] { color: #FF8A7A !important; } html[data-tema="oscuro"] [class*="text-amber-7"], html[data-tema="oscuro"] [class*="text-amber-8"], html[data-tema="oscuro"] [class*="text-amber-9"], html[data-tema="oscuro"] [class*="text-yellow-8"] { color: var(--amarillo-senal) !important; } html[data-tema="oscuro"] [class*="text-brand-"], html[data-tema="oscuro"] [class*="text-sky-8"], html[data-tema="oscuro"] [class*="text-blue-7"] { color: #A8CBEE !important; } /* ---------- 20. Ayuda (el globito «?») ---------- */ .help { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; background: var(--hoja); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 999px; font-size: 12px; font-weight: 900; cursor: help; position: relative; vertical-align: middle; user-select: none; } .help:hover, .help.abierta { background: var(--tinta); color: #fff; } .help.abierta::after, .help:hover::after { content: attr(data-help); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: var(--r-2); font-size: 13px; font-weight: 500; white-space: normal; width: max-content; max-width: 300px; line-height: 1.5; box-shadow: var(--sombra-2); z-index: 100; text-align: left; letter-spacing: 0; text-transform: none; } .help.abierta::before, .help:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--tinta); z-index: 100; } @media (max-width: 640px) { .help.abierta::after, .help:hover::after { max-width: 220px; } } /* ---------- 21. Chat (public/js/chat.js) ---------- */ #chat-widget { position: fixed; bottom: calc(16px + var(--sab)); right: 16px; z-index: 60; font-family: var(--f-texto); } .chat-fab { width: 60px; height: 60px; border-radius: 50%; background: var(--tinta); border: 3px solid #fff; cursor: pointer; box-shadow: var(--sombra-2); display: flex; align-items: center; justify-content: center; position: relative; color: #fff; } .chat-fab svg { fill: #fff; } .chat-fab:hover { background: var(--negro); } .chat-fab.con-msg { animation: t-latido 1.8s infinite; } @keyframes t-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(203,21,33,.6), var(--sombra-2); } 50% { box-shadow: 0 0 0 12px rgba(203,21,33,0), var(--sombra-2); } } .chat-fab-badge { position: absolute; top: -4px; right: -4px; background: var(--margen); color: #fff; font-size: 12px; font-weight: 900; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .chat-panel { position: absolute; bottom: 74px; right: 0; width: min(420px, 94vw); height: min(600px, 80vh); background: var(--papel); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--sombra-3); display: flex; flex-direction: column; border: 2px solid var(--tinta); } @media (max-width: 640px) { #chat-widget { bottom: calc(12px + var(--sab)); right: 12px; } .chat-fab { width: 56px; height: 56px; } .chat-panel { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: none; } } .chat-vista { flex: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%; } .chat-header-wa { background: var(--tinta); color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 60px; } .chat-titulo-wa { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .chat-header-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--acento); color: var(--acento-tinta); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; flex-shrink: 0; } .chat-header-nombre { font-weight: 800; font-size: 16px; line-height: 1.2; } .chat-header-sub { font-size: 13px; opacity: .85; line-height: 1.2; margin-top: 2px; } .chat-header-btn { background: transparent; border: none; color: #fff; cursor: pointer; min-width: 44px; min-height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .chat-header-btn:hover { background: rgba(255,255,255,.15); } .chat-search { padding: 8px 12px; background: var(--hoja); border-bottom: 1px solid var(--renglon); } .chat-search input { width: 100%; padding: 8px 14px; border-radius: 999px; background: var(--papel); } .chat-scroll { flex: 1; overflow-y: auto; background: var(--hoja); } .chat-item { display: flex; width: 100%; text-align: left; background: transparent; border: none; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--renglon); gap: 12px; color: inherit; min-height: 64px; } .chat-item:hover { background: var(--papel); } .chat-item-avatar { width: 46px; height: 46px; border-radius: 50%; color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; position: relative; background: var(--tinta-2); } .chat-online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #1FA85A; border: 2px solid #fff; } .chat-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .chat-item-top { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 2px; } .chat-item-nombre { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); } .chat-item-hora { font-size: 12px; color: var(--tinta-3); flex-shrink: 0; font-family: var(--f-mono); } .chat-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .chat-item-ultimo { font-size: 14px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .chat-unread { display: inline-block; background: var(--tinta); color: #fff; font-size: 12px; font-weight: 900; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px; line-height: 22px; text-align: center; flex-shrink: 0; } .chat-mensajes-wa { flex: 1; overflow-y: auto; padding: 12px 10px; background: var(--papel); background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(197,204,215,.5) 35px 36px); display: flex; flex-direction: column; gap: 4px; } .chat-sep-dia { text-align: center; margin: 10px 0 6px; } .chat-sep-dia > span { display: inline-block; background: var(--hoja); padding: 4px 10px; border-radius: 6px; font-size: 12px; color: var(--tinta-2); border: 1px solid var(--renglon); } .chat-msg-wa { display: flex; max-width: 90%; } .chat-msg-wa.mio { align-self: flex-end; justify-content: flex-end; } .chat-msg-wa.ajeno { align-self: flex-start; } .chat-bubble { padding: 7px 10px 8px 11px; border-radius: 10px; position: relative; max-width: 100%; word-wrap: break-word; border: 1.5px solid var(--borde); } .chat-msg-wa.mio .chat-bubble { background: var(--marca-50); border-color: var(--marca-200); border-top-right-radius: 2px; } .chat-msg-wa.ajeno .chat-bubble { background: var(--hoja); border-top-left-radius: 2px; } .chat-bubble-nombre { font-size: 13px; font-weight: 800; color: var(--tinta-2); margin-bottom: 2px; } .chat-bubble-texto { font-size: 15px; line-height: 1.4; white-space: pre-wrap; color: var(--tinta); } .chat-bubble-meta { font-size: 11px; color: var(--tinta-3); text-align: right; margin-top: 2px; display: flex; gap: 4px; justify-content: flex-end; align-items: center; font-family: var(--f-mono); } .chat-tick { color: var(--ok); font-weight: 900; } .chat-form-wa { display: flex; gap: 10px; padding: 10px 12px; background: var(--hoja); border-top: 2px solid var(--tinta); flex-shrink: 0; align-items: flex-end; } .chat-form-wa textarea, .chat-form-wa input { flex: 1; padding: 12px 16px; border-radius: 22px; outline: none; font-size: 16px; line-height: 1.4; background: var(--papel); resize: none; max-height: 120px; min-height: 48px; font-family: inherit; } .chat-send-btn { background: var(--tinta); color: #fff; border: none; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-send-btn:hover { background: var(--negro); } .chat-adjuntar-btn { background: transparent; border: none; color: var(--tinta-2); cursor: pointer; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .chat-adjuntar-btn:hover { background: var(--papel-2); color: var(--tinta); } .chat-foto-preview { padding: 8px 12px; background: var(--papel-2); border-top: 1px solid var(--renglon); display: flex; align-items: center; gap: 8px; position: relative; } .chat-foto-preview img { max-height: 80px; max-width: 120px; border-radius: 8px; object-fit: cover; } .chat-foto-cancelar { width: 32px; height: 32px; border-radius: 50%; background: var(--tinta); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chat-foto-cancelar:hover { background: var(--error); } .chat-bubble-foto { display: block; margin: -2px -2px 4px; border-radius: 8px; overflow: hidden; } .chat-bubble-foto img { max-width: 240px; max-height: 240px; width: 100%; height: auto; display: block; cursor: pointer; } .chat-bubble.con-foto .chat-bubble-texto { margin-top: 4px; } .chat-bubble-video { max-width: 260px; width: 100%; border-radius: 8px; margin: -2px -2px 4px; display: block; background: var(--negro); } .chat-bubble-audio-wrap { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .chat-bubble-audio-wrap audio { max-width: 220px; width: 100%; height: 36px; } .chat-bubble-file { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--papel-2); border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 700; margin: -2px -2px 4px; } .chat-empty { padding: 40px 20px; text-align: center; color: var(--tinta-2); font-size: 15px; } @media (max-width: 640px) { .chat-send-btn { width: 52px; height: 52px; } } /* ---------- 22. Alertas urgentes (public/js/alertas.js) ---------- */ #alertas-widget { position: fixed; bottom: calc(16px + var(--sab)); right: 88px; z-index: 61; } @media (max-width: 640px) { #alertas-widget { bottom: calc(12px + var(--sab)); right: 78px; } } .alerta-fab { width: 60px; height: 60px; border-radius: 50%; background: var(--error); border: 3px solid #fff; cursor: pointer; box-shadow: var(--sombra-2); display: flex; align-items: center; justify-content: center; color: #fff; } .alerta-fab:hover { background: #8A1C14; } .alerta-fab.enviada { animation: alerta-enviada .6s; } @keyframes alerta-enviada { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2) rotate(-8deg); } } .alerta-fab-icon { display: flex; } @media (max-width: 640px) { .alerta-fab { width: 56px; height: 56px; } } .alerta-modal { max-width: 480px; width: calc(100% - 24px); border: 3px solid var(--tinta); border-radius: var(--r-4); padding: 0; box-shadow: var(--sombra-3); background: var(--hoja); color: var(--tinta); } .alerta-modal::backdrop { background: rgba(4,22,48,.65); } .alerta-modal-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; background: var(--error); color: #fff; } .alerta-modal-titulo { font-size: 20px; font-weight: 900; font-stretch: 115%; display: flex; align-items: center; gap: 10px; } .alerta-modal-cerrar { background: rgba(255,255,255,.18); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } .alerta-modal-cerrar:hover { background: rgba(255,255,255,.3); } .alerta-modal-sub { padding: 12px 20px 4px; font-size: 15px; color: var(--tinta-2); } .alerta-botones { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 20px; } .alerta-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; background: var(--hoja); border: 2px solid; border-radius: var(--r-3); cursor: pointer; text-align: left; font-weight: 800; font-size: 16px; color: var(--tinta); } .alerta-btn:hover, .alerta-btn.sel { background: var(--papel); } .alerta-btn.sel { box-shadow: inset 0 0 0 2px currentColor; } .alerta-btn-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .alerta-btn-label { flex: 1; } .alerta-extra { padding: 12px 20px 20px; } .alerta-extra textarea { width: 100%; padding: 10px 12px; resize: vertical; margin-top: 4px; } .alerta-banner { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100; width: min(520px, calc(100% - 24px)); background: var(--error); color: #fff; border-radius: var(--r-3); box-shadow: var(--sombra-3); display: flex; align-items: center; gap: 14px; padding: 14px 18px; animation: alerta-entrar .35s cubic-bezier(.18,.89,.32,1.28); border: 3px solid #fff; } .alerta-banner.saliendo { animation: alerta-salir .3s forwards; } @keyframes alerta-entrar { 0% { transform: translate(-50%, -200%); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } } @keyframes alerta-salir { to { transform: translate(-50%, -120%); opacity: 0; } } .alerta-banner-icon { flex-shrink: 0; display: flex; } .alerta-banner-body { flex: 1; min-width: 0; } .alerta-banner-titulo { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; opacity: .95; } .alerta-banner-msg { font-size: 16px; font-weight: 700; margin-top: 2px; line-height: 1.3; } .alerta-banner-ok { background: #fff; color: var(--error); font-weight: 900; border: none; min-height: 48px; padding: 0 16px; border-radius: var(--r-2); cursor: pointer; font-size: 15px; white-space: nowrap; flex-shrink: 0; } @media (max-width: 640px) { .alerta-banner { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; } .alerta-banner-ok { width: 100%; } } body:not([data-yo]) .alerta-banner { display: none !important; } /* Pedidos de desmarcar que llegan a la central: un botón chico que se despliega (footer.ejs) */ .t-pedidos { position: fixed; right: 16px; bottom: calc(92px + var(--sab)); z-index: 9997; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; } .t-pedidos { pointer-events: none; } .t-pedidos > * { pointer-events: auto; } .t-pedidos-boton { background: var(--amarillo-senal); color: var(--negro); border-color: var(--negro); box-shadow: var(--sombra-2); min-height: 44px; } .t-pedidos-boton::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); margin: 4px 0 0 2px; transition: transform .15s; } .t-pedidos-abierto .t-pedidos-boton::after { transform: rotate(45deg); margin-top: -4px; } .t-pedidos-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--negro); color: var(--amarillo-senal); font: 800 13px var(--f-mono); } .t-pedidos-lista { display: none; width: 100%; max-height: 55vh; overflow: auto; } .t-pedidos-abierto .t-pedidos-lista { display: block; } /* Pedido de desmarcar que llega a la central (lo arma views/partials/footer.ejs) */ .t-pedido { border: 2px solid var(--tinta); border-left: 6px solid var(--amarillo-senal); box-shadow: var(--sombra-2); } .t-pedido .t-eyebrow { color: var(--aviso); } .t-pedido-sub { font-size: 14px; color: var(--tinta-2); } html[data-tema="oscuro"] .t-pedido { background: var(--grafito-2); color: var(--grafito-texto); border-color: #3D5F99; border-left-color: var(--amarillo-senal); box-shadow: var(--sombra-3); } html[data-tema="oscuro"] .t-pedido .t-eyebrow { color: var(--amarillo-senal); } html[data-tema="oscuro"] .t-pedido-sub { color: var(--grafito-texto-2); } /* ---------- 23. Botón "Instalar app" (public/js/install-app.js) ---------- */ #ll-install-btn { background: var(--negro) !important; color: var(--amarillo-senal) !important; border: 3px solid var(--amarillo-senal) !important; box-shadow: var(--sombra-2) !important; font-family: var(--f-texto) !important; font-weight: 900 !important; min-height: 48px; } /* En la pantalla de la mesa el botón flotante tapaba los renglones y el VOTÓ (ya había dos botones flotantes: alerta y chat). Instalar queda en la ayuda y en el ingreso. */ body:has(#mesa-root) #ll-install-btn { display: none !important; } /* ---------- 24. Nombres viejos que siguen en algunas pantallas (sin degradés ni neón) ---------- */ .tech-mesh, .tech-grid, .tech-grid-dark, .tech-particles, .gradient-bg { background-image: none !important; } .tech-particles::before, .tech-particles::after, .gradient-bg::before, .tech-border-glow::before, .tech-stat::before { display: none !important; content: none !important; } .tech-glass, .tech-glass-light { background: var(--hoja); border: 2px solid var(--tinta); color: var(--tinta); backdrop-filter: none; } .tech-neon, .tech-neon:hover, .tech-border-glow { box-shadow: var(--sombra-1) !important; } .tech-gradient-text, .tech-gradient-text-emerald, .tech-gradient-text-amber, .tech-gradient-text-rose, .tech-gradient-text-blue { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: inherit; } .tech-gradient-text-emerald { color: var(--ok); } .tech-gradient-text-rose { color: var(--error); } .tech-gradient-text-amber { color: var(--aviso); } .tech-stat { background: var(--hoja); border: 1.5px solid var(--borde); border-radius: var(--r-3); padding: 14px 16px; position: relative; } .tech-stat-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); } .tech-stat-value { font: 900 34px/1.05 var(--f-titulo); font-stretch: 125%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 4px; } .tech-stat-sub { font-size: 14px; color: var(--tinta-2); margin-top: 2px; } .tech-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; } .tech-live span { display: none; } .tech-live::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fondo); } .tech-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; } .tech-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 2px solid currentColor; font-size: 12px; font-weight: 900; letter-spacing: .08em; } .live-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fondo); animation: none; } .live-dot::after { display: none; } /* Red de seguridad: cualquier degradé de Tailwind que haya quedado se ve plano */ [class*="bg-gradient-to-"] { background-image: none !important; } [class*="bg-gradient-to-"][class*="text-white"] { background-color: var(--marca); } .skeleton { background: var(--papel-2); border-radius: 6px; color: transparent !important; animation: t-parpadeo 1.2s ease-in-out infinite; } @keyframes t-parpadeo { 50% { opacity: .55; } } /* Los contadores que el JS actualiza por ID (antes con display por ID que pisaba .hidden) */ #kpi-total.hidden, #kpi-votaron.hidden, #kpi-porc.hidden, #kpi-pendientes.hidden, #votaron.hidden, #total.hidden, #porc.hidden, #votaron-dia.hidden, #pasadas-nuestros.hidden, #pasadas-personas.hidden, #pasadas-cantidad.hidden, #pasadas-porc.hidden { display: none; } /* ---------- 24b. Piezas comunes que antes cada pantalla hacía a su manera ---------- */ /* Una tabla ancha se corre DENTRO de su caja, con una sombra en el borde que avisa que hay más */ .tabla-scroll { background: linear-gradient(90deg, var(--hoja) 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local, linear-gradient(270deg, var(--hoja) 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(6,45,100,.22), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(6,45,100,.22), transparent) right center / 12px 100% no-repeat scroll; background-color: var(--hoja); } .tabla-scroll > .t-tabla, .tabla-scroll > table.data { background: transparent; } html[data-tema="oscuro"] .tabla-scroll { background: linear-gradient(90deg, var(--grafito-2) 30%, rgba(11,37,80,0)) left center / 32px 100% no-repeat local, linear-gradient(270deg, var(--grafito-2) 30%, rgba(11,37,80,0)) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.7), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.7), transparent) right center / 12px 100% no-repeat scroll; background-color: var(--grafito-2); } /* Tabla que en el celular se lee como tarjetas: cada muestra su rótulo */ @media (max-width: 640px) { .t-tabla-apilada thead { display: none; } .t-tabla-apilada, .t-tabla-apilada tbody, .t-tabla-apilada tr, .t-tabla-apilada td { display: block; width: 100%; } .t-tabla-apilada tr { padding: 10px 12px; border-bottom: 1px solid var(--renglon); } .t-tabla-apilada td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; white-space: normal !important; } .t-tabla-apilada td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); } .t-tabla-apilada td.t-apilada-sin-rotulo::before { display: none !important; } html[data-tema="oscuro"] .t-tabla-apilada tr { border-bottom-color: var(--grafito-linea); } html[data-tema="oscuro"] .t-tabla-apilada td[data-label]::before { color: var(--grafito-texto-2); } .tabla-scroll:has(> .t-tabla-apilada) { background: none; } } /* El botón "Elegir archivo" del navegador, con la cara de un botón del sistema */ input[type="file"] { font-size: 14px; max-width: 100%; color: var(--tinta-2); } input[type="file"]::file-selector-button { font: 800 14px var(--f-texto); min-height: 44px; padding: 8px 14px; margin-right: 10px; cursor: pointer; background: var(--hoja); color: var(--tinta); border: 2px solid var(--tinta); border-radius: var(--r-2); } input[type="file"]::file-selector-button:hover { background: var(--papel-2); } html[data-tema="oscuro"] input[type="file"] { color: var(--grafito-texto-2); } html[data-tema="oscuro"] input[type="file"]::file-selector-button { background: transparent; color: var(--grafito-texto); border-color: #3D5F99; } /* Con los botones flotantes (alerta y chat) el final de la página tiene que poder subir por encima */ body:has(#chat-widget) { padding-bottom: 84px; } /* El aviso informativo toma el color del portal (el azul es del colegio) */ html[data-acento="equipo"] .t-aviso-info { border-color: var(--marca-200); background: var(--marca-50); } html[data-acento="equipo"] .t-aviso-info > .ic { color: var(--marca); } html[data-acento="mesa"] .t-aviso-info { border-color: var(--negro); background: #fff; } html[data-acento="mesa"] .t-aviso-info > .ic { color: var(--negro); } /* Un botón que tiene que verse apagado: no con opacidad (queda ilegible), sino punteado y gris */ .t-btn[aria-disabled="true"], .t-btn.t-btn-apagado { background: transparent; color: var(--tinta-2); border-style: dashed; border-color: var(--borde); opacity: 1; cursor: not-allowed; } /* Desplegables (
) con la misma flecha en todas las pantallas */ details.t-desplegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; } details.t-desplegable > summary::-webkit-details-marker { display: none; } details.t-desplegable > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; margin: 0 4px 0 2px; } details.t-desplegable[open] > summary::before { transform: rotate(45deg); } /* ---------- 25. Celular ---------- */ @media (max-width: 640px) { button, .btn, a.btn, .t-btn, a.btn-primary, a.btn-secondary, a.btn-danger { min-height: 44px; } .t-btn, .btn, a.btn, .btn-primary, .btn-secondary, .btn-danger { white-space: normal; text-align: center; } .t-pagina { padding: 16px 12px 8px; } .card { padding: 12px; } .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl { padding-left: 12px !important; padding-right: 12px !important; } .f-contenido, .f-barra-fila { padding-left: 0; padding-right: 0; } .f-barra-fila { padding: 10px 10px 12px 14px; } } /* ---------- 26. Movimiento reducido ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- 27. Impresión ---------- */ @media print { @page { size: A4; margin: 14mm; } .t-cabecera, .t-pie, nav, footer, .no-print, #chat-widget, #alertas-widget, #ll-install-btn { display: none !important; } body { background: #fff; color: var(--negro); } .card, .t-tarjeta { box-shadow: none; border: 1px solid #999; } .print-sheet { box-shadow: none !important; border: none !important; padding: 0 !important; } .page-break-avoid { page-break-inside: avoid; } a { color: var(--negro) !important; text-decoration: none !important; } } /* ---------- 28. Un saltito cuando cambia una cifra (public/js/anima.js) ---------- */ @keyframes t-salto { 45% { transform: scale(1.08); } } .kpi-bump { display: inline-block; animation: t-salto .45s cubic-bezier(.2,.8,.2,1); } /* ---------- 29. Marca: detalles (el logo está en la sección 3) ---------- */ /* Títulos de página: la barra roja corta del logo sobre el filete azul */ .t-pagina-titulo { border-bottom: 2px solid var(--azul); border-image: linear-gradient(90deg, var(--rojo) 0 56px, var(--azul) 56px) 1; } html[data-tema="oscuro"] .t-pagina-titulo { border-image: linear-gradient(90deg, var(--coral) 0 56px, var(--grafito-linea) 56px) 1; } html[data-tema="oscuro"] .t-eyebrow { color: var(--celeste); } @media print { body::after { opacity: .06; } } /* ===== Jurisdicción con enlace (pedido del 24/09) ===== Al pasar el mouse por el nombre de un colegio aparece el lápiz; el clic lleva a la página del distrito en la central. Sin mouse (celular) el lápiz se ve siempre, suave. */ .t-distrito { color: inherit; font-weight: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; cursor: pointer; } .t-distrito .ic { flex: none; opacity: 0; transition: opacity .12s ease; color: var(--celeste-tinta); } .t-distrito:hover, .t-distrito:focus-visible { text-decoration: underline; text-decoration-color: var(--celeste-tinta); text-underline-offset: 3px; background: rgba(6,45,100,.07); } /* En la central (azul noche) el lápiz y el subrayado van en celeste */ html[data-tema="oscuro"] .t-distrito .ic { color: var(--celeste); } html[data-tema="oscuro"] .t-distrito:hover, html[data-tema="oscuro"] .t-distrito:focus-visible { text-decoration-color: var(--celeste); background: rgba(111,168,220,.16); } .t-distrito:hover .ic, .t-distrito:focus-visible .ic { opacity: 1; } @media (hover: none) { .t-distrito .ic { opacity: .6; } }