/* =========================================================
   UMAMI — Ofertas, suscripciones y cuenta de cliente
   Usa los tokens de style.css (verde/morado de marca, Baloo 2 + Poppins).
   ========================================================= */

[hidden]{ display:none !important; }

/* --- Avisos --- */
.demo-banner{
  display:flex; align-items:center; justify-content:center; gap:.6em; flex-wrap:wrap;
  margin: 0 auto var(--space-4); padding:.7em 1.2em; width:fit-content; max-width:100%;
  border-radius: var(--r-pill); border:2px dashed #d99a1c; background:#fff6dc; color:#6b4a00;
  font-weight:700; font-size:.88rem; text-align:center; line-height:1.3;
}
.demo-banner svg{ width:20px; height:20px; flex:none; }
.verify-banner{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; max-width:1000px; margin: 0 auto var(--space-3);
  padding:.9rem 1.1rem; border-radius: var(--r-md); background: var(--purple-50); border:1.5px solid var(--purple-100); color: var(--purple-700);
}
.verify-banner svg{ width:24px; height:24px; flex:none; color: var(--purple-500); }
.verify-banner p{ margin:0; flex:1 1 260px; font-size:.92rem; max-width:none; }
.toast-zone{ position:fixed; left:50%; bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index: var(--z-toast); display:flex; flex-direction:column; gap:.5rem; width:min(92vw, 460px); pointer-events:none; }
.toast{
  margin:0; padding:.85em 1.2em; border-radius: var(--r-md); background: var(--purple-800); color: var(--surface); font-size:.92rem; font-weight:500; text-align:center;
  box-shadow: var(--shadow-lg); animation: toast-in var(--dur-med) var(--ease-out) both; max-width:none;
}
.toast--error{ background:#8a1f1f; }
.toast.is-out{ opacity:0; transform: translateY(8px); transition: opacity 300ms, transform 300ms; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.form-hint{ font-size:.8rem; color: var(--ink-mute); margin: 0 0 var(--space-2); max-width:none; }
.link-btn{ background:none; border:0; padding:.4em 0; font:inherit; font-size:.88rem; font-weight:600; color: var(--purple-500); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover{ color: var(--purple-700); }

/* --- Píldora de cuenta (cabecera) --- */
.acct-pill{
  display:inline-flex; align-items:center; gap:.5em; margin-top: var(--space-3);
  padding:.5em 1.1em; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 80%, transparent); border:1.5px solid var(--purple-500);
  color: var(--purple-500); font-weight:600; font-size:.88rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acct-pill:hover{ background: var(--purple-500); color: var(--surface); }
.acct-pill svg{ width:18px; height:18px; }

/* =========================================================
   OFERTAS DE LA SEMANA
   ========================================================= */
.offers-today{ text-align:center; margin: 0 auto var(--space-4); font-size:1.05rem; color: var(--ink-soft); max-width:none; }
.offers-note{ text-align:center; font-size:.85rem; color: var(--ink-mute); margin: var(--space-4) auto 0; max-width:70ch; }
.offers-loading{ text-align:center; color: var(--ink-mute); }
/* Ofertas: un cartel (imagen ampliable) y, debajo, un texto corto. Sin cuadros grandes. Las de los clientes registrados las pinta
   umami-ofertas.js con esta misma estructura; el Miércoles de Pareja (público) está escrito a mano en ofertas.html. */
.of-grid{ display:grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(2, minmax(0,1fr)); max-width:1120px; margin-inline:auto; }
/* con un número impar de carteles, el último se queda centrado, en su fila y con el mismo ancho que los demás */
.of-grid > :last-child:nth-child(odd){ grid-column: 1 / -1; justify-self:center; width: calc(50% - var(--space-3) / 2); }
@media (max-width:899px){ .of-grid{ grid-template-columns: 1fr; max-width:600px; } .of-grid > :last-child:nth-child(odd){ width:auto; justify-self:stretch; } }
.of-item{ margin:0; }
.of-item--wed{ max-width:600px; margin-inline:auto; }
.of-poster{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-md); }
.of-poster img{ display:block; width:100%; height:auto; }
.of-poster:focus-visible{ outline:3px solid var(--purple-500); outline-offset:3px; }
.of-text{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding: var(--space-3) var(--space-3) 0; font-size:.94rem; color: var(--ink-soft); }
.of-text p{ margin:0; max-width:none; }
.of-titulo{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.3rem .7rem; color: var(--ink); font-family: var(--font-display); font-size:1.25rem; line-height:1.15; }
.of-desc{ max-width:54ch; font-size:1rem; line-height:1.65; color: var(--ink); text-wrap: pretty; }
.of-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:0; padding:0; list-style:none; }
.of-pills li{ font-size:.8rem; font-weight:600; padding:.4em 1em; border-radius: var(--r-pill); background: var(--green-100); color: var(--green-900); }
.of-call{ margin-top:.1rem; }
.of-meta{ font-size:.82rem; color: var(--ink-mute); }
.of-meta a{ color: var(--purple-500); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.of-chip{ font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.3em .85em; border-radius: var(--r-pill); border:1.5px solid var(--line); color: var(--ink-soft); background: var(--surface); white-space:nowrap; }
.of-chip.is-activa_hoy{ background: var(--green-500); border-color: var(--green-500); color: var(--purple-800); display:inline-flex; align-items:center; gap:.45em; }
.of-chip.is-activa_hoy::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--purple-800); animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso{ 50%{ transform:scale(1.6); opacity:.5; } }
@media (prefers-reduced-motion: reduce){ .of-chip.is-activa_hoy::before{ animation:none; } }
.of-item.is-usada, .of-item.is-finalizada, .of-item.is-pausada{ filter: saturate(.4); opacity:.8; }
.of-cond{ width:100%; max-width:480px; border-top:1px solid var(--line); padding-top:.75rem; text-align:left; }
.of-cond summary{ cursor:pointer; font-size:.85rem; font-weight:600; color: var(--purple-500); list-style:none; display:flex; align-items:center; justify-content:space-between; }
.of-cond summary::-webkit-details-marker{ display:none; }
.of-cond summary::after{ content:"+"; font-family: var(--font-display); font-size:1.2rem; line-height:1; transition: transform var(--dur-fast) var(--ease-out); }
.of-cond[open] summary::after{ transform: rotate(45deg); }
.of-cond ul{ margin:.6rem 0 0; padding-left:1.1rem; list-style:disc; font-size:.82rem; display:flex; flex-direction:column; gap:.25rem; }
.of-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem .8rem; }
.of-hint, .of-lock{ font-size:.82rem; color: var(--ink-soft); }
.of-lock{ font-weight:700; color: var(--purple-500); }
.of-coupon{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem .7rem; padding:.6rem .85rem; border-radius: var(--r-md); background: var(--green-100); color: var(--purple-800); }
.of-coupon-label{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.of-coupon code{ font-family: var(--font-display); font-size:1.2rem; font-weight:800; letter-spacing:.08em; }
.of-coupon-state{ font-size:.82rem; font-weight:700; }
.of-coupon.is-used code{ text-decoration: line-through; opacity:.6; }
.of-reg{ margin-top: var(--space-6, 4rem); }
.of-reg-head h3{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

/* --- Ofertas difuminadas para quien no ha iniciado sesión --- */
/* el mensaje y los carteles difuminados comparten la misma celda: la puerta crece lo que necesite el más alto (así el aviso nunca se sale en móvil) */
.gate{ display:grid; max-width:1100px; margin-inline:auto; min-height:22rem; }
.gate > *{ grid-area:1 / 1; }
.gate-blur{ filter: blur(9px) saturate(.85); opacity:.92; pointer-events:none; user-select:none; -webkit-user-select:none; }
.of-ghost{ display:flex; flex-direction:column; gap:.55rem; }
.of-ghost-poster{ display:block; aspect-ratio:1600 / 679; border-radius: var(--r-md); background: linear-gradient(135deg, var(--green-500), var(--green-100)); box-shadow: var(--shadow-md); }
.of-ghost--2 .of-ghost-poster{ background: linear-gradient(135deg, var(--purple-500), var(--purple-100)); }
.of-ghost--3 .of-ghost-poster{ background: linear-gradient(135deg, var(--purple-700), var(--green-500)); }
.skel{ display:block; height:.8rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.skel--w90{ width:90%; } .skel--w55{ width:55%; }
.gate-msg{
  display:grid; place-items:center; padding: var(--space-3) 0;
}
.gate-card{
  width:min(30rem, 100%); text-align:center; padding: var(--space-4) var(--space-4) var(--space-3); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(2px);
  box-shadow: var(--shadow-lg); border:1.5px solid var(--line);
}
.gate-lock{ width:60px; height:60px; margin: 0 auto var(--space-2); border-radius:50%; display:grid; place-items:center; background: var(--purple-500); color: var(--green-500); }
.gate-lock svg{ width:28px; height:28px; }
.gate-card h3{ font-size:1.55rem; margin-bottom:.3em; }
.gate-card p{ color: var(--ink-soft); font-size:.95rem; margin-inline:auto; }
.gate-actions{ display:flex; flex-direction:column; gap:.5rem; margin-top: var(--space-3); }
.gate-fine{ font-size:.78rem !important; color: var(--ink-mute) !important; margin: var(--space-2) auto 0 !important; }
@media (min-width:520px){ .gate-actions{ flex-direction:row; justify-content:center; } }
@media (max-width:820px){ .gate-blur .of-ghost:nth-child(n+3){ display:none; } .gate{ min-height:20rem; } }

/* =========================================================
   HAZTE VIP — planes y comparativa
   ========================================================= */
.plan-grid{ display:grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(3, 1fr); max-width:1100px; margin-inline:auto; align-items:stretch; }
@media (max-width:920px){ .plan-grid{ grid-template-columns: 1fr; max-width:460px; } }
.plan-card{
  position:relative; display:flex; flex-direction:column; gap:.4rem;
  padding: var(--space-4) clamp(1.5rem, 1rem + 1.6vw, 2.25rem) var(--space-4);
  background: var(--surface); border:2px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
@media (hover:hover){ .plan-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); } }
.plan-card--featured{ border-color: var(--purple-500); background: var(--purple-500); color: var(--surface); box-shadow: var(--shadow-lg); }
.plan-card--featured h3, .plan-card--featured .plan-price b{ color: var(--surface); }
.plan-card--featured .plan-unit{ color: var(--green-300); }
.plan-card--featured .plan-price span, .plan-card--featured .plan-list li, .plan-card--featured .plan-for{ color: color-mix(in srgb, var(--surface) 85%, transparent); }
.plan-card--featured .plan-list svg{ color: var(--green-500); }
.plan-card--reco{ border-color: var(--green-500); box-shadow: var(--shadow-md); }
.plan-card.is-current{ box-shadow: 0 0 0 3px var(--green-500), var(--shadow-md); }
.plan-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--green-500); color: var(--purple-800); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.4em 1.1em; border-radius: var(--r-pill); white-space:nowrap; box-shadow: var(--shadow-sm);
}
.plan-card h3{ font-size:1.6rem; margin:0; }
.plan-for{ font-size:.9rem; color: var(--ink-mute); margin:0; }
.plan-price{ display:flex; align-items:baseline; gap:.4em; margin:var(--space-2) 0 0; }
.plan-price b{ font-family: var(--font-display); font-size:2.7rem; font-weight:800; color: var(--purple-500); line-height:1; }
.plan-price span{ font-size:.95rem; color: var(--ink-soft); }
.plan-unit{ font-weight:700; color: var(--green-700); font-size:.92rem; margin:0 0 var(--space-2); }
.plan-list{ display:flex; flex-direction:column; gap:.7rem; margin: var(--space-1, .5rem) 0 var(--space-4); flex:1; }
.plan-list li{ display:flex; gap:.65em; font-size:.95rem; color: var(--ink-soft); line-height:1.35; }
.plan-list svg{ width:18px; height:18px; flex:none; margin-top:.15em; color: var(--green-600); }
.plan-card--featured .btn-secondary{ --btn-bg: var(--green-500); --btn-fg: var(--purple-800); }
.plan-card--featured .btn-secondary:hover{ --btn-bg: var(--green-300); }
.plan-card [aria-disabled="true"]{ opacity:.6; cursor:default; pointer-events:none; }
.plan-note{ text-align:center; font-size:.85rem; color: var(--ink-mute); max-width:70ch; margin: var(--space-4) auto 0; }
.plan-note a{ color: var(--purple-500); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.compare-wrap{ max-width:1100px; margin: var(--space-5) auto 0; overflow-x:auto; border-radius: var(--r-lg); border:1.5px solid var(--line); background: var(--surface); }
.compare{ width:100%; border-collapse:collapse; min-width:620px; font-size:.92rem; }
.compare caption{ text-align:left; padding: var(--space-3) var(--space-3) .5rem; font-family: var(--font-display); font-size:1.3rem; font-weight:700; }
.compare th, .compare td{ padding:.8rem 1rem; text-align:center; border-top:1px solid var(--line); }
.compare thead th{ background: var(--purple-500); color: var(--surface); border:0; font-family: var(--font-display); font-size:1.05rem; }
.compare tbody th{ text-align:left; font-weight:600; color: var(--ink); background: var(--surface-2); width:34%; }
.compare .si{ color: var(--green-700); font-weight:800; } .compare .no{ color: var(--ink-mute); }
.compare td strong{ font-family: var(--font-display); font-size:1.15rem; color: var(--purple-500); }
.compare .best{ background: var(--green-100); }
.plan-conds{ max-width:1100px; margin: var(--space-4) auto 0; }
.plan-conds summary{ cursor:pointer; font-weight:600; color: var(--purple-500); text-align:center; }
.plan-conds ul{ margin: var(--space-2) auto 0; max-width:70ch; padding-left:1.2rem; list-style:disc; color: var(--ink-soft); font-size:.9rem; display:flex; flex-direction:column; gap:.35rem; }

/* --- Bloque «Mi cuenta» de la página de ofertas --- */
.micuenta{ max-width:1000px; margin-inline:auto; display:grid; gap: var(--space-4); grid-template-columns: 1.1fr 1fr; align-items:center; }
@media (max-width:820px){ .micuenta{ grid-template-columns:1fr; } }
.micuenta-list{ display:flex; flex-direction:column; gap:1rem; margin: var(--space-3) 0 0; padding:0; list-style:none; }
.micuenta-list li{ display:flex; gap:.8rem; align-items:flex-start; }
.micuenta-list svg{ width:24px; height:24px; flex:none; color: var(--green-500); margin-top:.1rem; }
.micuenta-list b{ display:block; color: var(--surface); }
.micuenta-list span{ font-size:.92rem; color: color-mix(in srgb, var(--surface) 78%, transparent); }
/* El panel es crema sobre el fondo morado */
.micuenta-panel{ background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: 0 24px 50px -22px rgba(0,0,0,.55); }
.band-purple .micuenta-panel h3{ color: var(--purple-500); font-size:1.5rem; }
.band-purple .micuenta-panel p{ color: var(--ink-soft); }
.micuenta-panel .dlg-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top: var(--space-3); }
.micuenta-panel .btn-outline{ --btn-fg: var(--purple-500); border-color: color-mix(in srgb, var(--purple-500) 45%, transparent); }
.micuenta-hola{ font-family: var(--font-display); font-size:1.5rem; margin:0 0 var(--space-2); color: var(--purple-500); }
.micuenta-resumen{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.6rem; }
@media (max-width:480px){ .micuenta-resumen{ grid-template-columns:1fr; } }
.micuenta-dato{ background: var(--purple-50); border-radius: var(--r-md); padding:.8rem; display:flex; flex-direction:column; gap:.2rem; }
.micuenta-dato b{ font-family: var(--font-display); font-size:1.4rem; color: var(--purple-500); line-height:1.1; }
.micuenta-dato span{ font-size:.78rem; color: var(--ink-soft); }
.micuenta-panel .verify-banner{ margin-top: var(--space-3); }
/* «Cómo funciona» dentro de la sección morada: los mismos 3 pasos animados de la web, en verde sobre morado */
.cuenta-como{ margin-top: var(--space-6); padding-top: var(--space-5); border-top:1px solid rgba(253,251,245,.16); text-align:center; }
.cuenta-como .section-head{ margin-bottom:0; }
.cuenta-band .order-steps{ margin-top: var(--space-4); }
.cuenta-band .order-step .icon{ background: var(--green-500); color: var(--purple-800); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.cuenta-band .order-step h4{ color: var(--surface); }
.cuenta-band .order-step p{ color: color-mix(in srgb, var(--surface) 78%, transparent); }
.cuenta-band .order-step-arrow{ color: var(--green-500); }
.band-purple .eyebrow-hand{ color: var(--green-500); }


/* --- Preguntas frecuentes --- */
.faq{ max-width:780px; margin-inline:auto; display:flex; flex-direction:column; gap:.6rem; }
.faq details{ background: var(--surface); border:1.5px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur-fast) var(--ease-out); }
.faq details[open]{ border-color: var(--purple-500); }
.faq summary{ cursor:pointer; list-style:none; padding:1em 1.25em; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:1em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family: var(--font-display); font-size:1.5rem; line-height:1; color: var(--purple-500); transition: transform var(--dur-med) var(--ease-out); }
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details p{ padding: 0 1.25em 1.1em; margin:0; color: var(--ink-soft); font-size:.95rem; max-width:none; }
.faq details p a{ color: var(--purple-500); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.band-soft{ background: var(--green-100); }

/* =========================================================
   Ventanas y formularios
   ========================================================= */
dialog.umami-dlg{ border:0; padding:0; border-radius: var(--r-lg); background: var(--bg); color: var(--ink); width: min(480px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); box-shadow: var(--shadow-lg); overflow:auto; }
dialog.umami-dlg::backdrop{ background: rgba(33,26,40,.6); }
dialog.umami-dlg[open]{ animation: dlg-in var(--dur-med) var(--ease-out); }
@keyframes dlg-in{ from{ opacity:0; transform: translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.dlg-inner{ padding: var(--space-4) var(--space-4) var(--space-3); position:relative; }
@media (max-width:480px){ .dlg-inner{ padding: var(--space-3); } }
.dlg-close{ position:absolute; top:.6rem; right:.6rem; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background: var(--surface-2); color: var(--ink); display:grid; place-items:center; }
.dlg-close:hover{ background: var(--purple-100); }
.dlg-close svg{ width:18px; height:18px; }
.dlg-inner h2{ font-size:1.6rem; margin-bottom:.25em; padding-right:2rem; }
.auth-intro{ color: var(--ink-soft); font-size:.95rem; }
.dlg-tabs{ display:flex; gap:.25rem; background: var(--surface-2); padding:4px; border-radius: var(--r-pill); margin-bottom: var(--space-3); }
.dlg-tabs button{ flex:1; border:0; background:transparent; font:inherit; font-weight:600; font-size:.9rem; padding:.55em 1em; border-radius: var(--r-pill); cursor:pointer; color: var(--ink-soft); }
.dlg-tabs button[aria-selected="true"]{ background: var(--purple-500); color: var(--surface); }
.dlg-msg{ margin: var(--space-2) 0; padding:.7em 1em; border-radius: var(--r-md); font-size:.9rem; font-weight:600; background:#fdeaea; color:#8a1f1f; max-width:none; }
.dlg-actions{ display:flex; flex-direction:column; gap:.5rem; margin-top: var(--space-3); }
.dlg-recap{ background: var(--surface); border:1.5px solid var(--line); border-radius: var(--r-md); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.dlg-recap dl{ display:grid; grid-template-columns: 1fr auto; gap:.35rem 1rem; margin:0; font-size:.92rem; }
.dlg-recap dt{ color: var(--ink-soft); } .dlg-recap dd{ margin:0; font-weight:700; text-align:right; }
.dlg-recap .total{ font-family: var(--font-display); font-size:1.25rem; color: var(--purple-500); font-weight:700; }
.dlg-card{ display:grid; grid-template-columns: 1fr 1fr; gap:.5rem; margin-top: var(--space-2); }
.dlg-card .form-field{ margin:0; } .dlg-card .form-field:first-child{ grid-column: 1 / -1; }
.dlg-card input:disabled{ background: var(--surface-2); color: var(--ink-mute); cursor:not-allowed; }
.dlg-inner .form-field{ min-width:0; }
.dlg-inner .form-field input, .acct-card .form-field input, .acct-card .form-field select, .adm-form-grid input, .adm-form-grid select{ width:100%; min-width:0; box-sizing:border-box; }
.form-field select{ font-family: var(--font-body); font-size:1rem; padding:.85em 1em; border-radius: var(--r-sm); border:1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.dlg-cond{ margin: var(--space-2) 0; font-size:.88rem; } .dlg-cond summary{ cursor:pointer; font-weight:600; color: var(--purple-500); }
.dlg-cond ul{ padding-left:1.1rem; list-style:disc; margin:.5rem 0 0; color: var(--ink-soft); display:flex; flex-direction:column; gap:.3rem; }
.dlg-ok{ text-align:center; padding: var(--space-2) 0; }
.dlg-ok .ok-ico{ width:68px; height:68px; border-radius:50%; background: var(--green-500); color: var(--purple-500); display:grid; place-items:center; margin: 0 auto var(--space-2); }
.dlg-ok .ok-ico--error{ background:#fdeaea; color:#8a1f1f; }
.dlg-ok .ok-ico svg{ width:34px; height:34px; }
.dlg-ok h2{ padding:0; } .dlg-ok p{ margin-inline:auto; }

/* =========================================================
   MI CUENTA
   ========================================================= */
.acct-hero{ padding-block: clamp(6.5rem, 5rem + 4vw, 8rem) var(--space-4); background: var(--green-100); text-align:center; }
.acct-hero h1{ font-size: clamp(2rem, 1.6rem + 2vw, 3rem); margin:0; }
.acct-hero p{ margin: .4em auto 0; color: var(--ink-soft); }
.acct-shell{ max-width:1080px; margin-inline:auto; }
.acct-salir{ display:flex; justify-content:flex-end; margin-bottom: var(--space-2); }
.acct-guest{ max-width:460px; margin-inline:auto; }
.acct-guest h2{ text-align:center; }
.acct-narrow{ max-width:460px; margin-inline:auto; }
.acct-tabs{ display:flex; gap:.35rem; overflow-x:auto; padding:.35rem; margin: 0 auto var(--space-4); background: var(--surface-2); border-radius: var(--r-pill); width:fit-content; max-width:100%; scrollbar-width:none; }
.acct-tabs::-webkit-scrollbar{ display:none; }
.acct-tab{ flex:none; border:0; background:transparent; font:inherit; font-weight:600; font-size:.92rem; padding:.6em 1.2em; border-radius: var(--r-pill); cursor:pointer; color: var(--ink-soft); white-space:nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.acct-tab:hover{ background: var(--purple-50); }
.acct-tab[aria-selected="true"]{ background: var(--purple-500); color: var(--surface); }
.acct-panel{ animation: opt-in 300ms var(--ease-out) both; }
.acct-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1.15fr 1fr; align-items:start; margin-bottom: var(--space-3); }
@media (max-width:820px){ .acct-grid{ grid-template-columns: 1fr; } }
.acct-panel > .acct-card, .acct-panel > .coupon-form{ max-width:760px; margin-inline:auto; margin-bottom: var(--space-3); }
.acct-card{ background: var(--surface); border:1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--space-3); box-shadow: var(--shadow-sm); }
.acct-card h2{ font-size:1.2rem; margin-bottom: var(--space-2); }
.acct-plan{ background: var(--purple-500); color: var(--surface); border-color: var(--purple-500); }
.acct-plan h2{ color: color-mix(in srgb, var(--surface) 75%, transparent); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-family: var(--font-body); font-weight:700; }
.acct-plan-name{ font-family: var(--font-display); font-size:1.7rem; font-weight:700; margin:0; color: var(--surface); }
.acct-meals{ display:flex; align-items:baseline; gap:.6rem; margin: var(--space-2) 0 .4rem; flex-wrap:wrap; }
.acct-meals b{ font-family: var(--font-display); font-size:4rem; line-height:1; color: var(--green-500); font-weight:800; }
.acct-meals span{ color: color-mix(in srgb, var(--surface) 82%, transparent); font-size:.95rem; }
.acct-bar{ height:10px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); overflow:hidden; margin-bottom: var(--space-2); }
.acct-bar span{ display:block; height:100%; background: var(--green-500); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
.acct-renew{ font-size:.88rem; color: color-mix(in srgb, var(--surface) 82%, transparent); margin:0 0 var(--space-2); max-width:none; }
.acct-perks{ display:flex; flex-wrap:wrap; gap:.4rem; margin: 0 0 var(--space-3); }
.acct-perks li{ font-size:.75rem; font-weight:700; padding:.3em .8em; border-radius: var(--r-pill); background: rgba(255,255,255,.14); color: var(--surface); }
.acct-empty{ color: color-mix(in srgb, var(--surface) 85%, transparent); margin-bottom: var(--space-3); }
.acct-empty-light{ color: var(--ink-mute); font-size:.92rem; margin:0; }
.acct-help{ font-size:.92rem; color: var(--ink-soft); max-width:none; }
.acct-note{ padding:.7em 1em; background: var(--purple-50); border-radius: var(--r-md); font-size:.9rem; max-width:none; }
.acct-ok{ color: var(--green-700); font-weight:600; font-size:.9rem; margin: var(--space-2) 0 0; }
.acct-plan .btn-outline-light{ font-size:.88rem; }
.acct-confirm{ background: var(--purple-50); border-radius: var(--r-md); padding: var(--space-2); margin-top:.5rem; font-size:.9rem; border:1.5px solid var(--purple-100); }
.acct-plan .acct-confirm{ background: rgba(255,255,255,.1); border-color: transparent; }
.acct-confirm p{ margin: 0 0 var(--space-1); max-width:none; }
.acct-confirm .row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.acct-dl{ display:grid; grid-template-columns: auto 1fr; gap:.5rem 1.2rem; margin:0; font-size:.95rem; }
.acct-dl dt{ color: var(--ink-soft); } .acct-dl dd{ margin:0; font-weight:600; }
.acct-dl .total{ font-family: var(--font-display); color: var(--purple-500); font-size:1.2rem; font-weight:700; }
.acct-conds{ padding-left:1.1rem; list-style:disc; display:flex; flex-direction:column; gap:.4rem; color: var(--ink-soft); font-size:.9rem; }
.acct-today{ max-width:760px; margin: var(--space-4) auto 0; padding: var(--space-3); border-radius: var(--r-lg); background: var(--green-100); }
.acct-today h2{ font-size:1.15rem; } .acct-today ul{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.5rem; font-size:.92rem; }
.code-line{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.6rem; }
.code-label{ font-size:.85rem; font-weight:600; color: var(--ink-soft); }
.cod-chip{ font-family: var(--font-display); font-weight:800; font-size:1.7rem; letter-spacing:.1em; color: var(--purple-500); background: var(--surface); border:2px dashed var(--purple-500); border-radius: var(--r-md); padding:.15em .55em; user-select:all; display:inline-block; }
.cod-chip--sm{ font-size:1rem; padding:.05em .4em; }
.qr-img{ display:block; width:170px; height:170px; margin:.3em 0 .6em; border:2px solid var(--purple-100); border-radius: var(--r-md); image-rendering:pixelated; }
.qr-video{ display:block; width:100%; max-width:360px; margin:0 auto; border-radius: var(--r-md); background:#000; }
.qr-box{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin: 0 0 var(--space-2); }
.qr-slot{ width:170px; height:170px; display:grid; place-items:center; background: var(--surface); border:2px solid var(--purple-100); border-radius: var(--r-md); overflow:hidden; }
.qr-slot .qr-img{ width:100%; height:100%; margin:0; border:0; border-radius:0; }
.qr-nota{ color: var(--ink-mute); font-size:.78rem; text-align:center; }
.acct-grid > .acct-wide{ grid-column: 1 / -1; }
.code-card{ background: var(--green-100); border-color: var(--green-300); }
.plan-pick{ display:grid; gap:.6rem; grid-template-columns: repeat(3, 1fr); margin: var(--space-2) 0; }
@media (max-width:640px){ .plan-pick{ grid-template-columns:1fr; } }
.plan-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; text-align:left; padding:.9rem 1rem; border-radius: var(--r-md); border:2px solid var(--line); background: var(--surface); color: var(--ink); font:inherit; cursor:pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.plan-opt strong{ font-family: var(--font-display); font-size:1.2rem; }
.plan-opt-price{ font-weight:700; color: var(--purple-500); } .plan-opt-sub{ font-size:.78rem; color: var(--ink-mute); } .plan-opt em{ font-size:.75rem; font-style:normal; color: var(--green-700); font-weight:700; }
.plan-opt:hover:not(:disabled){ border-color: var(--purple-500); }
.plan-opt.is-picked{ border-color: var(--purple-500); background: var(--purple-50); }
.plan-opt:disabled{ opacity:.6; cursor:default; }
.coupon-form{ margin-bottom: var(--space-3); }
.coupon-form > label{ font-weight:700; display:block; margin-bottom:.4rem; }
.coupon-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.coupon-row input{ flex:1 1 200px; font-family: var(--font-body); font-size:1rem; padding:.85em 1em; border-radius: var(--r-sm); border:1.5px solid var(--line); background: var(--surface); text-transform:uppercase; letter-spacing:.05em; }
.hist-list{ display:flex; flex-direction:column; }
.hist-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.hist-list li:last-child{ border-bottom:0; }
.hist-list small{ display:block; color: var(--ink-mute); font-size:.78rem; margin-top:.15rem; }
.hist-right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; white-space:nowrap; }
.hist-right em{ font-style:normal; font-size:.72rem; font-weight:700; color:#8a1f1f; text-transform:uppercase; letter-spacing:.08em; }
.delta{ font-weight:700; } .delta.pos{ color: var(--green-700); } .delta.neg{ color: var(--purple-500); }
.hist-tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; }
.hist-tags span, .estado-chip{ font-size:.7rem; font-weight:700; padding:.2em .7em; border-radius: var(--r-pill); background: var(--purple-50); color: var(--purple-500); }
.row-gap{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: var(--space-3); }
.danger-zone{ border-top:1px dashed var(--line); padding-top: var(--space-3); }
.btn-danger{ --btn-bg: transparent; --btn-fg: #8a1f1f; border-color:#8a1f1f; }
.btn-danger:hover{ --btn-bg:#8a1f1f; --btn-fg: var(--surface); }
.btn-primary.btn-danger{ --btn-bg:#8a1f1f; --btn-fg: var(--surface); }
.form-field input:disabled{ background: var(--surface-2); color: var(--ink-mute); }

@media (prefers-reduced-motion: reduce){
  dialog.umami-dlg[open], .acct-panel, .toast{ animation:none; }
  .plan-card{ transition:none; }
}

/* Botones desactivados */
.btn:disabled, .btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; box-shadow:none; transform:none; }

/* =========================================================
   Formularios largos: registro y datos personales
   ========================================================= */
dialog.umami-dlg:has(.form-sections){ width: min(640px, calc(100vw - 2rem)); }
.form-sections{ display:flex; flex-direction:column; }
.form-set{ border:0; padding:0; margin:0 0 var(--space-3); min-width:0; }
.form-set > legend{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; color: var(--purple-500); padding:0; margin-bottom:.6rem; }
.form-grid{ display:grid; grid-template-columns: 1fr; gap: 0 var(--space-2); }
@media (min-width:560px){ .form-grid{ grid-template-columns: 1fr 1fr; } }
.form-set--checks .form-check{ margin-bottom:.6rem; }
.dlg-inner .form-field select, .acct-card .form-field select{ width:100%; min-width:0; box-sizing:border-box; }
.form-secure{ display:flex; align-items:center; gap:.4em; font-size:.82rem; color: var(--ink-soft); margin:.6rem 0 0; max-width:none; }
.form-secure svg{ width:16px; height:16px; flex:none; color: var(--green-600); }
.form-legal{ font-size:.78rem; color: var(--ink-mute); margin:.5rem 0 0; max-width:none; }
.form-field input:focus-visible, .form-field select:focus-visible{ outline:2px solid var(--purple-500); outline-offset:2px; }

.verify-banner--error{ background:#fdeaea; border-color:#e6b3b3; }
.verify-banner--error svg{ color:#8a1f1f; }


/* Sección de planes y comparativa en crema (no verde) */
.band-cream .compare tbody th{ background: var(--cream); }
.band-cream .compare .best{ background: var(--purple-100); }
.band-cream .plan-card:not(.plan-card--featured){ background:#fff; }