@charset "UTF-8";
/* © MSD Marcelo Soler Diseño   */
/* Versión 2.1                  */
/* Septiembre de 2026           */

/* =========================================
   Tema Oscuro - Inversión Lógica de Variables
   ========================================= */

/* 1. Redefinición de Variables CSS */
html.dark-mode {
   --fnt-wgh: 300;
   /* Inversión de la escala de grises (El blanco pasa a ser el fondo oscuro) */
   --gris-0: oklch(1 0 0);
   /* Blanco puro (para iconos y máscaras) */
   --gris-10: oklch(.90 0 0);
   --gris-20: oklch(.85 0 0);
   /* Texto principal */
   --gris-30: oklch(.75 0 0);
   --gris-40: oklch(.70 0 0);
   --gris-50: oklch(.60 0 0);
   --gris-67: oklch(.50 0 0);
   --gris-80: oklch(.35 0 0);
   /* Bordes y divisores */
   --gris-90: oklch(.3 0 0);
   --gris-95: oklch(.25 0 0);
   /* Fondos de tarjetas y notas */
   --gris-97: oklch(.15 0 0);
   /* 2026-08-24 */
   --gris-100: oklch(0.1 0 0);
   --gris-liviano: var(--gris-0);
   /* Fondo general del body */
   --textos: var(--gris-0);

   /* Resaltado */
   /* 2026-08-31 */
   /* Ajuste de Azules (Mayor luminosidad para contraste sobre fondo oscuro) 2026-08-31 */
   --azul-0: var(--gris-20);
   --azul-1: var(--gris-0);
   --azul-2: var(--gris-20);
   --azul-3: var(--gris-10);
   --azul-4: var(--gris-20);
   --azul-5: var(--gris-0);
   --peligro: oklch(0.7 0.18 19);
   /* Identificadores */
   --c01: oklch(0.65 0.186 265);
   --c02: oklch(0.65 0.226 302);
   --c03: oklch(0.65 0.285 338);
   --c04: oklch(0.65 0.24 14);
   --c05: oklch(0.65 0.172 50);
   --c06: oklch(0.65 0.133 86);
   --c07: oklch(0.65 0.158 122);
   --c08: oklch(0.65 0.152 158);
   --c09: oklch(0.65 0.111 194);
   --c10: oklch(0.65 0.13 230);
   /* Sombras */
   --somb-1: 0 1px 2px oklch(1 0 0 / 25%);
   --somb-2: 0 -2px 2px oklch(1 0 0 / 25%);
   --somb-3: 0 1px 1px 1px oklch(1 0 0 / 30%);
   --somb-4: 1px 1px 2px oklch(1 0 0 / 20%);
   --somb-5: 0 2px 2px oklch(1 0 0 / 15%);
   --somb-ins: inset 0 2px 4px var(--gris-97),
               inset 0 1px 2px var(--gris-100),
               inset 0 -1px 2px var(--gris-0);
   /* Borde */
   /* 2026-08-24 */
   --borde: var(--bor1) var(--gris-80);
   /* Resaltados y fondos especiales */
   --resalta-bg: oklch(0.99 0.033 107 / 15%);
   --gris-tr-1: color-mix(in srgb, var(--gris-100) 95%, transparent);
   --gris-tr-2: color-mix(in srgb, var(--gris-97) 95%, transparent);
   --gris-tr-3: color-mix(in srgb, var(--gris-100) 97%, transparent);

   /* Cambia la marca a su versión de alto contraste */
   --marca-MM: var(--marca-MM-dark);

   /* Indica al navegador que use scrollbars oscuras nativas */
   color-scheme: dark;
}

/* 2. Correcciones de colores "Hardcodeados" en el CSS original */
html.dark-mode .pie-destino-activo {
   background-color: oklch(0.4 0.1 110 / 0.4) !important;
   color: var(--gris-10) !important;
   outline-color: oklch(0.5 0.15 110 / 0.5) !important;
}

html.dark-mode .al-pie-tt {
   background: var(--gris-95);
   border-color: var(--gris-80);
}

/* 3. Tratamiento de Imágenes (Reduce brillo para no cansar la vista) */
html.dark-mode img {
   filter: brightness(0.85) contrast(1.1);
   transition: filter 0.3s ease;
}

html.dark-mode img:hover {
   filter: brightness(1) contrast(1);
}

/* 4. Ajustes de Componentes Específicos */
html.dark-mode #institucional {
   background: oklch(.15 0 0 / 95%);
   border-top-color: var(--gris-80);
}

