/* ============================================================================ TILDE — sistema de diseño (el único lugar de colores, tipos y componentes) ---------------------------------------------------------------------------- La idea: el padrón impreso hecho pantalla. Papel, tinta, renglones con número de orden, la raya roja del margen y un tilde hecho a mano (el de la marca y el del botón VOTÓ). 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 ---------- */ :root { /* Papel y tinta */ --papel: #F6F3EA; --papel-2: #EEE9DC; /* hundido: fondos de tabla, cabeceras */ --hoja: #FFFFFF; /* tarjetas y campos */ --tinta: #15171C; --tinta-2: #474B54; /* texto secundario (7,9:1 sobre papel) */ --tinta-3: #5F636C; /* texto terciario (5,6:1 sobre papel) */ --renglon: #D6CFBC; /* líneas de renglón */ --borde: #CFC8B4; --margen: #C8372D; /* SOLO la raya del margen, nunca texto */ /* Acentos de los portales (fijos) */ --amarillo-senal: #FFD60A; --verde-padron: #0B6E3E; --azul-lapicera: #1D3BB3; --coral: #FF6A57; --grafito: #0C0E12; --grafito-2: #161A21; --grafito-3: #232833; --grafito-linea: #2A303B; --grafito-texto: #EDEFF2; --grafito-texto-2: #A3ACBA; /* 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: #1D3BB3; --info-fondo: #EAEEFB; --info-borde: #AEBBEB; --baja: #474B54; --baja-fondo: #ECE9E1; --baja-borde: #BDB6A4; /* Tipografía */ --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; --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --ancho-titulo: 125%; /* Archivo expandida para títulos y 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(21,23,28,.05), 0 1px 3px rgba(21,23,28,.08); --sombra-2: 0 12px 28px -14px rgba(21,23,28,.45); --sombra-3: 0 30px 60px -20px rgba(0,0,0,.55); /* Zona táctil mínima */ --toque: 48px; /* Acento del portal (por defecto, el de mesa). Lo pisan los [data-acento]. */ --acento: var(--amarillo-senal); /* relleno de la solapa y del botón fuerte */ --acento-tinta: #000; /* texto sobre --acento */ --marca: #15171C; /* color de marca usable como texto y con texto blanco encima */ --marca-rgb: 21 23 28; --marca-oscura: #000000; --marca-50: #FFFBE0; --marca-100: #FFF3A8; --marca-200: #FFE55C; --foco: #1D3BB3; --sab: env(safe-area-inset-bottom, 0px); } html[data-acento="mesa"] { --acento: #FFD60A; --acento-tinta: #000; --marca: #15171C; --marca-rgb: 21 23 28; --marca-oscura: #000; --marca-50: #FFFBE0; --marca-100: #FFF3A8; --marca-200: #FFE55C; --papel: #FFFFFF; /* el fiscal: blanco puro, máximo contraste al sol */ --foco: #000; } html[data-acento="equipo"] { --acento: #0B6E3E; --acento-tinta: #fff; --marca: #0B6E3E; --marca-rgb: 11 110 62; --marca-oscura: #07502D; --marca-50: #E8F3EC; --marca-100: #CFE6D8; --marca-200: #A4D0B5; --foco: #0B6E3E; } html[data-acento="colegio"] { --acento: #1D3BB3; --acento-tinta: #fff; --marca: #1D3BB3; --marca-rgb: 29 59 179; --marca-oscura: #142A85; --marca-50: #EDF0FB; --marca-100: #D9DFF7; --marca-200: #B3C0EE; --foco: #1D3BB3; } html[data-acento="central"] { --acento: #FF6A57; --acento-tinta: #0C0E12; --marca: #0C0E12; --marca-rgb: 12 14 18; --marca-oscura: #000; --marca-50: #FFF0EE; --marca-100: #FFDAD4; --marca-200: #FFB3A8; --foco: #C8372D; } /* ---------- 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; } /* 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: 900; font-stretch: var(--ancho-titulo); line-height: 1.05; } html h2 { font-weight: 800; line-height: 1.15; } 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(--tinta-2); } /* 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: #FF6A57; } .f-barra :focus-visible, .t-impersonar :focus-visible, html[data-acento="mesa"] .t-cabecera :focus-visible { outline-color: var(--amarillo-senal); } html[data-acento="central"] .t-cabecera :focus-visible { outline-color: var(--coral); } /* 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: #767B84; opacity: 1; } input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); width: 20px; height: 20px; } /* ---------- 3. El logo: «tilde» con el tilde en lugar del punto de la i ---------- */ .t-logo { font-family: var(--f-titulo); font-stretch: 125%; font-weight: 900; letter-spacing: -.02em; line-height: 1; display: inline-flex; align-items: flex-end; white-space: nowrap; } .t-logo-i { position: relative; display: inline-block; } .t-logo-i svg { position: absolute; left: 50%; bottom: 78%; width: .62em; height: .62em; transform: translateX(-38%); overflow: visible; } .t-logo-i svg path { fill: none; stroke: var(--logo-tilde, currentColor); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 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: tinta de la marca con texto blanco (en mesa y central, tinta negra) */ .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: el color de la solapa (amarillo en mesa, coral en central) */ .t-btn-fuerte { background: var(--acento); color: var(--acento-tinta); border-color: var(--tinta); } .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); } /* Negro con letras amarillas: el botón VOTÓ y las llamadas dentro de una caja amarilla (portal mesa) */ .t-btn-negro { background: #000; color: var(--amarillo-senal); border-color: #000; } .t-btn-negro:hover { background: #1b1d22; } .t-btn-fantasma { background: transparent; color: inherit; border-color: transparent; } .t-btn-fantasma:hover { background: rgba(21,23,28,.06); } .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: #FBF9F3; } .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, #F4F1EA 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 #000; background: var(--amarillo-senal); color: #000; 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, #000 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: #000; 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: #000; font-weight: 800; font-size: 14px; cursor: pointer; } .t-input .t-btn-ver:hover { background: rgba(0,0,0,.06); } /* ---------- 10. Cabecera (la solapa del portal) ---------- */ .t-cabecera { position: sticky; top: 0; z-index: 40; background: var(--hoja); border-bottom: 2px solid var(--tinta); } .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: 8px; background: var(--acento); color: var(--acento-tinta); font-weight: 900; letter-spacing: .12em; font-size: 13px; text-transform: uppercase; padding: 0 12px; height: 34px; border-radius: 8px; white-space: nowrap; } .t-solapa span { font-weight: 600; letter-spacing: 0; text-transform: none; } .t-cabecera-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); flex: none; 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: var(--tinta); white-space: nowrap; } .t-cabecera-links a:hover, .t-menu a:hover { background: var(--papel-2); } .t-cabecera-links a[aria-current="page"], .t-menu a[aria-current="page"] { background: var(--tinta); color: #fff; } .t-cabecera-yo { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: var(--papel-2); 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(--marca); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 13px; flex: none; } .t-menu { border-top: 1px solid var(--renglon); background: var(--hoja); box-shadow: var(--sombra-2); } .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-grupo { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); padding: 12px 12px 2px; } .t-menu-grupo:first-child { padding-top: 4px; } html[data-acento="central"] .t-menu { background: var(--grafito-2); border-top-color: var(--grafito-linea); } html[data-acento="central"] .t-menu a { color: var(--grafito-texto); } html[data-acento="central"] .t-menu a:hover { background: var(--grafito-3); } html[data-acento="central"] .t-menu a .ic, html[data-acento="central"] .t-menu-grupo { color: var(--grafito-texto-2); } html[data-acento="central"] .t-menu a[aria-current="page"] { background: var(--grafito-texto); color: var(--grafito); } html[data-acento="central"] .t-menu a[aria-current="page"] .ic { color: var(--grafito); } .t-menu a .ic { color: var(--tinta-2); } /* Central: la cabecera es grafito con la solapa coral */ html[data-acento="central"] .t-cabecera { background: var(--grafito); color: var(--grafito-texto); border-bottom-color: #000; } html[data-acento="central"] .t-cabecera-marca { color: var(--grafito-texto); } html[data-acento="central"] .t-cabecera-links a { color: var(--grafito-texto); } html[data-acento="central"] .t-cabecera-links a:hover { background: var(--grafito-3); } html[data-acento="central"] .t-cabecera-links a[aria-current="page"] { background: var(--grafito-texto); color: var(--grafito); } html[data-acento="central"] .t-cabecera-yo { background: var(--grafito-3); color: var(--grafito-texto); } html[data-acento="central"] .t-cabecera-yo i { background: var(--coral); color: var(--grafito); } html[data-acento="central"] .t-cabecera .t-btn-fantasma:hover { background: var(--grafito-3); } /* El banner de "estás viendo como fiscal" */ .t-impersonar { background: var(--tinta); color: #fff; border-bottom: 4px solid var(--acento); } /* ---------- 11. Pie ---------- */ .t-pie { margin-top: 48px; padding: 20px 16px calc(20px + var(--sab)); border-top: 2px solid var(--tinta); color: var(--tinta-2); font-size: 13px; } .t-pie-fila { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ---------- 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(12,14,18,.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(12,14,18,.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: #000; border-color: #000; } @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: #000; } /* ---------- 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) ---------- */ .t-ingreso { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--papel); } .t-ingreso-solapa { align-self: flex-start; margin: 0 16px; border-radius: 0 0 12px 12px; height: 46px; padding: 0 16px; font-size: 14px; } .t-ingreso-caja { width: 100%; max-width: 440px; margin: 0 auto; padding: 22px 20px 12px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .t-ingreso h1 { font-size: 36px; margin: 6px 0 0; } .t-ingreso .t-ingreso-lema { margin: 0; font-size: 17px; line-height: 1.4; color: var(--tinta-2); } .t-ingreso-renglones { margin-top: auto; background: var(--hoja); border-top: 2px solid var(--tinta); position: relative; } /* La raya roja del margen va en los renglones mismos: en la computadora quedaba lejos, pegada al borde */ .t-ingreso-renglones div { max-width: 440px; margin: 0 auto; display: grid; grid-template-columns: 62px 1fr 40px; align-items: center; height: 40px; border-bottom: 1px solid var(--renglon); font-size: 14px; color: #2B2E35; background-image: linear-gradient(90deg, transparent 62px, var(--margen) 62px, var(--margen) 64px, transparent 64px); } .t-ingreso-renglones em { font: 500 13px var(--f-mono); font-style: normal; padding-left: 14px; } .t-ingreso-renglones span { padding-left: 14px; letter-spacing: .04em; } .t-ingreso-renglones::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.8)); pointer-events: none; } /* Central y vivo entran en grafito: sin esto la página quedaba en papel con letras claras */ html[data-tema="oscuro"] .t-ingreso { background: var(--grafito); color: var(--grafito-texto); } html[data-tema="oscuro"] .t-ingreso .t-ingreso-lema, html[data-tema="oscuro"] .t-ingreso .t-campo > small { color: var(--grafito-texto-2); } html[data-tema="oscuro"] .t-ingreso .t-solapa span { color: var(--grafito); } /* ---------- 18. Pantalla del fiscal (portal mesa) ---------- */ .f-barra { background: #000; color: #fff; } .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(--amarillo-senal); } .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: #D7D9DE; } .f-barra .t-btn-icono { color: #fff; border: 2px solid #5A5F69; background: transparent; border-radius: var(--r-2); } .f-barra .t-btn-icono:hover { background: #1b1d22; } /* 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: #000; border: 3px solid #fff; white-space: normal; max-width: 180px; } .f-red .ic { width: 22px; height: 22px; } .f-red-sin { background: #000; color: #fff; border-style: dashed; } .f-red-enviando { background: var(--amarillo-senal); color: #000; 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: #000; 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: #000; border-bottom: 3px dashed #000; } .f-practica { position: relative; background: var(--amarillo-senal); color: #000; padding: 20px 16px 12px; border-bottom: 3px solid #000; 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, #000 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: #000; color: #fff; } .f-contador { padding: 12px 16px; border-bottom: 2px solid #000; 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 #000; 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: #000; border: 0; border-right: 2px solid #000; cursor: pointer; padding: 0 4px; } .f-seg button:last-child { border-right: 0; } .f-seg button[aria-pressed="true"] { background: #000; color: #fff; } .f-q { display: flex; align-items: center; gap: 8px; border: 3px solid #000; 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(--amarillo-senal); } .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: #000; padding: 0; letter-spacing: .02em; } .f-q input::placeholder { font-size: 22px; color: #6B6F78; } .f-q .f-q-btn { min-width: 52px; min-height: 52px; border: 2px solid #000; background: #fff; border-radius: var(--r-2); font: 800 15px var(--f-texto); color: #000; 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 #000; border-radius: var(--r-3); overflow: hidden; background: #fff; } .f-res-cont { padding: 8px 14px; font-size: 15px; font-weight: 800; background: #000; 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 #000; 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: #F1F1EE; } .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 #000; 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: #000; 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 #000; 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: #000; 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 #000; 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 #000; 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 #000; 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: #000; 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 #000; 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: #000; cursor: pointer; } .f-fila.votado, .f-fila.votado-mobile { background-color: #F1F1EE; } #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 #000; } /* ---------- 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: #4A5160; } html[data-tema="oscuro"] .t-tarjeta-marca { border-top-color: var(--coral); } 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: #1C2029; } 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: #4A5160; } 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(255,106,87,.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: #4A5160; } html[data-tema="oscuro"] input:focus, html[data-tema="oscuro"] select:focus, html[data-tema="oscuro"] textarea:focus { border-color: var(--coral) !important; box-shadow: 0 0 0 3px rgba(255,106,87,.3) !important; } html[data-tema="oscuro"] input::placeholder { color: #8891A0; } html[data-tema="oscuro"] .t-input { background: var(--grafito-2); border-color: #5A6273; } 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: #4A5160; } html[data-tema="oscuro"] .t-chip-ok { color: #6EE7A8; border-color: #2F6B4B; } html[data-tema="oscuro"] .t-chip-aviso { color: #FFD60A; border-color: #6B5A10; } html[data-tema="oscuro"] .t-chip-error { color: var(--coral); border-color: #7A3A33; } html[data-tema="oscuro"] .t-chip-info { color: #A9B8F5; border-color: #3A4A8A; } html[data-tema="oscuro"] .t-chip-baja { color: var(--grafito-texto-2); background: repeating-linear-gradient(-45deg, #1D222B 0 6px, #232833 6px 12px); border-color: #4A5160; } 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 #6B7380; } 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: #262C36; border-color: #262C36; } 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: #2E3541 !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: #C9CFD8 !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(255,106,87,.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(255,214,10,.1) !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(169,184,245,.1) !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: #FFD60A !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: #A9B8F5 !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: #000; } .chat-fab.con-msg { animation: t-latido 1.8s infinite; } @keyframes t-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,55,45,.6), var(--sombra-2); } 50% { box-shadow: 0 0 0 12px rgba(200,55,45,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(214,207,188,.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: #000; } .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: #000; } .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(12,14,18,.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: #000; border-color: #000; 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: #000; 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: #4A5160; 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: #000 !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(21,23,28,.22), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(21,23,28,.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(22,26,33,0)) left center / 32px 100% no-repeat local, linear-gradient(270deg, var(--grafito-2) 30%, rgba(22,26,33,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: #4A5160; } /* 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: #000; background: #fff; } html[data-acento="mesa"] .t-aviso-info > .ic { color: #000; } /* 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: #000; } .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: #000 !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); } /* Logo con el nombre del sistema (24/09: se fue «Tilde»). */ .t-logo.t-logo-cm { align-items: center; gap: .55em; font-stretch: 100%; letter-spacing: 0; white-space: normal; } .t-logo-balanza { width: 2.3em; height: 2.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .t-logo-txt { display: flex; flex-direction: column; line-height: 1.12; } .t-logo-1 { font-weight: 900; letter-spacing: .05em; white-space: nowrap; } .t-logo-2 { font-weight: 600; font-size: .74em; letter-spacing: .01em; white-space: nowrap; } @media (max-width: 440px) { .t-logo-2 { display: none; } }