/* =============================================================================
   DLV+Design — skin sobre Angular Template Design
   =============================================================================
   Cadena visual del template: brand -> paletas -> tokens -> componentes.
   Acá se reemplazan SOLO las cuatro anclas configurables de identidad
   (header, primary, secondary, tertiary). success / warning / error conservan
   su semántica y sus valores del template.

   Contrastes calculados (WCAG 2.1, no estimados):
     oscuro  fondo #101214 / superficie #171A1D
       turquesa #2ED3C6 ....... 10.06 : 1  /  9.36 : 1
       magenta  #FF4D9D .......  6.08 : 1  /  5.66 : 1
       violeta  #A97BFF .......  6.23 : 1  /  5.79 : 1
       texto    #EDEFF2 ....... 16.30 : 1  / 15.17 : 1
       texto 2º #A8B1B9 .......  8.63 : 1  /  8.03 : 1
       borde de control #6A757E   3.8 : 1 aprox. (>= 3 : 1)
     claro   fondo #F4F5F7 / superficie #FFFFFF
       turquesa #00695C ....... 6.06 : 1  /  6.61 : 1
       magenta  #AD1457 ....... 6.39 : 1  /  6.97 : 1
       violeta  #5E35B1 ....... 7.35 : 1  /  8.02 : 1
       texto    #14181C ...... 16.35 : 1  / 17.84 : 1
       texto 2º #4E575F ....... 6.75 : 1  /  7.36 : 1
       borde de control #767F88  3.73 : 1  /  4.07 : 1
     texto negro sobre relleno turquesa 11.25 : 1 · magenta 6.80 : 1
   ============================================================================= */

:root {
  /* --- 4 anclas de identidad DLV+Design (slots del template) --------------- */
  --dlv-header: #0b0d0f;
  --dlv-primary: #2ed3c6;
  --dlv-secondary: #ff4d9d;
  --dlv-tertiary: #a97bff;

  /* --- semánticos: valores del template, sin tocar ------------------------ */
  --dlv-success: #2e7d32;
  --dlv-warning: #f57c00;
  --dlv-error: #c62828;

  /* --- variantes legibles sobre claro (derivadas de las anclas) ----------- */
  --dlv-primary-ink-light: #00695c;
  --dlv-secondary-ink-light: #ad1457;
  --dlv-tertiary-ink-light: #5e35b1;

  /* --- tipografía ----------------------------------------------------------
     Nombres y roles de public/sass/modules/_variables.sass:
       primary   Poppins        títulos
       secondary Open Sans      lectura y controles
       terciary  Montserrat     secundaria (esta propuesta no la usa)
       monospace M PLUS 1 Code  códigos y valores */
  --primary-font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --secondary-font: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --monospace-font: 'M PLUS 1 Code', ui-monospace, Menlo, monospace;
  --font-display: var(--primary-font);
  --font-body: var(--secondary-font);
  --font-mono: var(--monospace-font);

  /* Pesos de _variables.sass. $font-bold vale 800 en el template pero la cara
     empaquetada es Poppins 700; ver ADAPTACION.md §3. */
  --font-light: 300;
  --font-regular: 400;
  --font-semibold: 600;

  /* --- medidas del shell (admin-layout.component.scss) --------------------- */
  --header-height: 4rem;
  --sidenav-width: 18rem;
  --sidenav-collapsed-width: 4rem;

  /* --- grillas de contenido (public/sass/reset.scss) ----------------------- */
  --grid-container-width: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  --gallery-pic-width: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  --container-pic-width: minmax(min(100%, 12rem), 1fr);

  /* --- proporciones de componente Material --------------------------------
     _cards.scss radio 0.5rem · _forms.scss radio 0.5rem, 0.875rem, lh 1.5
     _buttons.scss alto de botón relleno 2.5rem, chip radio 2rem */
  --card-radius: 0.5rem;
  --field-radius: 0.5rem;
  /* 0.875rem es el tamaño que _forms.scss fija para los controles; se declara
     una sola vez acá y los componentes lo consumen por token, sin repetir el
     literal. */
  --field-font-size: 0.875rem;
  --control-font-size: var(--field-font-size);
  --button-height: 2.5rem;
  --chip-radius: 2rem;
  /* Material da 40px visuales y 48px de área táctil; acá se conserva el alto
     del template y el objetivo táctil se agranda con un pseudo-elemento. */
  --touch-target: 3rem;

  /* --- escala tipográfica: font-size en em, un decimal -------------------- */
  --fs-display: clamp(2.1em, 5.4vw, 4.4em);
  --fs-h1: clamp(2em, 4.4vw, 3.4em);
  --fs-h2: clamp(1.6em, 3vw, 2.4em);
  --fs-h3: 1.3em;
  --fs-h4: 1.1em;
  --fs-lead: 1.1em;
  --fs-body: 1em;
  --fs-small: 0.9em;
  --fs-meta: 0.8em;

  /* --- layout y espaciado en rem, un decimal ------------------------------ */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.2rem;
  --sp-7: 4.8rem;
  --sp-8: 7.2rem;

  --radio-s: 0.6rem;
  --radio-m: 1rem;
  --radio-l: 1.6rem;
  --radio-pill: 62.5rem;

  --ancho-contenido: 76rem;
  --ancho-ancho: 90rem;
  --gutter: 1.6rem;

  --linea-fina: 0.1rem;
  --altura-header: 4.4rem;
  --target-tactil: 4.4rem;

  /* --- movimiento -----------------------------------------------------------
     Cinco duraciones y tres curvas. La regla: cuanto más grande es lo que se
     mueve, más tarda; cuanto más cerca del dedo, más rápido responde.
       instantanea  presión de un control (la ida, no la vuelta)
       rapida       color, borde y foco de un control
       media        cajón, panel, revelado
       lenta        imagen grande entrando o acercándose
       entrada      la aparición orquestada de la portada
     Curvas:
       suave     simétrica; el hover entra y sale igual, no queda pegajoso
       decelera  algo que llega y se asienta (entra a pantalla)
       acelera   algo que se va (sale de pantalla) */
  --dur-instantanea: 0.09s;
  --dur-rapida: 0.16s;
  --dur-media: 0.26s;
  --dur-lenta: 0.42s;
  --dur-entrada: 0.56s;

  --ease-suave: cubic-bezier(0.32, 0, 0.24, 1);
  --ease-decelera: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-acelera: cubic-bezier(0.55, 0, 1, 0.45);
}

