/* ============================================================
   INSITU OTEC — Modo oscuro (capa de remapeo)
   Se activa con la clase .dark en <html> (pref ui.theme).
   Sobrescribe las utilidades Tailwind literales usadas en las
   vistas sin tocarlas — mayor especificidad, sin !important.
   ============================================================ */

:root.dark { color-scheme: dark; }

/* ---------- Superficies ---------- */
.dark body { background-color: #0b1120; color: #f1f5f9; }
.dark .bg-white      { background-color: #16213a; }
.dark .bg-slate-50   { background-color: #101a30; }
.dark .bg-slate-100  { background-color: #243352; }
.dark .bg-slate-200  { background-color: #334155; }
.dark .bg-white\/85  { background-color: rgb(16 26 48 / .85); }
.dark .bg-white\/80  { background-color: rgb(16 26 48 / .8); }
.dark .bg-white\/60  { background-color: rgb(16 26 48 / .6); }

/* Estados hover sobre superficies claras */
.dark .hover\:bg-slate-50:hover   { background-color: #1c2a45; }
.dark .hover\:bg-slate-100:hover  { background-color: #243352; }
.dark .hover\:bg-slate-50\/50:hover { background-color: rgb(28 42 69 / .5); }
.dark .hover\:bg-red-50:hover     { background-color: rgb(127 29 29 / .3); }
.dark .hover\:bg-emerald-50:hover { background-color: rgb(6 95 70 / .3); }
.dark .hover\:bg-primary\/5:hover { background-color: rgb(255 255 255 / .04); }
.dark .group:hover .group-hover\:bg-primary\/5 { background-color: rgb(255 255 255 / .04); }
.dark .group:hover .group-hover\:bg-primary { background-color: var(--brand-primary); }
.dark .group:hover .group-hover\:text-white { color: #fff; }

/* ---------- Bordes ---------- */
.dark .border-slate-100,
.dark .border-slate-200 { border-color: #2a3a5c; }
.dark .border-slate-300 { border-color: #3b4d72; }
.dark .border-red-200   { border-color: rgb(239 68 68 / .4); }
.dark .border-red-300   { border-color: rgb(239 68 68 / .5); }
.dark .border-emerald-200 { border-color: rgb(16 185 129 / .4); }
.dark .hover\:border-accent\/40:hover,
.dark .hover\:border-accent\/50:hover { border-color: var(--brand-accent); }

/* peer-checked (tarjetas radio/checkbox): gana en especificidad a .dark */
.dark .peer:checked ~ .peer-checked\:bg-primary\/5 { background-color: rgb(255 255 255 / .05); }
.dark .peer:checked ~ .peer-checked\:border-primary { border-color: var(--brand-accent); }
.dark .peer:checked ~ .peer-checked\:bg-primary { background-color: var(--brand-primary); }
.dark .peer:checked ~ .peer-checked\:text-white { color: #fff; }

/* ---------- Texto ---------- */
.dark .text-ink       { color: #eef2f9; }
.dark .text-muted     { color: #a8bad6; }
.dark .text-slate-300 { color: #9db0cc; }
.dark .text-slate-400 { color: #a3b5d1; }
.dark .text-slate-500 { color: #a3b5d1; }
.dark .text-slate-600 { color: #b6c3da; }
.dark .text-slate-700 { color: #dbe4f0; }
.dark .text-slate-900 { color: #f1f5f9; }

/* ---------- Badges de estado (fondo claro + texto oscuro → tonos oscuros) ---------- */
.dark .bg-emerald-50 { background-color: rgb(6 95 70 / .3); }
.dark .bg-emerald-100 { background-color: rgb(6 95 70 / .4); }
.dark .text-emerald-600, .dark .text-emerald-700, .dark .text-emerald-800 { color: #6ee7b7; }
.dark .bg-amber-50  { background-color: rgb(120 53 15 / .35); }
.dark .bg-amber-100 { background-color: rgb(120 53 15 / .45); }
.dark .text-amber-600, .dark .text-amber-700 { color: #fcd34d; }
.dark .bg-red-50    { background-color: rgb(127 29 29 / .3); }
.dark .text-red-500, .dark .text-red-600, .dark .text-red-700, .dark .text-red-800 { color: #fca5a5; }
.dark .text-red-400 { color: #f87171; }
.dark .bg-blue-50   { background-color: rgb(30 58 138 / .35); }
.dark .text-blue-700 { color: #93c5fd; }
.dark .bg-sky-50    { background-color: rgb(12 74 110 / .35); }
.dark .bg-sky-100   { background-color: rgb(12 74 110 / .45); }
.dark .text-sky-600, .dark .text-sky-700, .dark .text-sky-800 { color: #7dd3fc; }
.dark .bg-violet-50  { background-color: rgb(76 29 149 / .3); }
.dark .bg-violet-100 { background-color: rgb(76 29 149 / .4); }
.dark .text-violet-600, .dark .text-violet-800 { color: #c4b5fd; }
.dark .bg-indigo-50  { background-color: rgb(55 48 163 / .3); }
.dark .text-indigo-600, .dark .text-indigo-700 { color: #a5b4fc; }
.dark .bg-orange-50  { background-color: rgb(124 45 18 / .35); }
.dark .text-orange-600, .dark .text-orange-700 { color: #fdba74; }
.dark .bg-blue-100   { background-color: rgb(30 58 138 / .45); }
.dark .bg-red-100    { background-color: rgb(127 29 29 / .45); }
.dark .text-amber-800 { color: #fcd34d; }
.dark .bg-primary\/10 { background-color: rgb(255 255 255 / .06); }
.dark .bg-primary\/5  { background-color: rgb(255 255 255 / .03); }

/* Hover/focus de texto que reapuntan a colores de modo claro */
.dark .hover\:text-red-600:hover, .dark .hover\:text-red-700:hover { color: #fca5a5; }
.dark .hover\:text-slate-600:hover, .dark .hover\:text-muted:hover { color: #b6c3da; }
.dark .group:hover .group-hover\:text-muted { color: #a8bad6; }
.dark .hover\:text-primary:hover, .dark .hover\:text-accent:hover { color: #8fd4f4; }

/* Divisores de listas/tablas */
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2a3a5c; }

/* Scroll shadows de tablas (.table-scroll) con superficie oscura */
.dark .table-scroll {
    background:
        linear-gradient(to right, #16213a 30%, rgb(22 33 58 / 0)) local left / 40px 100% no-repeat,
        linear-gradient(to left, #16213a 30%, rgb(22 33 58 / 0)) local right / 40px 100% no-repeat,
        linear-gradient(to right, rgb(0 0 0 / .45), rgb(0 0 0 / 0)) scroll left / 14px 100% no-repeat,
        linear-gradient(to left, rgb(0 0 0 / .45), rgb(0 0 0 / 0)) scroll right / 14px 100% no-repeat;
}

/* Leaflet: tiles oscuras en el picker de ubicación */
.dark .leaflet-layer,
.dark .leaflet-control-zoom-in,
.dark .leaflet-control-zoom-out,
.dark .leaflet-control-attribution { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }
.dark .leaflet-popup-content-wrapper, .dark .leaflet-popup-tip { background: #16213a; color: #eef2f9; }

/* text-primary sobre superficies oscuras → tono claro de marca (WCAG ≥4.5) */
.dark .text-primary   { color: #7cc4f0; }
.dark .text-accent    { color: #8fd4f4; }
/* …salvo dentro de contenedores con gradiente de marca (hero): allí el
   texto navy va sobre botones blancos y debe conservar su color */
.dark .bg-gradient-to-br .text-primary,
.dark .bg-gradient-to-r  .text-primary { color: var(--brand-primary); }
.dark .bg-gradient-to-br .bg-white,
.dark .bg-gradient-to-r  .bg-white { background-color: #fff; }
.dark .bg-gradient-to-br .bg-white\/15,
.dark .bg-gradient-to-r  .bg-white\/15 { background-color: rgb(255 255 255 / .15); }

/* ---------- Formularios ---------- */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.dark select, .dark textarea {
    background-color: #101a30;
    color: #eef2f9;
    border-color: #3b4d72;
}
.dark input::placeholder, .dark textarea::placeholder { color: #7d90ad; }
.dark input:focus, .dark select:focus, .dark textarea:focus { border-color: var(--brand-accent); }
.dark option { background-color: #16213a; color: #eef2f9; }

/* ---------- Sombras (más sutiles en oscuro) ---------- */
.dark .shadow-card { box-shadow: 0 1px 3px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .25); }
.dark .shadow-sm   { box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.dark .shadow-lg, .dark .shadow-2xl { box-shadow: 0 12px 32px rgb(0 0 0 / .5); }

/* ---------- Quill (editor visual) ---------- */
.dark .ql-toolbar.ql-snow { background: #243352; border-color: #3b4d72; border-radius: .5rem .5rem 0 0; }
.dark .ql-toolbar .ql-stroke { stroke: #b6c3da; }
.dark .ql-toolbar .ql-fill { fill: #b6c3da; }
.dark .ql-toolbar .ql-picker { color: #b6c3da; }
.dark .ql-toolbar button:hover .ql-stroke, .dark .ql-toolbar .ql-active .ql-stroke { stroke: var(--brand-accent); }
.dark .ql-container.ql-snow { background: #101a30; border-color: #3b4d72; border-radius: 0 0 .5rem .5rem; }
.dark .ql-editor { color: #eef2f9; }
.dark .ql-editor.ql-blank::before { color: #64748b; }
.dark .rte { border-color: #3b4d72 !important; }

/* ---------- SweetAlert2 ---------- */
.dark .swal2-popup { background: #16213a; color: #eef2f9; }
.dark .swal2-title { color: #eef2f9; }
.dark .swal2-html-container { color: #b6c3da; }
.dark .swal2-input { background: #101a30; color: #eef2f9; border-color: #3b4d72; }

/* ---------- Scrollbars ---------- */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: #0b1120; }
.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ---------- Selección ---------- */
.dark ::selection { background: rgb(41 169 225 / .35); }

/* ============================================================
   Sitio público — superficies de la landing
   ============================================================ */

/* Tokens semánticos (prose-insitu usa var(--color-muted)/--color-ink) */
:root.dark {
    --color-ink: #eef2f9;
    --color-muted: #a8bad6;
}

/* Header glass */
.dark .bg-white\/90 { background-color: rgb(16 26 48 / .85); }
.dark [data-site-header] { background: rgb(11 17 32 / .72); }
.dark [data-site-header].is-scrolled { background: rgb(11 17 32 / .88); }


/* Paneles y botones glass */
.dark .motion-glass {
    background: rgb(22 33 58 / .72);
    border-color: rgb(255 255 255 / .12);
    box-shadow: 0 8px 30px rgb(0 0 0 / .4);
}
.dark .to-top {
    background: rgb(22 33 58 / .82);
    border-color: #2a3a5c;
    color: #8fd4f4;
    box-shadow: 0 8px 24px rgb(0 0 0 / .4);
}

/* Marca: navy puro se pierde sobre el fondo oscuro → tono algo más claro */
.dark .bg-primary { background-color: #173767; }
.dark .hover\:bg-secondary:hover { background-color: #2d7fc9; }

/* Acentos suaves */
.dark .bg-accent\/10 { background-color: rgb(41 169 225 / .18); }
.dark .group:hover .group-hover\:bg-accent\/20 { background-color: rgb(41 169 225 / .28); }
.dark .text-sky-700 { color: #7dd3fc; }
.dark .group:hover .group-hover\:text-primary { color: #7cc4f0; }
.dark .hover\:text-accent:hover { color: #8fd4f4; }
.dark .hover\:border-accent\/50:hover { border-color: rgb(41 169 225 / .5); }

/* Panel de cotización y alertas del formulario de contacto */
.dark .bg-slate-50\/60 { background-color: rgb(16 26 48 / .6); }
.dark .bg-red-50 { background-color: rgb(127 29 29 / .3); }
.dark .text-red-800 { color: #fca5a5; }

/* Toggle de tema */
.dark .theme-toggle { border-color: #2a3a5c; color: #a8bad6; }

/* Banner de cookies en oscuro: fondo acorde, mismo blur denso */
.dark #cookieBanner {
    background: rgb(22 33 58 / .85);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
}