/* =====================================================================
   Modo oscuro de la landing (2026-10-07)
   La landing tiene los colores escritos en cada elemento. Cada uno es una variable
   con su color claro de respaldo: var(--l-bg-faf8f3, #faf8f3). En claro no hay nada
   definido y vale el respaldo; acá se definen en la paleta oscura del sistema
   ("Facturador v2 oscuro"). El nombre dice el uso y el color claro original:
   bg = fondo, tx = texto, bd = borde.
   ===================================================================== */

/* El switch de sol y luna: el mismo del sistema. */
.tema-switch {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 54px; height: 28px; padding: 0 7px; margin: 0; flex: none; cursor: pointer;
  border-radius: 999px; border: 1px solid #D5CDBC; background: #ECE8DE; box-shadow: none;
}
.tema-switch .ts-ic { position: relative; z-index: 1; display: flex; color: #9AA39D; transition: color .2s; }
.tema-switch .ts-perilla {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform .22s cubic-bezier(.2, .7, .2, 1), background .2s;
}
.tema-switch[aria-pressed="false"] .ts-sol { color: #C98B2A; }
.tema-switch[aria-pressed="true"] { background: #23302C; border-color: #3A4A44; }
.tema-switch[aria-pressed="true"] .ts-perilla { transform: translateX(26px); background: #4A5B55; }
.tema-switch[aria-pressed="true"] .ts-luna { color: #F1E3B5; }
.tema-switch:focus-visible { outline: 2px solid #E8A33D; outline-offset: 2px; }

/* El logo: el PNG es verde oscuro y sobre el fondo oscuro no se ve. En oscuro va la
   MISMA imagen con el verde pasado a marfil (isologo-oscuro.png, mismo tamaño en
   píxeles): cambiar de modo no puede mover ni agrandar nada. */
.logo-oscuro { display: none; }
:root[data-theme="dark"] .logo-claro { display: none !important; }
:root[data-theme="dark"] .logo-oscuro { display: block; }

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Fondos */
  --l-bg-faf8f3: #111816;   /* la página */
  --l-bg-ffffff: #1A2320;   /* tarjetas */
  --l-bg-fffdf9: #1A2320;
  --l-bg-f4f1ea: #151D1A;
  --l-bg-f1ede0: #151D1A;   /* secciones alternadas */
  --l-bg-efeae0: #2A3632;
  --l-bg-efe8d8: #2C2416;   /* etiquetas ámbar */
  --l-bg-fdf3e2: #2C2416;
  --l-bg-e0d8c8: #3A4843;
  --l-bg-e4edeb: #1B2C26;
  --l-bg-c9d8d4: #2F5546;
  --l-bg-f2f8f4: #16271F;
  --l-bg-eaf3eb: #16271F;
  --l-bg-e4f1e6: #16271F;
  --l-bg-fbe7e5: #2E1E1B;
  --l-bg-2e5c54: #2B6A58;   /* botones y tarjetas verdes: más oscuro que el #3A8A72 del sistema
                               para que el texto verde claro de las tarjetas se lea */
  --l-bg-4f7f76: #2F5546;
  --l-bg-33645c: #1A2320;   /* tarjetas de beneficios */
  --l-bg-2e7d52: #3FA06B;
  --l-bg-1e3934: #0B110F;   /* pie */
  --l-bg-22332f: #ECE8DF;
  --l-barra: rgba(17, 24, 22, .92);
  /* Textos */
  --l-tx-1e3934: #ECE8DF;
  --l-tx-22332f: #ECE8DF;
  --l-tx-3d4b45: #A3ADA8;
  --l-tx-4b5951: #A3ADA8;
  --l-tx-55625d: #A3ADA8;
  --l-tx-7c8880: #8C9892;
  --l-tx-93998f: #8C9892;
  --l-tx-2e5c54: #8FB8A6;
  --l-tx-245c41: #8FD0AA;
  --l-tx-1a5e2a: #8FD0AA;
  --l-tx-3f7d4a: #7DD3A0;
  --l-tx-2e7d52: #7DD3A0;
  --l-tx-4b6b5c: #8FA89C;
  --l-tx-8a6416: #E0B970;
  --l-tx-93650f: #E0B970;
  --l-tx-a0692a: #E0B970;
  --l-tx-90241c: #E08A7D;
  /* Bordes */
  --l-bd-eae3d3: #2A3632;
  --l-bd-ede7dc: #2A3632;
  --l-bd-f1eee4: #222D29;
  --l-bd-f7f5ef: #222D29;
  --l-bd-a9cfb9: #2F5546;
  --l-bd-2e5c54: #3A8A72;
}
/* Beneficios es una franja verde: en oscuro, verde casi negro, para que no encandile
   entre secciones oscuras. Sus botones (si los hubiera) también. */
:root[data-theme="dark"] #beneficios { --l-bg-2e5c54: #16231F; }

:root[data-theme="dark"], :root[data-theme="dark"] body { background: #111816; }
:root[data-theme="dark"] a { color: #8FB8A6; }
:root[data-theme="dark"] a:hover { color: #A9CDBD; }
:root[data-theme="dark"] input[type=range] { accent-color: #3A8A72; }
:root[data-theme="dark"] .btn-solid:hover { background: #43977E !important; }
:root[data-theme="dark"] .btn-outline:hover { background: #3A8A72 !important; color: #111816 !important; }
:root[data-theme="dark"] input:not([type=range]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select {
  background: #151D1A; color: #ECE8DF; border-color: #2A3632;
}
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #6C7771; }
/* Sobre ámbar el texto verde va oscuro, como en el sistema (el botón de emitir). */
:root[data-theme="dark"] [style*="--l-bg-e8a33d"] { --l-tx-2e5c54: #1A2320; --l-tx-1e3934: #1A2320; }

/* La barra en el celular (2026-10-07). Ya no entraba antes del switch: "Empezá gratis"
   quedaba cortado afuera de la pantalla. Con el switch, entran el logo, el switch e
   "Iniciar sesión"; "Empezá gratis" se va de la barra porque el botón grande de la
   portada, justo abajo, dice lo mismo. */
@media (max-width: 560px) {
  header { padding-left: 16px !important; padding-right: 16px !important; gap: 10px !important; }
  header .logo-claro, header .logo-oscuro { height: 24px !important; }
  header nav { gap: 10px !important; }
  header nav > div { display: none !important; }
  header nav > a[href="/fact/registro"] { display: none !important; }
  header nav > a[href="/fact/"] { padding: 8px 14px !important; font-size: 13px !important; }
}

/* El QR de descarga (2026-10-07): SIEMPRE sobre fondo claro. La cámara del teléfono
   busca módulos oscuros sobre fondo claro; en oscuro el recuadro se volvía casi negro y
   el QR (negro) dejaba de leerse. */
:root[data-theme="dark"] .qr-caja { background: #FAF8F3 !important; }