/* ============================================================================================
   oscuro.css — Ontime en oscuro (revisión de Guille, 14/10/2026)
   El mismo lenguaje que «Primeros pasos»: sala en verde profundo, tarjetas grandes, botones
   redondos, texto claro. Va la ÚLTIMA en index.html: solo pisa colores, sombras y bordes de
   opfar-tokens.css, ontime.css, mezcla.css, acceso.css y nueva.css. No cambia ni un id, ni
   una clase, ni el orden de nada. Para volver a la Ontime clara basta con quitar el <link>.
   ============================================================================================ */

:root {
  color-scheme: dark;
  --fg: 234, 246, 247;
  --act-bg: #FFFFFF; --act-fg: #0C2A31;
  /* paleta de la sala (la misma de Primeros pasos) */
  --noche: #0B2A31;
  --verde: #123B44;
  --verde-2: #18464F;
  --linea: rgba(234, 246, 247, .12);
  --linea-2: rgba(234, 246, 247, .22);
  --texto: #EAF6F7;
  --texto-2: #A9C3C7;
  --texto-3: #7F9EA3;
  --turquesa: #0FA3B4;
  --turquesa-claro: #5BD0D6;
  --turquesa-suave: #BFE6EA;
  --t-manana: #46A6A9;
  --t-tarde: #8A96C4;
  --t-partido: #C5A174;
  --t-sabado: #5BD0D6;
  --aviso: #E2A345;
  --aviso-suave: rgba(217, 138, 31, .16);
  --exito: #3FBF8C;
  --exito-suave: rgba(31, 157, 107, .18);
  --error: #E5675E;
  --error-suave: rgba(208, 69, 59, .18);
  --sombra: 0 18px 50px rgba(0, 0, 0, .35);

  /* tokens de ontime.css */
  --ink: var(--texto);
  --deep: var(--verde);
  --muted: var(--texto-2);
  --line: var(--linea);
  --bg: var(--noche);

  /* tokens semánticos de opfar-tokens.css */
  --text-strong: var(--texto);
  --text-body: var(--texto);
  --text-muted: var(--texto-2);
  --text-subtle: var(--texto-3);
  --text-link: var(--turquesa-claro);
  --text-link-hover: var(--turquesa-suave);
  --surface-page: var(--noche);
  --surface-card: var(--verde);
  --surface-sunken: rgba(11, 42, 49, .6);
  --border-default: var(--linea);
  --border-subtle: var(--linea);
  --border-strong: var(--linea-2);
  --color-primary-tint: rgba(15, 163, 180, .16);
  --opfar-info-soft: rgba(15, 163, 180, .16);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: var(--sombra);
  --sb-thumb: rgba(169, 195, 199, .35);
  --sb-thumb-hover: rgba(169, 195, 199, .6);
}

