/* temas.css — (N14/N14b) Temas de color de nahuelmicino.com para que Nahuel elija. PROYECTO, no framework.
   Cambiar de tema = cambiar data-tema en <html>. TODOS los colores del tema viven acá: :root es el violeta (por defecto,
   el diseño aprobado) y cada [data-tema] redefine las mismas variables. Grafito, blanco roto y grises están en nm.css.
   Fuente: docs/marca/NM_Manual de Marca.pdf (534 C #3B4A76 marino, 165 C #F27138, 2727 C #408EFF, 3268 C #2CA58D).

   Roles:
     --nm-violeta        principal con texto blanco encima y texto de color sobre fondo claro → variante AA (≥ 4.5:1)
     --nm-violeta-2      profundo: enlaces, texto de píldoras, íconos sobre fondo suave
     --nm-boton-hover    hover del botón sólido y de la píldora principal
     --nm-acento         color exacto del manual: curvas, halos, degradés, comillas, fondo decorativo
     --nm-violeta-claro  curvas y borde ghost sobre fondo oscuro
     --nm-violeta-suave  rótulos y hover de enlaces sobre fondo oscuro
     --nm-lila / -2 / -3 fondo suave de píldoras y paneles / borde y número decorativo / borde de tarjeta en hover
     --nm-tinte-1/2/3    texto claro teñido sobre fondo oscuro (encabezado E, bloque destacado, libro)
     --nm-punto (+ -rgb) el "punto" de marca (N14b): rótulos con punto, inicio de las curvas, viñetas, línea de tiempo,
                         marcadores de listas, halos de los puntos; en violeta es el celeste
     --nm-celeste        el celeste del diseño original; hoy solo lo usa el anillo de foco (no sigue al tema)
     --nm-principal-rgb  halo del botón sólido y borde tenue de tarjetas (rgba)
     --nm-profundo-rgb   sombras (rgba)
     --nm-hero-rgb       extremo del degradé de la capa del hero (grafito → profundo del tema)
     logo (N14b)         .nm-logo toma images/logo-02-<tema> según data-tema; violeta = logo-02 original */

:root, :root[data-tema="violeta"] {   /* el actual (por defecto) */
  --nm-violeta: #6C46E8; --nm-violeta-2: #44219C; --nm-boton-hover: #44219C; --nm-acento: #6C46E8; --nm-violeta-claro: #8E70F5; --nm-violeta-suave: #A891FA;
  --nm-lila: #ECE7FD; --nm-lila-2: #C7B8FA; --nm-lila-3: #D6CCFB; --nm-tinte-1: #C9BBFB; --nm-tinte-2: #D9D3F7; --nm-tinte-3: #E2DAFD;
  --nm-celeste: #62C6F2; --nm-punto: #62C6F2; --nm-punto-rgb: 98,198,242;
  --nm-principal-rgb: 108,70,232; --nm-profundo-rgb: 68,33,156; --nm-hero-rgb: 42,23,102;
  --site-primary: var(--nm-violeta); --site-primary-2: var(--nm-violeta-2);
}
:root[data-tema="naranja"] {   /* NM Soluciones 165 C + marino 534 C */
  --nm-violeta: #C6460D; --nm-violeta-2: #3B4A76; --nm-boton-hover: #A2390B; --nm-acento: #F27138; --nm-violeta-claro: #F27138; --nm-violeta-suave: #F7AC8A;
  --nm-lila: #FDECE5; --nm-lila-2: #FAC8B3; --nm-lila-3: #FBD8C8; --nm-tinte-1: #FACBB6; --nm-tinte-2: #FCDBCD; --nm-tinte-3: #FCE3D8;
  --nm-punto: #F27138; --nm-punto-rgb: 242,113,56;
  --nm-principal-rgb: 198,70,13; --nm-profundo-rgb: 59,74,118; --nm-hero-rgb: 59,74,118;
  --site-primary: var(--nm-violeta); --site-primary-2: var(--nm-violeta-2);   /* pisan el <style> de _brand.tpl (formularios de la base) */
}
:root[data-tema="azul"] {      /* NM Consultoría 2727 C + marino 534 C */
  --nm-violeta: #0066FA; --nm-violeta-2: #3B4A76; --nm-boton-hover: #0054CD; --nm-acento: #408EFF; --nm-violeta-claro: #408EFF; --nm-violeta-suave: #8FBDFF;
  --nm-lila: #E6F0FF; --nm-lila-2: #B6D4FF; --nm-lila-3: #CAE0FF; --nm-tinte-1: #B9D5FF; --nm-tinte-2: #CFE3FF; --nm-tinte-3: #DAE9FF;
  --nm-punto: #408EFF; --nm-punto-rgb: 64,142,255;
  --nm-principal-rgb: 0,102,250; --nm-profundo-rgb: 59,74,118; --nm-hero-rgb: 59,74,118;
  --site-primary: var(--nm-violeta); --site-primary-2: var(--nm-violeta-2);   /* pisan el <style> de _brand.tpl (formularios de la base) */
}
:root[data-tema="verde"] {     /* NM Eventos 3268 C + marino 534 C */
  --nm-violeta: #227E6B; --nm-violeta-2: #3B4A76; --nm-boton-hover: #1C6757; --nm-acento: #2CA58D; --nm-violeta-claro: #2CA58D; --nm-violeta-suave: #83CABC;
  --nm-lila: #E3F3F0; --nm-lila-2: #AEDCD3; --nm-lila-3: #C4E6DF; --nm-tinte-1: #B1DED5; --nm-tinte-2: #CAE8E2; --nm-tinte-3: #D6EDE9;
  --nm-punto: #2CA58D; --nm-punto-rgb: 44,165,141;
  --nm-principal-rgb: 34,126,107; --nm-profundo-rgb: 59,74,118; --nm-hero-rgb: 59,74,118;
  --site-primary: var(--nm-violeta); --site-primary-2: var(--nm-violeta-2);   /* pisan el <style> de _brand.tpl (formularios de la base) */
}

