/* VistaOptima · diseño propio de la página de la tarjeta de fidelidad.
   Se carga DESPUÉS de /tokens.css y /tarjeta.css (solo cuando el negocio tiene tema "vistaoptima") y cambia colores y formas:
   el rojo del logo (#e51719), el dorado de acento (#fbbf24), negro cálido y la esquina "hoja" de su sistema.
   Sin estilos en línea ni fuentes externas (la política de seguridad de la página solo permite archivos propios). */

html[data-tema="vistaoptima"]{
  color-scheme:light;
  --font-display:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-text:var(--font-display);
  --bg:#f6f5f4;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --border:#e0dcd8;
  --ink:#141414;
  --ink-soft:#57534e;
  --brand:#e51719;
  --brand-deep:#c0121a;
  --on-brand:#ffffff;
  --on-brand-deep:#ffffff;
  --accent-cta:#e51719;
  --on-accent-cta:#ffffff;
  --mint-tint:#fbbf24;
  --oro:#fbbf24;
  --oro-texto:#b45309;
  --tarjeta-fondo:#141414;
  --tarjeta-texto:#ffffff;
  --tarjeta-suave:#d6d3d1;
  --tarjeta-pista:#2b2b2b;
}
@media (prefers-color-scheme:dark){
  html[data-tema="vistaoptima"]:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a1020;
    --surface:#0f172a;
    --surface-raised:#162039;
    --border:#334155;
    --ink:#f1f5f9;
    --ink-soft:#a3b2c7;
    --brand:#e51719;
    --brand-deep:#f87171;
    --on-brand:#ffffff;
    --on-brand-deep:#0a1020;
    --accent-cta:#f87171;
    --on-accent-cta:#0a1020;
    --oro-texto:#fbbf24;
    --tarjeta-fondo:#05070d;
    --tarjeta-texto:#f1f5f9;
    --tarjeta-suave:#a3b2c7;
    --tarjeta-pista:#1c2540;
  }
}

html[data-tema="vistaoptima"] body{background:var(--bg);color:var(--ink);font-family:var(--font-text)}
html[data-tema="vistaoptima"] :is(.t-h2,.t-h3){font-family:var(--font-display);letter-spacing:-.015em}
html[data-tema="vistaoptima"] .t-h3{font-size:19px;line-height:26px;font-weight:700}

/* cabecera: banda roja con el emblema de fondo y el lema en dorado */
html[data-tema="vistaoptima"] .cab{position:relative;overflow:hidden;gap:14px;padding:18px 20px;background:var(--brand);color:#fff;border-radius:var(--radius-lg);border-top-right-radius:var(--radius-leaf)}
html[data-tema="vistaoptima"] .cab::after{content:"";position:absolute;right:-22px;top:50%;width:140px;height:140px;transform:translateY(-50%);background:url(emblema.svg) no-repeat center/contain;opacity:.18;pointer-events:none}
html[data-tema="vistaoptima"] .cab>*{position:relative;z-index:1}
html[data-tema="vistaoptima"] .cab-logo{width:56px;height:56px;border:2px solid #fff;background:var(--brand);border-radius:var(--radius-pill)}
html[data-tema="vistaoptima"] .cab .suave{color:var(--oro);font-size:11.5px;line-height:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="vistaoptima"] .cab h1{color:#fff;font-size:26px;line-height:30px;font-weight:800;letter-spacing:-.01em}

/* tarjeta de saldo: negro cálido con filo rojo, la cifra en dorado */
html[data-tema="vistaoptima"] .tarjeta{position:relative;overflow:hidden;background:var(--tarjeta-fondo);color:var(--tarjeta-texto);border:0;border-radius:var(--radius-xl);border-top-right-radius:var(--radius-leaf);padding:24px 24px 24px 30px}
html[data-tema="vistaoptima"] .tarjeta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--brand)}
html[data-tema="vistaoptima"] .tarjeta .suave{color:var(--tarjeta-suave)}
html[data-tema="vistaoptima"] .tarjeta .t-h3{color:var(--tarjeta-texto)}
html[data-tema="vistaoptima"] .cifra span{color:var(--oro);font-size:76px;font-weight:800}
html[data-tema="vistaoptima"] .cifra small{color:var(--tarjeta-suave);font-weight:700}
html[data-tema="vistaoptima"] .tarjeta .aviso{color:var(--tarjeta-texto)}
html[data-tema="vistaoptima"] .tarjeta .aviso b{color:var(--oro)}

/* progreso (puntos) y sellos (visitas) */
html[data-tema="vistaoptima"] .barra{border-color:var(--tarjeta-pista);background:var(--tarjeta-pista);color:var(--oro)}
html[data-tema="vistaoptima"] .barra::-webkit-progress-bar{background:var(--tarjeta-pista)}
html[data-tema="vistaoptima"] .barra::-webkit-progress-value{background:var(--oro)}
html[data-tema="vistaoptima"] .barra::-moz-progress-bar{background:var(--oro)}
html[data-tema="vistaoptima"] .sello{border:1.5px dashed #6b6b6b;background:transparent;color:#141414}
html[data-tema="vistaoptima"] .sello--lleno{border:1.5px solid var(--oro);background:var(--oro)}

/* bloques: premios, novedades, cómo funciona, código */
html[data-tema="vistaoptima"] .bloque{background:var(--surface-raised);border:1.5px solid var(--border);border-radius:var(--radius-lg)}
html[data-tema="vistaoptima"] .lista li{border-bottom-color:var(--border)}
html[data-tema="vistaoptima"] .etq{border-color:var(--border);color:var(--ink-soft)}
html[data-tema="vistaoptima"] .etq--si{background:var(--brand);border-color:var(--brand);color:#fff}
html[data-tema="vistaoptima"] .novedades li b{color:var(--brand-deep)}
html[data-tema="vistaoptima"] .codigo .qr{background:#fff;border-color:var(--border)}
html[data-tema="vistaoptima"] .cod{color:var(--ink)}

/* botones y formulario */
html[data-tema="vistaoptima"] .btn{background:var(--brand);color:#fff;border-radius:var(--radius-sm);border-top-right-radius:var(--radius-leaf);font-weight:700}
html[data-tema="vistaoptima"] :is(.btn,.wallet-boton):focus-visible{outline:3px solid var(--oro);outline-offset:3px}
html[data-tema="vistaoptima"] .campo input:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px}
html[data-tema="vistaoptima"] .terminos summary{color:var(--brand-deep)}
html[data-tema="vistaoptima"] .acepto input{accent-color:var(--brand)}
html[data-tema="vistaoptima"] .error{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--ink)}
html[data-tema="vistaoptima"] .pie{color:var(--ink-soft)}