/* ---------- base ---------- */
html, body { background: var(--noche); color: var(--texto); -webkit-font-smoothing: antialiased; }
a { color: var(--turquesa-claro); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { background: rgba(11, 42, 49, .6); color: var(--texto); border-color: var(--linea-2); }
input[type=checkbox], input[type=radio] { background: none; border: 0; padding: 0; box-shadow: none; }
input:focus, select:focus, textarea:focus { border-color: var(--turquesa); box-shadow: 0 0 0 3px rgba(15, 163, 180, .25); outline: none; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
select option { background: var(--verde); color: var(--texto); }
.skip { background: var(--verde); color: var(--texto); }
button:focus-visible, a:focus-visible { outline-color: var(--turquesa-claro); }

/* ---------- cabecera y menú ---------- */
.suite-bar { background: var(--verde); border-bottom: 1px solid var(--linea); }
.brand-divider { background: var(--linea-2); }
.suite-brand img { content: url("../assets/OPFAR-logotipo-negativo.png"); }   /* el negativo oficial del manual (regla 11: solo logos oficiales) */
.suite-brand strong span, .app-logo span { color: var(--turquesa-claro); }
.app-logo { color: var(--texto); }
.product-chevron, .suite-app .product-chevron, .pharmacy-picker svg, .profile-button svg:last-child { color: var(--texto-3); }
.suite-account { background: rgba(234, 246, 247, .06); }
.role-label { color: var(--texto-3); }
.pharmacy-picker, .profile-button, .notification-button { background: rgba(234, 246, 247, .08); border: 1px solid var(--linea-2); color: var(--texto); }
.pharmacy-picker:hover, .profile-button:hover, .notification-button:hover { background: rgba(234, 246, 247, .14); }
.pharmacy-picker span { color: var(--texto-3); }
.profile-button .avatar, .avatar { background: var(--turquesa); color: #FFFFFF; }
.notification-button i { background: var(--error); border-color: var(--verde); color: #FFFFFF; }
body[data-navigation=horizontal] .horizontal-nav { background: var(--noche); border-bottom: 1px solid var(--linea); }
body[data-navigation=horizontal] .horizontal-nav button { color: var(--texto-2); }
body[data-navigation=horizontal] .horizontal-nav button:hover { color: var(--texto); background: rgba(234, 246, 247, .06); }
body[data-navigation=horizontal] .horizontal-nav button.active { background: #FFFFFF; color: #0C2A31; }
body[data-navigation=horizontal] .horizontal-nav i { background: var(--turquesa); color: #FFFFFF; }
.rail { background: var(--verde); color: var(--texto); border-right: 1px solid var(--linea); }
.rail-label { color: var(--texto-3); }
.rail button { color: var(--texto-2); }
.rail button:hover { background: rgba(234, 246, 247, .06); }
.rail button.active { background: #FFFFFF; color: #0C2A31; box-shadow: none; }
.rail button.active svg { color: var(--turquesa); }
.rail button i { background: rgba(234, 246, 247, .1); color: var(--texto); }
.rail-signature { border-top: 1px solid var(--linea); }
.rail-signature small { color: var(--texto-3); }
.top, .mobile-nav { background: var(--verde); border-color: var(--linea); }
.top-link { background: rgba(234, 246, 247, .08); border-color: var(--linea-2); color: var(--texto); }
.mnav-btn { background: var(--verde); border-color: var(--linea-2); color: var(--texto); box-shadow: none; }
.mnav-btn > svg:first-child { color: var(--turquesa-claro); }
.mnav-btn > svg:last-child { color: var(--texto-3); }
.mnav-btn[aria-expanded="true"] { border-color: var(--turquesa); }
.mnav-txt small, .mnav-far small { color: var(--texto-3); }
.mnav-panel { background: var(--verde); border-color: var(--linea-2); box-shadow: var(--sombra); }
.mnav-item { color: var(--texto); }
.mnav-item svg { color: var(--turquesa-claro); }
.mnav-item:hover { background: rgba(234, 246, 247, .08); }
.mnav-item.active { background: #FFFFFF; color: #0C2A31; }
.mnav-item.active svg { color: var(--turquesa); }
.mnav-item i { background: var(--turquesa); color: #FFFFFF; }
.mnav-sub { color: var(--texto-2); }
.mnav-far { border-top: 1px solid var(--linea); color: var(--texto); }
.mnav-far svg { color: var(--turquesa-claro); }
.mnav-far em { color: var(--turquesa-claro); }

/* desplegables de cuenta, avisos y farmacias */
.cuenta-pop, .avisos-pop, .ov-pop, .ot-fecha-w .ot-cal, .ot-cal-flota, .ot-lista { background: var(--verde-2); border: 1px solid var(--linea-2); box-shadow: var(--sombra); }
.cuenta-pop-cab, .avisos-cab { border-bottom: 1px solid var(--linea); }
.cuenta-pop-cab b, .avisos-cab b, .cuenta-pop button, .avisos-pop li { color: var(--texto); }
.cuenta-pop-cab small, .avisos-pop li small, .avisos-vacio, .avisos-mas, .cp-version { color: var(--texto-3); }
.cp-version { border-top-color: var(--linea); }
.cuenta-pop button svg { color: var(--turquesa-claro); }
.cuenta-pop button:hover, .cuenta-pop button:focus-visible { background: rgba(234, 246, 247, .08); }
.cuenta-pop .cp-salir { color: var(--error); }
.cuenta-pop .cp-salir svg { color: var(--error); }
.avisos-pop li.warn { background: var(--aviso-suave); }
.far-item { background: rgba(234, 246, 247, .04); border-color: var(--linea); }
.far-item:hover { border-color: var(--linea-2); background: rgba(234, 246, 247, .08); }
.far-item[aria-current="true"] { border-color: var(--turquesa); background: rgba(15, 163, 180, .14); }
.far-ini { background: rgba(15, 163, 180, .2); color: var(--turquesa-claro); }
.far-txt b { color: var(--texto); }
.far-txt small, .far-grupo, .mc-pie span { color: var(--texto-3); }
.far-item em { background: var(--turquesa); color: #FFFFFF; }
.far-item i { color: var(--texto-3); }

/* ---------- botones ---------- */
.btn { border-radius: 999px; background: #FFFFFF; color: #0C2A31; border-color: #FFFFFF; }
.btn:hover { background: var(--turquesa-suave); border-color: var(--turquesa-suave); }
.btn.light { background: rgba(234, 246, 247, .1); color: var(--texto); border-color: var(--linea-2); }
.btn.light:hover { background: rgba(234, 246, 247, .18); }
.btn.peligro { color: var(--error); }
.btn.peligro:not(.light) { background: var(--error); border-color: var(--error); color: #FFFFFF; }
.text-btn { color: var(--turquesa-claro); }
.pills { background: rgba(234, 246, 247, .08); border-radius: 999px; }
.pills button { color: var(--texto-2); border-radius: 999px; }
.pills button.active { background: #FFFFFF; color: #0C2A31; box-shadow: none; }
.section-nav button { border-color: var(--linea-2); background: transparent; color: var(--texto-2); }
.section-nav button:hover { background: rgba(234, 246, 247, .08); color: var(--texto); }
.section-nav button.active { background: #FFFFFF; color: #0C2A31; border-color: #FFFFFF; }
.cas-tipos { background: rgba(234, 246, 247, .08); }
.cas-tipos button { color: var(--texto-2); }
.cas-tipos button.active { background: #FFFFFF; color: #0C2A31; box-shadow: none; }
.cas-pill { border-color: var(--linea-2); background: transparent; color: var(--texto); }
.cas-pill:hover { border-color: var(--turquesa-claro); }
.cas-pill.on { background: var(--turquesa); border-color: var(--turquesa); color: #FFFFFF; }
.ov-modo button { background: rgba(234, 246, 247, .08); color: var(--texto-2); }
.ov-modo button.active { background: #FFFFFF; color: #0C2A31; }
.emp-chk input, .ot-guia-no input, input[type=checkbox], input[type=radio] { accent-color: var(--turquesa); }

/* ---------- Inicio ---------- */
.welcome { background: var(--verde); background-image: radial-gradient(120% 140% at 85% 0%, rgba(15, 163, 180, .35), transparent 55%), linear-gradient(115deg, #123B44, #0F3640 55%, #124550); color: var(--texto); border: 1px solid var(--linea); }
.welcome:after { border-color: rgba(255, 255, 255, .06); }
.welcome-kicker { color: var(--turquesa-claro); }
.welcome p { color: var(--texto-2); }
.welcome .btn { background: #FFFFFF; color: #0C2A31; border-color: #FFFFFF; }
.welcome-link { color: var(--texto); }
.pharmacy-seal { background: rgba(234, 246, 247, .08); color: var(--texto); border: 1px solid var(--linea-2); }
.seal-cross { border-color: var(--linea-2); color: var(--turquesa-claro); }
.pharmacy-seal>span:last-child { color: var(--texto-3); }
.seal-btn:hover { box-shadow: 0 0 0 3px rgba(91, 208, 214, .35); }
.opening-strip, .overview-card, .quien, .ot-fecha { background: var(--verde); border: 1px solid var(--linea); }
.opening-label svg { color: var(--turquesa-claro); }
.opening-label span, .opening-track span, .dia-ejes { color: var(--texto-3); }
.opening-label em { color: var(--texto-2); }
.opening-track div, .dia-pista i { background: linear-gradient(90deg, #1f6d78, var(--turquesa)); }
.dia-pista, .opening-track.dia-track .dia-pista { background: rgba(234, 246, 247, .1); }
.dia-pista b { background: var(--texto); border-color: var(--verde); box-shadow: 0 0 0 2px var(--turquesa); }
.overview-card:hover, .ov-wrap.abierto .overview-card { border-color: var(--turquesa); box-shadow: none; }
.overview-icon { background: rgba(15, 163, 180, .18); color: var(--turquesa-claro); }
.overview-icon.amber { background: var(--aviso-suave); color: var(--aviso); }
.overview-card small, .overview-card em, .ov-flecha, .quien small, .quien-fuera, .ov-persona small, .ov-fuera, .ov-nota { color: var(--texto-3); }
.ov-persona:hover { background: rgba(234, 246, 247, .06); }
.ov-persona i, .quien i { background: var(--exito); color: #0C2A31; }
.quien:not(:disabled):hover { border-color: var(--turquesa); }
.quien.ahora { border-color: var(--exito); }
.ov-tabla th { color: var(--texto-2); background: rgba(234, 246, 247, .05); }
.ov-tabla td { border-top-color: var(--linea); color: var(--texto-2); }
.ov-tabla td.bien { background: var(--exito-suave); color: var(--exito); }
.ov-tabla td.falta { background: var(--error-suave); color: var(--error); }
.ot-fecha svg { color: var(--turquesa-claro); }
.section-kicker, .eyebrow { color: var(--turquesa-claro); }
.config-shortcut { border-color: var(--linea-2); background: rgba(15, 163, 180, .12); }
.config-shortcut svg { color: var(--turquesa-claro); }
.config-shortcut small { color: var(--texto-2); }
.product-grid>div, .product-grid .app-ir { border-color: var(--linea); background: var(--verde); }
.product-grid .app-ir:hover { border-color: var(--turquesa); }
.product-grid small { color: var(--texto-3); }
.product-grid .app-ir small { color: var(--turquesa-claro); }
.opfito-greeting { background: rgba(15, 163, 180, .12); }
.opfito-launch { background: var(--turquesa); color: #FFFFFF; border-color: var(--verde); box-shadow: 0 10px 30px rgba(15, 163, 180, .35); }
.opfito-launch svg { color: #FFFFFF; }
.topic-list button { background: rgba(234, 246, 247, .06); border-color: var(--linea-2); color: var(--texto); }

/* ---------- paneles, tarjetas, tablas ---------- */
.panel, .team-card, .setting, .metrics { background: var(--verde); border-color: var(--linea); box-shadow: none; }
.panel-head, .metric, .legend, .request, .task-row, .list-table td, .ocup-grafica, .ficha-dato, .ficha-dia, .cfg-resumen td, .emp-avisos li, .team-card footer { border-color: var(--linea); }
.panel-head p, .metric label, .metric small, .legend, .task-row p, .request p, .empty, .team-card p, .setting p, .page-head p, .axis, .bottom-line, .person-role, .off, .list-table th, .inspection p, .ficha-dato span, .ficha-dia span, .ficha-dato small, .mapa th, .cfg-miga, .cfg-resumen th, .aus-filtro, .emp-avisos small, .list-table.saldos td small, .rot-salta, .mc-nota, .mc-avas small, .sol-saldo { color: var(--texto-2); }
.off, .person-role, .axis, .ficha-dato small { color: var(--texto-3); }
.metric .positive { color: var(--exito); }
.list-table th { background: rgba(234, 246, 247, .05); }
.tag { background: rgba(15, 163, 180, .18); color: var(--turquesa-claro); }
.tag.warn { background: var(--aviso-suave); color: var(--aviso); }
.tag.neutral { background: rgba(234, 246, 247, .1); color: var(--texto-2); }
.tag.ok { background: var(--exito-suave); color: var(--exito); }
.setting:hover { border-color: var(--turquesa); }
.setting span { color: var(--turquesa-claro); }
.notice { border-color: var(--linea-2); background: rgba(15, 163, 180, .1); color: var(--texto-2); }
.warning { background: var(--aviso-suave); border-color: rgba(226, 163, 69, .4); color: var(--aviso); }
.progress { background: rgba(234, 246, 247, .12); }
.progress i { background: var(--turquesa); }
.coverage i { background: var(--turquesa); }
.coverage i.warn { background: var(--aviso); }
.sin-configurar { border-color: var(--turquesa); }
.cfg-comparar { border-color: var(--linea-2); background: rgba(234, 246, 247, .04); color: var(--texto-2); }
.cfg-comparar button, .cfg-pasos button, .mc-cerrar, .mc-ava { border-color: var(--linea-2); background: transparent; color: var(--texto); }
.cfg-comparar button[aria-pressed="true"], .cfg-pasos button.active { background: #FFFFFF; color: #0C2A31; border-color: #FFFFFF; }
.cfg-comparar a, .cfg-pasos button b, details.insp-lista summary, .mc-cab h2, .mc-tit, .mc-titulo, .ot-guia-cuenta { color: var(--turquesa-claro); }
.cfg-pasos button.active b { color: #0A7581; }
.cfg-dot { background: var(--linea-2); }
.cfg-dot.ok { background: var(--exito); }
.cfg-dot.warn { background: var(--aviso); }
.cfg-miga b, .ficha-dato b, .ficha-dia b, .insp-lista, .rh-lista, .mapa-c.sin-datos { color: var(--texto); }
.ficha-dia.hoy b { color: var(--turquesa-claro); }
.cuenta-msg.ok, .insp-ok, .cfg-cambios-ok { color: var(--exito); }
.cuenta-msg.mal, .saldo-mal, .just-quitar { color: var(--error); }
.cfg-det pre { background: rgba(11, 42, 49, .6); color: var(--texto-2); }
.cfg-cambios .cfg-avisos, .rot-aviso, .just-nuevo em, .aviso-nuevo, .fichar-aviso b { color: var(--aviso); }
.cfg-cambios-acc span { color: var(--texto-2); }
.just-chip { background: rgba(234, 246, 247, .1); }
.just-nuevo, .fichar-aviso { background: var(--aviso-suave); color: var(--texto); }
.rot-propuesta { border-color: var(--linea-2); background: rgba(234, 246, 247, .04); }
.acc-pass, .cas-otro { background: rgba(234, 246, 247, .04); }
.mc-input, .mc-pass input { border-color: var(--linea-2); background: rgba(11, 42, 49, .6); color: var(--texto); }
.mc-input[readonly] { background: rgba(234, 246, 247, .06); color: var(--texto-2); }
.mc-input:focus, .mc-pass input:focus { border-color: var(--turquesa); box-shadow: 0 0 0 3px rgba(15, 163, 180, .25); }
.mc-sep { border-top-color: var(--linea); }
.mc-etq, .mc-ojo, .mc-olvido { color: var(--texto-2); }
.mc-ojo:hover { color: var(--turquesa-claro); background: rgba(15, 163, 180, .16); }
.mc-ava:hover, .mc-ava:focus-visible { border-color: var(--turquesa); }

/* ocupación y mapa de horas */
.ocup-col i { background: var(--t-manana); }
.ocup-col.falta i, .ocup-col.bajo-minimo i { background: var(--aviso); }
.ocup-col.sobra i { background: rgba(70, 166, 169, .45); }
.ocup-col b { background: var(--texto); color: #0C2A31; }

/* ---------- cuadrante ---------- */
.schedule th { border-bottom-color: var(--linea); color: var(--texto-3); }
.schedule th b { color: var(--texto); }
.schedule td { border-bottom-color: var(--linea); }
.schedule .today { background: rgba(15, 163, 180, .08); }
.schedule td.a-mano { box-shadow: inset 0 -3px 0 var(--aviso); }
.leyenda-mano { background: var(--aviso); }
.person-name { color: var(--texto); }
.shift { background: rgba(234, 246, 247, .06); color: var(--texto-2); border-left-color: var(--linea-2); border-radius: 8px; }
.shift.am { background: var(--t-manana); border-left-color: #2E8A8D; color: #0C2A31; }
.shift.pm { background: var(--t-tarde); border-left-color: #6672A8; color: #0C2A31; }
.shift.split { background: var(--t-partido); border-left-color: #A3815A; color: #0C2A31; }
.shift:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.off-btn:hover { border-color: var(--linea-2); }
.legend i { opacity: 1; }

/* ---------- diálogos, avisos, guía ---------- */
dialog { background: var(--verde); color: var(--texto); border-color: var(--linea-2); box-shadow: var(--sombra); border-radius: 18px; }
dialog::backdrop { background: rgba(5, 20, 24, .62); }
dialog p { color: var(--texto-2); }
#message { background: #FFFFFF; color: #0C2A31; box-shadow: var(--sombra); }
.ot-version { background: #FFFFFF; color: #0C2A31; box-shadow: var(--sombra); }   /* D-106 */
.ot-guia.sin-destino .ot-guia-velo { background: rgba(5, 20, 24, .62); }
.ot-guia-marco { box-shadow: 0 0 0 3px rgba(91, 208, 214, .9), 0 0 0 9999px rgba(5, 20, 24, .62); }
.ot-guia-tarjeta { background: var(--verde); border-color: var(--linea-2); box-shadow: var(--sombra); color: var(--texto); }
.ot-guia-tarjeta h2 { color: var(--texto); }
.ot-guia-tarjeta p { color: var(--texto-2); }
.ot-guia-x, .ot-guia-no { color: var(--texto-3); }
.ot-guia-x:hover { background: rgba(234, 246, 247, .08); color: var(--texto); }
.ot-guia-puntos i { background: var(--linea-2); }
.ot-guia-puntos i.on { background: var(--turquesa); }
.ot-guia-pie { border-top-color: var(--linea); }
.ot-guia-btn { border-color: #FFFFFF; background: #FFFFFF; color: #0C2A31; border-radius: 999px; }
.ot-guia-btn:hover { background: var(--turquesa-suave); border-color: var(--turquesa-suave); }
.ot-guia-btn.sec { background: rgba(234, 246, 247, .1); color: var(--texto); border-color: var(--linea-2); }
.ot-guia-btn.sec:hover { background: rgba(234, 246, 247, .18); }

/* desplegables propios (acceso.css) */
.ot-op { color: var(--texto); }
.ot-op:hover, .ot-op:focus-visible, .ot-op.activa { background: rgba(234, 246, 247, .08); }
.ot-op.sel { background: rgba(15, 163, 180, .2); color: var(--turquesa-claro); }
.ot-op i { color: var(--turquesa-claro); }
.ot-op[disabled], .ot-cal-d.fuera, .ot-cal-d:disabled, .ot-cal-txt:disabled { color: var(--texto-3); opacity: .6; }
.ot-grupo, .ot-cal-dias > span { color: var(--texto-3); }
/* el buscador de las listas largas (desplegables.js, 20/10/2026): el campo como los .mc-input de aquí; solo el color
   del fondo (background-color), para no perder la lupa, que va aquí en el gris claro de la sala; con !important porque la
   regla general de los campos de aquí (input:not(...)) pesa más y la borraba */
.ot-buscar { border-bottom-color: var(--linea); }
.ot-buscar input { border-color: var(--linea-2); background-color: rgba(11, 42, 49, .6) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C3C7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 11px 50% !important; background-size: 17px 17px !important; color: var(--texto); }
.ot-buscar input::placeholder { color: var(--texto-3); }
.ot-buscar input:focus { border-color: var(--turquesa); box-shadow: 0 0 0 3px rgba(15, 163, 180, .25); }
.ot-vacio { color: var(--texto-3); }
.ot-cal { background: var(--verde-2); }
.ot-cal-cab b, .ot-cal-d { color: var(--texto); }
.ot-cal-flecha { border-color: var(--linea-2); background: transparent; color: var(--texto); }
.ot-cal-d:hover, .ot-cal-txt:hover { background: rgba(234, 246, 247, .08); }
.ot-cal-d.hoy { box-shadow: inset 0 0 0 1.5px var(--turquesa-claro); }
.ot-cal-d.sel { background: #FFFFFF; color: #0C2A31; }
.ot-cal-pie { border-top-color: var(--linea); }
.ot-cal-txt { color: var(--texto); }

/* el marco de Configuración (el formulario de 9 pasos, que se sustituirá por Primeros pasos) */
.config-frame { background: var(--noche); }

/* la entrada (acceso.css) ya es oscura: solo los campos */
.fx-cuerpo input { background: rgba(11, 42, 49, .6); color: var(--texto); }
.fx-cuerpo input:focus { background: rgba(11, 42, 49, .8); }

@media print {
  html, body { background: #FFFFFF; color: #123B44; }
}