/* ============================================================================
   ui-toggles.css — Botones de idioma y tema, y capa de modo oscuro del sitio.

   Se enlaza en todas las páginas DESPUÉS de la hoja propia de cada una. No
   reemplaza nada: solo agrega los estilos de los dos botones del menú y, bajo
   el selector [data-theme="dark"], reescribe los colores.

   Cómo funciona el modo oscuro. Las 56 hojas del sitio son copias entre sí y
   comparten los nombres de las variables, así que alcanza con redefinir cuatro
   de ellas para dar vuelta el fondo y el texto de todo el sitio de una vez:

     --color-esqueleto-transparent   se usa siempre como fondo (130 veces)
     --gray-medium, --gray-dark      se usan siempre como color de texto
     --graylight                     ídem

   Las otras dos variables de la paleta, --blue-medium y --blue-dark, NO se
   tocan: cada una hace doble tarea, a veces fondo y a veces texto, y darlas
   vuelta rompería la mitad de los casos. Para esas se escriben abajo las
   reglas componente por componente.
   ============================================================================ */

/* ===== BOTONES DEL MENU ===== */
.menu__tools {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 0 10px;
  height: 100%;
}

.tool {
  position: relative;
  display: flex;
  align-items: center;
}

.tool__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 2px solid var(--blue-medium, #0b3f8b);
  border-radius: 8px;
  background-color: transparent;
  color: var(--blue-medium, #0b3f8b);
  font-family: var(--title, "Kanit", sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.tool__btn:hover {
  background-color: var(--blue-medium, #0b3f8b);
  color: var(--blue-light, #0b92a7);
}

.tool__btn:focus-visible {
  outline: 3px solid var(--blue-light, #0b92a7);
  outline-offset: 2px;
}

/* Casi todas las hojas del sitio traen una regla suelta `span { color: ... }`
   para resaltar términos dentro de los artículos. Sin esto, la sigla del
   idioma la heredaría y en modo oscuro quedaría azul marino sobre negro */
.tool__btn span {
  color: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.tool__ico {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El sol y la luna son el mismo botón: se muestra el que corresponde al tema
   contrario, que es el que se va a activar al hacer clic */
.tool__ico--sun {
  display: none;
}

[data-theme="dark"] .tool__ico--sun {
  display: block;
}

[data-theme="dark"] .tool__ico--moon {
  display: none;
}

/* ===== DESPLEGABLE DE IDIOMA ===== */
.tool__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: #ffffff;
  border: 2px solid var(--blue-medium, #0b3f8b);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  z-index: 1100;
  display: none;
}

.tool__menu--open {
  display: block;
}

.tool__option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: var(--blue-medium, #0b3f8b);
  font-family: var(--paragraph, "Nunito", sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.tool__option:hover {
  background-color: var(--blue-medium, #0b3f8b);
  color: #ffffff;
}

.tool__option[aria-current="true"] {
  background-color: var(--blue-suave, #46b7c942);
}

/* ===== MENU MOVIL =====
   Abajo de 768px la lista del menú pasa a ser un panel fijo en columna: los
   botones dejan de ir en línea y se acomodan como una fila más del panel */
@media screen and (max-width: 768px) {
  /* En el panel móvil, .menu__item lleva overflow:hidden para la animación de
     los submenús. Como los botones comparten esa clase, el desplegable de
     idioma quedaría recortado */
  .menu__tools {
    height: auto;
    padding: 20px 30px;
    gap: 12px;
    overflow: visible;
  }

  /* 11px de relleno deja el botón en 44px de alto, que es el mínimo cómodo
     para tocar con el dedo */
  .tool__btn {
    padding: 11px 14px;
    font-size: 1rem;
  }

  .tool__menu {
    top: calc(100% + 4px);
    left: 0;
    right: auto;
  }
}

/* ============================================================================
   MODO OSCURO
   ============================================================================ */

/* ===== PALETA ===== */
[data-theme="dark"] {
  /* Las cuatro variables de un solo uso, dadas vuelta */
  --color-esqueleto-transparent: #0f141b;
  --color-esqueleto: #141b24;
  --gray-medium: #c3ccd6;
  --gray-dark: #e6edf3;
  --grayBlacks: #e6edf3;
  --graylight: #98a4b3;
  --background-Primary: #171e27;
  --white-esqueleto: #1c242e;

  /* Propias de esta capa, para los componentes que traen el color escrito a
     mano en la hoja de cada página */
  --dk-surface: #161d26;
  --dk-surface-2: #1d2631;
  --dk-border: #2a3542;
  --dk-text: #d6dee7;
  --dk-link: #6fb5ff;
  --dk-accent: #35c9dd;
}

[data-theme="dark"] body {
  background-color: #0f141b;
  color: var(--dk-text);
}

/* cart.html trae el fondo en un atributo style, que gana por especificidad */
[data-theme="dark"] body[style] {
  background: #0f141b !important;
}

/* ===== NAVEGACION ===== */
[data-theme="dark"] .menu {
  background-color: rgba(22, 29, 38, 0.94);
  border-bottom-color: var(--dk-accent);
}

[data-theme="dark"] .menu__link,
[data-theme="dark"] .menu__link--inside {
  color: var(--dk-link);
}

[data-theme="dark"] .menu__link:hover,
[data-theme="dark"] .menu__link--inside:hover {
  background-color: var(--dk-surface-2);
  color: var(--dk-accent);
}

[data-theme="dark"] .menu__nesting {
  background-color: var(--dk-surface);
  border-bottom-color: var(--dk-accent);
}

[data-theme="dark"] .menu__arrow,
[data-theme="dark"] .menu__img {
  filter: invert(1) brightness(1.6);
}

/* ===== BOTONES DE LA CAPA ===== */
[data-theme="dark"] .tool__btn {
  border-color: var(--dk-link);
  color: var(--dk-link);
}

[data-theme="dark"] .tool__btn:hover {
  background-color: var(--dk-link);
  color: #0f141b;
}

[data-theme="dark"] .tool__menu {
  background-color: var(--dk-surface);
  border-color: var(--dk-link);
}

[data-theme="dark"] .tool__option {
  color: var(--dk-link);
}

[data-theme="dark"] .tool__option:hover {
  background-color: var(--dk-link);
  color: #0f141b;
}

[data-theme="dark"] .tool__option[aria-current="true"] {
  background-color: var(--dk-surface-2);
}

/* ===== TEXTO DESTACADO Y TITULOS =====
   span se usa en los artículos para resaltar términos; el degradado de .title
   está escrito a mano en cada hoja con azules oscuros que sobre fondo negro no
   se leen */
[data-theme="dark"] .content span,
[data-theme="dark"] .text span,
[data-theme="dark"] .paragraph span {
  color: var(--dk-accent);
}

[data-theme="dark"] .title {
  background-image: linear-gradient(60deg, #6fb5ff, #35c9dd);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--dk-text);
}

[data-theme="dark"] hr {
  border-color: var(--dk-border);
  color: var(--dk-border);
}

/* ===== TARJETAS Y ARTICULOS ===== */
[data-theme="dark"] .card {
  border-bottom-color: var(--dk-link);
}

[data-theme="dark"] .card:hover {
  border-bottom-color: var(--dk-accent);
}

[data-theme="dark"] .title--card a,
[data-theme="dark"] .subtitle__article a,
[data-theme="dark"] .title--banner a,
[data-theme="dark"] .paragraph--banner a {
  color: var(--dk-text);
}

/* En hover el parrafo del banner pasa a fondo blue-light, asi que el enlace
   necesita blanco tambien en oscuro: el --dk-text de arriba no contrasta. */
[data-theme="dark"] .paragraph--banner:hover a {
  color: #fff;
}

[data-theme="dark"] .title--card a:hover,
[data-theme="dark"] .subtitle__article a:hover {
  color: var(--dk-accent);
}

[data-theme="dark"] .content--article__blue,
[data-theme="dark"] .content--article {
  background: var(--dk-surface);
  border-color: var(--dk-border);
}

[data-theme="dark"] .content--article__blue a {
  color: var(--dk-text);
}

[data-theme="dark"] .content--article__blue a:hover {
  color: var(--dk-accent);
}

[data-theme="dark"] .title__card,
[data-theme="dark"] .title__content {
  color: var(--dk-text);
}

/* ===== TABLAS COMPARATIVAS ===== */
[data-theme="dark"] .table-container {
  background-color: var(--dk-surface);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .comparison-table thead {
  background-color: #223041;
}

[data-theme="dark"] .comparison-table tbody tr {
  border-bottom-color: var(--dk-border);
}

[data-theme="dark"] .comparison-table tbody tr:nth-child(even) {
  background-color: var(--dk-surface-2);
}

[data-theme="dark"] .comparison-table tbody tr:hover {
  background-color: #24344a;
}

[data-theme="dark"] .comparison-table td {
  color: var(--dk-text);
}

[data-theme="dark"] .comparison-table td:first-child {
  color: var(--dk-accent);
}

/* La vista de tarjeta del móvil dibuja bordes y etiquetas propios */
@media screen and (max-width: 600px) {
  [data-theme="dark"] .comparison-table tr {
    border-color: var(--dk-border);
  }

  [data-theme="dark"] .comparison-table tbody tr:nth-child(even) {
    background-color: var(--dk-surface);
  }

  [data-theme="dark"] .comparison-table td {
    border-bottom-color: var(--dk-border);
  }

  [data-theme="dark"] .comparison-table td::before {
    color: var(--dk-accent);
  }
}

/* ===== BLOQUE DE CODIGO ===== */
[data-theme="dark"] .code-block {
  background-color: #0a0f16;
  border-left-color: var(--dk-accent);
}

[data-theme="dark"] code {
  background-color: var(--dk-surface-2);
  color: var(--dk-accent);
}

/* ===== SIDEBAR DE PUBLICIDAD ===== */
[data-theme="dark"] .sidebar {
  background-color: var(--dk-surface-2);
  color: var(--graylight);
}

/* ===== PIE ===== */
[data-theme="dark"] footer {
  background-color: rgba(22, 29, 38, 0.85);
  border-color: var(--dk-border);
  border-left-color: var(--dk-border);
  border-top-color: var(--dk-border);
}

[data-theme="dark"] .partFooter h4 {
  color: var(--dk-accent);
}

[data-theme="dark"] .partFooter a {
  color: var(--dk-link);
}

[data-theme="dark"] .partFooter a:hover {
  color: var(--dk-accent);
}

[data-theme="dark"] .footer__copy {
  border-top-color: var(--dk-border);
  color: var(--graylight);
}

/* ===== FORMULARIOS Y BOTONES DEL SITIO CORPORATIVO ===== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--dk-surface-2);
  border-color: var(--dk-border);
  color: var(--dk-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--graylight);
}

[data-theme="dark"] .boton {
  color: var(--dk-link);
  border-color: var(--dk-link);
}

/* ===== TIENDA ===== */
[data-theme="dark"] .ml-header,
[data-theme="dark"] .ml-header-top,
[data-theme="dark"] .ml-header-bottom,
[data-theme="dark"] .shop-navbar {
  background-color: var(--dk-surface);
  color: var(--dk-text);
}

[data-theme="dark"] .shop-menu a,
[data-theme="dark"] .ml-nav a {
  color: var(--dk-link);
}

[data-theme="dark"] .ml-card,
[data-theme="dark"] .cart-list,
[data-theme="dark"] .cart-container,
[data-theme="dark"] .cart-sidebar,
[data-theme="dark"] .cart-sidebar-header {
  background-color: var(--dk-surface);
  color: var(--dk-text);
}

/* La plancha detrás de la foto del producto se mantiene clara a propósito:
   las fotos vienen recortadas sobre blanco y sobre fondo negro se les vería
   el halo. Se baja de #f5f5f5 a un gris algo más apagado para que no
   encandile en medio de una página oscura */
[data-theme="dark"] .ml-card-img {
  background-color: #e4e8ec;
}

/* ===== TRANSICION =====
   Solo en las superficies grandes, para que el cambio de tema no parpadee de
   golpe. No se aplica a todo el árbol para no encarecer cada repintado */
body,
.menu,
.card,
.content--article__blue,
.table-container,
.sidebar,
footer {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}