/* SOLMARA · paleta y estilo oficiales (lámina de la dueña, 2 oct 2026).
   ÚNICO lugar donde viven los colores de marca. El resto de los CSS usan estas variables.
   Colores oficiales: crema perla #F7F0E3 (fondos, 50 %), rosa pétalo #E8C6C5 (promos y frases, 20 %),
   dorado champán #D8B98A (marcos y detalles, 15 %), terracota canela #B87958 (acento editorial, 10 %),
   café espresso #73503D (textos y contrastes, 5 %), amarillo sol #E5A33E (acento ocasional de temporada).
   Reglas del dueño: botón principal café con texto crema; colores de sistema en tonos de la paleta;
   se permiten tonos más claros o transparentes para bordes, sombras y fondos suaves.
   Contrastes (WCAG): café sobre crema 6.29 · crema sobre café 6.29 · café sobre rosa 4.52 ·
   terracota y dorado SOLO para detalles, líneas, íconos o texto grande — nunca texto pequeño.
   Este archivo se carga el último en cada página. Cubre también lo que viene de css/modern.css (archivo
   compartido protegido) sobrescribiendo sus variables. */

:root{
  --sm-crema:#F7F0E3; --sm-rosa:#E8C6C5; --sm-dorado:#D8B98A; --sm-terracota:#B87958; --sm-cafe:#73503D; --sm-sol:#E5A33E;
  /* tonos derivados (más claros o transparentes) */
  --sm-cafe-suave:#7A5A48;                      /* texto secundario: café aclarado, 5.4:1 sobre crema */
  --sm-borde:rgba(216,185,138,.7);              /* líneas y marcos decorativos */
  --sm-borde-campo:rgba(115,80,61,.7);          /* borde de campos de formulario (3:1) */
  --sm-dorado-suave:rgba(216,185,138,.3);       /* fondos suaves, hover, chips */
  --sm-rosa-suave:rgba(232,198,197,.5);
  --sm-err-bg:rgba(184,121,88,.14);             /* estados de sistema */
  --sm-aviso-bg:rgba(229,163,62,.18);
  --sm-ok-bg:rgba(216,185,138,.38);
  --sm-sombra:0 10px 30px rgba(115,80,61,.16);
  --sm-campo:#FCF9F3;                           /* relleno de los campos de formulario: más claro que la tarjeta crema, para que se note dónde escribir */
  --sm-sombra-suave:0 2px 10px rgba(115,80,61,.10);
  /* tipografía de la lámina: títulos serif en mayúsculas espaciadas, frases en script, texto en sans */
  --sm-serif:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --sm-script:'Allura','Pinyon Script','Snell Roundhand',cursive;

  /* ── puente con css/modern.css (protegido): sus variables apuntan a la paleta ── */
  --color-bg-light:var(--sm-crema); --color-bg-dark:var(--sm-cafe); --color-bg-black:var(--sm-cafe);
  --color-bg-rose:var(--sm-rosa-suave); --color-bg-card:var(--sm-crema); --color-dark-card:var(--sm-cafe);
  --color-accent-soft:var(--sm-crema); --color-primary:var(--sm-crema); --color-primary-dark:var(--sm-crema);
  --color-secondary:var(--sm-cafe); --color-secondary-hover:var(--sm-cafe);
  --color-text:var(--sm-cafe); --color-text-muted:var(--sm-cafe-suave);
  --color-silver:var(--sm-cafe-suave); --color-silver-light:var(--sm-borde); --color-white:var(--sm-crema);
  --brand:var(--sm-cafe); --brand-dark:var(--sm-cafe); --brand-pale:var(--sm-rosa-suave); --brand-ink:var(--sm-crema);
  --color-brand:var(--sm-cafe); --color-brand-dark:var(--sm-cafe);
  --bg-light:var(--sm-crema); --bg-dark:var(--sm-cafe); --bg-black:var(--sm-cafe);
  --text:var(--sm-cafe); --text-muted:var(--sm-cafe-suave); --silver:var(--sm-cafe-suave); --border:var(--sm-borde); --white:var(--sm-crema);
  --wa-green:var(--sm-cafe);
  --font-heading:var(--sm-serif); --font-serif:var(--sm-serif);
  --shadow-sm:0 2px 10px rgba(115,80,61,.08); --shadow-md:0 8px 24px rgba(115,80,61,.12);
  --shadow-lg:0 24px 60px rgba(115,80,61,.18); --shadow-glass:0 8px 32px rgba(115,80,61,.14);
  --shadow-rose:0 8px 24px rgba(216,185,138,.35);
}

/* ── base ── */
html{background:var(--sm-crema)}
body{background:var(--sm-crema);color:var(--sm-cafe)}
::selection{background:var(--sm-rosa);color:var(--sm-cafe)}
:focus-visible{outline:3px solid var(--sm-cafe);outline-offset:3px}
a{text-decoration-color:var(--sm-dorado)}

/* ── tipografía: títulos serif en mayúsculas espaciadas (como la lámina) ── */
h1,h2,.sm-titulo{font-family:var(--sm-serif);font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--sm-cafe)}
h1{line-height:1.15}
h2{line-height:1.2}
.sm-script,.sm-slogan{font-family:var(--sm-script)!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;font-size:28px!important;line-height:1.1!important;color:var(--sm-terracota)!important;margin:6px 0 0!important}
/* el script en terracota es solo para texto grande (3.1:1); sobre fondo café va en rosa pétalo */
.sm-fondo-cafe .sm-script{color:var(--sm-rosa)!important}

