/* ═══════════════════════════════════════════════════════════════
   Estilos propios de la app (equivalente a src/styles.css + estilos
   de componente de la landing Angular), sin build local:
   - base tipográfica y de color
   - rejilla técnica del hero
   - skip-link de accesibilidad
   - temas daisyUI "claro" (por defecto) y "noche", conmutados por
     js/app.js mediante el atributo data-theme en <html>. Los
     selectores :root:has(input.theme-controller:checked) se
     conservan como respaldo sin JS, pero no son el mecanismo
     principal (los :has() impiden la invalidación rápida de estilos
     y el cambio de tema tardaba >2 s)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Base ─── */

:root {
  font-family: var(--font-sans);
}

body {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

::selection {
  background: #81f8ce;
  color: #002117;
}

/* ─── Iconos: el tamaño lo define la clase del contenedor ─── */
/* (mismo efecto que ":host svg" del componente <app-icon>) */

.icon svg {
  width: 100%;
  height: 100%;
}

/* ─── Enlace de salto para teclado/pantallas de lectura ─── */

.skip-link {
  position: absolute;
  top: -100rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
}

.skip-link:focus-visible {
  top: 0.75rem;
}

/* ─── Navegación por anclas ─── */

html {
  scroll-behavior: smooth;
  /* Margen para que las secciones ancladas no queden bajo la cabecera fija */
  scroll-padding-top: 8.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Tema claro: paleta institucional de la referencia ─── */
/* Por defecto (:where(:root)) y fijado con el interruptor de tema
   (:root:has(input.theme-controller[value=claro]:checked)), igual que
   generaba daisyUI v5 en la compilación de la app Angular. */

:where(:root),
:root:has(input.theme-controller[value=claro]:checked),
[data-theme=claro] {
  color-scheme: light;
  --color-base-100: #f8f9ff;
  --color-base-200: #e5eeff;
  --color-base-300: #dce9ff;
  --color-base-content: #0b1c30;
  --color-primary: #001332;
  --color-primary-content: #ffffff;
  --color-secondary: #006c52;
  --color-secondary-content: #ffffff;
  --color-accent: #81f8ce;
  --color-accent-content: #002117;
  --color-neutral: #0f284e;
  --color-neutral-content: #ffffff;
  --color-info: #495e87;
  --color-info-content: #ffffff;
  --color-success: #006c52;
  --color-success-content: #ffffff;
  --color-warning: #b7791f;
  --color-warning-content: #ffffff;
  --color-error: #ba1a1a;
  --color-error-content: #ffffff;
  --color-border: #c4c6cf;
  --color-border-content: #44474e;
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* ─── Tema oscuro: navy institucional (si el sistema prefiere oscuro
      y el usuario no ha fijado un tema con el interruptor) ─── */


:root:has(input.theme-controller[value=noche]:checked),
[data-theme=noche] {
  color-scheme: dark;
  --color-base-100: #0b1c30;
  --color-base-200: #12233d;
  --color-base-300: #1a3050;
  --color-base-content: #eaf1ff;
  --color-primary: #b1c7f6;
  --color-primary-content: #001b3f;
  --color-secondary: #63dbb3;
  --color-secondary-content: #002117;
  --color-accent: #81f8ce;
  --color-accent-content: #002117;
  --color-neutral: #0f284e;
  --color-neutral-content: #eaf1ff;
  --color-info: #88c0d0;
  --color-info-content: #0b1c30;
  --color-success: #63dbb3;
  --color-success-content: #002117;
  --color-warning: #e5c07b;
  --color-warning-content: #241a05;
  --color-error: #f28b82;
  --color-error-content: #2b0a08;
  --color-border: #27405f;
  --color-border-content: #93a9c9;
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* ─── Logotipo institucional por tema ───
   El logo horizontal tiene dos versiones SVG (bandera + texto):
   · logo_fondo_claro-horizontal.svg  → texto oscuro (para fondos claros)
   · logo_fondo_oscuro-horizontal.svg → texto blanco (para fondos oscuros)
   Se colocan ambas <img> en el mismo contenedor y se alterna cuál es
   visible según el atributo data-theme de <html> (lo fija js/app.js y el
   interruptor de tema). Sin JavaScript extra y sin recarga.

   Contexto que SIGUE al tema — cabecera sobre bg-base-100:
   claro → logo de texto oscuro · noche → logo de texto blanco. */
.logo-marca--claro  { display: block; }
.logo-marca--oscuro { display: none; }
:root[data-theme=noche] .logo-marca--claro  { display: none; }
:root[data-theme=noche] .logo-marca--oscuro { display: block; }

/* Contexto INVERTIDO — pie sobre bg-primary (navy en claro, azul claro en
   noche): el pie siempre contrasta con el fondo de la página, por lo que la
   versión visible va al revés que en la cabecera.
   claro → logo de texto blanco · noche → logo de texto oscuro. */
.logo-pie--claro  { display: none; }
.logo-pie--oscuro { display: block; }
:root[data-theme=noche] .logo-pie--claro  { display: block; }
:root[data-theme=noche] .logo-pie--oscuro { display: none; }

/* ─── Gráfico de cobertura por capas (js/capas.js) ─── */

:root {
  --capa-clara: #dbe7fb;     /* todas las capas, siempre dibujadas */
  --capa-oscura: #13315c;    /* capa seleccionada / capas del fabricante seleccionado */
  --capa-borde: #b1c7f6;
}
:root:has(input.theme-controller[value=noche]:checked),
[data-theme=noche] {
  --capa-clara: #16294a;
  --capa-oscura: #7ea6dc;
  --capa-borde: #2a5ca6;
}
#capas-grafico svg { width: 100%; height: auto; display: block; }
.capa-seg { fill: var(--capa-clara); stroke: var(--color-base-100); stroke-width: 2.5; cursor: pointer; transition: fill .25s ease; }
.capa-seg:hover { filter: brightness(.95); }
.capa-seg.capa-activa { fill: var(--capa-oscura); }
.capa-nombre { font-family: var(--font-display); font-weight: 700; fill: var(--color-base-content); pointer-events: none; transition: fill .25s ease; letter-spacing: .01em; }
.capa-nombre-vector { font-size: 11px; }
.capa-nombre-hueco { fill: var(--color-error); }
.capa-nombre.capa-activa { fill: var(--color-base-100); }
.capa-centro { fill: var(--color-base-100); stroke: var(--capa-borde); stroke-width: 3; }
.capa-usuario { fill: var(--color-primary); }
.capa-seg-texto { font-family: var(--font-display); font-weight: 700; font-size: 11px; fill: var(--color-primary); pointer-events: none; }
/* El gráfico circular en escritorio; la lista pulsable en móvil. */
.capas-solo-movil { display: none; }
@media (max-width: 767px) {
  .capas-solo-desktop { display: none; }
  .capas-solo-movil { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .capa-seg, .capa-nombre { transition: none; }
}