/* ═══════════════════════════════════════════════════════════════════════════ AVI DISPATCH · Rediseño B2 — tema navy oscuro (predeterminado) + tema claro opcional + barra píldora flotante (iPhone/iPad vertical) ─────────────────────────────────────────────────────────────────────────── Aprobado por el operador 2026-08-10 sobre el previo PROJECTS/AVI_Dispatch_previo_app_gratis.html. v2 (misma noche): «mejora todo para computadora, para iPad, para iPhone… haz la versión clara por si la gente lo quiere cambiar; la predeterminada sea la oscura». CÓMO FUNCIONA · — el server resuelve el tema (?theme= > sesión > preferencia de cuenta > OSCURO). Sin JS, sin flash, CSP intacta. Conmutador sol/luna en la nav (/set-theme). · Tema CLARO = la app de siempre (app.css tal cual) + la barra B2 clara. · Tema OSCURO = clase `tdk` re-pinta los componentes existentes. · La BARRA vive en AMBOS temas: ≤834px (iPhone + iPad vertical); en horizontal/desktop manda la nav de arriba. REGLA DE ORO (textual): «espejo del que hay actualmente… que no se pierdan ninguna de las informaciones». Solo CSS; cero DOM funcional. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · Lienzo oscuro ─────────────────────────────────────────────────── */ /* ⚠️ POR QUÉ SÓLIDO Y NO DEGRADADO (pulidos 7d — el operador, 2026-08-11, tras tres intentos de tapar «la línea azul marino»): el lienzo era linear-gradient(175deg,#0b2240,#123563,#17466f). Cualquier banda o velo que cubra la franja del reloj tiene UN color; el degradado debajo tiene OTRO a esa altura → el borde se ve SIEMPRE. En el login no se notaba porque esa pantalla no hace scroll («ahí me gusta cómo se ve, déjala así»). Con lienzo SÓLIDO la banda usa el MISMO color y desaparece — por construcción, no por ajuste fino. Un solo tono, declarado una vez. */ :root { --tdk-canvas: #123563; } body.tdk { /* !important: fbo.html trae background inline en ; el tema manda. */ background: var(--tdk-canvas) !important; color: #dbe9fa; color-scheme: dark; } body.tdk .shell { color: #dbe9fa; } body.tdk h1, body.tdk h2, body.tdk h3, body.tdk h4 { color: #fff; } body.tdk a { color: #7fb0ff; } body.tdk hr { border-color: rgba(255,255,255,.14); } body.tdk .muted, body.tdk .sub, body.tdk small, body.tdk .act-s, body.tdk .note { color: #9fb6d4; } /* El hero del home y los encabezados navy se FUNDEN con el lienzo (antes eran un navy sobre otro navy: doble marco sin propósito). */ body.tdk .nb-hero { background: transparent; box-shadow: none; } body.tdk .page-hdr, body.tdk .app-hdr, body.tdk.scan-page h1 { background: transparent; padding-left: 0; padding-right: 0; } /* ── 2 · Tarjetas y secciones (oscuro) ─────────────────────────────────── */ body.tdk .card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-top: 1px solid rgba(255,255,255,.13); /* fuera la cejita de acento */ border-radius: 16px; box-shadow: none; } body.tdk .card h2 { color: #fff; } body.tdk .sec-label { color: #9fb6d4; } body.tdk .act { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); } body.tdk .act:hover { background: rgba(255,255,255,.12); border-color: rgba(127,176,255,.5); } body.tdk .act-t { color: #fff; } body.tdk .act-ic { background: rgba(77,163,255,.16); color: #bfe0ff; } body.tdk details { border-color: rgba(255,255,255,.14); } body.tdk summary { color: #dbe9fa; } /* ── 3 · Formularios (inputs blancos redondeados del previo) ───────────── */ body.tdk .fld label, body.tdk .fldf label, body.tdk label { color: #9fb6d4; } body.tdk input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.tdk select, body.tdk textarea { background: rgba(255,255,255,.94); color: #0b386a; border: 0; border-radius: 11px; padding: 10px 12px; font-weight: 600; } body.tdk input::placeholder, body.tdk textarea::placeholder { color: #8ea3bd; font-weight: 500; } body.tdk input[readonly], body.tdk input:disabled, body.tdk select:disabled { background: rgba(255,255,255,.16); color: #cfe0f2; } body.tdk input:focus, body.tdk select:focus, body.tdk textarea:focus { outline: 2px solid #4da3ff; } /* Botones: JERARQUÍA del previo — la acción principal (submit) en verde, lo demás fantasma. Lo fino por página se pule con capturas del operador. */ body.tdk button, body.tdk .btn { background: rgba(255,255,255,.10); color: #fff; border: 1.5px solid rgba(255,255,255,.25); border-radius: 11px; font-weight: 700; } body.tdk button:hover, body.tdk .btn:hover { background: rgba(255,255,255,.16); } body.tdk button[type="submit"], body.tdk input[type="submit"] { background: linear-gradient(160deg, #2fae6e, #22995d); border: 0; color: #fff; } body.tdk button[type="submit"]:hover, body.tdk input[type="submit"]:hover { background: linear-gradient(160deg, #35bd79, #27a566); } body.tdk button:disabled { opacity: .45; } /* ── 4 · Tablas ────────────────────────────────────────────────────────── */ body.tdk table { color: #dbe9fa; } body.tdk th { color: #9fb6d4; border-color: rgba(255,255,255,.14); } body.tdk td { border-color: rgba(255,255,255,.10); } body.tdk tr:hover td { background: rgba(255,255,255,.04); } body.tdk .rtable td::before { color: #9fb6d4; } /* ── 5 · Avisos, estados y páginas con fondo propio ────────────────────── */ body.tdk .alert { border-color: rgba(255,255,255,.10); } body.tdk .error, body.tdk .err { color: #ffb4b4; } body.tdk .ok, body.tdk .success { color: #9fe8c3; } /* ⚠️ Lección (el operador, pulidos 3): aquí decía `background: transparent` — eso le quitaba el gradiente al scan y el pelón se veía BLANCO. El lienzo se declara completo, con la misma fuerza que el body.tdk general. */ body.tdk.scan-page { background: var(--tdk-canvas) !important; color: #dbe9fa; } body.tdk.scan-page .sub { color: #9fb6d4; } body.tdk.precios-page { color: #dbe9fa; } body.tdk .appnav { background: rgba(10,22,40,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; } /* ── 6 · Lupas (equip-picker) en oscuro ──────────────────────────────────── equip-picker.css las pinta claras; aquí el modo oscuro las alcanza. El encabezado ya es navy — se queda. */ body.tdk .eqp-md { background: #10294a; } body.tdk .eqp-gt { color: #9fb6d4; } body.tdk .eqp-opt { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); } body.tdk .eqp-opt .eqp-d { color: #c6d7ec; } body.tdk .eqp-opt .eqp-code { background: rgba(77,163,255,.14); border-color: rgba(77,163,255,.35); color: #bfe0ff; } body.tdk .eqp-opt.on { border-color: #4da3ff; background: rgba(77,163,255,.16); } body.tdk .eqp-opt.on .eqp-code { background: #1f5aa8; border-color: #1f5aa8; color: #fff; } body.tdk .eqp-cop { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); } body.tdk .eqp-cop .eqp-d { color: #c6d7ec; } body.tdk .eqp-cop.on { border-color: #4da3ff; background: rgba(77,163,255,.16); } body.tdk .eqp-foot { background: rgba(0,0,0,.25); border-top-color: rgba(255,255,255,.12); } body.tdk .eqp-hint { color: #9fb6d4; } /* Índice de fichas (ficha-index.css) en oscuro — COMPLETO (pulidos 5: la barra pegajosa de arriba salía clara flotando sobre el navy). */ body.tdk #ficha-idx { background: linear-gradient(#0e2946 82%, rgba(14,41,70,0)); } body.tdk .fx-prog { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); box-shadow: none; } body.tdk .fx-prog span { color: #dbe9fa; } body.tdk .fx-bar { background: rgba(255,255,255,.15); } body.tdk .fx-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #c6d7ec; } body.tdk .fx-chip.ok { border-color: rgba(47,174,110,.5); color: #9fe8c3; background: rgba(47,174,110,.14); } body.tdk .fx-chip.on { border-color: #4da3ff; color: #fff; background: rgba(77,163,255,.2); } /* ── 7 · BARRA PÍLDORA B2 — en AMBOS temas, iPhone + iPad vertical ─────── */ .tbar { display: none; } .cta-cuenta { display: none; } /* solo móvil (ver media query) */ @media (max-width: 834px) { /* iPhone + iPad vertical (820/834) */ /* aire inferior en ambos temas (solo las páginas cliente cargan esta hoja) */ body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } /* Etapa 2 (pedido del operador tras el deploy): en móvil la nav de ARRIBA ya no existe — la navegación es la barra. Solo se oculta el visual: _nav.html sigue cargando csrf-fetch/i18n/pwa (scripts, no caja). Salir, idioma, tema y Seguridad viven en Datos («Mi cuenta»); el admin tiene su engrane en la barra. En desktop la nav sigue igual. */ body .appnav { display: none; } /* también el aire de arriba respeta el notch ya sin la caja */ body { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); } /* Velo del status bar (pulidos 6, el operador 2026-08-11: «al hacer scroll puedes ver cómo [el contenido] se sigue viendo arriba de la barra de la ficha»). iOS pega los sticky DEBAJO del safe-area, así que la franja del reloj queda descubierta y el contenido pasa por ahí a plena luz. Este velo FIJO cubre exactamente esa franja con el color del lienzo (+ un desvanecido), en AMBOS temas. pointer-events:none: ahí nunca hay nada que tocar. */ /* ⚠️ AQUÍ VIVÍA EL VELO DEL STATUS BAR — y ERA la línea (pulidos 7f, el operador: «no arreglaste nada de las líneas… y en modo Claro hay una línea blanca»). Historia, para que a nadie se le ocurra volver a ponerlo: se agregó para tapar el contenido que se veía pasar bajo el reloj; primero con degradado (se veía el corte), luego sólido (se seguía viendo), luego con z-index alto (y en tema claro apareció como una FRANJA BLANCA pegada arriba). El velo era una banda sin contenido: siempre iba a leerse como una línea. La solución de verdad ya estaba puesta: el lienzo SÓLIDO (--tdk-canvas) y, en las fichas, la banda del índice —que sí tiene contenido y por eso se ve intencional—. En las demás páginas el contenido simplemente pasa bajo el status bar, como en cualquier app de iOS. Sin velo, sin línea. */ /* iOS hace AUTO-ZOOM al enfocar cualquier campo con letra <16px (pulidos 7, el operador probando FBOs con su dummy: «cuando escribo hace como un Zoom» — y el zoom además descuadra el velo y deja ver el contenido del status bar). En móvil TODO campo escribible va a 16px y el zoom se acaba. El !important alcanza también a los inputs con letra chica escopeada (tabla perf, fldf). */ body input:not([type="checkbox"]):not([type="radio"]), body select, body textarea { font-size: 16px !important; } /* Banda FIJA de las fichas (pulidos 7b — decisión del operador tras ver la tapa a medias: «que nunca se mueva y que todo colapse por abajo, todo sólido»). La banda vive en ficha-index.css (esa hoja carga DESPUÉS que esta: solo ahí le gana a su propio sticky base); aquí van su color oscuro y el resumen del editor, que con la banda ya no debe pegarse. `body .fpb .summary` porque el sticky viene del