/* Trazo · base de la app (mi.mapainterno.com). Se carga después de tokens.css.
   tokens.css es copia exacta del design system (vault: 05-Plataforma/trazo/codigo): no se edita aquí.
   Este archivo añade lo que la app necesita además: canales RGB para transparencias, la letra con tailandés
   de reserva, el cuaderno de fondo, la franja de oro y el selector Día/Noche. 02/11/2026. */

:root, [data-theme="light"] {
  --tinta-rgb: 11, 11, 11;
  --fondo-rgb: 246, 246, 244;
  --apagado-rgb: 98, 98, 94;
  --oro-rgb: 128, 97, 30;
}
[data-theme="dark"] {
  --tinta-rgb: 242, 242, 238;
  --fondo-rgb: 0, 0, 0;
  --apagado-rgb: 142, 142, 138;
  --oro-rgb: 212, 176, 106;
}
:root {
  --tz-ico-sol: url(../../img/iconos/sun.svg);
  --tz-ico-luna: url(../../img/iconos/moon.svg);
  /* Archivo no tiene tailandés ni símbolos astrológicos: Noto Sans Thai y los subconjuntos de símbolos
     entran solo para esos glifos (antes que cualquier fuente de emoji del sistema). */
  --font-sans: Archivo, "Trazo Simbolos", "Trazo Simbolos 2", "Noto Sans Thai", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-simbolos: "Trazo Simbolos", "Trazo Simbolos 2", "Apple Symbols", "Segoe UI Symbol", sans-serif;
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--fondo); }
body {
  background-color: var(--fondo);
  background-image: radial-gradient(circle at 1px 1px, var(--rejilla-suave) 1px, transparent 1.4px);
  background-size: var(--paso) var(--paso);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 100;
  font-variant-emoji: text; /* donde el navegador lo entiende; el resto lo hace el selector U+FE0E en el código */
}
/* La franja de oro de 2 px arriba, como en el hub y las webs */
body::after {
  content: ""; position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2px;
  background: var(--oro); z-index: 2147483000; pointer-events: none;
}
::selection { background: var(--tinta); color: var(--fondo); }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* En tailandés no se usa el eje de anchura ni la cursiva */
:lang(th) * { font-stretch: 100% !important; letter-spacing: 0 !important; }

/* ── Selector Día / Noche: un botón de icono (sol en Noche → pasa a Día; luna en Día → pasa a Noche) ── */
.tz-tema {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--apagado); -webkit-tap-highlight-color: transparent;
  transition: color var(--toque) var(--curva), border-color var(--toque) var(--curva), background-color var(--toque) var(--curva);
}
.tz-tema:hover { color: var(--tinta); }
.tz-tema:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tz-tema__ico { width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--tz-ico-sol) center / contain no-repeat; mask: var(--tz-ico-sol) center / contain no-repeat; }
.tz-tema[data-actual="light"] .tz-tema__ico { -webkit-mask-image: var(--tz-ico-luna); mask-image: var(--tz-ico-luna); }
.tz-tema__txt { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
/* Flotante (páginas sin menú): compacto, de línea */
.tz-tema:not(.tz-tema--menu) {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; /* por debajo de chat y modales */
  height: 36px; padding: 0 12px; background: var(--fondo); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-capsula);
}
.tz-tema:not(.tz-tema--menu):hover { border-color: var(--tinta); }
/* Dentro del menú: un elemento más, solo icono */
.tz-tema--menu { width: 38px; height: 38px; }
.tz-tema--menu .tz-tema__txt { display: none; }

/* El sol como logo (currentColor + punto en oro) */
.tz-sol { display: block; width: 100%; height: 100%; color: var(--tinta); }
.tz-sol .tz-sol__punto { fill: var(--oro); }

/* Logo del menú = el sol (sustituye a la imagen de la opción logo_principal) */
#lilogo .tz-logo { display: block; width: 36px; height: 36px; margin: auto; }
@media (min-width: 1500px) { #lilogo .tz-logo { width: 40px; height: 40px; } }

/* Idioma: código (ES · EN · TH) en mono, en vez de bandera */
.tz-lang, .pls-toggle, .pls-option .pls-flag, .perfil-lang-btn {
  font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: .08em; line-height: 1 !important;
}
.perfil-lang-btn { color: var(--tinta) !important; }
.pls-toggle { color: var(--tinta) !important; background: var(--fondo) !important; border: 1px solid var(--linea-fuerte) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.pls-toggle:hover { border-color: var(--tinta) !important; }
.pls-menu { background: var(--fondo) !important; border: 1px solid var(--linea) !important; border-radius: var(--radio-1) !important; backdrop-filter: none !important; }
.pls-option { color: var(--tinta-2) !important; }
.pls-option .pls-flag { width: 28px !important; text-align: left !important; color: var(--apagado); }