/* ── campos de formulario ── */
input,select,textarea{background:var(--sm-crema);color:var(--sm-cafe);border-color:var(--sm-borde-campo)}
input::placeholder,textarea::placeholder{color:var(--sm-cafe-suave);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--sm-cafe);outline:2px solid var(--sm-cafe);outline-offset:1px}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background:var(--sm-dorado-suave);color:var(--sm-cafe)}

/* ── botón principal: café con texto crema; secundario: contorno café ── */
.checkout-btn,.btn-add,.btn-primary-rose,.btn-checkout,button[type=submit].btn,.s2-add,.c2-add,.mc-cta,.wa-bubble-cta{
  background:var(--sm-cafe);color:var(--sm-crema);border:1.5px solid var(--sm-cafe)}
.checkout-btn:hover,.btn-add:hover,.btn-primary-rose:hover,.btn-checkout:hover,.s2-add:hover,.c2-add:hover,.mc-cta:hover{
  background:var(--sm-cafe);color:var(--sm-crema);box-shadow:var(--sm-sombra);transform:translateY(-1px)}
.btn-outline-navy,.btn-secondary,.mc-more{background:transparent;color:var(--sm-cafe);border:1.5px solid var(--sm-cafe)}
.btn-outline-navy:hover,.btn-secondary:hover{background:var(--sm-rosa);color:var(--sm-cafe)}
button:disabled,.btn-add.disabled,.checkout-btn:disabled{background:var(--sm-dorado-suave);color:var(--sm-cafe-suave);border-color:var(--sm-borde);box-shadow:none;transform:none;cursor:not-allowed}

/* ── widget de WhatsApp (wa-widget.php + modern.css, protegidos): sin verde, en paleta ── */
.wa-fab{background:var(--sm-cafe);border-color:var(--sm-crema);box-shadow:var(--sm-sombra)}
.wa-fab-ring{background:var(--sm-terracota)}
.wa-fab svg{fill:var(--sm-crema)}
.wa-bubble{background:var(--sm-crema);box-shadow:var(--sm-sombra);border:1px solid var(--sm-borde)}
.wa-bubble::after{background:var(--sm-crema)}
.wa-bubble-avatar{background:var(--sm-cafe);color:var(--sm-crema)}
.wa-bubble-name,.wa-bubble-text{color:var(--sm-cafe)}
.wa-bubble-close{color:var(--sm-cafe)}

/* ── estados de sistema en tonos de la paleta (siempre con texto café + ícono/borde, no solo color) ── */
.sm-ok,.alert-success{background:var(--sm-ok-bg);border:1px solid var(--sm-dorado);color:var(--sm-cafe)}
.sm-error,.alert-error,.alert-danger{background:var(--sm-err-bg);border:1px solid var(--sm-terracota);color:var(--sm-cafe)}
.sm-aviso,.alert-warning{background:var(--sm-aviso-bg);border:1px solid var(--sm-sol);color:var(--sm-cafe)}
.sm-info,.alert-info{background:var(--sm-rosa);border:1px solid var(--sm-rosa);color:var(--sm-cafe)}

/* ── js/cart.js y css/modern.css (archivos compartidos protegidos): colores fijos que no pasan por variables ── */
#solmara-toast{background:var(--sm-cafe)!important;color:var(--sm-crema)!important;box-shadow:var(--sm-sombra)!important;border:1px solid var(--sm-dorado)!important}
#solmara-toast[style*="155, 28, 28"]{background:var(--sm-rosa)!important;color:var(--sm-cafe)!important;border:2px solid var(--sm-terracota)!important}
#cartModal button[style*="#ccc" i]{border-color:var(--sm-borde-campo)!important;background:var(--sm-crema)!important;color:var(--sm-cafe)!important}
#cartModal [style*="#2A2A2A" i]{color:var(--sm-cafe)!important}
#cartModal [style*="color:#fff" i]{color:var(--sm-crema)!important}
.cart-badge{border-color:var(--sm-crema);color:var(--sm-crema);background:var(--sm-cafe)}
.footer-bottom{border-color:var(--sm-borde)}
.cart-modal,.checkout-modal,.checkout-body,.cart-modal-header,.cart-header,.cart-footer{background:var(--sm-crema)}
.cart-modal-overlay,.checkout-modal-overlay{background:rgba(115,80,61,.5)}
body .mobile-nav-panel .mobile-nav-cart button,body .mobile-nav-panel .mobile-nav-cart button:hover{background:var(--sm-cafe);color:var(--sm-crema)}
.bento-icon{background:var(--sm-dorado-suave)}
.cart-items{background:var(--sm-crema)}

/* ── campos de formulario: relleno más claro que la tarjeta (crema derivado), borde café y sombra interior suave ── */
body .form-control,body .form-input,body.visual-r6 .form-control,body.visual-r6 .form-input,body.visual-r6 textarea.form-control,
body .form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([readonly]),
body .form-group select,body .form-group textarea{
  background-color:var(--sm-campo);border:1.5px solid var(--sm-borde-campo);box-shadow:inset 0 1px 3px rgba(115,80,61,.10)}
body .form-control:focus,body .form-input:focus,body.visual-r6 .form-control:focus,body.visual-r6 .form-input:focus,body .form-group input:focus,body .form-group select:focus,body .form-group textarea:focus{
  background-color:var(--sm-campo);border-color:var(--sm-cafe);box-shadow:0 0 0 3px rgba(115,80,61,.16)}