/* ═══════════════════════════════════════════════════════════════════════════ AVI DISPATCH · ui-unified.css — F0 · FOUNDATION (2026-09-18) Capa visual ÚNICA de la app, derivada del HTML de referencia AVI_Dispatch_previo_scan_inicio(2)(3)(1).html y del preview aprobado design_audit/design_preview/ui-unified.preview.css. ─────────────────────────────────────────────────────────────────────────── REGLAS · SOLO presentación: color, tipografía, radios, bordes, espaciado, sombras. · NO toca id, name, data-atributos, href, action, method ni relaciones DOM. · NUNCA fija `display` en botones/controles genéricos: lo que el JS oculta (display:none / [hidden]) debe seguir oculto. · NO cambia display/grid/flex/width/order de formularios (regla del owner). · Se enlaza la ÚLTIMA en el de cada plantilla: gana en cascada sobre app.css, theme-dark.css, redesign.css y las hojas por página. · Shell y breakpoints (barra píldora ≤834, riel/barra ≥835, padding del body) siguen viviendo en theme-dark.css: aquí solo se colorean. DECISIONES DEL OWNER APLICADAS · D1 inputs translúcidos oscuros (tema oscuro). · D2 tema claro CONSERVADO y unificado: mismos componentes, misma escala, solo cambia la paleta (bloque `html.u-light`). · D3 lienzo oscuro canónico #0e2140. · D5 /admin/fbos: solo color; el overflow de la tabla queda documentado. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · TOKENS ──────────────────────────────────────────────────────────── Escala (común a ambos temas) en :root; paleta OSCURA en :root + body.tdk; paleta CLARA en html.u-light (la clase la pone el server con theme_dark, igual que body.tdk). Todos los componentes usan solo tokens. */ :root{ /* escala */ --u-r-xs:6px; --u-r-sm:10px; --u-r-md:12px; --u-r-lg:14px; --u-r-xl:16px; --u-r-pill:999px; --u-sp-1:4px; --u-sp-2:8px; --u-sp-3:12px; --u-sp-4:14px; --u-sp-5:18px; --u-sp-6:24px; --u-fs-xs:.62rem; --u-fs-sm:.7rem; --u-fs-lbl:.68rem; --u-fs-body:.86rem; --u-fs-md:.92rem; --u-fs-lg:1.02rem; --u-fs-xl:1.15rem; --u-font:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif; --u-mono:ui-monospace,SFMono-Regular,Menlo,monospace; --u-tap:44px; --u-tap-desk:40px; /* paleta OSCURA (predeterminada) */ --u-scheme:dark; --u-canvas:#0e2140; --u-card:#132a4d; --u-card2:rgba(255,255,255,.03); --u-line:rgba(127,150,180,.3); --u-line-soft:rgba(127,150,180,.15); --u-tx:#e4eefb; --u-mut:#b3c6e0; --u-head:#fff; --u-on-navy:#fff; --u-green:#1f8f57; --u-green-2:#187a48; --u-green-hi:#1b8350; --u-green-hi2:#156f41; --u-green-tx:#9fe8c3; --u-green-s:rgba(47,174,110,.14); --u-green-bd:rgba(63,196,128,.7); --u-amber:#f2d59a; --u-amber-bd:#c47f00; --u-amber-s:rgba(196,127,0,.14); --u-amber-bd-s:rgba(214,150,30,.75); --u-red:#ffc9c9; --u-red-bd:#d64545; --u-red-s:rgba(200,50,50,.16); --u-red-bd-s:rgba(235,100,100,.8); --u-blue:#93bfff; --u-blue-bd:#4da3ff; --u-blue-s:rgba(77,163,255,.10); --u-blue-ring:rgba(147,191,255,.75); --u-blue-ic:#bfe0ff; --u-blue-ic-s:rgba(77,163,255,.16); --u-blue-fill:#1466B8; --u-purple-tx:#d6c4ff; --u-purple-s:rgba(140,100,255,.14); --u-purple-bd:rgba(180,150,255,.6); --u-na-tx:#a3b0c2; --u-na-bd:rgba(163,176,194,.45); --u-navy-hdr:#042C53; --u-navy-ic:#0F4E88; --u-hero:linear-gradient(160deg,#0b386a,#042C53); --u-badge-bg:#3d4b6b; --u-badge-tx:#fff; --u-inp-bg:rgba(255,255,255,.05); --u-inp-bd:rgba(179,198,224,.55); --u-inp-tx:#e4eefb; --u-inp-ph:#a6bad6; --u-inp-ro-bg:rgba(255,255,255,.03); --u-btn-bg:rgba(255,255,255,.10); --u-btn-bd:rgba(255,255,255,.45); --u-btn-tx:#fff; --u-btn-hover:rgba(255,255,255,.16); --u-hover:rgba(255,255,255,.03); --u-hover-2:rgba(255,255,255,.06); --u-soft:rgba(255,255,255,.04); --u-soft-2:rgba(255,255,255,.08); --u-soft-3:rgba(255,255,255,.12); --u-search-bg:rgba(255,255,255,.12); --u-search-tx:#dbe9fa; --u-recip-s:rgba(16,185,129,.1); --u-recip-bd:rgba(16,185,129,.4); --u-shadow:0 8px 28px rgba(0,0,0,.18); --u-backdrop:rgba(4,12,24,.7); --u-nav-tx:#b7cbe6; --u-nav-on:#fff; --u-nav-ctl:#dbe9fa; --u-tbar-bg:rgba(10,22,40,.92); --u-tbar-bd:rgba(255,255,255,.10); --u-tbar-sh:0 14px 40px rgba(0,0,0,.5); --u-titem:#a4b8d3; --u-titem-on-bg:rgba(77,163,255,.18); --u-titem-on:#fff; --u-rail-bg:rgba(4,16,31,.72); --u-rail-bd:rgba(127,176,255,.16); --u-rail-tx:#b7cbe6; --u-rail-hover:rgba(127,176,255,.10); --u-page:#e9eef4; --u-page-bd:#bcc7d6; } /* paleta CLARA (D2): mismos componentes, misma escala, otro color */ html.u-light{ --u-scheme:light; --u-canvas:#EEF2F7; --u-card:#ffffff; --u-card2:rgba(27,51,82,.03); --u-line:rgba(27,51,82,.18); --u-line-soft:rgba(27,51,82,.10); --u-tx:#16202E; --u-mut:#50627a; --u-head:#0b2240; --u-on-navy:#fff; --u-green-tx:#166534; --u-green-s:#d9f2e4; --u-green-bd:#2f8f5f; --u-amber:#92600a; --u-amber-s:#fdeec9; --u-amber-bd-s:#a8842e; --u-red:#991b1b; --u-red-s:#fde2e2; --u-red-bd-s:#c94f4f; --u-blue:#0F4E88; --u-blue-bd:#1466B8; --u-blue-s:#e4eefb; --u-blue-ring:rgba(20,102,184,.8); --u-blue-ic:#0F4E88; --u-blue-ic-s:#e4eefb; --u-blue-fill:#0F4E88; --u-purple-tx:#5b3fb0; --u-purple-s:#ece6ff; --u-purple-bd:#b9a6f0; --u-na-tx:#5e6b7d; --u-na-bd:rgba(27,51,82,.4); --u-badge-bg:#dbe3ee; --u-badge-tx:#0b2240; --u-inp-bg:#ffffff; --u-inp-bd:rgba(27,51,82,.62); --u-inp-tx:#0b2240; --u-inp-ph:#5f7390; --u-inp-ro-bg:#f2f5f9; --u-btn-bg:#ffffff; --u-btn-bd:rgba(27,51,82,.62); --u-btn-tx:#0b2240; --u-btn-hover:#f2f5f9; --u-hover:rgba(27,51,82,.03); --u-hover-2:rgba(27,51,82,.06); --u-soft:rgba(27,51,82,.04); --u-soft-2:rgba(27,51,82,.07); --u-soft-3:rgba(27,51,82,.10); --u-search-bg:rgba(255,255,255,.18); --u-search-tx:#0b2240; --u-recip-s:#e8f5ef; --u-recip-bd:#a7dcc0; --u-shadow:0 8px 24px rgba(11,34,64,.10); --u-backdrop:rgba(11,34,64,.45); --u-nav-tx:#3d4f66; --u-nav-on:#0b2240; --u-nav-ctl:#0b2240; --u-tbar-bg:rgba(255,255,255,.94); --u-tbar-bd:rgba(27,51,82,.14); --u-tbar-sh:0 14px 40px rgba(11,34,64,.18); --u-titem:#4a5b70; --u-titem-on-bg:#e4eefb; --u-titem-on:#0F4E88; --u-rail-bg:#f4f8fd; --u-rail-bd:rgba(15,78,136,.14); --u-rail-tx:#4a5b70; --u-rail-hover:rgba(15,78,136,.07); } /* ── 2 · LIENZO + TIPOGRAFÍA ────────────────────────────────────────────── */ html, body, body.tdk, body.login-page, body.pwreset-page, body.dash-page, body.users-page, body.customers-page, body.pkg-page, body.security-page, body.backups-page, body.sistema-page, body.integ-page, body.soporte-page, body.scan-page, body.eapis-page, body.fbo-page, body.fbo-admin-page, body.precios-page, body.terms-page{ background:var(--u-canvas) !important; color:var(--u-tx); color-scheme:var(--u-scheme); font-family:var(--u-font); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ color:var(--u-head); } h1{ font-size:var(--u-fs-xl); } h2{ font-size:var(--u-fs-lg); } h3{ font-size:var(--u-fs-md); } a{ color:var(--u-blue); } p, li, td, th, label, small, .muted, .sub, .note, .help, .fld-note, .act-s{ color:var(--u-tx); } .muted, .sub, .note, small, .help, .fld-note, .fh-dia, .status, .act-s, .sec-label, .lbl, h3.grp, .fw-sub, .fw-nota{ color:var(--u-mut); } hr{ border-color:var(--u-line-soft); } ::selection{ background:rgba(127,176,255,.35); } /* Etiquetas de sección (.lbl del previo) */ .sec-label, .lbl-text, h3.grp, .fp-sec, .ea-k, .sc-docs-hd, .fh-shell .sec-label{ font-size:var(--u-fs-lbl); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--u-mut); background:transparent; margin:14px 0 6px; } .sec-label a, .lbl a{ color:var(--u-blue); text-transform:none; letter-spacing:0; font-weight:700; font-size:.72rem; text-decoration:none; } /* ── 3 · CABECERAS (.hdr) ───────────────────────────────────────────────── */ .page-hdr, .app-hdr, .ea-hdr, .fp-hdr, .scan-page h1, .sc-vuelo > h1, .users-page h1, .dash-page h1{ background:var(--u-navy-hdr) !important; color:var(--u-on-navy) !important; border-radius:var(--u-r-md); padding:10px 14px !important; margin:0 0 12px !important; box-shadow:none; } .page-hdr .t, .app-hdr .t, .ea-title{ font-weight:600 !important; font-size:.95rem !important; color:var(--u-on-navy); display:block; } .page-hdr .s, .app-hdr .s, .ea-sub{ font-size:.78rem; opacity:1; color:#dbe9fa; } main.shell > .page-hdr{ flex-direction:column; align-items:flex-start; gap:2px; } .nb-hero{ background:var(--u-hero) !important; border-radius:var(--u-r-xl); padding:14px !important; margin-bottom:12px; color:var(--u-on-navy); } .nb-hero .page-hdr, .nb-hh .page-hdr{ background:transparent !important; padding:0 !important; margin:0 !important; } .nb-hero .page-hdr .t{ font-size:1.15rem !important; font-weight:800 !important; } .nb-hero .plan-chip, .nb-hero .plan-operador{ background:rgba(255,255,255,.18); color:#fff; } .gs, .gs input{ background:var(--u-search-bg) !important; border:0 !important; border-radius:var(--u-r-pill) !important; color:var(--u-search-tx) !important; } .gs input::placeholder{ color:var(--u-search-tx) !important; opacity:.8; } .plan-chip, .plan-operador, .badge, .fh-badge, .pill, .acpill, .pr-badge{ background:var(--u-badge-bg); color:var(--u-badge-tx); border-radius:var(--u-r-pill); padding:2px 8px; font-size:.68rem; font-weight:800; border:0; } /* ── 4 · TARJETAS (.card) ───────────────────────────────────────────────── */ .card, .admin-card, .app-card, .act, .fp-card, .panel, .auth-card, .terms-card, .pr-c, .av-plan, .ea-sec, .sc-docs, .users-page .panel, .fbo-grid > *, .ev-box, .cta-cuenta, .gs-panel, details.trash, .fh-hosts, .sw-row, .block.panel, .filters, .security-page .cards > *{ background:var(--u-card) !important; border:1px solid var(--u-line) !important; border-top:1px solid var(--u-line) !important; border-radius:var(--u-r-lg) !important; padding:12px 14px; margin-bottom:12px; box-shadow:none !important; color:var(--u-tx); backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .card h2, .admin-card h2{ color:var(--u-head); } .fp-card .fp-hdr .t{ color:var(--u-on-navy); } @media (min-width:835px){ .card, .admin-card, .act{ box-shadow:var(--u-shadow) !important; } } .fp-card .fp-hdr{ background:var(--u-navy-hdr); border-radius:var(--u-r-sm); color:var(--u-on-navy); } .fp-card .fp-row, .fp-card .fp-pitem, .fp-card .fp-people{ background:transparent; border-color:var(--u-line-soft); color:var(--u-tx); } .fp-card .fp-lbl, .fp-card .fp-val, .fp-card .fp-pname{ color:var(--u-tx); } .fp-card .fp-role, .fp-card .fp-chip{ background:var(--u-blue-s); color:var(--u-blue); border:1px solid var(--u-blue-ring); border-radius:var(--u-r-pill); } .fp-card .fp-bar, .fp-card .fp-soul{ background:var(--u-hover); border-color:var(--u-line-soft); } .fp-card .fp-pv{ background:var(--u-soft-2); color:var(--u-tx); border:1.5px solid var(--u-blue-ring); border-radius:var(--u-r-md); } /* Mosaico «Tu información» (.tile) */ .tile, .act{ background:var(--u-card) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-md) !important; padding:10px 12px; font-size:.8rem; font-weight:700; min-height:60px; color:var(--u-tx) !important; } .tile span, .act-s{ color:var(--u-mut); font-weight:600; font-size:.7rem; } .tile .ic, .act-ic{ background:var(--u-blue-ic-s); color:var(--u-blue-ic); border-radius:var(--u-r-sm); } .tile .tn{ background:var(--u-blue-s); color:var(--u-blue); border:1px solid var(--u-blue-ring); border-radius:var(--u-r-pill); } .tile:hover, .act:hover{ border-color:var(--u-blue-ring) !important; background:var(--u-hover-2) !important; } /* Tarjeta de vuelo (.fh-card) — canónica en Historial + Inicio */ .fh-card{ border:1px solid var(--u-line) !important; border-radius:var(--u-r-lg) !important; padding:12px 14px !important; margin-bottom:10px !important; background:var(--u-card2) !important; } @media (min-width:835px){ .fh-card{ padding:14px 18px !important; } } .fh-head b{ font-size:1.02rem; letter-spacing:.02em; color:var(--u-head); } .fh-ruta{ font-weight:800; font-size:.92rem; letter-spacing:.06em; } .fh-dia{ margin-left:auto; font-size:.74rem; font-weight:700; opacity:1; letter-spacing:.04em; color:var(--u-mut); } .fh-status{ font-size:.76rem; margin-top:4px; color:var(--u-mut); display:flex; align-items:center; gap:6px; } .fh-status i, .fh-status::before{ width:8px; height:8px; border-radius:50%; background:var(--u-amber-bd); } .fh-status.fh-st-g i{ background:var(--u-green); } .fh-status.fh-st-r{ color:var(--u-red); } .fh-status.fh-st-r i{ background:#e05252; } .fh-items{ gap:6px; margin-top:10px; } .fh-it{ min-height:var(--u-tap); padding:0 12px; font-size:.76rem; font-weight:700; border-radius:var(--u-r-pill); border:1px solid var(--u-line); display:inline-flex; align-items:center; gap:5px; } @media (min-width:835px){ .fh-it{ min-height:var(--u-tap-desk); } } .fh-it .q{ opacity:1; font-weight:600; } .fh-ok{ color:var(--u-green-tx) !important; background:var(--u-green-s) !important; border-color:var(--u-green-bd) !important; } .fh-todo{ color:var(--u-blue) !important; background:var(--u-blue-s) !important; border:1.5px dashed var(--u-blue-ring) !important; } .fh-na{ color:var(--u-na-tx) !important; background:none !important; border-color:var(--u-na-bd) !important; opacity:1; } .fh-al{ color:var(--u-red) !important; background:var(--u-red-s) !important; border-color:var(--u-red-bd-s) !important; } .fh-prev{ color:var(--u-purple-tx) !important; background:var(--u-purple-s) !important; border:1.5px dashed var(--u-purple-bd) !important; } .fh-ff{ background:var(--u-blue-fill) !important; color:#fff !important; border-color:var(--u-blue-fill) !important; } .fh-arch{ opacity:1; } .fh-arch .fh-head b, .fh-arch .fh-ruta{ color:var(--u-mut); } /* archivado: se atenúa por color, no por opacidad */ .fh-archivo > summary{ font-weight:800; font-size:.92rem; padding:6px 0; color:var(--u-tx); } /* ── 5 · PLEGABLES (.fold) — un solo componente para details/summary ───── */ details, .sc-fold, .fh-archivo, details.trash, .acc{ border:1px solid var(--u-line) !important; border-left:4px solid var(--u-green) !important; border-radius:var(--u-r-md) !important; margin:0 0 10px !important; background:var(--u-card2) !important; padding:0 !important; } details.sc-neu, .sc-fold.sc-neu, .acc, details.trash, .fh-archivo{ border-left-color:var(--u-blue-bd) !important; } details.sc-amb, .sc-fold.sc-amb{ border-left-color:var(--u-amber-bd) !important; } details.sc-bad, .sc-fold.sc-bad{ border-left-color:var(--u-red-bd) !important; } summary, .sc-sum{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 8px; min-height:48px; padding:6px 30px 6px 12px !important; font-size:.82rem; font-weight:700; color:var(--u-tx) !important; cursor:pointer; position:relative; list-style:none; background:transparent !important; } summary::-webkit-details-marker{ display:none; } summary::after, .sc-chev{ content:"▸"; position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:1; color:var(--u-mut); font-size:.8rem; } details[open] > summary::after{ content:"▾"; } .sc-chev{ display:none; } /* el chevron ya lo pinta summary::after */ .sc-mut, summary .mut{ color:var(--u-mut); font-weight:600; font-size:.76rem; white-space:nowrap; } .sc-mut.on{ color:var(--u-green-tx); } details > *:not(summary), .sc-body{ padding:2px 12px 12px !important; font-size:.8rem; } .sc-body li{ list-style:none; padding:3px 0; } .sc-body ul{ margin:0; padding:0; } /* filas seleccionables (inspectores) */ #inspectors label, .ir{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 4px; font-size:.86rem; border-bottom:1px solid var(--u-line-soft); border-radius:8px; background:transparent; color:var(--u-tx); margin:0; } #inspectors label:last-of-type{ border-bottom:0; } #inspectors label:has(input:checked){ background:var(--u-green-s); } #inspectors input[type=checkbox], .cb{ width:20px; height:20px; border:1.5px solid var(--u-mut); border-radius:5px; accent-color:var(--u-green); } .sc-listo, .listo{ display:flex; justify-content:flex-end; margin-top:8px; } .sc-listo-btn, .listo span{ border:1.5px solid var(--u-blue-ring) !important; border-radius:var(--u-r-pill) !important; padding:7px 14px !important; font-weight:800; font-size:.78rem; background:transparent !important; color:var(--u-tx) !important; min-height:var(--u-tap); } /* Bloque «Documentos del paquete» (.docs / .doc) */ .sc-docs, .docs, .files-list{ border:1.5px solid var(--u-green-bd) !important; border-radius:var(--u-r-lg) !important; padding:12px !important; margin-bottom:10px; background:rgba(47,174,110,.05) !important; } .sc-docs-hd, .docs .dt{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--u-green) !important; margin:0 0 8px; display:flex; justify-content:space-between; } .sc-docs-n{ opacity:1; color:var(--u-mut); } .sc-docs-grid, .dgrid{ display:grid; grid-template-columns:1fr; gap:8px; } .doc, .files-list li{ display:flex; gap:10px; align-items:center; background:var(--u-card) !important; border:1px solid var(--u-line) !important; border-radius:11px !important; padding:10px !important; color:var(--u-tx); } .doc .ic{ width:36px; height:44px; border-radius:6px; background:var(--u-navy-ic); color:#fff; font-size:.6rem; font-weight:800; display:flex; align-items:center; justify-content:center; } .doc b{ font-size:.84rem; display:block; } .doc small{ color:var(--u-mut); font-size:.7rem; display:block; } .chip, .doc-expedit{ display:inline-block; font-size:var(--u-fs-xs); font-weight:800; border-radius:var(--u-r-pill); padding:2px 8px; background:var(--u-green-s); color:var(--u-green-tx); border:1px solid var(--u-green-bd); margin-top:3px; } .sc-empty, .empty, .fp-empty, .fh-card[style*="dashed"]{ border:1.5px dashed var(--u-line) !important; border-radius:var(--u-r-md) !important; padding:10px 12px !important; font-size:.78rem; color:var(--u-mut) !important; background:transparent !important; } .pdfname, #pdf-name, .sc-vf{ margin-top:10px; font-size:.72rem; color:var(--u-mut); } .pdfname b, #pdf-name b, .sc-vf b{ display:block; color:var(--u-tx); font-size:.82rem; font-family:var(--u-mono); } /* ── 6 · FORMULARIOS (.inp / .lbl) — D1: translúcidos en oscuro ─────────── */ .fld label, .fldf label, .fbo-fld label, label.block, .lbl, .tf-lbl, .login-page label, .users-page label.block, .fp-lbl{ display:block; font-size:.7rem; font-weight:700; color:var(--u-mut) !important; margin:0 0 3px; letter-spacing:.02em; } .fld, .fldf, .fbo-fld{ margin-bottom:8px; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="range"]):not([type="hidden"]), select, textarea, .inp, .fp-card input.fp-in, .fp-card select, .fp-icao, .ea-info{ border:1px solid var(--u-inp-bd) !important; border-radius:var(--u-r-sm) !important; padding:9px 10px !important; background:var(--u-inp-bg) !important; font-size:.9rem !important; color:var(--u-inp-tx) !important; font-weight:600; box-shadow:none !important; min-height:var(--u-tap); font-family:var(--u-font); } input::placeholder, textarea::placeholder{ color:var(--u-inp-ph) !important; font-weight:500; } input:focus, select:focus, textarea:focus{ outline:2px solid var(--u-blue-bd) !important; outline-offset:0; border-color:var(--u-blue-bd) !important; } input[readonly], input:disabled, select:disabled, .ea-auto input, .ea-derived input{ background:var(--u-inp-ro-bg) !important; color:var(--u-mut) !important; border-style:dashed !important; } select{ background-image:linear-gradient(45deg,transparent 50%,var(--u-mut) 50%),linear-gradient(135deg,var(--u-mut) 50%,transparent 50%) !important; background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50% !important; background-size:5px 5px,5px 5px !important; background-repeat:no-repeat !important; -webkit-appearance:none; appearance:none; padding-right:30px !important; } input[type="checkbox"], input[type="radio"]{ accent-color:var(--u-green); width:20px; height:20px; } .av-od .inp, .fmt-icao, .fp-icao, #origin, #destination, input[name="dep"], input[name="dest"], input[name="origen"], input[name="destino"]{ text-align:center; letter-spacing:.12em !important; font-size:1.25rem !important; font-weight:800 !important; text-transform:uppercase; } .req, .pkgreq{ color:var(--u-amber); } .fld-note, .note, .av-hint, .detect{ font-size:.8rem; color:var(--u-mut); margin:8px 2px 0; } .detect b{ color:var(--u-tx); } .grid, .rowf, .g2, .fbo-grid, .cta-grid, .ea-grid{ gap:8px 10px; } fieldset{ border:1px solid var(--u-line); border-radius:var(--u-r-md); } /* rueda de fechas / máscaras: solo colores */ .dw-sheet, .date-wheel, .dw{ background:var(--u-card) !important; color:var(--u-tx) !important; border-color:var(--u-line) !important; } /* ── 7 · BOTONES (.btn / .btn.ghost) ────────────────────────────────────── */ button, .btn, input[type="submit"], a.btn, .fbo-btn, .fw-btns > *, .go, .b-ok, .b-view, .sw-btn, .pr-cta, .primary, .secondary, .ghost, .danger, .calcbtn, .chipbtn, .terms-accept button{ /* sin `display`: un botón oculto por el JS (display:none / [hidden]) debe seguir oculto */ text-align:center; vertical-align:middle; gap:6px; border-radius:var(--u-r-md) !important; padding:11px 14px !important; font-weight:800 !important; font-size:.92rem !important; min-height:var(--u-tap); cursor:pointer; text-decoration:none; background:var(--u-btn-bg) !important; color:var(--u-btn-tx) !important; border:1.5px solid var(--u-btn-bd) !important; box-shadow:none !important; font-family:var(--u-font); } button:hover, .btn:hover{ background:var(--u-btn-hover) !important; } /* PRIMARIA = verde (submit, .primary, «Generar», «Crear», «Enviar», «Guardar») */ button[type="submit"], input[type="submit"], .primary, .btn.primary, .btn-primary, #preview-btn, #send-btn:not(:disabled), .av-go, .pr-cta, .fbo-btn.primary, .terms-accept button, .login-page button, .b-ok, .go:not(.ghost){ background:linear-gradient(160deg,var(--u-green),var(--u-green-2)) !important; border:0 !important; color:#fff !important; } button[type="submit"]:hover, .primary:hover{ background:linear-gradient(160deg,var(--u-green-hi),var(--u-green-hi2)) !important; } /* FANTASMA = borde azul */ .ghost, .btn.ghost, .secondary, .b-view, .calcbtn, .chipbtn, .editlink, .fw-btns .ghost, .sw-btn, #send-btn:disabled, .ea-back, .back{ background:none !important; border:1.5px solid var(--u-blue-ring) !important; color:var(--u-tx) !important; } .danger, .btn.danger{ background:var(--u-red-s) !important; border:1.5px solid var(--u-red-bd-s) !important; color:var(--u-red) !important; } button:disabled, .btn.dis, .dis{ opacity:.7 !important; cursor:not-allowed; } button.small, .btn.small, .chipbtn, .fp-iconbtn, .sw-btn, .b-view{ padding:7px 12px !important; min-height:36px; font-size:.78rem !important; } .fp-iconbtn{ background:none !important; border:0 !important; min-height:auto; } /* bloque de acción principal a lo ancho en móvil */ @media (max-width:834px){ .card > button[type="submit"], .card > .primary, #preview-btn, #send-btn, .av-go{ width:100%; } } [hidden]{ display:none !important; } /* FBO: Salida|Llegada — el activo es el .fbo-btn SIN .ghost (contrato actual del JS) */ .fbo-btn:not(.ghost){ background:linear-gradient(160deg,var(--u-green),var(--u-green-2)) !important; border:0 !important; color:#fff !important; } .fbo-btn.ghost{ background:none !important; border:1.5px solid var(--u-blue-ring) !important; color:var(--u-tx) !important; } /* Precios: «Disponible próximamente» y «Tu plan actual» NO son acciones primarias */ .pr-cta-pronto, .pr-cta-actual{ background:none !important; border:1.5px solid var(--u-line) !important; color:var(--u-mut) !important; cursor:default; } .pr-cta-actual{ border-color:var(--u-green-bd) !important; color:var(--u-green-tx) !important; } /* ── 8 · CHIPS DE ESTADO (color + signo, nunca solo color) ──────────────── */ .pill.green, .b-ok, .ok, .st-ok, .fw-t.ok{ color:var(--u-green-tx); background:var(--u-green-s); border:1px solid var(--u-green-bd); border-radius:var(--u-r-pill); padding:2px 8px; font-size:.72rem; font-weight:800; } .pill.yellow, .wa, .warn, .st-warn{ color:var(--u-amber); background:var(--u-amber-s); border:1px solid var(--u-amber-bd-s); border-radius:var(--u-r-pill); padding:2px 8px; font-size:.72rem; font-weight:800; } .pill.red, .no, .err, .crit, .st-bad{ color:var(--u-red); background:var(--u-red-s); border:1px solid var(--u-red-bd-s); border-radius:var(--u-r-pill); padding:2px 8px; font-size:.72rem; font-weight:800; } .pill.grey, .fa, .st-na{ color:var(--u-na-tx); background:none; border:1px solid var(--u-na-bd); border-radius:var(--u-r-pill); padding:2px 8px; font-size:.72rem; } .bl{ color:var(--u-blue); } /* ── 9 · AVISOS (recip/status/banner/error) ─────────────────────────────── */ .banner, .help, .msg, .recip, .status-box, .fw-nota, .sw-nota, .ea-cruce, .aczz, #ac-perf-zz-nota{ margin-top:10px; font-size:.78rem; border-radius:var(--u-r-sm) !important; padding:9px 11px !important; border:1px solid var(--u-line) !important; background:var(--u-soft) !important; color:var(--u-tx) !important; } .help, .banner.info, .recip{ background:var(--u-recip-s) !important; border-color:var(--u-recip-bd) !important; } .banner.warn, .warn, .aczz, #ac-perf-zz-nota, #ac-perf-real{ background:var(--u-amber-s) !important; border-color:var(--u-amber-bd-s) !important; color:var(--u-amber) !important; } .error, .err-box, .banner.err, .msg.err, .login-page .error, .ev-err, .ea-filed.bad{ background:var(--u-red-s) !important; border:1px solid var(--u-red-bd-s) !important; color:var(--u-red) !important; border-radius:var(--u-r-sm) !important; } .status{ font-size:.74rem; color:var(--u-mut); margin-top:6px; } /* colores que hoy escribe scan.js en línea en el semáforo del expediente (se limpian en F5) */ #preflight-docs{ background:var(--u-red-s) !important; border:1px solid var(--u-red-bd-s) !important; border-radius:var(--u-r-sm) !important; color:var(--u-tx) !important; } .sc-fold.sc-amb #preflight-docs{ background:var(--u-amber-s) !important; border-color:var(--u-amber-bd-s) !important; } .sc-fold:not(.sc-bad):not(.sc-amb) #preflight-docs{ background:var(--u-green-s) !important; border-color:var(--u-green-bd) !important; } #preflight-docs strong{ color:var(--u-head) !important; } #preflight-docs .muted{ color:var(--u-mut) !important; } #preflight-docs li{ color:var(--u-tx) !important; } .admin-card .empty, .admin-card p.empty{ border:0 !important; padding:0 !important; color:var(--u-mut) !important; } /* ── 10 · TABLAS / LISTAS ───────────────────────────────────────────────── */ table, .app-table, .admin-table, .pr-tabla{ color:var(--u-tx); border-collapse:separate; border-spacing:0; width:100%; background:var(--u-card); border:1px solid var(--u-line); border-radius:var(--u-r-lg); overflow:hidden; } th{ color:var(--u-mut) !important; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:800; background:var(--u-soft) !important; border-bottom:1px solid var(--u-line) !important; padding:10px 12px; } td{ border-bottom:1px solid var(--u-line-soft) !important; padding:10px 12px; background:transparent !important; } tr:last-child td{ border-bottom:0 !important; } tbody tr:hover td{ background:var(--u-hover) !important; } /* tablas → tarjetas en móvil (responsive-tables.js ya escribe data-label; aquí solo se PINTA) */ @media (max-width:719px){ .rtable thead{ display:none; } .rtable tr{ display:block; border:1px solid var(--u-line); border-radius:var(--u-r-md); margin-bottom:8px; background:var(--u-card2); } .rtable td{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--u-line-soft) !important; } .rtable td::before{ content:attr(data-label); color:var(--u-mut); font-size:.7rem; font-weight:800; text-transform:uppercase; } } .plan, .ir-row, .listbox > *, .hubpick > *{ display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--u-line); font-size:.86rem; } .plan:last-child{ border-bottom:0; } .plan .rt{ font-size:.74rem; opacity:1; color:var(--u-mut); } .plan .go{ margin-left:auto; opacity:1; color:var(--u-mut); } /* ── 11 · HOJA DE ACCIONES (.sheet) — chips con varias acciones (historial) ── */ .sheet, .fh-hosts, #fs21-hist-actions, .hv-sheet, .fs21res, .pvbtns2{ margin-top:8px; border:1px solid var(--u-line) !important; border-radius:var(--u-r-md) !important; background:var(--u-card) !important; padding:8px 10px !important; font-size:.8rem; } .sheet > div{ padding:8px 4px; border-bottom:1px solid var(--u-line-soft); font-weight:700; } .sheet > div:last-child{ border-bottom:0; } .sheet small{ display:block; color:var(--u-mut); font-weight:600; margin-bottom:2px; } /* ── 12 · NAVEGACIÓN — barra píldora REAL (_tabbar.html): solo colores ──── */ .tbar{ background:var(--u-tbar-bg) !important; border:1px solid var(--u-tbar-bd) !important; box-shadow:var(--u-tbar-sh) !important; backdrop-filter:blur(16px); } .titem{ color:var(--u-titem) !important; } .titem.on{ color:var(--u-titem-on) !important; background:var(--u-titem-on-bg) !important; } .titem span{ font-weight:800; } @media (min-width:835px) and (pointer:fine){ .tbar{ background:var(--u-rail-bg) !important; border-right:1px solid var(--u-rail-bd) !important; box-shadow:none !important; } .titem{ color:var(--u-rail-tx) !important; } .titem:hover{ background:var(--u-rail-hover) !important; } .titem.on{ color:var(--u-titem-on) !important; background:var(--u-titem-on-bg) !important; } } /* ── 13 · NAVEGACIÓN superior REAL (_nav.html, admin y páginas sin theme-dark) */ .appnav{ background:transparent !important; color:var(--u-nav-tx) !important; border-radius:0 !important; padding:6px 4px 12px !important; margin-bottom:12px !important; border-bottom:1px solid var(--u-line) !important; box-shadow:none !important; font-size:.8rem; font-weight:700; gap:18px; } .appnav .nl, .appnav a{ color:var(--u-nav-tx) !important; text-decoration:none; } .appnav a:hover, .appnav .nl:hover{ color:var(--u-nav-on) !important; } .appnav strong{ color:var(--u-nav-on); } .appnav .nl, .appnav a, details.nb-adm > summary{ min-height:36px; display:inline-flex; align-items:center; padding:0 6px; } details.nb-adm{ border:0 !important; background:transparent !important; margin:0 !important; } details.nb-adm > summary{ min-height:36px; padding:0 6px !important; font-size:.8rem; color:var(--u-nav-tx) !important; } details.nb-adm > summary::after{ content:none; } .nb-adm-panel{ background:var(--u-card) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-md) !important; padding:12px !important; } .nb-adm-col .ng{ color:var(--u-mut); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .appnav .theme-switch a, .appnav .lang-switch a{ color:var(--u-nav-ctl) !important; } /* ── 14 · MODAL / OVERLAYS (cropper, confirm) ───────────────────────────── */ .modal, .overlay, #send-confirm, #cropper-modal, .cropper-panel, .dialog, dialog{ background:var(--u-card) !important; color:var(--u-tx) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-xl) !important; } .modal-backdrop, .overlay-bg{ background:var(--u-backdrop) !important; } /* ── 15 · ESTADOS VACÍO / CARGA / ERROR ─────────────────────────────────── */ .empty, .fp-empty, .missing, .vacio{ border:1.5px dashed var(--u-line) !important; border-radius:var(--u-r-md) !important; color:var(--u-mut) !important; padding:10px 12px !important; background:transparent !important; } .ev-spin, .spinner, .loading{ border-color:var(--u-blue-bd) transparent transparent transparent !important; } .fx-prog{ background:var(--u-card) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-md); box-shadow:none !important; } .fx-prog span{ color:var(--u-tx) !important; } .fx-bar{ background:var(--u-soft-3) !important; } .fx-bar i{ background:linear-gradient(90deg,var(--u-green),var(--u-green-hi)) !important; } .fx-nav > *{ background:var(--u-blue-s) !important; color:var(--u-blue) !important; border:1px solid var(--u-blue-ring) !important; border-radius:var(--u-r-pill) !important; } /* ── 16 · ACCESIBILIDAD ─────────────────────────────────────────────────── */ :focus-visible{ outline:3px solid var(--u-blue-bd) !important; outline-offset:2px; } a:not(.titem):not(.nl):not(.btn):not(.fh-it){ text-underline-offset:2px; } /* ── 17 · PÁGINAS CONCRETAS (solo color/forma) ──────────────────────────── */ /* Login / registro / reset — el hero se funde con el lienzo; la tarjeta es el

*/ .login-page, .pwreset-page{ background:var(--u-canvas) !important; } .auth-hero, .auth-foot{ background:transparent !important; } .auth-hero .brand, .auth-foot, .login-page .brand{ color:var(--u-mut) !important; } .auth-card{ max-width:420px; margin:0 auto; } .login-page form, .pwreset-page form, .login-page .auth-plan, .terms-page form{ background:var(--u-card) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-lg) !important; box-shadow:none !important; color:var(--u-tx); } .login-page .auth-plan{ border-color:var(--u-green-bd) !important; } /* Precios */ .pr-hero{ background:var(--u-hero) !important; border-radius:var(--u-r-xl); color:var(--u-on-navy); } .pr-c.pr-si{ border-color:var(--u-green-bd) !important; } .pr-price, .pr-amount{ color:var(--u-head); } .pr-feats li{ color:var(--u-tx); } .pr-no{ color:var(--u-na-tx); } .pr-tabla-wrap{ overflow-x:auto; } /* Términos */ .terms-shell{ background:transparent !important; } .terms-text{ background:var(--u-soft) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-md); color:var(--u-tx) !important; } /* Editor de plan (compositor) */ .pvb, .blk, .acfila, .pobfila{ background:var(--u-card) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-lg) !important; } .h2act, .lblact{ color:var(--u-mut); } .pv-lupa, .lupaw button{ background:var(--u-soft-2) !important; border:1px solid var(--u-line) !important; border-radius:var(--u-r-sm) !important; color:var(--u-tx) !important; } .opts, .out, .sbody{ background:var(--u-card) !important; border-color:var(--u-line) !important; color:var(--u-tx) !important; } #pv-ruta, textarea[name="ruta"], #ruta{ background:var(--u-amber-s) !important; border-color:var(--u-amber-bd-s) !important; } /* Evidencia */ .ev-bar{ background:var(--u-navy-hdr) !important; color:var(--u-on-navy); border-radius:var(--u-r-md); } .ev-box img{ border-radius:6px; border:1px solid var(--u-page-bd); } /* Admin: dashboard nums / switches */ .nums, .num{ color:var(--u-head); } .admin-card .more a, .more{ color:var(--u-blue); } .sw-state{ color:var(--u-mut); } .sw-off{ color:var(--u-red); } /* Ficha de aeronave / progreso */ .fw-t{ color:var(--u-head); } /* ── 18 · Overrides de orden (deben ir al final: ganan a la regla genérica de inputs) ── */ .gs input#gs-q, .gs-wrap .gs input[type="search"]#gs-q{ background:transparent !important; border:0 !important; color:var(--u-search-tx) !important; box-shadow:none !important; min-height:auto; padding:6px 8px !important; } .gs input#gs-q::placeholder{ color:var(--u-search-tx) !important; opacity:1; } /* ── 19 · CONTRASTE (ronda 2026-09-21) — texto ≥ 4.5:1, grande/controles ≥ 3:1 ──── Solo color/opacidad. Corrige textos grises o azules apagados sobre navy que venían de app.css, hojas por página,