@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@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: #FF5A36;
  --marca-oscuro: #2B1B5E;
  --marca-secundario: #FFB627;
  --marca-acento: #00B4D8;
  --marca-claro: #FFF6EC;
  --p-primario: #FF5A36;
  --p-primario-hover: #E9451F;
  --p-sobre-primario: #110C0A;
  --p-acento-texto: #BC0500;
  --p-acento-suave: #FFE8E1;
  --p-acento-linea: #F4BBAD;
  --p-brillo: rgba(255,90,54,.3);
  --p-brillo-suave: rgba(255,90,54,.1);
  --p-secundario: #FFB627;
  --p-secundario-suave: #FFEDD3;
  --p-acento: #00B4D8;
  --p-acento-2: #00B4D8;
  --p-marca-oscuro: #2B1B5E;
  --p-marca-oscuro-2: #37296D;
  --p-barra: #2B1B5E;
  --p-sobre-marca: #F6F6FA;
  --p-sobre-marca-2: rgba(246,246,250,.72);
  --p-linea-marca: rgba(255,255,255,.1);
  --p-fondo: #FFF6EC;
  --p-superficie: #FFFFFF;
  --p-superficie-2: #FCF1E5;
  --p-linea: #E8E2DB;
  --p-linea-2: #D5CCC3;
  --p-texto: #151423;
  --p-texto-2: #49485A;
  --p-texto-3: #707080;
  --p-blanco: #FFFFFF;
  --p-negro: #000000;
  --p-sombra: #151423;
  --p-ok: #0B7643;
  --p-ok-suave: #DFF8E6;
  --p-aviso: #915C08;
  --p-aviso-suave: #FFF0D0;
  --p-error: #BA2B28;
  --p-error-suave: #FFE9E6;
  --p-info: #3057B1;
  --p-info-suave: #E6F1FF;
  --p-extra: #007294;
  --p-extra-suave: #D4F7FF;
  --p-whatsapp: #25D366;
  --p-whatsapp-oscuro: #128C7E;
}
html[data-theme="dark"] {
  --p-acento-texto: #FF825D;
  --p-acento-suave: rgba(255,90,54,.16);
  --p-acento-linea: rgba(255,90,54,.4);
  --p-secundario-suave: rgba(255,182,39,.14);
  --p-barra: #090717;
  --p-fondo: #0E0B1C;
  --p-superficie: #161426;
  --p-superficie-2: #1D1B2E;
  --p-linea: rgba(208,183,177,.12);
  --p-linea-2: rgba(208,183,177,.22);
  --p-texto: #F5EEED;
  --p-texto-2: #C9BAB6;
  --p-texto-3: #9D8F8B;
  --p-sombra: #000000;
  --p-ok: #6CD092;
  --p-ok-suave: rgba(108,208,146,.14);
  --p-aviso: #EDBB64;
  --p-aviso-suave: rgba(237,187,100,.14);
  --p-error: #FB817A;
  --p-error-suave: rgba(251,129,122,.14);
  --p-info: #97B7F8;
  --p-info-suave: rgba(151,183,248,.14);
  --p-extra: #41D1F6;
  --p-extra-suave: rgba(65,209,246,.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:   12px;
  --radio-sm:   18px;
  --radio-md:   24px;
  --radio-lg:   30px;
  --radio-pill: 12px;

  /* Tipografía */
  --font-titulos:     'Unbounded', 'Segoe UI', Arial, sans-serif;
  --font-cuerpo:      'Manrope', 'Segoe UI', Arial, sans-serif;
  --peso-titulo:      700;
  --peso-cuerpo:      400;
  --tam-base:         15.5px;
  --escala-h1:        2.6rem;
  --escala-h2:        1.7rem;
  --escala-h3:        1.1rem;
  --alto-linea:       1.65;
  --tracking-titulo:  -.01em;
  --transform-titulo: none;

  /* Bordes y sombras */
  --borde-ancho: 0px;
  --sombra-sm: 0 1px 2px color-mix(in srgb, var(--p-sombra) 6%, transparent);
  --sombra-md: 0 2px 10px color-mix(in srgb, var(--p-sombra) 8%, transparent);
  --sombra-lg: 0 16px 40px -12px color-mix(in srgb, var(--p-sombra) 18%, 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:      30px;
  --pad-item:      12px 16px;
  --pad-btn:       14px 32px;
  --pad-input:     15px 18px;
  --gap:           22px;
  --margen-bloque: 20px;

  /* 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:        700;
  --btn-transform:   none;
  --btn-tracking:    0;

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

  /* Movimiento */
  --transicion:  .35s;
  --hover-lift:  -6px;
  --hover-slide: 6px;

  /* 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);
}