@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
/* ============================================================
   ESTILOS.CSS.PHP
   Colores           -> la PALETA de brand.php (variables --p-*)
   Tokens de estilo  -> por TEMA activo (temas_config.php)
   ============================================================ */
:root {
  --marca-principal: #70A27B;
  --marca-oscuro: #303030;
  --marca-secundario: #B0C4BA;
  --p-primario: #70A27B;
  --p-primario-hover: #5E9069;
  --p-sobre-primario: #0A0F0B;
  --p-acento-texto: #40704C;
  --p-acento-suave: #E0F7E4;
  --p-acento-linea: #AAD8B3;
  --p-brillo: rgba(112,162,123,.3);
  --p-brillo-suave: rgba(112,162,123,.1);
  --p-secundario: #B0C4BA;
  --p-secundario-suave: #E1F6EC;
  --p-acento: #B0C4BA;
  --p-acento-2: #B0C4BA;
  --p-marca-oscuro: #303030;
  --p-marca-oscuro-2: #3D3D3D;
  --p-barra: #303030;
  --p-sobre-marca: #FAF5F6;
  --p-sobre-marca-2: rgba(250,245,246,.72);
  --p-linea-marca: rgba(255,255,255,.1);
  --p-fondo: #F4F8F5;
  --p-superficie: #FFFFFF;
  --p-superficie-2: #EEF4EF;
  --p-linea: #DEE5DF;
  --p-linea-2: #C7D1C8;
  --p-texto: #161616;
  --p-texto-2: #4A4A4A;
  --p-texto-3: #717171;
  --p-blanco: #FFFFFF;
  --p-negro: #000000;
  --p-sombra: #161616;
  --p-ok: #3B714F;
  --p-ok-suave: #E5F5E9;
  --p-aviso: #846139;
  --p-aviso-suave: #FBF1DC;
  --p-error: #A24A42;
  --p-error-suave: #FDEBE9;
  --p-info: #415C95;
  --p-info-suave: #E9F0FE;
  --p-extra: #5D51A6;
  --p-extra-suave: #EFEBFF;
  --p-whatsapp: #25D366;
  --p-whatsapp-oscuro: #128C7E;
}
html[data-theme="dark"] {
  --p-acento-texto: #99CDA4;
  --p-acento-suave: rgba(112,162,123,.16);
  --p-acento-linea: rgba(112,162,123,.4);
  --p-secundario-suave: rgba(176,196,186,.14);
  --p-barra: #090909;
  --p-fondo: #0E0E0E;
  --p-superficie: #171717;
  --p-superficie-2: #1E1E1E;
  --p-linea: rgba(177,196,180,.12);
  --p-linea-2: rgba(177,196,180,.22);
  --p-texto: #ECF2ED;
  --p-texto-2: #B6C1B8;
  --p-texto-3: #8B958D;
  --p-sombra: #000000;
  --p-ok: #8BC8A0;
  --p-ok-suave: rgba(139,200,160,.14);
  --p-aviso: #DFBF8A;
  --p-aviso-suave: rgba(223,191,138,.14);
  --p-error: #E2928B;
  --p-error-suave: rgba(226,146,139,.14);
  --p-info: #A2B8E2;
  --p-info-suave: rgba(162,184,226,.14);
  --p-extra: #BCB6EE;
  --p-extra-suave: rgba(188,182,238,.14);
}
:root {
  /* ---- Marca (no cambia con el tema) ---- */
  --color-primario:       var(--p-primario);
  --color-primario-hover: var(--p-primario-hover);
  --color-glow:           var(--p-brillo);
  --color-glow-soft:      var(--p-brillo-suave);
  --color-header-bg:      var(--p-marca-oscuro);
  --color-header-bg2:     var(--p-marca-oscuro-2);

  --bg-primary:   var(--p-superficie);
  --bg-secondary: var(--p-fondo);
  --bg-card:      var(--p-superficie);
  --bg-hover:     var(--p-superficie-2);
  --text-primary:   var(--p-texto);
  --text-secondary: var(--p-texto-2);
  --text-muted:     var(--p-texto-3);
  --border-normal: var(--p-linea);
  --border-light:  var(--p-linea);

  /* ---- TOKENS DE TEMA (esto es lo que cambia al elegir otro tema) ---- */

  /* Radios */
  --radio-xs:   6px;
  --radio-sm:   8px;
  --radio-md:   12px;
  --radio-lg:   16px;
  --radio-pill: 999px;

  /* Tipografía */
  --font-titulos:     'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-cuerpo:      'Poppins', 'Segoe UI', Arial, sans-serif;
  --peso-titulo:      700;
  --peso-cuerpo:      400;
  --tam-base:         15px;
  --escala-h1:        1.875rem;
  --escala-h2:        1.375rem;
  --escala-h3:        1.0625rem;
  --alto-linea:       1.55;
  --tracking-titulo:  -.015em;
  --transform-titulo: none;

  /* Bordes y sombras */
  --borde-ancho: 1px;
  --sombra-sm: 0 1px 2px color-mix(in srgb, var(--p-sombra) 6%, transparent);
  --sombra-md: 0 1px 2px color-mix(in srgb, var(--p-sombra) 4%, transparent), 0 6px 16px -4px color-mix(in srgb, var(--p-sombra) 10%, transparent);
  --sombra-lg: 0 24px 48px -16px color-mix(in srgb, var(--p-sombra) 22%, transparent);

  /* Acento + sombra en una sola declaración, lista para usar en tarjetas */
  --card-sombra: inset var(--card-acento-izq) 0 0 0 var(--color-primario),
                 inset 0 var(--card-acento-sup) 0 0 var(--color-primario),
                 var(--sombra-sm);

  /* Espaciado / densidad */
  --pad-card:      24px;
  --pad-item:      8px 12px;
  --pad-btn:       10px 16px;
  --pad-input:     10px 12px;
  --gap:           16px;
  --margen-bloque: 16px;

  /* Botones (derivados de btn_estilo: relleno) */
  --btn-bg:          var(--color-primario);
  --btn-color:       var(--p-blanco);
  --btn-borde-color: var(--color-primario);
  --btn-bg-hover:    var(--color-primario-hover);
  --btn-color-hover: var(--p-blanco);
  --btn-peso:        600;
  --btn-transform:   none;
  --btn-tracking:    0;

  /* Acentos de superficie (card_acento: none) */
  --card-acento-izq: 0px;
  --card-acento-sup: 0px;
  --item-acento:     2px;

  /* Movimiento */
  --transicion:  .18s cubic-bezier(.2,.7,.2,1);
  --hover-lift:  -1px;
  --hover-slide: 0px;

  /* Alias viejos, para no romper CSS que todavía los use */
  --shadow-sm: var(--sombra-sm);
  --shadow-md: var(--sombra-md);
  --shadow-lg: var(--sombra-lg);
}

/* Los títulos toman tipografía, peso, tracking y caja del tema en TODO el sitio */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titulos);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  text-transform: var(--transform-titulo);
}