/* =============================================================================
   TEMA OSCURO — identidad por defecto de DLV+Design
   ============================================================================= */
:root,
[data-theme='dark'] {
  --theme-bg: #101214;
  --theme-bg-surface: #171a1d;
  --theme-bg-elevated: #1e2226;
  --theme-bg-sunken: #0b0d0f;

  --theme-text: #edeff2;
  --theme-text-secondary: #a8b1b9;
  --theme-text-disabled: #6a757e;

  --theme-border: #262c31;
  --theme-border-control: #6a757e;
  --theme-divider: rgba(237, 239, 242, 0.1);

  --theme-header-bg: var(--dlv-header);
  --theme-header-text: #edeff2;

  /* sidenav: mismos nombres que _tokens.scss del template */
  --theme-sidenav-bg: #171a1d;
  --theme-sidenav-text: #c7cdd3;
  --theme-sidenav-hover: #1e2226;
  --theme-sidenav-active-bg: var(--dlv-primary);
  --theme-sidenav-active-text: #06100f;
  --theme-sidenav-subitem-bg: transparent;
  --theme-sidenav-subitem-hover: #1e2226;

  --accent: var(--dlv-primary);
  --accent-ink: var(--dlv-primary);
  --accent-on: #06100f;
  --accent-2-ink: var(--dlv-secondary);
  --accent-3-ink: var(--dlv-tertiary);

  --accent-soft: color-mix(in oklab, var(--dlv-primary) 14%, transparent);
  --accent-2-soft: color-mix(in oklab, var(--dlv-secondary) 14%, transparent);

  --estado-ok-ink: #81c784;
  --estado-alerta-ink: #ffb74d;
  --estado-error-ink: #ef9a9a;
  --estado-alerta-borde: color-mix(in oklab, #ffb74d 42%, var(--theme-border));

  --accent-hover: color-mix(in oklab, var(--dlv-primary) 82%, #ffffff);
  --accent-focus: color-mix(in oklab, var(--dlv-primary) 88%, #ffffff);
  --accent-active: color-mix(in oklab, var(--dlv-primary) 78%, #000000);
  --scrim: rgba(0, 0, 0, 0.62);

  --sombra-carta: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.45);
  --sombra-flotante: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.55);
  --peso-foto: 1;
}

/* =============================================================================
   TEMA CLARO
   ============================================================================= */
[data-theme='light'] {
  --theme-bg: #f4f5f7;
  --theme-bg-surface: #ffffff;
  --theme-bg-elevated: #ffffff;
  --theme-bg-sunken: #e9ebee;

  --theme-text: #14181c;
  --theme-text-secondary: #4e575f;
  --theme-text-disabled: #767f88;

  --theme-border: #dfe3e7;
  --theme-border-control: #767f88;
  --theme-divider: rgba(20, 24, 28, 0.12);

  --theme-header-bg: #ffffff;
  --theme-header-text: #14181c;

  --theme-sidenav-bg: #ffffff;
  --theme-sidenav-text: #3a434a;
  --theme-sidenav-hover: #f2f4f6;
  --theme-sidenav-active-bg: #d9efec;
  --theme-sidenav-active-text: var(--dlv-primary-ink-light);
  --theme-sidenav-subitem-bg: transparent;
  --theme-sidenav-subitem-hover: #f2f4f6;

  --accent: var(--dlv-primary-ink-light);
  --accent-ink: var(--dlv-primary-ink-light);
  --accent-on: #ffffff;
  --accent-2-ink: var(--dlv-secondary-ink-light);
  --accent-3-ink: var(--dlv-tertiary-ink-light);

  --accent-soft: color-mix(in oklab, var(--dlv-primary-ink-light) 10%, transparent);
  --accent-2-soft: color-mix(in oklab, var(--dlv-secondary-ink-light) 10%, transparent);

  --estado-ok-ink: #1b5e20;
  --estado-alerta-ink: color-mix(in oklab, var(--dlv-warning) 68%, #000000);
  --estado-error-ink: #b71c1c;
  --estado-alerta-borde: color-mix(in oklab, var(--dlv-warning) 50%, var(--theme-border));

  --accent-hover: color-mix(in oklab, var(--dlv-primary-ink-light) 86%, #000000);
  --accent-focus: color-mix(in oklab, var(--dlv-primary-ink-light) 92%, #000000);
  --accent-active: color-mix(in oklab, var(--dlv-primary-ink-light) 74%, #000000);
  --scrim: rgba(20, 24, 28, 0.48);

  --sombra-carta: 0 0.2rem 1rem rgba(20, 24, 28, 0.08);
  --sombra-flotante: 0 1.2rem 3.2rem rgba(20, 24, 28, 0.16);
  --peso-foto: 1;
}