/* ==========================================================================
    TEMA.CSS — Sistema de modo claro (cálido) y oscuro

    Modo claro: atardecer natural (cielo → tierra → barro)
    Modo oscuro: fondos oscuros, tarjetas azul oscuro, texto crema

    Se activa con [data-tema="claro"] o [data-tema="oscuro"] en <html>
   ========================================================================== */

/* ====== MODO CLARO ====== */
:root,
[data-tema="claro"] {

  /* Fondo de página — degradado atardecer */
  --tema-pagina-bg: linear-gradient(
    to bottom,
    #4A6178 0%,
    #6E8FAF 30%,
    #D6C089 65%,
    #B96E4F 100%
  );
  --tema-pagina-privada-bg:  #DDD4BA;

  /* Contenedor universal de páginas privadas (pergamino + borde verde) */
  --tema-priv-contenedor-bg:     #E8DFC8;
  --tema-priv-contenedor-borde:  #2F8F6B;
  --tema-priv-contenedor-sombra: 0 0 0 .3rem rgba(47, 143, 107, .12), 0 .5rem 2rem rgba(47, 143, 107, .2);
  --tema-priv-divisor:           rgba(47, 143, 107, .2);

  /* Cards */
  --tema-card-bg:      #ffffff;
  --tema-card-borde:   #E0D6C3;
  --tema-card-sombra:  0 .2rem .8rem rgba(0, 0, 0, 0.08);

  /* Texto */
  --tema-titulo:         #000000;
  --tema-texto:          #000000;
  --tema-texto-suave:    #1a1a1a;
  --tema-texto-muy-suave:#333333;

  /* Hero overlay (la imagen de fondo se define en index.css) */
  --tema-hero-overlay: rgba(0, 0, 0, 0.32);

  /* Inputs */
  --tema-input-bg:          #ffffff;
  --tema-input-borde:       #2A6A50;
  --tema-input-texto:       #2B2B2B;
  --tema-input-placeholder: #AAAAAA;

  /* Badges */
  --tema-badge-gratis-bg:    rgba(47, 143, 107, 0.12);
  --tema-badge-gratis-texto: #2F8F6B;

  /* Imagen de curso placeholder */
  --tema-curso-img-bg: linear-gradient(135deg, #E0D6C3, #D6C089);

  /* Login / registro */
  --tema-login-bg:    #F0F4F0;
  --tema-login-label: #2B2B2B;

  /* Cuenta */
  --tema-cuenta-campo-bg: #F2EDE4;

  /* Estado compra */
  --tema-estado-card-bg:  linear-gradient(135deg, #F2EDE4, #E0D6C3);
}

/* ====== MODO OSCURO — noche / cosmos ====== */
[data-tema="oscuro"] {

  /* Los colores de acción (--color-verde, --color-amarillo, --color-rojo)
     son idénticos en noche y en día, así que NO se redefinen aquí:
     se heredan tal cual de variables.css. */

  /* Fondo de página — cielo nocturno */
  --tema-pagina-bg: linear-gradient(
    to bottom,
    #0F1722 0%,
    #1E293B 30%,
    #2E3F55 55%,
    #4B473B 75%,
    #2A1A18 100%
  );
  --tema-pagina-privada-bg:  #0F1722;

  /* Contenedor universal de páginas privadas */
  --tema-priv-contenedor-bg:     #1E293B;
  --tema-priv-contenedor-borde:  rgba(201, 164, 76, .35);
  --tema-priv-contenedor-sombra: 0 .8rem 3rem rgba(0, 0, 0, .35);
  --tema-priv-divisor:           rgba(201, 164, 76, .1);

  /* Cards */
  --tema-card-bg:     #1E293B;
  --tema-card-borde:  #2E3F55;
  --tema-card-sombra: 0 .5rem 1.5rem rgba(0, 0, 0, 0.5);

  /* Texto */
  --tema-titulo:         #ffffff;
  --tema-texto:          #ffffff;
  --tema-texto-suave:    #e5e5e5;
  --tema-texto-muy-suave:#cccccc;

  /* Hero overlay */
  --tema-hero-overlay: rgba(0, 0, 0, 0.45);

  /* Inputs */
  --tema-input-bg:          rgba(229, 231, 235, 0.05);
  --tema-input-borde:       rgba(201, 164, 76, 0.5);
  --tema-input-texto:       #E5E7EB;
  --tema-input-placeholder: rgba(255, 255, 255, 0.45);

  /* Badges */
  --tema-badge-gratis-bg:    rgba(47, 143, 107, 0.15);
  --tema-badge-gratis-texto: #2F8F6B;

  /* Imagen de curso placeholder */
  --tema-curso-img-bg: linear-gradient(135deg, #2E3F55, #1E293B);

  /* Login / registro */
  --tema-login-bg:    #1E293B;
  --tema-login-label: #E5E7EB;

  /* Cuenta */
  --tema-cuenta-campo-bg: rgba(229, 231, 235, 0.05);

  /* Estado compra */
  --tema-estado-card-bg: linear-gradient(135deg, #1E293B 0%, #162030 100%);
}