html.dark-mode #rotate-warning {
   background: var(--azul-3);
   /* Un azul más suave para la alerta de rotación */
}

/* ------ Botón ir arriba ------- */
html.dark-mode .ir-arriba-btn {
   background: var(--gris-100);
   border: var(--bor1) var(--gris-0);
   opacity: .5;
}

html.dark-mode .ir-arriba-btn:hover {
   opacity: 1;
}

html.dark-mode .ir-arriba-icon {
   background-color: var(--gris-0);
}

/* =========================================
   Botón de Alternar Tema (Posicionamiento Responsivo)
   ========================================= */

/* A la izquierda del gatillo y centrado verticalmente en #inicio */
#btn-toggle-tema {
   position: fixed;
   width: var(--cuadro);
   height: var(--cuadro);
   top: calc(var(--alto-inicio) / 2);
   right: calc(var(--cuadro) * 2);
   transform: translateY(-50%);
   z-index: 1002;
   border: var(--bor1) var(--gris-100);
   border-radius: 50%;
   background: var(--gris-97);
   color: var(--gris-0);
   font-size: var(--tam-15);
   cursor: pointer;
   padding: 0.5rem;
   transition: transform 0.3s var(--bezier), opacity 0.3s ease, filter 0.3s ease;
   opacity: 0.85;
   outline: none;
   display: flex;
   align-items: center;
   justify-content: center;
   transform-origin: center;
}

/* Luna: acción disponible para activar el tema oscuro */
#btn-toggle-tema::after {
   content: "";
   display: block;
   width: .9em;
   height: .9em;
   border-radius: 50%;
   background: transparent;
   box-shadow: inset .28em -.18em 0 .02em currentColor;
   transform: rotate(-12deg);
   transition: transform 0.3s var(--bezier), box-shadow 0.3s ease;
}

/* Estados interactivos (Móvil y base) */
#btn-toggle-tema:hover,
#btn-toggle-tema:focus-visible {
   color: var(--hover);
   background: var(--gris-100);
   opacity: 1;
}

/* Anillo de enfoque accesible */
#btn-toggle-tema:focus-visible {
   outline: none;
   border-radius: 50%;
}

/* Sol: acción disponible para activar el tema claro */
html.dark-mode #btn-toggle-tema::after {
   width: .5em;
   height: .5em;
   background: currentColor;
   box-shadow:
   0 -.52em 0 -.2em currentColor,
   .37em -.37em 0 -.2em currentColor,
   .52em 0 0 -.2em currentColor,
   .37em .37em 0 -.2em currentColor,
   0 .52em 0 -.2em currentColor,
   -.37em .37em 0 -.2em currentColor,
   -.52em 0 0 -.2em currentColor,
   -.37em -.37em 0 -.2em currentColor;
   transform: rotate(0);
}

/* ======== Desktop ======== */
@media (min-width: 769px) {
   html.dark-mode #btn-toggle-tema {
      opacity: 0.6;
   }

   html.dark-mode #btn-toggle-tema:hover,
   html.dark-mode #btn-toggle-tema:focus-visible {
      opacity: 1;
   }
}

/* ======== Mobile (< 769px) ======== */
@media (max-width: 768px) {
   #btn-toggle-tema {
      top: calc((var(--cabeza) - var(--tam-12)) / 2);
      transform: translateY(-50%) scale(1.25);
   }
}

/* 5. Forzar modo claro y ahorro de tinta en impresión */
@media print {
   html.dark-mode {
      color-scheme: light !important;

      /* Anular las variables oscuras y forzar valores de impresión seguros */
      --gris-100: oklch(1 0 0) !important;
      /* Fondo blanco puro */
      --textos: oklch(0 0 0) !important;
      /* Texto negro puro */
      --gris-0: oklch(0 0 0) !important;
      --gris-10: oklch(0.241 0 0) !important;
      /* --azul-2: oklch(0.35 0.15 265) !important; Restaurar azul original legible */
      --somb-1: 0 2px 8px color-mix(in srgb, #000 10%, transparent) !important;
   }

   /* Garantía absoluta: forzar fondo blanco y texto negro en los elementos raíz */
   html, body {
      background: white !important;
      color: black !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
   }

   /* Asegurar que los resaltados y fondos de tarjetas se impriman correctamente */
   .tarjeta, .destacado, .resaltado, .pie-destino-activo {
      background: white !important;
      color: black !important;
      border: 1pt solid #000 !important;
      box-shadow: none !important;
   }
}