/* ── (N14b) Logo por tema: header, menú y pie. Solo se descarga el del tema activo; los otros los precarga tema.js al acercarse al selector. ── */
.nm-logo { background-image: -webkit-image-set(url("../images/logo-02.webp") 1x, url("../images/logo-02@2x.webp") 2x); background-image: image-set(url("../images/logo-02.webp") 1x, url("../images/logo-02@2x.webp") 2x); }
:root[data-tema="naranja"] .nm-logo { background-image: -webkit-image-set(url("../images/logo-02-naranja.webp") 1x, url("../images/logo-02-naranja@2x.webp") 2x); background-image: image-set(url("../images/logo-02-naranja.webp") 1x, url("../images/logo-02-naranja@2x.webp") 2x); }
:root[data-tema="azul"] .nm-logo { background-image: -webkit-image-set(url("../images/logo-02-azul.webp") 1x, url("../images/logo-02-azul@2x.webp") 2x); background-image: image-set(url("../images/logo-02-azul.webp") 1x, url("../images/logo-02-azul@2x.webp") 2x); }
:root[data-tema="verde"] .nm-logo { background-image: -webkit-image-set(url("../images/logo-02-verde.webp") 1x, url("../images/logo-02-verde@2x.webp") 2x); background-image: image-set(url("../images/logo-02-verde.webp") 1x, url("../images/logo-02-verde@2x.webp") 2x); }

/* Transición suave al cambiar de tema: tema.js pone la clase 600 ms (no con reduced-motion). Los degradés no interpolan. */
.nm-tema-cambiando, .nm-tema-cambiando *, .nm-tema-cambiando *::before, .nm-tema-cambiando *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease, box-shadow .45s ease; }

/* ── Selector flotante (TEMPORAL: se apaga desde Configuración → General) ── */
.nm-temas { position: fixed; left: 16px; bottom: 16px; z-index: 25; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(17,18,23,.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 30px -14px rgba(0,0,0,.7); }
.nm-temas__btn { position: relative; width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--t); cursor: pointer; transition: transform .2s var(--nm-ease), border-color .2s ease, box-shadow .2s ease; }
.nm-temas__btn:hover { transform: scale(1.12); }
.nm-temas__btn[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--t); }
.nm-temas__btn[data-tema="violeta"] { --t: #6C46E8; } .nm-temas__btn[data-tema="naranja"] { --t: #F27138; } .nm-temas__btn[data-tema="azul"] { --t: #408EFF; } .nm-temas__btn[data-tema="verde"] { --t: #2CA58D; }
.nm-temas__nombre { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 8px; background: #111217; color: #fff; font: 600 12px/1.2 var(--nm-sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s var(--nm-ease); }
.nm-temas__btn:hover .nm-temas__nombre, .nm-temas__btn:focus-visible .nm-temas__nombre { opacity: 1; transform: translate(-50%, 0); }
.site-public .nm-temas__btn:focus-visible { outline-offset: 2px; }
@media (max-width: 720px) { .nm-temas { left: 10px; bottom: 10px; gap: 5px; padding: 5px; } .nm-temas__btn { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .nm-temas__btn, .nm-temas__nombre { transition: none; } .nm-temas__btn:hover { transform: none; } }