/* ============================================================
   TOGGLE · Landing full-width vs form/confirm/gracias 560px
   ============================================================ */
main#app { max-width: 560px; margin: 0 auto; padding: 1.5rem; }  /* default: confirm/gracias con look viejo */
body.landing-fullwidth main#app { max-width: none; margin: 0; padding: 0; }  /* landing pública */
body.checkout-v10 main#app { max-width: none; margin: 0; padding: 0; }        /* Sprint 2 · pedido con look v10 */
body.checkout-v10 { background: var(--humo, #f4efe8); }

/* =====================================================================
   La Casa de la Picaña · Landing pública · v41 (rebuild total)
   Look: parrillero sofisticado (Playfair Display + paleta rojo brasa /
   negro / fondo humo / amarillo). CSS 100% nuevo, sin herencia del viejo.
   ===================================================================== */

:root {
    --negro: #0d0d0d; --negro-2: #1a1a1a; --carbon: #2a2624;
    --brasa: #d94214; --brasa-hi: #ff5a2e;
    --ceniza: #e8dfd6; --humo: #f4efe8; --humo-2: #ebe4d9;
    --amarillo: #f3ad2c; --blanco: #fdfaf5;
    --gris-txt: #6b6357; --sombra: rgba(13,13,13,0.15);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', -apple-system, sans-serif; background: var(--humo); color: var(--negro); line-height: 1.65; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; font-weight: 700; }
  img { display: block; max-width: 100%; }

  nav { position: sticky; top: 0; z-index: 100; background: rgba(13,13,13,0.95); backdrop-filter: blur(10px); padding: 1rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .nav-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
  .nav-brand-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--blanco); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .nav-brand-text { color: var(--blanco); }
  .nav-brand-text .top { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1; }
  .nav-brand-text .sub { color: var(--amarillo); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.15em; margin-top: 3px; }
  .nav-links { display: flex; gap: 2rem; list-style: none; }
  .nav-links a { color: var(--blanco); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; transition: color 0.2s; }
  .nav-links a:hover { color: var(--amarillo); }
  .nav-cta { background: var(--brasa); color: var(--blanco); padding: 0.65rem 1.4rem; border-radius: 3px; text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; transition: background 0.2s; border: none; cursor: pointer; font-family: 'Inter', sans-serif; }
  .nav-cta:hover { background: var(--brasa-hi); }
  .nav-cta-wa { background: #25d366; display: inline-flex; align-items: center; gap: 0.5rem; }
  .nav-cta-wa:hover { background: #1fb556; }
  .nav-cta-wa svg { width: 16px; height: 16px; }

  /* Badge "Pedidos agotados esta semana" en el hero */
  .hero-status-agotado {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255,90,46,0.12);
    border-left: 3px solid var(--brasa-hi);
    border-radius: 3px;
    margin-bottom: 1.5rem;
    max-width: 500px;
  }
  .hero-status-icon { width: 26px; height: 26px; color: var(--brasa-hi); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .hero-status-icon svg { width: 22px; height: 22px; }
  .hero-status-agotado strong { display: block; color: var(--blanco); font-size: 0.95rem; margin-bottom: 0.2rem; font-weight: 600; }
  .hero-status-agotado span { display: block; color: var(--ceniza); font-size: 0.82rem; line-height: 1.4; }

  /* Botón WhatsApp verde grande (hero + aparta section) */
  .btn-wa-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #25d366;
    color: var(--blanco);
    padding: 1.1rem 2.2rem;
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 0 0 0 rgba(37,211,102,0.5);
    animation: wa-pulse 2.5s infinite;
  }
  .btn-wa-hero:hover { background: #1fb556; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,0.35); animation: none; }
  .btn-wa-hero svg { width: 20px; height: 20px; }
  .btn-wa-big { padding: 1.25rem 2.5rem; font-size: 0.95rem; }
  @keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  @media (max-width: 768px) { .nav-links { display: none; } nav { padding: 0.85rem 1rem; } }

  .hero { position: relative; display: flex; align-items: center; overflow: hidden; padding: 5rem 2rem 6.5rem; min-height: 82vh; }
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.4) 0%, rgba(13,13,13,0.7) 55%, rgba(13,13,13,0.88) 100%); }
  .hero-inner { max-width: 1200px; margin: 0 auto; padding: 0; color: var(--blanco); position: relative; z-index: 2; width: 100%; }
  @media (max-width: 768px) {
    .hero { padding: 3.5rem 1.25rem 4.5rem; min-height: 78vh; }
  }
  .hero-tagline { color: var(--amarillo); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.35em; margin-bottom: 1.5rem; font-weight: 500; display: flex; align-items: center; gap: 1rem; }
  .hero-tagline::before { content: ""; width: 40px; height: 1px; background: var(--amarillo); }
  /* Chips del hero (fecha + urgencia) — pills pequeños */
  .hero-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.75rem; }
  .hero-chips .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(13,13,13,0.55); backdrop-filter: blur(8px); color: var(--ceniza); border: 1px solid rgba(243,173,44,0.25); border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; line-height: 1; }
  .hero-chips .chip svg { width: 14px; height: 14px; stroke: var(--amarillo); flex-shrink: 0; }
  .hero-chips .chip-fecha { color: var(--amarillo); }
  .hero-chips .chip-urgente { background: var(--brasa); border-color: var(--brasa); color: var(--blanco); }
  .hero-chips .chip-urgente svg { stroke: var(--blanco); }
  .hero-chips .chip-info { color: var(--ceniza); }
  .hero h1 { font-size: clamp(2.5rem, 7vw, 5.2rem); line-height: 1; margin-bottom: 1.5rem; font-weight: 900; max-width: 900px; }
  .hero-sub { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--ceniza); margin-bottom: 2.5rem; max-width: 600px; line-height: 1.5; }
  .hero-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
  .btn-primary { background: var(--brasa); color: var(--blanco); padding: 1.1rem 2.2rem; border: none; text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; transition: all 0.2s; cursor: pointer; display: inline-block; }
  .btn-primary:hover { background: var(--brasa-hi); transform: translateY(-2px); }
  .btn-ghost { background: transparent; color: var(--blanco); padding: 1.1rem 2.2rem; border: 1px solid var(--blanco); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; transition: all 0.2s; display: inline-block; }
  .btn-ghost:hover { background: var(--blanco); color: var(--negro); }
  .hero-details { position: absolute; bottom: 2rem; left: 0; right: 0; max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 3rem; color: var(--ceniza); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; z-index: 2; }
  .hero-details div { display: flex; align-items: center; gap: 0.5rem; }
  .hero-details svg { width: 16px; height: 16px; stroke: var(--amarillo); }
  @media (max-width: 768px) { .hero-details { display: none; } }

  section { padding: 6rem 2rem; }
  .container { max-width: 1200px; margin: 0 auto; }
  .section-tag { color: var(--brasa); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 1rem; font-weight: 600; display: flex; align-items: center; gap: 1rem; }
  .section-tag::before { content: ""; width: 40px; height: 1px; background: var(--brasa); }
  .section-title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; margin-bottom: 1.5rem; color: var(--negro); }

  .historia { background: var(--humo); }
  .historia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .historia-img { position: relative; height: 520px; overflow: hidden; box-shadow: 0 20px 40px var(--sombra); }
  .historia-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .historia p { font-size: 1.05rem; color: var(--gris-txt); margin-bottom: 1.2rem; }
  .historia p:first-of-type::first-letter { font-family: 'Playfair Display', serif; font-size: 3rem; float: left; line-height: 1; padding: 5px 8px 0 0; color: var(--brasa); font-weight: 700; }
  .firma { margin-top: 2rem; font-family: 'Playfair Display', serif; font-style: italic; color: var(--negro); font-size: 1.1rem; }
  .firma-sub { display: block; font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--gris-txt); text-transform: uppercase; letter-spacing: 0.15em; font-style: normal; margin-top: 0.3rem; }
  @media (max-width: 768px) { .historia-grid { grid-template-columns: 1fr; gap: 2rem; } .historia-img { height: 350px; } }

  .menu { background: var(--negro); color: var(--blanco); }
  .menu .section-title { color: var(--blanco); }
  .menu-intro { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
  .menu-intro .section-tag { justify-content: center; color: var(--amarillo); }
  .menu-intro .section-tag::before { background: var(--amarillo); }
  .menu-intro p { color: var(--ceniza); font-size: 1.05rem; }
  .menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .menu-card { background: var(--negro-2); overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s, border-color 0.3s; }
  .menu-card:hover { transform: translateY(-6px); border-color: var(--brasa); }
  .menu-card-img-wrap { position: relative; height: 380px; background: var(--carbon); overflow: hidden; }
  .menu-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .menu-card-tag { position: absolute; top: 1rem; left: 1rem; background: rgba(13,13,13,0.85); color: var(--amarillo); padding: 0.35rem 0.8rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; backdrop-filter: blur(4px); z-index: 2; }
  .menu-card-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
  .menu-card-body h3 { font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--blanco); }
  .menu-card-descr { color: var(--ceniza); font-size: 0.92rem; margin-bottom: 1.5rem; flex: 1; opacity: 0.85; }
  .menu-card-footer { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); }
  .menu-card-precio { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--amarillo); font-weight: 700; }
  .menu-card-unidad { color: var(--ceniza); font-size: 0.8rem; opacity: 0.7; text-align: right; }
  .menu-card.featured { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .menu-card.featured .menu-card-img-wrap { height: 100%; min-height: 560px; }
  .menu-card.featured .menu-card-body { padding: 2.5rem; justify-content: center; }
  .menu-card.featured h3 { font-size: 2.4rem; margin-bottom: 1rem; }
  .menu-card.featured .menu-card-descr { font-size: 1rem; }
  .menu-card.featured .menu-card-precio { font-size: 1.4rem; font-style: italic; }
  @media (max-width: 768px) { .menu-grid { grid-template-columns: 1fr; } .menu-card.featured { grid-column: span 1; grid-template-columns: 1fr; } .menu-card-img-wrap { height: 320px; } .menu-card.featured .menu-card-img-wrap { min-height: 400px; } }

  /* Chip de disponibilidad · arriba a la derecha de la foto */
  .menu-card-disp { position: absolute; top: 1rem; right: 1rem; background: rgba(31,168,85,0.92); color: var(--blanco); padding: 0.4rem 0.85rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; border-radius: 999px; backdrop-filter: blur(6px); z-index: 2; }

  /* Nota "Agotado esta semana" abajo del footer de cada card cuando no hay stock */
  .menu-card-off-nota { margin-top: 1rem; padding: 0.7rem; text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: rgba(232,223,214,0.4); border: 1px dashed rgba(232,223,214,0.15); border-radius: 3px; }

  /* CTA GRANDE del menú · aparece entre el grid de sabores y la Picaña */
  .menu-cta-wrap { max-width: 640px; margin: 3rem auto 3rem; text-align: center; padding: 0 1rem; }
  .menu-cta-grande { display: inline-block; width: 100%; max-width: 520px; padding: 1.5rem 2.5rem; background: var(--brasa); color: var(--blanco); border: none; font-family: 'Inter', sans-serif; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.25s; border-radius: 3px; box-shadow: 0 12px 40px rgba(217,66,20,0.35); }
  .menu-cta-grande:hover { background: var(--brasa-hi); transform: translateY(-2px); box-shadow: 0 18px 50px rgba(217,66,20,0.45); }
  .menu-cta-nota { margin-top: 1rem; color: var(--ceniza); font-size: 0.82rem; opacity: 0.75; letter-spacing: 0.02em; }

  /* Grid separado solo para la Picaña (queda abajo del CTA) */
  .menu-grid-picana { margin-top: 0; }
  @media (max-width: 768px) {
    .menu-cta-wrap { margin: 2.25rem auto 2.25rem; }
    .menu-cta-grande { padding: 1.25rem 1.75rem; font-size: 0.95rem; letter-spacing: 0.15em; }
    .menu-cta-nota { font-size: 0.75rem; }
  }

  /* ===== Ficha del parrillero (Picaña Familiar) ===== */
  .picana-ficha { margin: 1.5rem 0 1.75rem; padding: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 0.9rem; }
  .picana-ficha-row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; align-items: baseline; }
  .picana-ficha-row dt { font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amarillo); font-weight: 600; }
  .picana-ficha-row dd { font-family: 'Inter', sans-serif; font-size: 0.92rem; color: var(--ceniza); line-height: 1.55; margin: 0; }
  .picana-ficha-row dd strong { color: var(--blanco); font-weight: 600; }
  @media (max-width: 640px) {
    .picana-ficha-row { grid-template-columns: 1fr; gap: 0.2rem; }
    .picana-ficha-row dd { font-size: 0.88rem; }
  }

  /* CTA WhatsApp de la Picaña — botón outline elegante que se llena en hover */
  .picana-cta-wa { display: block; margin-top: 1.5rem; padding: 1rem 1.5rem; text-align: center; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--blanco); background: var(--brasa); border: 1px solid var(--brasa); border-radius: 3px; transition: all 0.22s; }
  .picana-cta-wa:hover { background: transparent; color: var(--brasa); }

  .aparta { background: var(--brasa); color: var(--blanco); text-align: center; padding: 6rem 2rem; }
  .aparta-container { max-width: 780px; margin: 0 auto; }
  .aparta-sub { max-width: 600px; margin: 0 auto 3rem; color: rgba(253,250,245,0.88); font-size: 1.05rem; line-height: 1.65; }
  /* CTA PROTAGONISTA — blanco sólido sobre brasa, pill grande */
  .aparta-cta { display: inline-flex; align-items: center; gap: 1.2rem; background: var(--blanco); color: var(--brasa); padding: 1.5rem 3rem; border: none; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.25s; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
  .aparta-cta:hover { background: var(--negro); color: var(--blanco); transform: translateY(-3px); box-shadow: 0 18px 50px rgba(0,0,0,0.35); }
  .aparta-cta-lbl { line-height: 1; }
  .aparta-cta-arrow { display: inline-block; font-size: 1.4rem; line-height: 1; transition: transform 0.25s; font-weight: 400; }
  .aparta-cta:hover .aparta-cta-arrow { transform: translateX(6px); }
  .aparta-cta-wa { background: #25d366; color: var(--blanco); }
  .aparta-cta-wa:hover { background: var(--negro); color: var(--blanco); }
  /* Chip pequeño con el countdown — SECUNDARIO al CTA */
  .aparta-countdown-chip { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding: 0.5rem 1rem; background: rgba(13,13,13,0.22); color: rgba(253,250,245,0.85); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; border-radius: 999px; }
  .aparta-countdown-chip strong { color: #ffd066; font-weight: 700; font-family: 'Inter', sans-serif; margin-left: 0.15rem; }
  .aparta-countdown-chip.urgente { background: rgba(13,13,13,0.4); }
  .aparta-countdown-chip.urgente strong { color: #fff3a8; }
  .aparta-countdown-ico { display: inline-flex; width: 14px; height: 14px; opacity: 0.75; }
  .aparta-countdown-ico svg { width: 14px; height: 14px; stroke: currentColor; }
  /* Último pedido — micro-texto de prueba social */
  .aparta-ultimo { margin: 2.75rem auto 0; max-width: 480px; font-size: 0.85rem; color: rgba(253,250,245,0.75); line-height: 1.5; padding-top: 1.75rem; border-top: 1px solid rgba(253,250,245,0.15); }
  .aparta-ultimo strong { color: #ffd066; font-weight: 600; }
  @media (max-width: 768px) {
    .aparta { padding: 4.5rem 1.25rem; }
    .aparta-cta { padding: 1.25rem 2.25rem; font-size: 0.9rem; gap: 0.9rem; }
    .aparta-sub { font-size: 0.95rem; margin-bottom: 2.25rem; }
    .aparta-countdown-chip { font-size: 0.68rem; padding: 0.4rem 0.8rem; }
  }
  .aparta .section-tag { color: var(--amarillo); justify-content: center; }
  .aparta .section-tag::before { background: var(--amarillo); }
  .aparta .section-title { color: var(--blanco); font-size: clamp(2.2rem, 5vw, 3.5rem); max-width: 800px; margin-left: auto; margin-right: auto; }
  .aparta p { max-width: 600px; margin: 0 auto 3rem; color: var(--ceniza); font-size: 1.1rem; }
  .aparta .btn-ghost { border-color: var(--blanco); font-size: 0.95rem; padding: 1.3rem 3rem; }
  .aparta .btn-ghost:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }

  .galeria { background: var(--humo); }
  .galeria-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
  .galeria-item { aspect-ratio: 1; overflow: hidden; transition: transform 0.3s; }
  .galeria-item img { width: 100%; height: 100%; object-fit: cover; }
  .galeria-item:hover { transform: scale(1.03); }
  .galeria-item.wide { grid-column: span 2; aspect-ratio: 2; }
  @media (max-width: 768px) { .galeria-grid { grid-template-columns: repeat(2, 1fr); } .galeria-item.wide { grid-column: span 2; aspect-ratio: 2; } }

  .testimonios { background: var(--carbon); color: var(--blanco); }
  .testimonios .section-title { color: var(--blanco); text-align: center; }
  .testimonios .section-tag { color: var(--amarillo); justify-content: center; }
  .testimonios .section-tag::before { background: var(--amarillo); }
  .testi-grid {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 1rem;
  margin-top: 3rem;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.testi-grid::-webkit-scrollbar { height: 6px; }
.testi-grid::-webkit-scrollbar-track { background: transparent; }
.testi-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.testi-grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.testi-grid .testi-card {
  flex: 0 0 calc((100% - 4rem) / 3);
  min-width: 260px;
  max-width: 380px;
  scroll-snap-align: start;
}
  .testi-card { background: rgba(255,255,255,0.03); padding: 2rem; border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; }
  .testi-stars { color: var(--amarillo); font-size: 1.1rem; letter-spacing: 3px; margin-bottom: 1rem; }
  .testi-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--ceniza); margin-bottom: 1.5rem; flex: 1; }
  .testi-author { display: flex; align-items: center; gap: 0.8rem; }
  .testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brasa); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--blanco); }
  .testi-name { font-weight: 600; font-size: 0.9rem; }
  .testi-date { font-size: 0.75rem; color: var(--gris-txt); text-transform: uppercase; letter-spacing: 0.1em; }
  @media (max-width: 768px) {
  .testi-grid .testi-card { flex: 0 0 85%; max-width: none; }
}

  .ubicacion { background: var(--negro); color: var(--blanco); }
  .ubic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .ubicacion .section-title { color: var(--blanco); }
  .ubic-info li { list-style: none; margin-bottom: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }
  .ubic-info .ico { width: 32px; height: 32px; background: var(--brasa); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ubic-info .ico svg { width: 16px; height: 16px; stroke: var(--blanco); fill: none; }
  .ubic-info h4 { font-family: 'Inter', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--amarillo); margin-bottom: 0.3rem; }
  .ubic-info p { color: var(--ceniza); font-size: 0.95rem; }
  .ubic-map { height: 400px; background: var(--negro-2); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: var(--gris-txt); font-size: 0.85rem; }
  .ubic-map a { color: var(--amarillo); text-decoration: none; }
  @media (max-width: 768px) { .ubic-grid { grid-template-columns: 1fr; gap: 2rem; } }

  footer { background: var(--negro); color: var(--ceniza); padding: 3rem 2rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.08); }
  footer .brand-line { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--blanco); margin-bottom: 0.3rem; }
  footer .tagline { color: var(--amarillo); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 2rem; }
  footer .foot-links { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1.5rem; }
  footer .foot-links a { color: var(--ceniza); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
  footer .foot-links a:hover { color: var(--amarillo); }
  footer .foot-social { display: flex; gap: 1.25rem; justify-content: center; margin-bottom: 2rem; }
  footer .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ceniza); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: all 0.2s; }
  footer .foot-social a:hover { color: var(--negro); background: var(--amarillo); border-color: var(--amarillo); transform: translateY(-2px); }
  footer .foot-social svg { width: 20px; height: 20px; display: block; }
  footer .copy { font-size: 0.75rem; opacity: 0.6; }


/* ============================================================
   CSS VIEJO · para renderPedido, renderConfirmacion, renderGracias
   Se aplica cuando body NO tiene la clase 'landing-fullwidth'.
   Sprint 2/3 lo reemplaza rehaciendo los templates HTML con look nuevo.
   ============================================================ */

/* ================================================================
   La Casa de la Picaña · Menú Muslos al Tajín
   Paleta y estilo tomados del branding LCP:
   negro + amarillo brillante + rojo brasa + blanco
   Tipografías: Anton (títulos condensados) + Inter (body)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --negro:        #0a0a0a;
  --negro-suave:  #141414;
  --gris-card:    #1c1c1c;
  --gris-borde:   #2a2a2a;
  --gris-texto:   #b0b0b0;
  --blanco:       #ffffff;
  --amarillo:     #FFC800;
  --amarillo-oscuro: #E5B300;
  --rojo:         #E63946;
  --rojo-brasa:   #FF4D2E;
  --naranja:      #FF7A00;
  --verde:        #22c55e;
  --verde-oscuro: #16a34a;
  --wa:           #25D366;

  --radius:       12px;
  --radius-lg:    18px;
  --sombra:       0 8px 30px rgba(0,0,0,.5);
  --sombra-suave: 0 4px 16px rgba(0,0,0,.3);
}

html, body {
  background: var(--negro);
  color: var(--blanco);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  background: radial-gradient(ellipse at top, #1a1000 0%, var(--negro) 60%);
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--amarillo); text-decoration: none; }

code {
  background: var(--gris-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--amarillo);
}

/* ---------- Utilidades ---------- */
.amarillo { color: var(--amarillo); }
.rojo     { color: var(--rojo-brasa); }
.center   { text-align: center; }

/* ---------- Contenedor ---------- */
#app.legacy-app-noop {
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
}

.container {
  padding: 1.5rem 1.25rem;
}

.container-ancho { max-width: 900px; margin: 0 auto; }

.section {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  color: var(--blanco);
}

.section h2, .section h3 {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gris-borde), transparent);
  margin: 1.5rem 0;
}

/* ================================================================
   PANTALLA HERO (portada)
   ================================================================ */
.hero {
  padding: 1rem 1rem 3rem;
  text-align: center;
}

.hero-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem auto 1rem;
  padding: 0.5rem 1rem;
  background: rgba(0,0,0,.4);
  border-radius: 999px;
  width: fit-content;
  border: 1px solid var(--gris-borde);
}

.hero-logo-txt {
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  color: var(--blanco);
}

.hero-logo-txt .amarillo { color: var(--amarillo); }

.hero-flame {
  color: var(--rojo-brasa);
  font-size: 1.2rem;
}

/* Logo LCP como imagen (cuando NEGOCIO.logo tiene ruta) */
.hero-logo-img {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0.5rem auto 1.25rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(255,200,0,0.15));
}

.footer-logo-img {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 0.75rem;
  object-fit: contain;
  opacity: 0.85;
}

/* Logo LCP como TEXTO (fallback mientras Marcelo trae el original) */
.hero-logo-txt-block {
  text-align: center;
  padding: 1rem 1rem 1.25rem;
  border-bottom: 1px solid var(--gris-borde);
  margin-bottom: 1.5rem;
}

.hero-logo-marca {
  font-family: 'Anton', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.15em;
  color: var(--blanco);
  line-height: 1;
}

.hero-logo-sub {
  font-family: 'Anton', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: var(--gris-texto);
  margin-top: 0.5rem;
}

.footer-marca-logo {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  color: var(--blanco);
  margin-bottom: 0.35rem;
}

.hero-flyer-img {
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra);
  margin: 1rem 0 1.5rem;
  border: 2px solid var(--gris-borde);
}

.hero-titulo {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 1rem 0 0.5rem;
}

.hero-titulo .amarillo { display: block; }

.hero-sub {
  color: var(--gris-texto);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.hero-precio-tag {
  display: inline-block;
  background: var(--amarillo);
  color: var(--negro);
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 20px rgba(255, 200, 0, .3);
  margin-bottom: 1.5rem;
}

.hero-precio-tag small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 0.15rem;
}

/* Contador de cupo */
.cupo-block {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.cupo-numeros {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.cupo-restantes {
  font-family: 'Anton', sans-serif;
  font-size: 3rem;
  color: var(--amarillo);
  line-height: 1;
}

.cupo-de {
  font-size: 0.85rem;
  color: var(--gris-texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cupo-total {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  color: var(--blanco);
}

.cupo-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.progreso {
  height: 8px;
  background: var(--gris-borde);
  border-radius: 999px;
  overflow: hidden;
}

.progreso-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--naranja), var(--rojo-brasa));
  transition: width .4s ease;
  border-radius: 999px;
}

.cupo-agotado {
  color: var(--rojo-brasa);
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

/* Tagline */
.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Anton', sans-serif;
  color: var(--blanco);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin: 1.5rem 0;
}

.tagline .star {
  color: var(--rojo-brasa);
  font-size: 0.7rem;
}

/* Info evento */
.info-evento {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  text-align: left;
}

.info-evento-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gris-borde);
  text-decoration: none;
  color: inherit;
}

.info-evento-row:last-child { border-bottom: none; }

/* Dirección clickable → Google Maps */
.info-evento-link {
  cursor: pointer;
  transition: background 0.15s, padding 0.15s;
  border-radius: 8px;
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  position: relative;
}

.info-evento-link:hover, .info-evento-link:active {
  background: rgba(255, 200, 0, 0.08);
}

.info-evento-link .info-evento-val {
  color: var(--amarillo);
}

.info-evento-arrow {
  margin-left: auto;
  color: var(--amarillo);
  font-size: 1.2rem;
  align-self: center;
  flex-shrink: 0;
}

.info-evento-icono {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.info-evento-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
  text-transform: uppercase;
}

.info-evento-val {
  color: var(--blanco);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ================================================================
   BOTONES
   ================================================================ */
.btn {
  display: inline-block;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .1s, box-shadow .2s, background .2s;
  text-align: center;
  text-decoration: none;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-block { display: block; width: 100%; }

.btn-grande {
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.08em;
}

.btn-primary {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 6px 24px rgba(255, 200, 0, .35);
}

.btn-primary:hover { background: var(--amarillo-oscuro); }

.btn-danger, .btn-rojo {
  background: var(--rojo-brasa);
  color: var(--blanco);
  box-shadow: 0 6px 24px rgba(255, 77, 46, .35);
}

.btn-wa {
  background: var(--wa);
  color: var(--blanco);
  box-shadow: 0 6px 24px rgba(37, 211, 102, .3);
}

.btn-wa:hover { background: #1fb757; }

.btn-secondary {
  background: transparent;
  color: var(--blanco);
  border: 2px solid var(--gris-borde);
}

.btn-secondary:hover { border-color: var(--amarillo); color: var(--amarillo); }

.btn-link {
  background: transparent;
  color: var(--gris-texto);
  padding: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.btn-link:hover { color: var(--blanco); }

.btn-pulse {
  animation: pulse-btn 1.6s ease-in-out infinite;
}

@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 6px 24px rgba(255, 200, 0, .35); }
  50%      { box-shadow: 0 6px 28px rgba(255, 200, 0, .6), 0 0 0 8px rgba(255, 200, 0, .1); }
}

.btn-copy-ok {
  background: var(--verde) !important;
  color: var(--blanco) !important;
}

/* ================================================================
   PANTALLA FORMULARIO (pedido)
   ================================================================ */
.form-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--blanco);
  text-transform: uppercase;
  text-align: center;
  margin: 1rem 0 0.5rem;
}

.form-titulo .amarillo { display: block; font-size: 2.6rem; }

.form-sub {
  color: var(--gris-texto);
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Galería VIEJA neutralizada — el CSS nuevo (arriba) maneja .galeria/.galeria-grid/.galeria-item con object-fit:cover */
.galeria-legacy-noop-XYZ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}
.galeria-legacy-noop-XYZ img {
  border-radius: 0;
  object-fit: cover;
  width: 100%;
}

/* Selector cantidad */
.cantidad-block {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.cantidad-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.cantidad-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cantidad-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--amarillo);
  background: transparent;
  color: var(--amarillo);
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all .15s;
}

.cantidad-btn:hover { background: var(--amarillo); color: var(--negro); }
.cantidad-btn:disabled { opacity: .3; cursor: not-allowed; }

.cantidad-num {
  font-family: 'Anton', sans-serif;
  font-size: 3rem;
  color: var(--amarillo);
  min-width: 60px;
  text-align: center;
  line-height: 1;
}

.cantidad-info {
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.9rem;
}

.cantidad-info strong {
  color: var(--blanco);
  display: block;
  font-size: 1.1rem;
  margin-top: 0.25rem;
}

.precio-calculado {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-borde);
}

.precio-total {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  color: var(--amarillo);
  line-height: 1;
}

.precio-anticipo {
  color: var(--gris-texto);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.precio-anticipo strong { color: var(--rojo-brasa); }

/* Selector de slots */
.slots-block {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.slots-titulo {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.slots-desc {
  font-size: 0.8rem;
  color: var(--gris-texto);
  margin-bottom: 1rem;
}

.slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.slot {
  padding: 0.75rem 0.25rem;
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius);
  background: var(--negro-suave);
  color: var(--blanco);
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  position: relative;
}

.slot:hover:not(.slot-lleno):not(.slot-selected) {
  border-color: var(--amarillo);
  color: var(--amarillo);
}

.slot-cupo {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-texto);
  margin-top: 0.2rem;
  text-transform: none;
}

.slot-selected {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--negro);
}

.slot-selected .slot-cupo { color: var(--negro); }

.slot-lleno {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}

.slot-lleno .slot-cupo::before { content: "AGOTADO"; }

/* Inputs del formulario */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--negro-suave);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius);
  color: var(--blanco);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .15s;
}

.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--amarillo);
}

.form-group input::placeholder { color: #555; }

.form-error {
  color: var(--rojo-brasa);
  font-size: 0.9rem;
  padding: 0.5rem 0;
  min-height: 1.5rem;
}

/* ================================================================
   PANTALLA CONFIRMACIÓN (pago)
   ================================================================ */
.confirm-header {
  text-align: center;
  padding: 2rem 1rem 1rem;
}

.confirm-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  font-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 8px 32px rgba(34, 197, 94, .4);
}

.confirm-folio {
  display: inline-block;
  background: var(--amarillo);
  color: var(--negro);
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.confirm-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.confirm-sub {
  color: var(--gris-texto);
  margin-bottom: 1.5rem;
}

/* Bloque CTA WhatsApp — visible sin scroll después de confirmar */
.cta-wa-block {
  background: linear-gradient(180deg, rgba(37, 211, 102, 0.08), rgba(37, 211, 102, 0));
  border: 2px solid rgba(37, 211, 102, 0.3);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  margin-bottom: 1.25rem;
}

.cta-wa-titulo {
  font-family: 'Anton', sans-serif;
  color: var(--wa);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.cta-wa-pasos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cta-wa-paso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--blanco);
  font-size: 0.95rem;
  font-weight: 500;
}

.cta-wa-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--negro);
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
}

.cta-wa-nota {
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.8rem;
  margin-top: 0.75rem;
  line-height: 1.4;
}

/* Card de datos bancarios */
.pago-card {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1rem 0;
}

.pago-card-header {
  background: var(--amarillo);
  color: var(--negro);
  padding: 0.75rem 1rem;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.pago-card-body {
  padding: 1rem;
}

.pago-card-row {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gris-borde);
  font-size: 0.9rem;
}

.pago-card-row:last-child { border-bottom: none; }

.pago-card-lbl {
  color: var(--gris-texto);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pago-card-val {
  color: var(--blanco);
  font-weight: 600;
  text-align: right;
}

/* Renglones copiables */
.copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.copy-row-info { flex: 1; min-width: 0; }

.copy-row-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.copy-row-val {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  color: var(--blanco);
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-copy {
  background: var(--amarillo);
  color: var(--negro);
  border: none;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  flex-shrink: 0;
}

/* Pedido resumen */
.pedido-resumen {
  background: var(--gris-card);
  border: 2px solid var(--amarillo);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1rem 0;
}

.pedido-resumen-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--gris-borde);
}

.pedido-resumen-row:last-child { border-bottom: none; padding-top: 0.75rem; }

.pedido-resumen-lbl { color: var(--gris-texto); font-size: 0.9rem; }
.pedido-resumen-val { color: var(--blanco); font-weight: 600; }

.pedido-resumen-total {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  color: var(--amarillo) !important;
}

.pedido-resumen-anticipo {
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  color: var(--rojo-brasa) !important;
}

/* Instrucciones paso a paso */
.pasos {
  counter-reset: pasos;
  margin: 1rem 0;
}

.paso {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gris-borde);
}

.paso:last-child { border-bottom: none; }

.paso-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
}

.paso-cont { flex: 1; }

.paso-titulo {
  font-weight: 700;
  color: var(--blanco);
  margin-bottom: 0.15rem;
}

.paso-desc {
  color: var(--gris-texto);
  font-size: 0.9rem;
}

/* Bloque comprobante */
.comprobante-box {
  background: var(--negro-suave);
  border: 2px dashed var(--gris-borde);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 1rem 0;
}

.comprobante-header {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.comprobante-header small {
  display: block;
  font-family: 'Inter', sans-serif;
  color: var(--gris-texto);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 0.75rem;
  text-transform: none;
  margin-top: 0.15rem;
}

.comprobante-texto {
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 0.85rem;
  color: var(--gris-texto);
  background: var(--negro);
  padding: 0.75rem;
  border-radius: 8px;
  line-height: 1.5;
  max-height: 220px;
  overflow-y: auto;
}

/* ================================================================
   PANTALLA GRACIAS (cierre emocional)
   ================================================================ */
.gracias-screen {
  min-height: 100vh;
  background: var(--negro);
}

.gracias-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 45vh;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 1.5rem 1.5rem;
}

.gracias-check-big {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  font-size: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(34, 197, 94, .5), 0 0 0 6px rgba(34, 197, 94, .15);
  margin-bottom: 1rem;
  animation: gracias-check-in 0.5s ease-out;
}

@keyframes gracias-check-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.gracias-folio-pill {
  background: var(--amarillo);
  color: var(--negro);
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.gracias-body {
  padding: 2rem 1.5rem 3rem;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.gracias-titulo {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.2rem, 8vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 1rem;
}

.gracias-sub {
  color: var(--gris-texto);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.gracias-sub strong {
  color: var(--blanco);
}

/* Bloque día/hora — el ANCLA visual de la pantalla */
.gracias-fecha-block {
  background: var(--gris-card);
  border: 2px solid var(--amarillo);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(255, 200, 0, .15);
}

.gracias-fecha-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.gracias-fecha-dia {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  color: var(--blanco);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.gracias-fecha-hora {
  font-family: 'Anton', sans-serif;
  font-size: 2.5rem;
  color: var(--blanco);
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Dirección clickable */
.gracias-direccion-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  text-decoration: none;
  text-align: left;
  transition: background .15s;
}

.gracias-direccion-card:hover, .gracias-direccion-card:active {
  background: rgba(255, 200, 0, 0.08);
}

.gracias-dir-icono {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.gracias-dir-info { flex: 1; }

.gracias-dir-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.gracias-dir-val {
  color: var(--amarillo);
  font-weight: 600;
  font-size: 0.95rem;
}

.gracias-dir-arrow {
  font-size: 1.3rem;
  color: var(--amarillo);
  flex-shrink: 0;
}

/* Recordatorio efectivo */
.gracias-recordatorio {
  background: rgba(255, 122, 0, 0.1);
  border: 1px solid rgba(255, 122, 0, 0.3);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  color: var(--blanco);
  font-size: 0.95rem;
  margin-bottom: 2rem;
  text-align: left;
}

.gracias-recordatorio strong {
  color: var(--naranja);
}

/* Firma emocional */
.gracias-firma {
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  color: var(--blanco);
  letter-spacing: 0.05em;
  margin: 2rem 0 1rem;
  line-height: 1.4;
}

.gracias-firma-flame {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Divider tagline */
.gracias-divider-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Anton', sans-serif;
  color: var(--gris-texto);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 1.5rem 0 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--gris-borde);
  border-bottom: 1px solid var(--gris-borde);
}

.gracias-divider-marca .star {
  color: var(--rojo-brasa);
  font-size: 0.6rem;
}

/* ================================================================
   PANTALLA CERRADO
   ================================================================ */
.cerrado-box {
  text-align: center;
  padding: 3rem 1.5rem;
}

.cerrado-emoji { font-size: 4rem; margin-bottom: 1rem; }

.cerrado-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  color: var(--rojo-brasa);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* ================================================================
   FOOTER (marca)
   ================================================================ */
.footer-marca {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--gris-texto);
  font-size: 0.8rem;
}

.footer-marca-logo {
  font-family: 'Anton', sans-serif;
  color: var(--blanco);
  letter-spacing: 0.15em;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.footer-marca-logo .amarillo { color: var(--amarillo); }

/* ================================================================
   ADMIN PANEL
   ================================================================ */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gris-borde);
}

.admin-header h2 {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login-box { max-width: 400px; margin: 4rem auto; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.kpi {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}

.kpi-num {
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  color: var(--amarillo);
  line-height: 1;
}

.kpi-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-top: 0.4rem;
}

.kpi-ok .kpi-num { color: var(--verde); }
.kpi-warn .kpi-num { color: var(--naranja); }
.kpi-danger .kpi-num { color: var(--rojo-brasa); }

.acciones-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.acciones-row .btn { padding: 0.7rem 1rem; font-size: 0.85rem; }

.tabla-scroll { overflow-x: auto; }

table.admin {
  width: 100%;
  border-collapse: collapse;
  color: var(--blanco);
  font-size: 0.9rem;
}

table.admin th, table.admin td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--gris-borde);
  text-align: left;
  vertical-align: middle;
}

table.admin th {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  background: var(--negro-suave);
  position: sticky;
  top: 0;
}

table.admin tr:hover { background: var(--negro-suave); }

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge.pendiente         { background: rgba(255,122,0,.15);  color: var(--naranja); }
.badge.anticipo_recibido { background: rgba(255,200,0,.15);  color: var(--amarillo); }
.badge.pagado_completo   { background: rgba(34,197,94,.15);  color: var(--verde); }
.badge.cancelado         { background: rgba(230,57,70,.15);  color: var(--rojo); }
.badge.entregado         { background: rgba(34,197,94,.15);  color: var(--verde); }
.badge.no_recogido       { background: rgba(230,57,70,.15);  color: var(--rojo); }

.btn-mini {
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0.15rem;
  text-decoration: none;
  display: inline-block;
}

.btn-mini-ok  { background: var(--verde); color: var(--blanco); }
.btn-mini-x   { background: transparent; color: var(--rojo-brasa); border: 1px solid var(--rojo-brasa); }
.btn-mini-wa  { background: var(--wa); color: var(--blanco); }

.ok-msg { color: var(--verde); font-size: 0.85rem; margin-left: 0.5rem; }

.slots-admin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.slot-admin {
  background: var(--negro-suave);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
}

.slot-admin-hora {
  font-family: 'Anton', sans-serif;
  color: var(--blanco);
  font-size: 1rem;
}

.slot-admin-cnt {
  color: var(--gris-texto);
  font-size: 0.75rem;
}

.slot-admin.lleno .slot-admin-hora { color: var(--rojo-brasa); }
.slot-admin.parcial .slot-admin-hora { color: var(--naranja); }
.slot-admin.vacio .slot-admin-hora { color: var(--verde); }

/* ================================================================
   SELECTOR DE SABOR (2 sabores: Tajín + BBQ)
   ================================================================ */
.sabor-block {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.sabor-titulo {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.sabor-desc {
  font-size: 0.8rem;
  color: var(--gris-texto);
  margin-bottom: 1rem;
}

.sabor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.sabor-card {
  --sabor-color: var(--amarillo);
  background: var(--negro-suave);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .12s, border-color .15s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sabor-card:hover:not(.sabor-card-off):not(.sabor-card-selected) {
  border-color: var(--sabor-color);
  transform: translateY(-2px);
}

.sabor-card-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.sabor-card-body {
  padding: 0.75rem;
  text-align: center;
  border-top: 2px solid transparent;
  transition: border-color .15s;
}

.sabor-card-nombre {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--blanco);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.sabor-card-tagline {
  color: var(--gris-texto);
  font-size: 0.75rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  min-height: 2.4em;
}

/* Selector de cantidad integrado en cada card de sabor (+/-) */
.sabor-cantidad-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.5rem 0 0.35rem;
}

.sabor-cantidad-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--sabor-color);
  background: transparent;
  color: var(--sabor-color);
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
  padding: 0;
}

.sabor-cantidad-btn:hover:not(:disabled) {
  background: var(--sabor-color);
  color: var(--negro);
}

.sabor-cantidad-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.sabor-cantidad-num {
  font-family: 'Anton', sans-serif;
  font-size: 1.9rem;
  color: var(--blanco);
  min-width: 40px;
  text-align: center;
  line-height: 1;
}

.sabor-cantidad-lbl {
  font-size: 0.7rem;
  color: var(--gris-texto);
  min-height: 1em;
  letter-spacing: 0.02em;
}

/* Estado seleccionado — usa color del sabor */
.sabor-card-selected {
  border-color: var(--sabor-color);
  box-shadow: 0 6px 20px rgba(255, 200, 0, .12);
}

.sabor-card-selected .sabor-card-body {
  border-top-color: var(--sabor-color);
}

.sabor-card-selected .sabor-cantidad-num {
  color: var(--sabor-color);
}

/* Estado desactivado (sabor apagado desde admin) */
.sabor-card-off {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.sabor-card-off-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--rojo-brasa);
  color: var(--blanco);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ================================================================
   Pills de sabor en admin (columna de la tabla)
   ================================================================ */
.sabor-pill {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blanco);
}

.sabor-pill-tajin {
  background: rgba(255, 77, 46, 0.2);
  color: var(--rojo-brasa);
  border: 1px solid rgba(255, 77, 46, 0.5);
}

.sabor-pill-bbq {
  background: rgba(255, 122, 0, 0.2);
  color: var(--naranja);
  border: 1px solid rgba(255, 122, 0, 0.5);
}

.sabor-pill-none {
  background: rgba(150, 150, 150, 0.15);
  color: var(--gris-texto);
  border: 1px dashed var(--gris-borde);
}

/* ================================================================
   KPIs por sabor (admin dashboard)
   ================================================================ */
.kpi-sabor-tajin {
  border-left: 4px solid var(--rojo-brasa);
}
.kpi-sabor-tajin .kpi-num {
  color: var(--rojo-brasa);
}

.kpi-sabor-bbq {
  border-left: 4px solid var(--naranja);
}
.kpi-sabor-bbq .kpi-num {
  color: var(--naranja);
}

/* ================================================================
   Toggles de sabor en admin (checkbox estilizado)
   ================================================================ */
.sabor-toggles {
  background: var(--negro-suave);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0.75rem 0 1rem;
}

.sabor-toggle-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.sabor-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  cursor: pointer;
  border-bottom: 1px solid var(--gris-borde);
}

.sabor-toggle:last-child { border-bottom: none; }

.sabor-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background: var(--gris-borde);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}

.sabor-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--blanco);
  border-radius: 50%;
  transition: transform .2s;
}

.sabor-toggle input[type="checkbox"]:checked {
  background: var(--verde);
}

.sabor-toggle input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.sabor-toggle-badge {
  font-family: 'Anton', sans-serif;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.sabor-toggle-tajin {
  background: rgba(255, 77, 46, 0.2);
  color: var(--rojo-brasa);
  border: 1px solid rgba(255, 77, 46, 0.5);
}

.sabor-toggle-bbq {
  background: rgba(255, 122, 0, 0.2);
  color: var(--naranja);
  border: 1px solid rgba(255, 122, 0, 0.5);
}

.sabor-toggle-desc {
  color: var(--gris-texto);
  font-size: 0.8rem;
  flex: 1;
}

/* ================================================================
   Filtro de evento en admin (dropdown para separar sábados)
   ================================================================ */
.filtro-evento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.filtro-evento-lbl {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

.filtro-evento-select {
  flex: 1;
  min-width: 200px;
  padding: 0.55rem 0.75rem;
  background: var(--negro-suave);
  border: 2px solid var(--gris-borde);
  border-radius: 8px;
  color: var(--blanco);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.filtro-evento-select:focus {
  outline: none;
  border-color: var(--amarillo);
}

/* ================================================================
   TESTIMONIOS de comensales (encuesta post-venta)
   ================================================================ */
.testimonios {
  margin: 2rem -1rem 1.5rem;  /* negativo para full-bleed en mobile */
  padding: 1.5rem 0 1rem;
  border-top: 1px solid var(--gris-borde);
  border-bottom: 1px solid var(--gris-borde);
  background: linear-gradient(180deg, rgba(255, 200, 0, 0.03), transparent);
}

.testimonios-header {
  padding: 0 1.25rem 1.25rem;
  text-align: center;
}

.testimonios-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--blanco);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.testimonios-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--gris-texto);
  font-size: 0.8rem;
}

.testimonios-rating {
  color: var(--amarillo);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
}

.testimonios-count {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Scroll horizontal con "snap" — cliente arrastra con el dedo */
.testimonios-scroll {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 1rem;
  padding: 0.5rem 1rem 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gris-borde) transparent;
}

.testimonios-scroll::-webkit-scrollbar {
  height: 6px;
}
.testimonios-scroll::-webkit-scrollbar-thumb {
  background: var(--gris-borde);
  border-radius: 999px;
}

.testimonio-card {
  flex: 0 0 82%;
  max-width: 320px;
  scroll-snap-align: start;
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  box-shadow: var(--sombra-suave);
}

.testimonio-estrellas {
  color: var(--amarillo);
  font-size: 1rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.65rem;
}

.testimonio-texto {
  color: var(--blanco);
  font-size: 0.95rem;
  line-height: 1.5;
  font-style: italic;
  flex: 1;
  margin-bottom: 0.85rem;
}

.testimonio-nombre {
  font-family: 'Anton', sans-serif;
  color: var(--rojo-brasa);
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  text-transform: uppercase;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--gris-borde);
}

.testimonios-hint {
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 1rem 0.5rem;
}

/* En pantallas más grandes (tablet+), cards más chicas para que se vean 2-3 a la vez */
@media (min-width: 520px) {
  .testimonio-card {
    flex: 0 0 300px;
  }
}

/* ================================================================
   Recordatorio de enviar comprobante (bloque tipo aviso, sin botón)
   ================================================================ */
.cta-wa-recordatorio {
  border: 2px dashed rgba(37, 211, 102, 0.4);
  background: linear-gradient(180deg, rgba(37, 211, 102, 0.06), rgba(37, 211, 102, 0));
  padding: 1.25rem 1.15rem;
}

.cta-wa-recordatorio .cta-wa-titulo {
  margin-bottom: 0.75rem;
}

/* ================================================================
   Resumen mini del pedido (dentro del sabor-block)
   ================================================================ */
.pedido-total-mini {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-borde);
  text-align: center;
}

.pedido-total-mini-empty {
  color: var(--gris-texto);
  font-size: 0.9rem;
  font-style: italic;
  padding: 0.5rem 0;
}

.pedido-total-mini-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--gris-texto);
  margin-bottom: 0.5rem;
}

.pedido-total-mini-line strong { color: var(--blanco); }

.pedido-total-mini-money {
  font-family: 'Anton', sans-serif;
  font-size: 2.2rem;
  color: var(--amarillo);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.pedido-total-mini-anticipo {
  color: var(--gris-texto);
  font-size: 0.85rem;
}

.pedido-total-mini-anticipo strong { color: var(--rojo-brasa); }

/* ================================================================
   Columna Detalle en admin (pills apilables si hay 2)
   ================================================================ */
.col-detalle {
  min-width: 180px;
}

.col-detalle .sabor-pill {
  margin: 0.1rem 0.15rem;
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 400px) {
  .hero-titulo { font-size: 2rem; }
  .form-titulo { font-size: 1.8rem; }
  .form-titulo .amarillo { font-size: 2.2rem; }
  .cantidad-num { font-size: 2.5rem; }
  .slots-grid { grid-template-columns: repeat(3, 1fr); }
  .sabor-card-nombre { font-size: 1.2rem; }
  .sabor-card-tagline { font-size: 0.7rem; }
  .sabor-cantidad-num { font-size: 1.6rem; }
  .sabor-cantidad-btn { width: 34px; height: 34px; font-size: 1.15rem; }
  .pedido-total-mini-money { font-size: 1.8rem; }
  #app { max-width: 100%; }
}

@media (max-width: 340px) {
  .slots-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   Contabilidad · Garage Gourmet
   Tabs de navegación entre "Ventas" y "Contabilidad"
   ================================================================ */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--gris-borde);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  background: transparent;
  color: var(--gris-texto);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.25rem;
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  border-radius: 0;
}

.tab-btn:hover {
  color: var(--blanco);
}

.tab-btn.active {
  color: var(--amarillo);
  border-bottom-color: var(--amarillo);
}

/* KPI variante "margen" — verde brillante para señalar la ganancia */
.kpi-margen .kpi-num {
  color: var(--verde);
}

.kpi-margen {
  border-color: var(--verde-oscuro);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15) inset;
}

/* Pills de categoría de insumo */
.cat-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--negro-suave);
  color: var(--gris-texto);
  border: 1px solid var(--gris-borde);
}

.cat-pill.cat-proteina    { background: rgba(255, 77, 46, 0.15); color: var(--rojo-brasa);   border-color: var(--rojo-brasa); }
.cat-pill.cat-marinada    { background: rgba(255, 200, 0, 0.15); color: var(--amarillo);     border-color: var(--amarillo-oscuro); }
.cat-pill.cat-combustible { background: rgba(255, 122, 0, 0.15); color: var(--naranja);      border-color: var(--naranja); }
.cat-pill.cat-empaque     { background: rgba(37, 211, 102, 0.15); color: var(--wa);          border-color: var(--wa); }
.cat-pill.cat-vegetal     { background: rgba(34, 197, 94, 0.15); color: var(--verde);        border-color: var(--verde); }
.cat-pill.cat-otro        { background: var(--negro-suave); color: var(--gris-texto); border-color: var(--gris-borde); }

/* Fila total en tabla de desglose */
.fila-total {
  background: var(--negro-suave);
  border-top: 2px solid var(--amarillo);
}

.fila-total td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Filas de insumos inactivos: opacidad menor */
.row-inactivo {
  opacity: 0.5;
}

/* Checkbox con label alineado */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: var(--blanco);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--amarillo);
  flex-shrink: 0;
}

/* Select de insumos estilizado como los demás inputs */
.ins-select {
  width: 100%;
  padding: 0.85rem;
  background: var(--negro-suave);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius);
  color: var(--blanco);
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

.ins-select:focus {
  outline: none;
  border-color: var(--amarillo);
}

/* Textarea de notas */
.section textarea {
  width: 100%;
  padding: 0.85rem;
  background: var(--negro-suave);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius);
  color: var(--blanco);
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  resize: vertical;
  min-height: 60px;
}

.section textarea:focus {
  outline: none;
  border-color: var(--amarillo);
}

/* Botón mini variante "editar" (azul suave del amarillo) */
.btn-mini-edit {
  background: var(--amarillo);
  color: var(--negro);
}

/* Responsive contabilidad */
@media (max-width: 500px) {
  .tab-btn {
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
  }
  .cat-pill {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
  }
}

/* ================================================================
   Contabilidad Fase 2 · Sub-tabs internos + categorías extras
   ================================================================ */

.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.35rem;
  background: var(--negro-suave);
  border-radius: var(--radius);
  border: 1px solid var(--gris-borde);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sub-tab-btn {
  background: transparent;
  color: var(--gris-texto);
  border: none;
  padding: 0.55rem 0.9rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sub-tab-btn:hover {
  color: var(--blanco);
  background: rgba(255, 200, 0, 0.08);
}

.sub-tab-btn.active {
  color: var(--negro);
  background: var(--amarillo);
  font-weight: 700;
}

/* Categorías de costos fijos (pills) */
.cat-pill.cat-fijo-energia      { background: rgba(255, 200, 0, 0.15); color: var(--amarillo);   border-color: var(--amarillo-oscuro); }
.cat-pill.cat-fijo-personal     { background: rgba(255, 77, 46, 0.15); color: var(--rojo-brasa); border-color: var(--rojo-brasa); }
.cat-pill.cat-fijo-depreciacion { background: rgba(180, 180, 180, 0.15); color: var(--gris-texto); border-color: var(--gris-borde); }
.cat-pill.cat-fijo-financiero   { background: rgba(37, 211, 102, 0.15); color: var(--wa);        border-color: var(--wa); }
.cat-pill.cat-fijo-otro         { background: var(--negro-suave); color: var(--gris-texto); border-color: var(--gris-borde); }

/* Títulos de recetas por sabor */
.receta-titulo-sabor-tajin { color: var(--rojo-brasa) !important; }
.receta-titulo-sabor-bbq   { color: var(--naranja)    !important; }

/* Celdas de utilidad neta (verde ok / rojo malo) */
.col-ok  { color: var(--verde); }
.col-bad { color: var(--rojo-brasa); }

/* Input tipo date estilizado como los demás */
input[type="date"] {
  width: 100%;
  padding: 0.85rem;
  background: var(--negro-suave);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius);
  color: var(--blanco);
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  color-scheme: dark;
}

input[type="date"]:focus {
  outline: none;
  border-color: var(--amarillo);
}

/* Fix responsive sub-tabs en pantallas chicas */
@media (max-width: 500px) {
  .sub-tab-btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
  }
}

/* ============================================================
   BADGE DE FECHA EN HERO — grita cuándo es la próxima venta
   Aparece entre el flyer y el título MUSLO DE POLLO AHUMADO
   ============================================================ */
.hero-fecha-badge {
  margin: 1rem auto 1.25rem;
  padding: 0.9rem 1.5rem;
  max-width: 460px;
  background: linear-gradient(135deg, var(--rojo-brasa) 0%, var(--naranja) 100%);
  border: 3px solid var(--amarillo);
  border-radius: 14px;
  text-align: center;
  color: var(--blanco);
  box-shadow: 0 6px 24px rgba(255, 77, 46, 0.35), 0 0 0 4px rgba(255, 200, 0, 0.08);
  animation: badgePulse 2.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.hero-fecha-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: badgeShine 3.5s ease-in-out infinite;
}

.hero-fecha-badge-lbl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 0.25rem;
  position: relative;
  z-index: 1;
}

.hero-fecha-badge-dia {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--blanco);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  position: relative;
  z-index: 1;
}

.hero-fecha-badge-hora {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  margin-top: 0.3rem;
  position: relative;
  z-index: 1;
}

/* Variante cerrada: menos urgencia, sin animación */
.hero-fecha-badge-cerrado {
  background: linear-gradient(135deg, #444 0%, #222 100%);
  border-color: var(--gris-texto, #888);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: none;
}
.hero-fecha-badge-cerrado::before {
  display: none;
}
.hero-fecha-badge-cerrado .hero-fecha-badge-lbl {
  color: var(--gris-texto, #aaa);
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(255, 77, 46, 0.35), 0 0 0 4px rgba(255, 200, 0, 0.08);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 32px rgba(255, 77, 46, 0.55), 0 0 0 6px rgba(255, 200, 0, 0.15);
    transform: scale(1.015);
  }
}

@keyframes badgeShine {
  0%, 70%, 100% { transform: translateX(-100%); }
  85% { transform: translateX(100%); }
}

@media (max-width: 500px) {
  .hero-fecha-badge {
    padding: 0.75rem 1rem;
    margin: 0.85rem auto 1rem;
  }
  .hero-fecha-badge-dia {
    font-size: 1.75rem;
  }
  .hero-fecha-badge-lbl {
    font-size: 0.78rem;
  }
  .hero-fecha-badge-hora {
    font-size: 0.82rem;
  }
}

/* ============================================================
   FASE 5E · Urgencia ética · Countdown + Pedidos recientes + Barra coloreada
   ============================================================ */

/* Barra de cupo con colores según nivel de urgencia */
.progreso-medio .progreso-fill-medio {
  background: linear-gradient(90deg, var(--amarillo) 0%, var(--naranja) 100%) !important;
}
.progreso-urgente .progreso-fill-urgente {
  background: linear-gradient(90deg, var(--naranja) 0%, var(--rojo-brasa) 100%) !important;
  animation: pulseBar 1.4s ease-in-out infinite;
}

@keyframes pulseBar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.cupo-mensaje-urgencia {
  margin-top: 0.55rem;
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-align: center;
}

.cupo-mensaje-medio {
  color: var(--amarillo);
}

.cupo-mensaje-urgente {
  color: var(--rojo-brasa);
  animation: shakeMsg 0.6s ease-in-out infinite alternate;
}

@keyframes shakeMsg {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

/* Countdown al cierre de pre-venta */
.countdown-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 200, 0, 0.06);
  border: 2px solid rgba(255, 200, 0, 0.35);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 1rem auto;
  max-width: 460px;
  transition: all 0.25s ease;
}

.countdown-icono {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.countdown-info {
  flex: 1;
  min-width: 0;
}

.countdown-lbl {
  color: var(--amarillo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.countdown-lapso {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 1.55rem;
  color: var(--blanco);
  letter-spacing: 0.03em;
  line-height: 1;
}

.countdown-urgente {
  background: rgba(255, 77, 46, 0.12);
  border-color: var(--rojo-brasa);
  box-shadow: 0 4px 18px rgba(255, 77, 46, 0.28);
  animation: pulseCountdown 1.5s ease-in-out infinite;
}

.countdown-urgente .countdown-lbl {
  color: var(--rojo-brasa);
}

.countdown-cerrado {
  background: rgba(80, 80, 80, 0.15);
  border-color: var(--gris-texto, #888);
  opacity: 0.75;
}
.countdown-cerrado .countdown-lbl,
.countdown-cerrado .countdown-lapso {
  color: var(--gris-texto, #888);
}

@keyframes pulseCountdown {
  0%, 100% { box-shadow: 0 4px 18px rgba(255, 77, 46, 0.28); }
  50%      { box-shadow: 0 6px 26px rgba(255, 77, 46, 0.55); }
}

/* Pedidos recientes (prueba social en vivo) */
.pedidos-recientes {
  background: rgba(140, 220, 100, 0.06);
  border: 1.5px solid rgba(140, 220, 100, 0.28);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 1rem auto;
  max-width: 460px;
}

.pedidos-recientes-titulo {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 0.95rem;
  color: #a9e881;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  text-align: center;
}

.pedido-reciente-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  color: var(--blanco);
  font-size: 0.88rem;
  border-bottom: 1px dashed rgba(140, 220, 100, 0.15);
  animation: fadeInReciente 0.4s ease-out;
}
.pedido-reciente-row:last-child { border-bottom: none; }

.pedido-reciente-nombre {
  color: #a9e881;
  flex: 0 0 auto;
}
.pedido-reciente-nombre strong { color: var(--blanco); }

.pedido-reciente-cant {
  flex: 1;
  color: var(--gris-texto);
  font-size: 0.82rem;
}

.pedido-reciente-tiempo {
  color: var(--gris-texto);
  font-size: 0.75rem;
  font-style: italic;
  flex-shrink: 0;
}

@keyframes fadeInReciente {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 500px) {
  .countdown-lapso { font-size: 1.35rem; }
  .countdown-icono { font-size: 1.5rem; }
  .cupo-mensaje-urgencia { font-size: 0.95rem; }
  .pedido-reciente-row {
    flex-wrap: wrap;
    font-size: 0.83rem;
  }
  .pedido-reciente-tiempo { width: 100%; text-align: right; }
}

/* ============================================================
   FASE 4 · Widget de sobrantes de sábado (admin)
   ============================================================ */
.sobrante-card {
  background: rgba(255, 200, 0, 0.04);
  border: 1px solid rgba(255, 200, 0, 0.2);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.sobrante-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(255, 200, 0, 0.15);
}

.sobrante-header strong {
  font-size: 1.05rem;
  color: var(--blanco);
}

.sobrante-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sobrante-badge-pendiente {
  background: rgba(255, 200, 0, 0.15);
  color: var(--amarillo);
  border: 1px solid rgba(255, 200, 0, 0.35);
}

.sobrante-badge-congelado {
  background: rgba(80, 180, 255, 0.15);
  color: #7ac9ff;
  border: 1px solid rgba(80, 180, 255, 0.4);
}

.sobrante-badge-consumo_familiar {
  background: rgba(140, 220, 100, 0.15);
  color: #a9e881;
  border: 1px solid rgba(140, 220, 100, 0.4);
}

.sobrante-badge-merma {
  background: rgba(255, 77, 46, 0.15);
  color: var(--rojo-brasa);
  border: 1px solid rgba(255, 77, 46, 0.4);
}

.sobrante-datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  color: var(--blanco);
  font-size: 0.92rem;
  line-height: 1.4;
}

.sobrante-datos .lbl {
  color: var(--gris-texto);
  display: inline-block;
  min-width: 88px;
}

.sobrante-acciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.btn-sob {
  padding: 0.55rem 0.5rem;
  background: transparent;
  border: 1.5px solid var(--gris-borde, #333);
  border-radius: 8px;
  color: var(--blanco);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sob:hover {
  border-color: var(--amarillo);
  color: var(--amarillo);
}

.btn-sob-active {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--negro);
}

.btn-sob-active:hover {
  color: var(--negro);
}

@media (max-width: 500px) {
  .sobrante-datos {
    font-size: 0.85rem;
  }
  .sobrante-acciones {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .btn-sob {
    padding: 0.65rem 0.5rem;
    font-size: 0.9rem;
  }
}

/* ============================================================
   FASE 5 · Widget de alertas de reposición
   ============================================================ */
.widget-alertas {
  background: linear-gradient(135deg, rgba(255,77,46,0.12) 0%, rgba(255,122,0,0.08) 100%);
  border: 2px solid var(--rojo-brasa);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 0.75rem 0 1.25rem;
  box-shadow: 0 4px 20px rgba(255, 77, 46, 0.18);
}

.widget-alertas-titulo {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 1.25rem;
  color: var(--rojo-brasa);
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

.widget-alertas-sub {
  color: var(--blanco);
  font-size: 0.9rem;
  margin: 0 0 0.85rem 0;
  line-height: 1.4;
}

.widget-alertas-lista {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.alerta-item {
  background: rgba(0,0,0,0.28);
  border-left: 4px solid var(--rojo-brasa);
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
}

.alerta-nombre {
  font-weight: 700;
  color: var(--amarillo);
  margin-bottom: 0.2rem;
}

.alerta-datos {
  color: var(--blanco);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* FASE 5C · Totales del widget de alertas ($ estimado a comprar) */
.widget-alertas-totales {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid var(--amarillo);
  border-radius: 8px;
}

.alerta-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--blanco);
  font-size: 0.95rem;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.alerta-total-proy {
  border-top: 1px dashed rgba(255, 200, 0, 0.25);
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  font-size: 0.88rem;
  opacity: 0.9;
}

/* FASE 5F · Botones Copiar / WhatsApp de la lista de compras */
.lista-compras-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.btn-lista-compras {
  padding: 0.75rem 0.5rem;
  background: transparent;
  border: 2px solid var(--amarillo);
  color: var(--amarillo);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}

.btn-lista-compras:hover {
  background: var(--amarillo);
  color: var(--negro);
}

.btn-lista-wa {
  border-color: var(--wa, #25D366);
  color: var(--wa, #25D366);
}

.btn-lista-wa:hover {
  background: var(--wa, #25D366);
  color: var(--blanco);
  border-color: var(--wa, #25D366);
}

.btn-lista-ok {
  background: #6fdc8c !important;
  border-color: #6fdc8c !important;
  color: var(--negro) !important;
}

@media (max-width: 500px) {
  .lista-compras-acciones {
    grid-template-columns: 1fr;
  }
  .btn-lista-compras {
    font-size: 0.85rem;
  }
}

/* Botón mini para acciones en tablas */
.btn-mini {
  background: transparent;
  border: 1.5px solid var(--amarillo);
  color: var(--amarillo);
  padding: 0.35rem 0.65rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-mini:hover {
  background: var(--amarillo);
  color: var(--negro);
}

/* Columnas coloreadas para tablas */
.col-ok {
  color: #6fdc8c;
}

.col-warn {
  color: var(--amarillo);
}

.col-bad {
  color: var(--rojo-brasa);
}

@media (max-width: 500px) {
  .widget-alertas {
    padding: 0.85rem 0.75rem;
  }
  .widget-alertas-titulo {
    font-size: 1.1rem;
  }
  .alerta-datos {
    font-size: 0.8rem;
  }
}

/* ============================================================
   FASE 5 · Widget amarillo · Compra semanal recurrente
   ============================================================ */
.widget-semanal {
  background: linear-gradient(135deg, rgba(255,200,0,0.10) 0%, rgba(255,200,0,0.04) 100%);
  border: 2px solid var(--amarillo);
  border-radius: 12px;
  padding: 0.9rem 1.15rem;
  margin: 0.75rem 0 1.25rem;
  box-shadow: 0 3px 14px rgba(255, 200, 0, 0.12);
}

.widget-semanal-titulo {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 1.15rem;
  color: var(--amarillo);
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}

.widget-semanal-sub {
  color: var(--blanco);
  font-size: 0.85rem;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
  opacity: 0.85;
}

.widget-semanal-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.semanal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.28);
  border-left: 4px solid var(--amarillo);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  color: var(--blanco);
  font-size: 0.92rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.semanal-nombre {
  color: var(--blanco);
}

.semanal-cant {
  color: var(--gris-texto);
  font-size: 0.88rem;
}

.semanal-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.7rem;
  margin-top: 0.35rem;
  border-top: 1px dashed rgba(255,200,0,0.25);
  color: var(--blanco);
}

@media (max-width: 500px) {
  .widget-semanal {
    padding: 0.75rem 0.75rem;
  }
  .widget-semanal-titulo {
    font-size: 1rem;
  }
  .semanal-item {
    font-size: 0.85rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}

/* ================================================================
   FASE 5G · Mejoras UX post-análisis (v19)
   Fixes: C1 (orden confirmación), C2 (validación WhatsApp), N1 (copy cupo),
   M1 (CTA sticky), M2 (testimonios avatar), M3 (autofill), M4 (fotos),
   N2 (breadcrumb checkout)
   ================================================================ */

/* --- C2 · Validación WhatsApp: hint bajo el input --- */
.form-hint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--gris-texto);
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}
.form-hint-warn { color: var(--naranja); }
.form-hint-ok   { color: var(--wa); font-weight: 600; }

/* --- N1 · Mensaje "cupo recién abierto" (verde suave) --- */
.cupo-mensaje-normal {
  color: var(--wa);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.6rem;
  text-align: center;
  letter-spacing: 0.02em;
}

/* --- M4 · Franja de fotos apetitosas del producto --- */
.fotos-producto {
  margin: 2.5rem -1rem 2rem;
  padding: 1.75rem 0 1.25rem;
  background: linear-gradient(180deg, rgba(255,77,46,0.04), transparent 70%);
  border-top: 1px solid var(--gris-borde);
  border-bottom: 1px solid var(--gris-borde);
}
.fotos-producto-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 1.15rem;
  padding: 0 1rem;
}
.fotos-producto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0 1rem;
}
.fotos-producto-fig {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-suave);
  transition: transform 0.2s ease;
}
.fotos-producto-fig:hover { transform: translateY(-2px); }
.fotos-producto-fig img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.fotos-producto-fig figcaption {
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  color: var(--amarillo);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media (max-width: 400px) {
  .fotos-producto-fig img { height: 140px; }
  .fotos-producto-fig figcaption { font-size: 0.72rem; padding: 0.4rem 0.5rem; }
}

/* --- M2 · Testimonios con avatar + fecha (rediseño de la card) --- */
.testimonio-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--gris-borde);
}
.testimonio-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.testimonio-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testimonio-nombre-hdr {
  font-family: 'Anton', sans-serif;
  color: var(--blanco);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonio-fecha {
  color: var(--gris-texto);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.testimonio-estrellas-inline {
  color: var(--amarillo);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.testimonio-verificado {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: help;
}
/* Arregla el corte del último card en el carrusel horizontal */
.testimonios-scroll {
  padding-right: 1.5rem !important;
  scroll-padding-inline-end: 1.5rem;
}

/* --- M3 · Bienvenida cliente recurrente + botón cambiar --- */
.cliente-recurrente-bienvenida {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(255,200,0,0.08), rgba(255,200,0,0.02));
  border: 1px solid rgba(255,200,0,0.25);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  color: var(--blanco);
  flex-wrap: wrap;
}
.cliente-recurrente-bienvenida strong {
  color: var(--amarillo);
}
.btn-link-inline {
  background: none;
  border: none;
  color: var(--gris-texto);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
}
.btn-link-inline:hover { color: var(--amarillo); }

/* --- M1 · CTA sticky flotante (abajo, aparece al scroll) --- */
.cta-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.85) 20%, rgba(10,10,10,0.98) 100%);
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.cta-sticky.cta-sticky-show {
  transform: translateY(0);
  pointer-events: auto;
}
.cta-sticky-btn {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--amarillo) 0%, var(--amarillo-oscuro) 100%);
  color: var(--negro);
  border: none;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,200,0,0.35), 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cta-sticky-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(255,200,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
}
.cta-sticky-btn:active {
  transform: translateY(0);
}
.cta-sticky-icon {
  font-size: 1.4rem;
  flex: 0 0 auto;
  line-height: 1;
}
.cta-sticky-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  gap: 0.15rem;
}
.cta-sticky-txt strong {
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.cta-sticky-txt small {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(0,0,0,0.75);
  text-transform: none;
}
.cta-sticky-arrow {
  font-size: 1.3rem;
  flex: 0 0 auto;
  font-weight: 700;
}
@media (max-width: 400px) {
  .cta-sticky-btn {
    padding: 0.75rem 0.85rem;
    font-size: 0.95rem;
    gap: 0.5rem;
  }
  .cta-sticky-icon { font-size: 1.2rem; }
  .cta-sticky-txt strong { font-size: 0.92rem; }
  .cta-sticky-txt small { font-size: 0.65rem; }
}

/* --- N2 · Breadcrumb del checkout (Sabores › Hora › Datos) --- */
.checkout-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  margin: 0.5rem 0 1.25rem;
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.checkout-crumbs::-webkit-scrollbar { display: none; }
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}
.crumb-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: 'Anton', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}
.crumb-lbl { font-family: 'Inter', sans-serif; }
.crumb-pending {
  color: var(--gris-texto);
  opacity: 0.55;
}
.crumb-pending .crumb-num {
  background: var(--gris-borde);
  color: var(--gris-texto);
}
.crumb-current {
  color: var(--negro);
  background: var(--amarillo);
  box-shadow: 0 2px 12px rgba(255,200,0,0.35);
}
.crumb-current .crumb-num {
  background: var(--negro);
  color: var(--amarillo);
}
.crumb-done {
  color: var(--wa);
  background: rgba(37,211,102,0.12);
  border: 1px solid rgba(37,211,102,0.35);
}
.crumb-done .crumb-num {
  background: var(--wa);
  color: #fff;
}
.crumb-sep {
  color: var(--gris-borde);
  font-size: 1.2rem;
  flex: 0 0 auto;
  line-height: 1;
  padding: 0 0.1rem;
}
@media (max-width: 400px) {
  .checkout-crumbs {
    gap: 0.25rem;
    padding: 0.65rem 0.4rem;
  }
  .crumb {
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
    gap: 0.3rem;
  }
  .crumb-num {
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
  }
  .crumb-sep { font-size: 1rem; }
}

/* --- C1 · Bloque PASO 2 verde (WhatsApp reordenado) --- */
.paso-2-wa h3 {
  color: var(--wa) !important;
}
.paso-2-wa .btn-wa {
  margin-top: 0.5rem;
}

/* ================================================================
   FASE 6 · v20
   N3 · Tracker de pedido | N4 · Sábados futuros
   ================================================================ */

/* --- N4 · Selector de sábado en la vista pública --- */
.sabado-selector {
  margin: 0.5rem auto 1.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255,200,0,0.06), rgba(255,77,46,0.04));
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  max-width: 520px;
}
.sabado-selector-lbl {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.sabado-selector-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.sabado-pill {
  background: var(--gris-card);
  border: 2px solid var(--gris-borde);
  color: var(--blanco);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 110px;
  transition: all 0.2s ease;
}
.sabado-pill:hover {
  border-color: var(--amarillo);
  transform: translateY(-1px);
}
.sabado-pill-active {
  background: linear-gradient(135deg, var(--amarillo) 0%, var(--amarillo-oscuro) 100%);
  border-color: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 4px 16px rgba(255,200,0,0.35);
}
.sabado-pill-active:hover { transform: translateY(-1px); }
.sabado-pill-agotado {
  opacity: 0.6;
  border-color: var(--rojo);
}
.sabado-pill-agotado.sabado-pill-active { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.sabado-pill-dia {
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  line-height: 1;
}
.sabado-pill-cupo {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.sabado-pill-active .sabado-pill-cupo { opacity: 0.75; color: rgba(0,0,0,0.75); }

/* --- N3 · Tracker de pedido (pantalla completa) --- */
.tracker-screen {
  min-height: 100vh;
  padding: 1rem 0 2rem;
}
.tracker-loading {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--gris-texto);
}
.tracker-spinner {
  font-size: 3rem;
  animation: tracker-spin 2s linear infinite;
  display: inline-block;
}
@keyframes tracker-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.tracker-notfound {
  text-align: center;
  padding: 3rem 1rem;
}
.tracker-notfound-icon { font-size: 4rem; margin-bottom: 0.5rem; }
.tracker-notfound h1 { color: var(--amarillo); font-family: 'Anton', sans-serif; letter-spacing: 0.03em; margin-bottom: 1rem; }

.tracker-header {
  text-align: center;
  padding: 1.5rem 0 2rem;
}
.tracker-folio-pill {
  display: inline-block;
  background: var(--amarillo);
  color: var(--negro);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(255,200,0,0.3);
}
.tracker-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 3rem;
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
@media (max-width: 400px) { .tracker-titulo { font-size: 2.3rem; } }

.tracker-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.tracker-status-icon { font-size: 1.15rem; }
.tracker-pill-waiting {
  background: rgba(243,156,18,0.15);
  border: 2px solid var(--naranja);
  color: var(--naranja);
}
.tracker-pill-ok {
  background: rgba(37,211,102,0.15);
  border: 2px solid var(--wa);
  color: var(--wa);
}
.tracker-pill-done {
  background: var(--wa);
  border: 2px solid var(--wa);
  color: #fff;
}
.tracker-pill-canceled {
  background: rgba(230,57,70,0.15);
  border: 2px solid var(--rojo);
  color: var(--rojo);
}
.tracker-pill-warning {
  background: rgba(255,200,0,0.15);
  border: 2px solid var(--amarillo);
  color: var(--amarillo);
}
.tracker-status-msg {
  color: var(--gris-texto);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
}

/* Timeline vertical (4 pasos) */
.tracker-timeline {
  margin: 2rem auto 2rem;
  max-width: 480px;
  padding: 1.5rem 1.25rem;
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
}
.tracker-step {
  display: flex;
  gap: 1rem;
  position: relative;
}
.tracker-step:last-child .tracker-step-body { padding-bottom: 0; }
.tracker-step-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}
.tracker-step-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  flex-shrink: 0;
  z-index: 2;
  transition: all 0.3s ease;
}
.tracker-step-line {
  width: 3px;
  flex: 1;
  min-height: 40px;
  background: var(--gris-borde);
  margin: 4px 0;
  border-radius: 2px;
}
.tracker-step-body {
  flex: 1;
  padding-bottom: 1.5rem;
  padding-top: 0.3rem;
}
.tracker-step-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--blanco);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}
.tracker-step-desc {
  font-size: 0.88rem;
  color: var(--gris-texto);
  line-height: 1.4;
}

/* Estados por paso */
.tracker-step-done .tracker-step-marker {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37,211,102,0.2);
}
.tracker-step-done .tracker-step-line { background: var(--wa); }
.tracker-step-done .tracker-step-titulo { color: var(--wa); }

.tracker-step-current .tracker-step-marker {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 0 0 4px rgba(255,200,0,0.25);
  animation: tracker-pulse 2s ease infinite;
}
.tracker-step-current .tracker-step-titulo { color: var(--amarillo); }
@keyframes tracker-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,200,0,0.25); }
  50% { box-shadow: 0 0 0 10px rgba(255,200,0,0.05); }
}

.tracker-step-pending .tracker-step-marker {
  background: var(--negro);
  color: var(--gris-texto);
  border: 2px solid var(--gris-borde);
}

.tracker-step-canceled .tracker-step-marker {
  background: var(--rojo);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(230,57,70,0.15);
}
.tracker-step-canceled .tracker-step-line { background: var(--rojo); }
.tracker-step-canceled .tracker-step-titulo,
.tracker-step-canceled .tracker-step-desc { color: var(--rojo); }

/* Detalle del pedido en tracker */
.tracker-detalle {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1rem 0;
}
.tracker-detalle-titulo {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.tracker-detalle-sabores {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--blanco);
}
.tracker-sabor-tajin { color: var(--rojo-brasa); font-weight: 700; }
.tracker-sabor-bbq { color: var(--naranja); font-weight: 700; }
.tracker-detalle-total {
  color: var(--gris-texto);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--gris-borde);
}
.tracker-detalle-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.tracker-detalle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  gap: 1rem;
}
.tracker-detalle-lbl {
  color: var(--gris-texto);
  font-size: 0.88rem;
}
.tracker-detalle-val {
  color: var(--blanco);
  font-weight: 600;
  text-align: right;
}
.tracker-detalle-money {
  color: var(--amarillo);
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.tracker-detalle-link {
  color: var(--amarillo) !important;
  text-decoration: none;
}
.tracker-detalle-link .tracker-detalle-val { color: var(--amarillo); }

.tracker-actualizado {
  margin: 1.5rem 0 1rem;
  padding: 0.75rem 1rem;
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.8rem;
  background: rgba(37,211,102,0.06);
  border: 1px dashed rgba(37,211,102,0.3);
  border-radius: 8px;
}

/* Link al tracker desde confirmación y gracias */
.tracker-link-btn {
  background: linear-gradient(135deg, rgba(37,211,102,0.1), rgba(37,211,102,0.03));
  border: 1px solid rgba(37,211,102,0.35);
  color: var(--wa);
}
.tracker-link-btn:hover {
  background: rgba(37,211,102,0.15);
  color: var(--wa);
}
.gracias-tracker-btn {
  margin-top: 1.5rem;
}
.gracias-tracker-hint {
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.78rem;
  margin: 0.4rem 0 1rem;
}

/* --- N4 · Admin sub-tab "Sábados" --- */
.sub-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sub-section-header .btn { flex-shrink: 0; }

.sabado-admin-resumen {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: var(--gris-card);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin-bottom: 1rem;
}
.sabado-admin-resumen-total { color: var(--amarillo); font-weight: 600; }
.sabado-admin-lista {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sabado-admin-card {
  background: var(--gris-card);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.sabado-admin-pasado { opacity: 0.5; border-left-color: var(--gris-borde); }
.sabado-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.sabado-admin-fecha {
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--blanco);
}
.sabado-badge {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sabado-badge-activo { background: rgba(37,211,102,0.2); color: var(--wa); }
.sabado-badge-inactivo { background: var(--gris-borde); color: var(--gris-texto); }
.sabado-badge-agotado { background: rgba(255,77,46,0.2); color: var(--rojo-brasa); }
.sabado-badge-pasado { background: var(--gris-borde); color: var(--gris-texto); }

.sabado-admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 500px) { .sabado-admin-stats { grid-template-columns: repeat(2, 1fr); } }
.sabado-admin-stat { display: flex; flex-direction: column; }
.sabado-admin-stat-lbl {
  font-size: 0.68rem;
  color: var(--gris-texto);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sabado-admin-stat-val {
  font-family: 'Anton', sans-serif;
  color: var(--blanco);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.stat-green { color: var(--wa); }
.stat-red { color: var(--rojo-brasa); }

.sabado-admin-progress {
  height: 8px;
  background: var(--gris-borde);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0 0.75rem;
}
.sabado-admin-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amarillo), var(--rojo-brasa));
  border-radius: 4px;
  transition: width 0.3s;
}
.sabado-admin-notas {
  padding: 0.5rem 0.7rem;
  background: rgba(255,200,0,0.05);
  border-left: 3px solid var(--amarillo);
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin-bottom: 0.75rem;
  border-radius: 4px;
}
.sabado-admin-acciones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.btn-sab-mini {
  background: var(--negro);
  border: 1px solid var(--gris-borde);
  color: var(--blanco);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  transition: all 0.15s;
}
.btn-sab-mini:hover { border-color: var(--amarillo); }
.btn-sab-danger { color: var(--rojo-brasa); }
.btn-sab-danger:hover { border-color: var(--rojo-brasa); background: rgba(255,77,46,0.1); }

/* Form row 2 columnas (para sub-tab Sábados) */
.form-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.form-group-half {
  flex: 1;
  min-width: 140px;
}


/* ============================================================
 * FASE 7 · Programa de fidelidad + CRM
 * ============================================================ */

/* --- Vista pública · Chip de bienvenida con historial --- */
.cliente-fidelidad-bienvenida {
  background: linear-gradient(135deg, rgba(255,200,0,0.10), rgba(255,77,46,0.08));
  border: 1px solid rgba(255,200,0,0.35);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.cfb-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.5rem; flex-wrap: wrap;
}
.cfb-hola { color: var(--blanco); font-size: 0.95rem; }
.cfb-hola strong { color: var(--amarillo); }
.cfb-stats {
  display: flex; gap: 0.85rem; flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.82rem; color: var(--gris-texto);
}
.cfb-stat strong { color: var(--blanco); font-weight: 700; }
.cfb-premio {
  margin-top: 0.8rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255,200,0,0.10);
  border: 1px solid var(--amarillo);
  border-radius: 8px;
  display: flex; gap: 0.7rem; align-items: flex-start;
}
.cfb-premio-emoji { font-size: 1.4rem; line-height: 1; }
.cfb-premio-text { flex: 1; }
.cfb-premio-text strong { display: block; color: var(--amarillo); font-size: 0.95rem; margin-bottom: 0.15rem; }
.cfb-premio-hint { display: block; color: var(--gris-texto); font-size: 0.82rem; }
.cfb-premio-on { display: block; color: #4ade80; font-size: 0.85rem; font-weight: 600; }

/* Descuento en resumen del pedido */
.pedido-total-mini-descuento {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--amarillo); font-size: 0.9rem;
  padding: 0.4rem 0;
  border-top: 1px dashed rgba(255,200,0,0.25);
  margin-top: 0.4rem;
}
.pedido-total-mini-descuento strong { font-weight: 800; }

/* Banner de nuevo premio desbloqueado en confirmación */
.premio-desbloqueado-banner {
  background: linear-gradient(135deg, #FFC800, #FF9500);
  color: #111;
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 1rem 0;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: 0 8px 30px rgba(255,200,0,0.3);
  animation: premio-pulse 1.6s ease-in-out;
}
.pdb-icon { font-size: 2.2rem; line-height: 1; }
.pdb-body { flex: 1; }
.pdb-title { font-family: 'Anton', sans-serif; font-size: 1.35rem; letter-spacing: 0.5px; line-height: 1.1; margin-bottom: 0.25rem; }
.pdb-copy { font-size: 0.95rem; font-weight: 600; }
.pdb-sub { font-size: 0.78rem; opacity: 0.75; margin-top: 0.25rem; }
@keyframes premio-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 rgba(255,200,0,0); }
  50% { transform: scale(1.02); box-shadow: 0 12px 40px rgba(255,200,0,0.5); }
  100% { transform: scale(1); box-shadow: 0 8px 30px rgba(255,200,0,0.3); }
}

/* --- Admin · Sub-vista Clientes --- */
.cli-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.cli-kpi {
  background: var(--gris-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.85rem 0.9rem;
  display: flex; flex-direction: column;
}
.cli-kpi-hi { border-color: var(--amarillo); background: rgba(255,200,0,0.06); }
.cli-kpi-num { font-family: 'Anton', sans-serif; font-size: 1.7rem; color: var(--blanco); line-height: 1; }
.cli-kpi-hi .cli-kpi-num { color: var(--amarillo); }
.cli-kpi-lbl { font-size: 0.72rem; color: var(--gris-texto); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 0.3rem; }

.cli-controles {
  display: flex; gap: 0.75rem; align-items: center; margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}
.cli-busq-input {
  flex: 1; min-width: 200px;
  background: var(--gris-card);
  color: var(--blanco);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
}
.cli-busq-input:focus { outline: none; border-color: var(--amarillo); }
.cli-filtros {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
}
.btn-sab-active {
  background: var(--amarillo);
  color: #111;
  border-color: var(--amarillo);
  font-weight: 700;
}

.cli-lista {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.cli-card {
  background: var(--gris-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.cli-card-open { border-color: var(--amarillo); }
.cli-card-main {
  display: grid;
  grid-template-columns: 1.5fr 2fr auto;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  align-items: center;
  cursor: pointer;
}
.cli-card-main:hover { background: rgba(255,255,255,0.02); }
.cli-card-nombre strong { display: block; color: var(--blanco); font-size: 0.95rem; }
.cli-card-tel { color: var(--gris-texto); font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; }
.cli-card-stats { display: flex; gap: 0.85rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--gris-texto); }
.cli-card-stats .cli-stat strong { color: var(--blanco); font-weight: 700; }
.cli-stat-money strong { color: var(--amarillo) !important; }
.cli-stat-fav { font-size: 0.78rem; }
.cli-card-badges {
  display: flex; gap: 0.4rem; align-items: center;
}
.cli-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.cli-badge-premio { background: rgba(255,200,0,0.2); color: var(--amarillo); border: 1px solid var(--amarillo); }
.cli-badge-progreso { background: rgba(255,255,255,0.06); color: var(--gris-texto); border: 1px solid rgba(255,255,255,0.15); }
.cli-badge-inactivo { background: rgba(255,77,46,0.15); color: var(--rojo-brasa); border: 1px solid var(--rojo-brasa); }
.cli-card-chev { color: var(--gris-texto); font-size: 0.75rem; margin-left: 0.35rem; }

.cli-card-detalle {
  padding: 1rem 1.15rem 1.25rem;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.cli-detalle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.cli-detalle-item {
  display: flex; flex-direction: column;
  padding: 0.55rem 0.7rem;
  background: var(--gris-card);
  border-radius: 6px;
}
.cli-detalle-lbl { font-size: 0.7rem; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.5px; }
.cli-detalle-val { color: var(--blanco); font-size: 0.88rem; margin-top: 0.15rem; }

.cli-notas-block { margin: 1rem 0; }
.cli-notas-lbl { display: block; color: var(--gris-texto); font-size: 0.8rem; margin-bottom: 0.4rem; }
.cli-notas-input {
  width: 100%; box-sizing: border-box;
  background: var(--gris-card);
  color: var(--blanco);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  resize: vertical;
  margin-bottom: 0.4rem;
}
.cli-notas-input:focus { outline: none; border-color: var(--amarillo); }

.cli-premios-block {
  margin: 1rem 0;
  padding: 0.85rem;
  background: var(--gris-card);
  border-radius: 8px;
  border: 1px solid rgba(255,200,0,0.15);
}
.cli-premios-header {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--blanco); font-size: 0.9rem; margin-bottom: 0.5rem;
}
.cli-premios-empty { color: var(--gris-texto); font-size: 0.8rem; font-weight: 400; }
.cli-premios-lista { display: flex; flex-direction: column; gap: 0.35rem; }
.cli-premios-subheader { color: var(--gris-texto); font-size: 0.72rem; margin: 0.5rem 0 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cli-premio-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  font-size: 0.82rem;
}
.cli-premio-disponible {
  background: rgba(255,200,0,0.08);
  color: var(--blanco);
  border: 1px solid rgba(255,200,0,0.35);
}
.cli-premio-usado {
  background: rgba(255,255,255,0.02);
  color: var(--gris-texto);
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0.7;
}
.cli-premio-expira { flex: 1; text-align: right; font-size: 0.75rem; opacity: 0.8; }
.cli-premios-manual {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px dashed rgba(255,255,255,0.08);
  font-size: 0.78rem; color: var(--gris-texto);
  flex-wrap: wrap;
}

.cli-acciones-block {
  display: flex; gap: 0.6rem; margin-top: 1rem;
  align-items: center; flex-wrap: wrap;
}
.cli-acciones-block .btn { flex: 1; text-align: center; text-decoration: none; }

.cli-help {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255,200,0,0.05);
  border-left: 3px solid var(--amarillo);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--gris-texto);
}

/* Mobile: apilar main de la card */
@media (max-width: 600px) {
  .cli-card-main {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nombre badges"
      "stats stats";
  }
  .cli-card-nombre { grid-area: nombre; }
  .cli-card-badges { grid-area: badges; }
  .cli-card-stats { grid-area: stats; margin-top: 0.4rem; }
}

/* ============================================================
 * FASE 7.1 · Comunicación del programa en TODOS los puntos
 * ============================================================ */

/* --- FIX A · Chip del programa en el hero (siempre visible) --- */
.hero-fidelidad-chip {
  display: flex; align-items: center; gap: 0.75rem;
  background: linear-gradient(135deg, rgba(255,200,0,0.15), rgba(255,77,46,0.1));
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin: 1rem 0;
  cursor: default;
}
.hff-emoji { font-size: 1.75rem; line-height: 1; flex-shrink: 0; }
.hff-body { flex: 1; min-width: 0; }
.hff-titulo {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin-bottom: 0.15rem;
}
.hff-copy {
  color: var(--blanco);
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0.9;
}
.hff-btn {
  background: rgba(255,200,0,0.15);
  color: var(--amarillo);
  border: 1px solid var(--amarillo);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.hff-btn:hover { background: var(--amarillo); color: #111; }

/* --- FIX A · Modal del programa de fidelidad --- */
.fidelidad-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fid-modal-fade 0.2s ease-out;
}
@keyframes fid-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.fidelidad-modal {
  background: var(--gris-card);
  border-radius: 16px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid rgba(255,200,0,0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: fid-modal-slide 0.25s ease-out;
}
@keyframes fid-modal-slide { from { transform: translateY(20px); } to { transform: translateY(0); } }
.fidelidad-modal-close {
  position: absolute; top: 0.5rem; right: 0.75rem;
  background: transparent;
  color: var(--gris-texto);
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  line-height: 1;
  z-index: 1;
}
.fidelidad-modal-close:hover { color: var(--blanco); }
.fidelidad-modal-hero {
  background: linear-gradient(135deg, rgba(255,200,0,0.15), rgba(255,77,46,0.1));
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fmh-emoji { font-size: 3rem; line-height: 1; margin-bottom: 0.5rem; }
.fmh-titulo {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  font-size: 1.9rem;
  letter-spacing: 1px;
  line-height: 1;
  margin: 0 0 0.5rem;
}
.fmh-sub { color: var(--gris-texto); font-size: 0.9rem; margin: 0; }
.fidelidad-modal-body { padding: 1.25rem 1.5rem 1.75rem; }
.fmb-paso {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.85rem 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.fmb-paso:last-of-type { border-bottom: none; }
.fmb-paso-num {
  font-family: 'Anton', sans-serif;
  background: var(--amarillo);
  color: #111;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.fmb-paso-info { flex: 1; }
.fmb-paso-info strong { display: block; color: var(--blanco); font-size: 1rem; margin-bottom: 0.15rem; }
.fmb-paso-info span { display: block; color: var(--gris-texto); font-size: 0.85rem; line-height: 1.4; }
.fmb-lista {
  margin-top: 1rem;
  padding: 0.85rem;
  background: rgba(255,200,0,0.05);
  border-left: 3px solid var(--amarillo);
  border-radius: 4px;
}
.fmb-item {
  color: var(--gris-texto);
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.2rem 0;
}

/* --- FIX B · Chip de progreso hacia próximo premio --- */
.cfb-progreso {
  margin-top: 0.8rem;
  padding: 0.75rem 0.9rem;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,200,0,0.35);
  border-radius: 8px;
}
.cfb-progreso-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.88rem;
  color: var(--blanco);
  margin-bottom: 0.4rem;
}
.cfb-progreso-header strong { color: var(--amarillo); }
.cfb-progreso-fraccion {
  font-family: 'Anton', sans-serif;
  color: var(--amarillo);
  font-size: 1rem;
  letter-spacing: 0.5px;
}
.cfb-progreso-barra {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.cfb-progreso-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amarillo), #FF9500);
  border-radius: 4px;
  transition: width 0.3s ease-out;
}
.cfb-progreso-refuerzo {
  color: var(--gris-texto);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* --- FIX D · Banner de estado del programa en confirmación --- */
.estado-programa-banner {
  display: flex; align-items: center; gap: 0.9rem;
  background: rgba(255,200,0,0.06);
  border: 1px solid rgba(255,200,0,0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}
.epb-icon { font-size: 1.75rem; line-height: 1; }
.epb-body { flex: 1; }
.epb-title {
  color: var(--amarillo);
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 0.15rem;
}
.epb-detalle {
  color: var(--gris-texto);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Mobile: chip fidelidad en columna */
@media (max-width: 480px) {
  .hero-fidelidad-chip {
    flex-wrap: wrap;
  }
  .hff-btn { margin-left: auto; }
}

/* ============================================================
 * FASE 7.2 · Widget "Último pedido apartado" — 1 fila con iniciales
 * ============================================================ */

/* Ajuste cuando aparece solo 1 pedido reciente */
.pedido-reciente-solo {
  padding-bottom: 0.15rem;
}
.pedido-reciente-cant-solo {
  font-size: 0.78rem;
  color: var(--gris-texto);
  padding: 0 0.75rem 0.5rem;
  opacity: 0.85;
}

/* ============================================================
 * FASE 7.3 · Banner "ya tienes pedido para este sábado"
 * ============================================================ */
.cfb-ya-pedido {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255,77,46,0.10);
  border: 1px solid rgba(255,77,46,0.45);
  border-radius: 10px;
  display: flex; gap: 0.7rem; align-items: flex-start;
}
.cfb-yp-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.cfb-yp-body { flex: 1; min-width: 0; }
.cfb-yp-body strong {
  display: block;
  color: var(--blanco);
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}
.cfb-yp-body span {
  display: block;
  color: var(--gris-texto);
  font-size: 0.82rem;
  line-height: 1.45;
}
.cfb-yp-body span strong {
  display: inline;
  color: var(--amarillo);
  font-weight: 700;
  margin: 0;
  font-size: 0.82rem;
}
.cfb-yp-acciones {
  margin-top: 0.65rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.cfb-yp-acciones .btn-sm {
  font-size: 0.82rem;
  padding: 0.5rem 0.85rem;
}

/* ============================================================
   FASE 5.3 · BLOQUE A · Resumen tipo "cierre semanal"
   Rediseño narrativo: hero + 6 tarjetas con drill-down.
   ============================================================ */

/* Banner rojo · sábado sin cerrar (Bloque G) */
.banner-cierre-pend {
  background: linear-gradient(135deg, rgba(255, 77, 46, 0.18), rgba(255, 77, 46, 0.06));
  border: 2px solid var(--rojo-brasa);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin-bottom: 1.15rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.banner-cierre-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.banner-cierre-body { flex: 1; min-width: 0; }
.banner-cierre-titulo {
  color: var(--rojo-brasa);
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}
.banner-cierre-txt {
  color: var(--blanco);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.65rem;
}
.btn-cerrar-sab-rapido {
  background: var(--rojo-brasa);
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-cerrar-sab-rapido:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 77, 46, 0.4);
}

/* Hero · snapshot ejecutivo del sábado */
.resumen-hero {
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.15rem;
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.10), rgba(255, 77, 46, 0.06));
  border: 2px solid rgba(255, 200, 0, 0.35);
  position: relative;
}
.resumen-hero.hero-cerrado {
  background: linear-gradient(135deg, rgba(111, 220, 140, 0.14), rgba(111, 220, 140, 0.04));
  border-color: rgba(111, 220, 140, 0.45);
}
.resumen-hero.hero-proy {
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.14), rgba(255, 200, 0, 0.04));
  border-color: rgba(255, 200, 0, 0.55);
}
.hero-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.20);
  color: var(--amarillo);
  margin-bottom: 0.85rem;
}
.hero-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 1.7rem;
  color: var(--blanco);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.hero-subtitulo {
  color: var(--gris-texto);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-bottom: 1.15rem;
}
.hero-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.hero-num {
  text-align: center;
  padding: 0.75rem 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-num-val {
  font-family: 'Anton', sans-serif;
  font-size: 1.85rem;
  color: var(--blanco);
  line-height: 1.05;
}
.hero-num-lbl {
  color: var(--gris-texto);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}
.hero-num.hero-num-ok .hero-num-val { color: var(--verde, #6fdc8c); }
.hero-num.hero-num-bad .hero-num-val { color: var(--rojo-brasa); }

/* Tarjetas narrativas del resumen */
.resumen-card {
  background: var(--gris-card);
  border-radius: 12px;
  padding: 1.1rem 1.15rem 0.85rem;
  margin-bottom: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--amarillo);
}
.resumen-card.resumen-card-resultado {
  border-left-color: var(--verde, #6fdc8c);
  background: linear-gradient(135deg, var(--gris-card), rgba(111, 220, 140, 0.03));
}
.resumen-card.resumen-card-inv {
  border-left-color: #6fbcff;
}
.rc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.rc-num {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: var(--amarillo);
  color: #000;
  border-radius: 50%;
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
}
.resumen-card-resultado .rc-num { background: var(--verde, #6fdc8c); }
.resumen-card-inv .rc-num { background: #6fbcff; }
.rc-titulo {
  flex: 1;
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  color: var(--blanco);
  letter-spacing: 0.02em;
}
.rc-total {
  font-family: 'Anton', sans-serif;
  font-size: 1.35rem;
  color: var(--amarillo);
  white-space: nowrap;
}
.rc-total-ok { color: var(--verde, #6fdc8c); }
.rc-total-bad { color: var(--rojo-brasa); }
.rc-body { color: var(--blanco); }
.rc-linea {
  padding: 0.35rem 0;
  font-size: 0.94rem;
  line-height: 1.5;
}
.rc-linea.rc-vacio {
  color: var(--gris-texto);
  font-style: italic;
  padding: 0.55rem 0;
  font-size: 0.9rem;
}
.rc-mezcla {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.55rem 0;
}
.rc-mezcla-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rc-mezcla-item small {
  color: var(--gris-texto);
  font-size: 0.82rem;
}
.mezcla-badge {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
}
.mezcla-badge.mezcla-tajin {
  background: rgba(255, 77, 46, 0.18);
  color: var(--rojo-brasa);
  border: 1px solid rgba(255, 77, 46, 0.4);
}
.mezcla-badge.mezcla-bbq {
  background: rgba(255, 140, 0, 0.18);
  color: var(--naranja, #ff8c00);
  border: 1px solid rgba(255, 140, 0, 0.4);
}
.mezcla-badge.mezcla-multi {
  background: rgba(255, 200, 0, 0.16);
  color: var(--amarillo);
  border: 1px solid rgba(255, 200, 0, 0.4);
}

/* Mini-tabla estilo "renglón fluido" dentro de una tarjeta */
.rc-tabla-mini {
  margin: 0.5rem 0 0.4rem;
}
.rc-tabla-fila {
  display: grid;
  grid-template-columns: minmax(80px, 1.2fr) minmax(80px, 1.4fr) minmax(60px, 1fr) minmax(60px, 0.7fr);
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: center;
  font-size: 0.88rem;
}
.rc-tabla-fila:last-child { border-bottom: 0; }
.rc-tabla-cel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-tabla-cel-total {
  text-align: right;
  color: var(--amarillo);
}
.rc-tabla-cel.col-ok { color: var(--verde, #6fdc8c); }
.rc-tabla-cel.col-bad { color: var(--rojo-brasa); }

.rc-nota {
  margin: 0.65rem 0 0.15rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 200, 0, 0.06);
  border-left: 3px solid rgba(255, 200, 0, 0.4);
  border-radius: 6px;
  color: var(--blanco);
  font-size: 0.85rem;
  line-height: 1.5;
}
.rc-nota-warn {
  margin: 0.55rem 0 0.4rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 77, 46, 0.10);
  border-left: 3px solid var(--rojo-brasa);
  border-radius: 6px;
  color: var(--blanco);
  font-size: 0.86rem;
  line-height: 1.5;
}
.rc-sub-titulo {
  margin: 1rem 0 0.4rem;
  color: var(--amarillo);
  font-family: 'Anton', sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed rgba(255, 200, 0, 0.25);
}
.rc-sobr-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0 0.75rem;
}
.sobr-chip {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sobr-chip strong { margin-left: 0.35rem; color: var(--blanco); }
.sobr-chip-cong { border-color: rgba(111, 188, 255, 0.4); color: #6fbcff; }
.sobr-chip-fam { border-color: rgba(111, 220, 140, 0.4); color: var(--verde, #6fdc8c); }
.sobr-chip-merma { border-color: rgba(255, 77, 46, 0.4); color: var(--rojo-brasa); }
.sobr-chip-total { background: rgba(255, 200, 0, 0.1); border-color: rgba(255, 200, 0, 0.4); color: var(--amarillo); }

.rc-footer {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  text-align: right;
}
.rc-footer .btn-mini {
  background: rgba(255, 200, 0, 0.12);
  color: var(--amarillo);
  border: 1px solid rgba(255, 200, 0, 0.3);
  border-radius: 6px;
  padding: 0.42rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.rc-footer .btn-mini:hover {
  background: rgba(255, 200, 0, 0.22);
}

/* Ecuación de resultado (Tarjeta 5) */
.rc-ecuacion {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0 0.85rem;
}
.rc-eq-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.96rem;
  color: var(--blanco);
}
.rc-eq-linea.rc-eq-menos { color: var(--gris-texto); }
.rc-eq-linea.rc-eq-total {
  border-top: 2px solid rgba(255, 200, 0, 0.35);
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.eq-val { font-weight: 700; font-family: 'Anton', sans-serif; font-size: 1.05rem; }
.rc-eq-total .eq-val { font-size: 1.4rem; }
.eq-ok { color: var(--verde, #6fdc8c); }
.eq-bad { color: var(--rojo-brasa); }

.rc-kpis-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.mkpi {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.mkpi-val {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 1.1rem;
  color: var(--blanco);
  line-height: 1.05;
}
.mkpi-lbl {
  display: block;
  color: var(--gris-texto);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
}
.mkpi.mkpi-ok .mkpi-val { color: var(--verde, #6fdc8c); }

/* Comparativa de sabor */
.rc-sabor-comp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0.5rem 0 0.3rem;
}
.sabor-comp-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.7rem 0.6rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s;
}
.sabor-comp-item.sabor-winner {
  border-color: var(--amarillo);
  box-shadow: 0 0 0 1px rgba(255, 200, 0, 0.3);
}
.sabor-comp-nombre {
  color: var(--gris-texto);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.sabor-comp-costo {
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  color: var(--blanco);
}
.sabor-comp-costo small { font-size: 0.7em; color: var(--gris-texto); }

/* Desglose técnico colapsable */
.rc-detalle-tecnico {
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.rc-detalle-tecnico summary {
  cursor: pointer;
  color: var(--gris-texto);
  font-size: 0.85rem;
  padding: 0.3rem 0;
}
.rc-detalle-tecnico summary:hover { color: var(--blanco); }

/* Responsive: en móvil los grids de 3 col pasan a stack */
@media (max-width: 500px) {
  .hero-numeros { grid-template-columns: 1fr; gap: 0.55rem; }
  .rc-sabor-comp { grid-template-columns: 1fr; }
  .rc-tabla-fila {
    grid-template-columns: 1fr 1fr;
  }
  .rc-tabla-cel:nth-child(3) { grid-column: 1 / 2; }
  .rc-tabla-cel:nth-child(4) { grid-column: 2 / 3; text-align: right; }
  .hero-titulo { font-size: 1.35rem; }
  .rc-titulo { font-size: 1rem; }
  .rc-total { font-size: 1.1rem; }
}

/* Etiqueta izq/der de la ecuación de resultado */
.rc-eq-linea .eq-lbl { flex: 1; text-align: left; }
.rc-eq-linea .eq-val { text-align: right; margin-left: 1rem; }

/* ============================================================
   FASE 5.3 · BLOQUE B · Modal de ajuste manual con motivo + costeo
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  animation: modalIn 0.15s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-box {
  background: var(--gris-card);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.08), transparent);
}
.modal-titulo {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  color: var(--blanco);
  letter-spacing: 0.02em;
}
.modal-titulo strong { color: var(--amarillo); }
.modal-cerrar {
  background: transparent;
  border: 0;
  color: var(--gris-texto);
  font-size: 1.35rem;
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.modal-cerrar:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanco);
}
.modal-body {
  padding: 1.15rem;
  overflow-y: auto;
  flex: 1;
}
.modal-pie {
  padding: 0.85rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  background: rgba(0, 0, 0, 0.15);
}
.btn-modal-cancelar {
  background: transparent;
  color: var(--gris-texto);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-modal-cancelar:hover { color: var(--blanco); border-color: rgba(255,255,255,0.35); }
.btn-modal-confirmar {
  background: var(--amarillo);
  color: #000;
  border: 0;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.btn-modal-confirmar:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 200, 0, 0.35);
}
.btn-modal-confirmar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Info de contexto del insumo (stock + unitario) */
.ajuste-info {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.ajuste-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  color: var(--gris-texto);
  font-size: 0.86rem;
}
.ajuste-info-row strong { color: var(--blanco); font-family: 'Anton', sans-serif; letter-spacing: 0.02em; }

/* Campos del form */
.ajuste-campo {
  margin-bottom: 1rem;
}
.ajuste-lbl {
  display: block;
  color: var(--amarillo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.ajuste-req { color: var(--rojo-brasa); }
.ajuste-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
.ajuste-input:focus {
  outline: none;
  border-color: var(--amarillo);
}
textarea.ajuste-input { resize: vertical; min-height: 44px; }
.ajuste-hint {
  color: var(--gris-texto);
  font-size: 0.78rem;
  margin-top: 0.35rem;
  line-height: 1.4;
}
.ajuste-hint-motivo {
  color: var(--amarillo);
  font-style: italic;
}

/* Motivos como chips seleccionables */
.ajuste-motivos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.motivo-chip {
  cursor: pointer;
  user-select: none;
}
.motivo-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.motivo-chip span {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gris-texto);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
}
.motivo-chip:hover span {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.3);
}
.motivo-chip input:checked + span {
  background: rgba(255, 200, 0, 0.20);
  color: var(--amarillo);
  border-color: var(--amarillo);
}

/* Preview del delta con costeo */
.ajuste-preview {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(255, 200, 0, 0.03));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-top: 0.35rem;
  border: 1px dashed rgba(255, 200, 0, 0.3);
}
.ajuste-preview-titulo {
  color: var(--amarillo);
  font-family: 'Anton', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.ajuste-preview-body {
  color: var(--gris-texto);
  font-size: 0.88rem;
  line-height: 1.55;
}
.preview-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  color: var(--blanco);
  font-size: 0.9rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.preview-linea:last-child { border-bottom: 0; }
.preview-linea strong { font-family: 'Anton', sans-serif; letter-spacing: 0.02em; }
.preview-linea-delta strong,
.preview-linea-costo strong { font-size: 1.05rem; }
.preview-linea.preview-plus strong { color: var(--verde, #6fdc8c); }
.preview-linea.preview-minus strong { color: var(--rojo-brasa); }
.preview-explicacion {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--gris-texto);
  font-size: 0.85rem;
  line-height: 1.5;
}
.preview-nota {
  margin-top: 0.4rem;
  padding: 0.5rem 0.7rem;
  background: rgba(255, 200, 0, 0.08);
  border-left: 3px solid var(--amarillo);
  border-radius: 6px;
  color: var(--blanco);
  font-size: 0.82rem;
}

.ajuste-error {
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 77, 46, 0.12);
  border-left: 3px solid var(--rojo-brasa);
  border-radius: 6px;
  color: var(--rojo-brasa);
  font-size: 0.86rem;
  font-weight: 600;
}

@media (max-width: 500px) {
  .modal-box { max-height: 95vh; border-radius: 12px 12px 0 0; align-self: flex-end; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .ajuste-motivos { gap: 0.35rem; }
  .motivo-chip span { padding: 0.45rem 0.7rem; font-size: 0.82rem; }
}

/* ============================================================
   FASE 5.3 · BLOQUE C · Card de Inversión I&D del mes
   ============================================================ */
.resumen-card.resumen-card-iyd {
  border-left-color: #b981ff;
  background: linear-gradient(135deg, var(--gris-card), rgba(185, 129, 255, 0.03));
}
.resumen-card-iyd .rc-num.rc-num-iyd {
  background: #b981ff;
  color: #000;
  font-size: 1rem;
}
.resumen-card-iyd .rc-total-iyd {
  color: #b981ff;
}

/* ============================================================
   FASE 5.3 · BLOQUE F · Ficha por insumo con timeline
   ============================================================ */

.modal-box-grande { max-width: 720px; }
.ficha-body { padding: 1rem 1.15rem; }

.ficha-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ficha-kpi {
  background: rgba(0, 0, 0, 0.28);
  padding: 0.65rem 0.55rem;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ficha-kpi-val {
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem;
  color: var(--blanco);
  line-height: 1.1;
}
.ficha-kpi-lbl {
  color: var(--gris-texto);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  margin-top: 0.3rem;
  text-transform: uppercase;
}

.ficha-seccion {
  margin-bottom: 1.15rem;
}
.ficha-seccion-titulo {
  color: var(--amarillo);
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(255, 200, 0, 0.25);
}
.ficha-vacio {
  color: var(--gris-texto);
  font-style: italic;
  font-size: 0.9rem;
  padding: 0.55rem 0;
}

/* Fórmula del WAC */
.ficha-formula {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--amarillo);
}
.ficha-formula-desglose {
  margin-bottom: 0.6rem;
}
.formula-linea {
  display: grid;
  grid-template-columns: 24px 60px 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  color: var(--blanco);
}
.formula-linea:last-child { border-bottom: 0; }
.formula-idx { color: var(--gris-texto); font-weight: 700; }
.formula-fecha { color: var(--gris-texto); font-family: 'Menlo', monospace; font-size: 0.82rem; }
.formula-detalle { color: var(--blanco); }
.formula-monto { color: var(--amarillo); font-family: 'Anton', sans-serif; letter-spacing: 0.02em; }

.formula-suma {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 200, 0, 0.25);
}
.formula-suma-linea {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  color: var(--gris-texto);
  font-size: 0.88rem;
}
.formula-suma-linea strong {
  color: var(--blanco);
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.02em;
}
.formula-suma-linea.formula-suma-resultado {
  border-top: 2px solid rgba(255, 200, 0, 0.35);
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  font-size: 0.95rem;
  color: var(--blanco);
}
.formula-suma-linea.formula-suma-resultado strong { font-size: 1.1rem; }
.formula-nota {
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: rgba(255, 200, 0, 0.06);
  border-left: 3px solid rgba(255, 200, 0, 0.35);
  border-radius: 6px;
  color: var(--blanco);
  font-size: 0.82rem;
}

/* Sección drift */
.ficha-seccion-drift {
  background: linear-gradient(135deg, rgba(255, 77, 46, 0.10), transparent);
  border: 1px solid rgba(255, 77, 46, 0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.ficha-drift-body { color: var(--blanco); }
.drift-linea {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.drift-linea:last-of-type { border-bottom: 0; }
.drift-linea strong { font-family: 'Anton', sans-serif; letter-spacing: 0.02em; }
.drift-linea-total {
  border-top: 2px solid rgba(255, 77, 46, 0.3);
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  font-size: 0.95rem;
}
.ficha-drift-explicacion {
  color: var(--gris-texto);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0.6rem 0 0.75rem;
}
.ficha-seccion-drift .btn-modal-confirmar {
  width: 100%;
  background: var(--rojo-brasa);
  color: #fff;
}

/* Recetas donde se usa */
.ficha-recetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.receta-uso-chip {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--blanco);
  font-size: 0.86rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.receta-uso-chip.receta-uso-tajin {
  background: rgba(255, 77, 46, 0.12);
  border-color: rgba(255, 77, 46, 0.4);
}
.receta-uso-chip.receta-uso-bbq {
  background: rgba(255, 140, 0, 0.12);
  border-color: rgba(255, 140, 0, 0.4);
}
.receta-uso-chip span { color: var(--gris-texto); font-size: 0.82rem; }

/* Timeline de movimientos */
.ficha-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.35rem;
}
.timeline-item {
  display: grid;
  grid-template-columns: 65px 1fr auto;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 8px;
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  align-items: center;
}
.timeline-item.timeline-item-plus { border-left-color: var(--verde, #6fdc8c); }
.timeline-item.timeline-item-minus { border-left-color: var(--rojo-brasa); }
.timeline-fecha { text-align: center; }
.timeline-fecha-dia {
  font-family: 'Menlo', monospace;
  font-size: 0.78rem;
  color: var(--blanco);
  font-weight: 700;
}
.timeline-fecha-hora {
  font-family: 'Menlo', monospace;
  font-size: 0.7rem;
  color: var(--gris-texto);
  margin-top: 0.15rem;
}
.timeline-body { min-width: 0; }
.timeline-tipo {
  color: var(--blanco);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.3;
}
.timeline-extra {
  color: var(--gris-texto);
  font-size: 0.8rem;
  margin-top: 0.2rem;
  line-height: 1.35;
}
.timeline-nota {
  color: var(--gris-texto);
  font-size: 0.78rem;
  margin-top: 0.2rem;
  font-style: italic;
  line-height: 1.4;
}
.timeline-delta { text-align: right; white-space: nowrap; }
.timeline-delta-cant strong { font-family: 'Anton', sans-serif; font-size: 1rem; letter-spacing: 0.02em; }
.timeline-item-plus .timeline-delta-cant strong { color: var(--verde, #6fdc8c); }
.timeline-item-minus .timeline-delta-cant strong { color: var(--rojo-brasa); }
.timeline-delta-monto { color: var(--gris-texto); margin-top: 0.15rem; font-size: 0.75rem; }

/* Link clickeable en la tabla Inventario */
.link-ficha-insumo {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 200, 0, 0.35);
  transition: color 0.15s, border-color 0.15s;
}
.link-ficha-insumo:hover {
  color: var(--amarillo);
  border-bottom-color: var(--amarillo);
}

@media (max-width: 500px) {
  .modal-box-grande { max-width: 100%; }
  .ficha-kpis { grid-template-columns: repeat(2, 1fr); }
  .timeline-item { grid-template-columns: 55px 1fr auto; gap: 0.4rem; }
  .formula-linea { grid-template-columns: 20px 55px 1fr auto; font-size: 0.82rem; }
}

/* ============================================================
   FASE 8b · REDISEÑO ADMIN v2 · POS RESTAURANTE OSCURO
   Reemplaza estilos densos de la Fase 5.3 con look minimalista.
   Clases prefijadas v2- para no colisionar durante la migración.
   ============================================================ */

/* Reset del body para el nuevo admin (aplicado con clase en <body>) */
body.admin-v2 {
  background: #0b0e14 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.v2-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.15rem;
  color: #e5e7eb;
}

/* Topbar limpio */
.v2-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #1f232e;
  gap: 1rem;
  flex-wrap: wrap;
}
.v2-brand { min-width: 0; }
.v2-brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: -0.01em;
  font-family: 'Inter', sans-serif;
}
.v2-brand-sub {
  font-size: 0.78rem;
  color: #9ca3af;
  font-weight: 400;
  margin-top: 0.1rem;
}
.v2-topbar-right {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.v2-tab {
  padding: 0.5rem 0.95rem;
  background: transparent;
  color: #9ca3af;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.v2-tab:hover { color: #e5e7eb; background: rgba(255, 255, 255, 0.03); }
.v2-tab.active {
  background: #FFC800;
  color: #0b0e14;
  font-weight: 700;
}
.v2-tab-mas {
  color: #9ca3af;
  padding: 0.5rem 0.75rem;
}

/* Alerta arriba (opcional) */
.v2-alert {
  background: rgba(245, 158, 11, 0.12);
  border-left: 3px solid #f59e0b;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: #fbbf24;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.v2-alert strong { color: #fff; font-weight: 600; }
.v2-alert-icon { font-size: 1.1rem; line-height: 1; margin-top: 0.05rem; }
.v2-alert-body { flex: 1; line-height: 1.5; }
.v2-alert-btn {
  background: #f59e0b;
  color: #0b0e14;
  border: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.4rem;
  display: inline-block;
}
.v2-alert-critico {
  background: rgba(239, 68, 68, 0.14);
  border-left-color: #ef4444;
  color: #fca5a5;
}
.v2-alert-critico .v2-alert-btn { background: #ef4444; color: #fff; }

/* 4 KPIs grandes arriba */
.v2-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .v2-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .v2-kpi-row { grid-template-columns: 1fr; } }

.v2-kpi-card {
  background: #151923;
  border: 1px solid #1f232e;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  transition: border-color 0.15s, transform 0.15s;
}
.v2-kpi-card.clickeable { cursor: pointer; }
.v2-kpi-card.clickeable:hover { border-color: #3d434f; }
.v2-kpi-label {
  font-size: 0.72rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 0.55rem;
}
.v2-kpi-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: #f9fafb;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.v2-kpi-num.pos { color: #4ade80; }
.v2-kpi-num.neg { color: #f87171; }
.v2-kpi-num.warn { color: #fbbf24; }
.v2-kpi-delta {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 0.5rem;
  font-weight: 500;
}
.v2-kpi-delta.up { color: #4ade80; }
.v2-kpi-delta.down { color: #f87171; }

/* Grid de 2 columnas para paneles */
.v2-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 800px) { .v2-grid-2 { grid-template-columns: 1fr; } }

.v2-panel {
  background: #151923;
  border: 1px solid #1f232e;
  border-radius: 10px;
  padding: 1rem 1.15rem;
}
.v2-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #1f232e;
  gap: 0.5rem;
}
.v2-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f9fafb;
}
.v2-panel-link {
  font-size: 0.78rem;
  color: #a78bfa;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  padding: 0;
}
.v2-panel-link:hover { text-decoration: underline; }
.v2-panel-body { min-height: 40px; }

.v2-row {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid #1f232e;
  font-size: 0.87rem;
  align-items: center;
  gap: 0.5rem;
}
.v2-row:last-child { border-bottom: 0; }
.v2-row-lbl {
  color: #d1d5db;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-row-lbl small {
  color: #6b7280;
  margin-left: 0.35rem;
  font-size: 0.78rem;
}
.v2-row-val {
  color: #f9fafb;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v2-row-total {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #1f232e;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #f9fafb;
  font-size: 0.9rem;
}
.v2-vacio {
  color: #6b7280;
  font-style: italic;
  font-size: 0.86rem;
  padding: 0.55rem 0;
}

/* Tabla de inventario */
.v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
.v2-table th {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid #1f232e;
  color: #9ca3af;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.v2-table td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid #1f232e;
  color: #f9fafb;
  vertical-align: middle;
}
.v2-table tr:last-child td { border-bottom: 0; }
.v2-table tr.clickeable { cursor: pointer; }
.v2-table tr.clickeable:hover td { background: rgba(255, 255, 255, 0.03); }
.v2-mono {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
}
.v2-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.v2-badge-ok { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.v2-badge-warn { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.v2-badge-bad { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.v2-badge-gray { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }

/* Ecuación mini colapsable */
.v2-eq {
  background: #0f1319;
  border: 1px solid #1f232e;
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin-top: 0.75rem;
}
.v2-eq-linea {
  display: flex;
  justify-content: space-between;
  padding: 0.28rem 0;
  color: #9ca3af;
  font-size: 0.85rem;
}
.v2-eq-linea.menos { color: #9ca3af; }
.v2-eq-linea strong { color: #f9fafb; font-variant-numeric: tabular-nums; font-weight: 600; }
.v2-eq-linea.total {
  border-top: 1px solid #1f232e;
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  font-weight: 700;
  color: #f9fafb;
}
.v2-eq-linea.total strong { color: #4ade80; font-size: 1.05rem; }
.v2-eq-linea.total.neg strong { color: #f87171; }

/* Menú "Más" desplegable */
.v2-mas-menu {
  position: relative;
}
.v2-mas-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #151923;
  border: 1px solid #1f232e;
  border-radius: 8px;
  padding: 0.35rem;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none;
}
.v2-mas-dropdown.open { display: block; }
.v2-mas-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  color: #d1d5db;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.v2-mas-item:hover { background: rgba(255, 200, 0, 0.12); color: #FFC800; }

/* Footer discreto */
.v2-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #1f232e;
  color: #6b7280;
  font-size: 0.78rem;
  text-align: center;
}

/* ============================================================
   FASE 5.4 · Widget de lista de compras (Resumen)
   ============================================================ */
.v2-lista-compras {
  background: linear-gradient(135deg, #1a1d24 0%, #14161b 100%);
  border: 1px solid #2a2f39;
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}
.v2-lista-compras-ok {
  background: linear-gradient(135deg, #142218 0%, #0f1a13 100%);
  border-color: #1f4a2f;
}
.v2-lc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #2a2f39;
  font-size: 0.95rem;
  color: #e5e7eb;
  font-weight: 600;
}
.v2-lc-total {
  color: #fbbf24;
  font-weight: 500;
  font-size: 0.9rem;
}
.v2-lc-total strong {
  color: #fde68a;
  font-size: 1.05rem;
}
.v2-lc-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.v2-lc-empty {
  color: #4ade80;
  font-size: 0.92rem;
  padding: 0.5rem 0;
  text-align: center;
}
.v2-lc-grupo {
  background: rgba(20, 22, 27, 0.6);
  border-radius: 8px;
  padding: 0.9rem;
  border: 1px solid #22262f;
}
.v2-lc-prov {
  color: #9ca3af;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.v2-lc-item {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.7fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed #22262f;
}
.v2-lc-item:last-of-type {
  border-bottom: none;
}
.v2-lc-item-nombre {
  color: #e5e7eb;
  font-weight: 500;
  font-size: 0.9rem;
  grid-row: 1;
  grid-column: 1;
}
.v2-lc-item-detalle {
  color: #6b7280;
  font-size: 0.75rem;
  grid-row: 2;
  grid-column: 1;
}
.v2-lc-item-comprar {
  color: #fbbf24;
  font-size: 0.85rem;
  grid-row: 1 / 3;
  grid-column: 2;
  text-align: right;
}
.v2-lc-item-costo {
  color: #4ade80;
  font-size: 0.9rem;
  font-weight: 600;
  grid-row: 1 / 3;
  grid-column: 3;
  text-align: right;
}
.v2-lc-subtotal {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid #22262f;
  color: #9ca3af;
  font-size: 0.82rem;
  text-align: right;
}
.v2-lc-subtotal strong {
  color: #e5e7eb;
}
.v2-lc-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  justify-content: flex-end;
}
.v2-lc-btn {
  background: #22262f;
  color: #e5e7eb;
  border: 1px solid #2f3542;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.v2-lc-btn:hover {
  background: #FFC800;
  color: #14161b;
  border-color: #FFC800;
}

/* ============================================================
   FASE 5.4 · Modal de consumo manual al cerrar sábado
   ============================================================ */
.modal-consumo-lista {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.modal-consumo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: rgba(20, 22, 27, 0.6);
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid #2a2f39;
}
.modal-consumo-info {
  flex: 1;
}
.modal-consumo-info strong {
  color: #e5e7eb;
  display: block;
  margin-bottom: 0.2rem;
}
.modal-consumo-info small {
  color: #9ca3af;
  font-size: 0.78rem;
}
.modal-consumo-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.modal-consumo-input input {
  width: 90px;
  background: #14161b;
  color: #e5e7eb;
  border: 1px solid #2f3542;
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: right;
}
.modal-consumo-input input:focus {
  outline: none;
  border-color: #FFC800;
}
.modal-consumo-u {
  color: #9ca3af;
  font-size: 0.85rem;
  min-width: 50px;
}
.modal-consumo-nota {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  padding: 0.7rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-top: 0.5rem;
}

/* Responsive: stackear items de lista en mobile */
@media (max-width: 600px) {
  .v2-lc-item {
    grid-template-columns: 1fr 1fr;
  }
  .v2-lc-item-comprar {
    grid-row: 3;
    grid-column: 1;
    text-align: left;
    padding-top: 0.3rem;
  }
  .v2-lc-item-costo {
    grid-row: 3;
    grid-column: 2;
  }
}

/* ============================================================ */
/* v39 · Fase 6b · 3 sabores de muslo + queso crema ahumado    */
/* ============================================================ */

/* Grid 3 sabores en desktop, apilado en mobile */
.sabor-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .sabor-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  /* En pantallas muy chicas (< 480px), 1 columna */
}
@media (max-width: 480px) {
  .sabor-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Bloque de queso crema — apartado visualmente de los muslos */
.queso-block {
  margin-top: 1.25rem;
  border: 2px dashed rgba(255, 200, 0, 0.35);
  padding: 1rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,200,0,0.05) 0%, rgba(0,0,0,0) 100%);
}
.queso-block .sabor-titulo {
  color: var(--amarillo);
}
.queso-card {
  max-width: 480px;
  margin: 0 auto;
}
.queso-card .sabor-card-nombre {
  color: var(--amarillo);
}

/* Segunda barra de cupo (queso crema) — más compacta y amarilla */
.cupo-block-queso {
  margin-top: 0.85rem;
  border: 1px solid rgba(255, 200, 0, 0.28);
  background: rgba(255, 200, 0, 0.04);
}
.cupo-block-queso .cupo-label {
  color: var(--amarillo);
}

/* Grid de 4 fotos (Tajín + BBQ + Lemon Pepper + Queso crema) */
.fotos-producto-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}
@media (max-width: 900px) {
  .fotos-producto-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .fotos-producto-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Bloque resumen (contenedor del pedido-total-mini cuando va aparte) */
.sabor-block-resumen {
  background: rgba(255, 200, 0, 0.04);
  border: 1px solid rgba(255, 200, 0, 0.18);
}

/* Badges de sabor para toggles del admin */
.sabor-toggle-lemon {
  background: var(--amarillo);
  color: #000;
}
.sabor-toggle-queso {
  background: var(--amarillo);
  color: #000;
}

/* v39.1 · Estado "no cabe" del slot — clickeable, solo advierte visualmente.
   Si el pedido cabe en la cantidad restante, el usuario puede seleccionarlo. */
.slot-no-cabe {
  opacity: 0.75;
  border-color: rgba(255, 200, 0, 0.35);
}
.slot-no-cabe .slot-cupo {
  color: rgba(255, 200, 0, 0.85);
  font-weight: 600;
}

/* v39.2 · Pills nuevos para admin (Lemon Pepper + Queso Crema) */
.sabor-pill-lemon {
  background: rgba(255, 200, 0, 0.15);
  color: var(--amarillo);
  border: 1px solid rgba(255, 200, 0, 0.6);
}
.sabor-pill-queso {
  background: rgba(255, 200, 0, 0.10);
  color: var(--amarillo);
  border: 1px dashed rgba(255, 200, 0, 0.7);
}

/* v39.2 · Titulos y KPIs para las nuevas recetas (Lemon Pepper + Queso Crema) */
.receta-titulo-sabor-lemon,
.receta-titulo-sabor-queso {
  color: var(--amarillo);
}
.kpi-sabor-lemon {
  border-left: 4px solid var(--amarillo);
}
.kpi-sabor-lemon .kpi-num {
  color: var(--amarillo);
}
.kpi-sabor-queso {
  border-left: 4px dashed var(--amarillo);
}
.kpi-sabor-queso .kpi-num {
  color: var(--amarillo);
}

/* v39.2 · Acordeón de recetas — colapsado por default para no cansar la vista */
.receta-accordion {
  padding: 0;
  overflow: hidden;
}
.receta-accordion > .receta-summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.receta-accordion > .receta-summary::-webkit-details-marker {
  display: none;
}
.receta-accordion > .receta-summary:hover {
  background: rgba(255, 200, 0, 0.05);
}
.receta-summary-titulo {
  font-family: 'Anton', 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  flex: 0 1 auto;
}
.receta-summary-chevron {
  margin-left: auto;
  color: var(--gris-texto);
  transition: transform 0.2s ease;
  font-size: 0.85rem;
}
.receta-accordion[open] > .receta-summary .receta-summary-chevron {
  transform: rotate(180deg);
  color: var(--amarillo);
}
.receta-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1rem;
}
.receta-badge {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.receta-badge-vacia {
  background: rgba(120, 120, 120, 0.15);
  color: var(--gris-texto);
  border: 1px dashed rgba(120, 120, 120, 0.35);
}
.receta-badge-llena {
  background: rgba(255, 200, 0, 0.1);
  color: var(--amarillo);
  border: 1px solid rgba(255, 200, 0, 0.4);
}

/* =====================================================================
   SPRINT 2 · Formulario de pedido con look v10 (parrillero sofisticado)
   Todo scoped bajo .pedido-v10 para no chocar con el CSS viejo.
   La lógica (data-sabor, data-slot, botones ±) queda intacta.
   ===================================================================== */

.pedido-v10 { background: var(--humo); color: var(--negro); font-family: 'Inter', sans-serif; }

/* --- Nav sticky arriba (idéntico look al landing) --- */
.pv2-nav { position: sticky; top: 0; z-index: 100; background: rgba(13,13,13,0.95); backdrop-filter: blur(10px); padding: 0.9rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pv2-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; }
.pv2-back { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: none; color: var(--ceniza); font-family: 'Inter', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; cursor: pointer; padding: 0.5rem 0; transition: color 0.2s; }
.pv2-back:hover { color: var(--amarillo); }
.pv2-back svg { width: 18px; height: 18px; }
.pv2-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin: 0 auto; }
.pv2-brand-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--blanco); flex-shrink: 0; overflow: hidden; }
.pv2-brand-text .top { display: block; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; color: var(--blanco); letter-spacing: 0.02em; line-height: 1; }
.pv2-brand-text .sub { display: block; color: var(--amarillo); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; margin-top: 3px; }
.pv2-nav-spacer { width: 80px; }
@media (max-width: 768px) {
  .pv2-nav { padding: 0.75rem 1rem; }
  .pv2-nav-inner { gap: 1rem; }
  .pv2-nav-spacer { display: none; }
  .pv2-brand-text .top { font-size: 0.9rem; }
  .pv2-brand-text .sub { font-size: 0.6rem; }
}

/* --- Hero de la vista de pedido (fondo oscuro con acento amarillo) --- */
.pv2-hero { background: linear-gradient(135deg, var(--negro) 0%, var(--carbon) 100%); color: var(--blanco); padding: 3rem 2rem 2.5rem; position: relative; overflow: hidden; }
.pv2-hero::before { content: ""; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(217,66,20,0.15) 0%, transparent 60%); pointer-events: none; }
.pv2-hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.pv2-hero-tag { color: var(--amarillo); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.35em; font-weight: 600; margin-bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.8rem; }
.pv2-hero-tag::before { content: ""; width: 30px; height: 1px; background: var(--amarillo); }
.pv2-hero-title { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin-bottom: 0.8rem; color: var(--blanco); }
.pv2-hero-title em { font-style: italic; color: var(--amarillo); font-weight: 400; }
.pv2-hero-sub { color: var(--ceniza); font-size: 1rem; max-width: 600px; line-height: 1.5; }
@media (max-width: 768px) {
  .pv2-hero { padding: 2rem 1.25rem 1.75rem; }
  .pv2-hero-title { font-size: 1.9rem; }
  .pv2-hero-sub { font-size: 0.9rem; }
}

/* --- Container principal del cuerpo --- */
.pv2-body { max-width: 900px; margin: 0 auto; padding: 2.5rem 2rem 6rem; }
@media (max-width: 768px) { .pv2-body { padding: 1.75rem 1.25rem 6rem; } }

/* --- Breadcrumb (restilamos las clases existentes .checkout-crumbs) --- */
.pedido-v10 .checkout-crumbs { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.5rem 0 2rem; flex-wrap: wrap; }
.pedido-v10 .checkout-crumbs .crumb { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.25s; }
.pedido-v10 .checkout-crumbs .crumb-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 0.85rem; }
.pedido-v10 .checkout-crumbs .crumb-lbl { font-family: 'Inter', sans-serif; }
.pedido-v10 .checkout-crumbs .crumb-pending { background: rgba(13,13,13,0.05); color: rgba(13,13,13,0.4); }
.pedido-v10 .checkout-crumbs .crumb-pending .crumb-num { background: rgba(13,13,13,0.1); color: rgba(13,13,13,0.5); }
.pedido-v10 .checkout-crumbs .crumb-current { background: var(--negro); color: var(--amarillo); box-shadow: 0 4px 14px rgba(13,13,13,0.2); }
.pedido-v10 .checkout-crumbs .crumb-current .crumb-num { background: var(--amarillo); color: var(--negro); }
.pedido-v10 .checkout-crumbs .crumb-done { background: rgba(217,66,20,0.1); color: var(--brasa); }
.pedido-v10 .checkout-crumbs .crumb-done .crumb-num { background: var(--brasa); color: var(--blanco); }
.pedido-v10 .checkout-crumbs .crumb-sep { color: rgba(13,13,13,0.25); font-weight: 300; font-size: 1.2rem; }
@media (max-width: 480px) {
  /* v60 fix · mostrar los labels de los pasos ("Sabores", "Hora", "Datos")
     en mobile. Antes tenía display:none y quedaban solo los números pelados
     sin contexto — reportado por Marcelo el 06/sep. */
  .pedido-v10 .checkout-crumbs .crumb-lbl { display: inline; font-size: 0.7rem; }
  .pedido-v10 .checkout-crumbs .crumb { padding: 0.35rem 0.65rem; font-size: 0.72rem; gap: 0.35rem; }
  .pedido-v10 .checkout-crumbs .crumb-num { width: 20px; height: 20px; font-size: 0.75rem; }
  .pedido-v10 .checkout-crumbs .crumb-sep { font-size: 0.9rem; }
  .pedido-v10 .checkout-crumbs { gap: 0.3rem; padding: 1rem 0.5rem 1.5rem; }
}

/* --- Bloques (secciones tipo card) --- */
.pedido-v10 .sabor-block, .pedido-v10 .slots-block, .pedido-v10 .cantidad-block { background: var(--blanco); border: 1px solid rgba(13,13,13,0.06); box-shadow: 0 6px 24px rgba(13,13,13,0.05); padding: 2rem 1.75rem; margin-bottom: 1.5rem; border-radius: 4px; }
.pedido-v10 .sabor-titulo, .pedido-v10 .slots-titulo, .pedido-v10 .cantidad-label { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.4rem; color: var(--negro); margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.pedido-v10 .sabor-desc, .pedido-v10 .slots-desc { color: var(--gris-txt); font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.5; }
@media (max-width: 768px) {
  .pedido-v10 .sabor-block, .pedido-v10 .slots-block, .pedido-v10 .cantidad-block { padding: 1.5rem 1.25rem; }
  .pedido-v10 .sabor-titulo, .pedido-v10 .slots-titulo, .pedido-v10 .cantidad-label { font-size: 1.2rem; }
}

/* --- Grid y cards de sabor (estilo menu-card v10) --- */
.pedido-v10 .sabor-grid { display: grid; gap: 1.25rem; }
.pedido-v10 .sabor-grid-3, .pedido-v10 .sabor-grid-2, .pedido-v10 .sabor-grid-1 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .pedido-v10 .sabor-grid-3, .pedido-v10 .sabor-grid-2, .pedido-v10 .sabor-grid-1 { grid-template-columns: 1fr; }
}
.pedido-v10 .sabor-card { background: var(--humo-2); border: 2px solid transparent; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.25s; position: relative; }
.pedido-v10 .sabor-card:hover { border-color: rgba(217,66,20,0.3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,13,13,0.1); }
.pedido-v10 .sabor-card-selected { border-color: var(--brasa); background: var(--blanco); box-shadow: 0 8px 24px rgba(217,66,20,0.15); }
.pedido-v10 .sabor-card-off { opacity: 0.5; filter: grayscale(0.6); }
.pedido-v10 .sabor-card-off:hover { transform: none; border-color: transparent; box-shadow: none; }
.pedido-v10 .sabor-card-foto { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--carbon); }
.pedido-v10 .sabor-card-body { padding: 1.1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.pedido-v10 .sabor-card-nombre { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem; color: var(--negro); line-height: 1.2; }
.pedido-v10 .sabor-card-tagline { color: var(--gris-txt); font-size: 0.82rem; line-height: 1.4; min-height: 2.5em; }
.pedido-v10 .sabor-card-off-badge { margin-top: 0.75rem; padding: 0.5rem; background: rgba(13,13,13,0.06); color: rgba(13,13,13,0.5); text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; border-radius: 3px; }
.pedido-v10 .sabor-cantidad-controls { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 0.9rem; padding: 0.4rem; background: var(--negro); border-radius: 999px; }
.pedido-v10 .sabor-card-selected .sabor-cantidad-controls { background: var(--brasa); }
.pedido-v10 .sabor-cantidad-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.15); color: var(--blanco); border: none; font-size: 1.2rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.pedido-v10 .sabor-cantidad-btn:hover:not(:disabled) { background: var(--amarillo); color: var(--negro); }
.pedido-v10 .sabor-cantidad-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pedido-v10 .sabor-cantidad-num { color: var(--blanco); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.4rem; min-width: 28px; text-align: center; }
.pedido-v10 .sabor-cantidad-lbl { text-align: center; margin-top: 0.6rem; color: var(--gris-txt); font-size: 0.78rem; font-weight: 500; }
.pedido-v10 .sabor-card-selected .sabor-cantidad-lbl { color: var(--brasa); font-weight: 600; }
.pedido-v10 .queso-card .sabor-card-foto { height: 200px; }

/* --- Resumen del pedido (fondo negro con acento amarillo) --- */
.pedido-v10 .sabor-block-resumen { background: linear-gradient(135deg, var(--negro) 0%, var(--carbon) 100%); border: none; color: var(--blanco); padding: 1.5rem 1.75rem; }
.pedido-v10 .pedido-total-mini { text-align: center; }
.pedido-v10 .pedido-total-mini-empty { color: var(--ceniza); font-size: 0.95rem; padding: 0.5rem 0; opacity: 0.75; }
.pedido-v10 .pedido-total-mini-line { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; color: var(--ceniza); font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pedido-v10 .pedido-total-mini-line:last-of-type { border-bottom: none; }
.pedido-v10 .pedido-total-mini-line strong { color: var(--blanco); font-weight: 600; }
.pedido-v10 .pedido-total-mini-descuento { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; color: var(--amarillo); font-size: 0.88rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pedido-v10 .pedido-total-mini-descuento strong { color: var(--amarillo); font-weight: 700; }
.pedido-v10 .pedido-total-mini-money { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2.4rem; color: var(--amarillo); margin: 0.75rem 0 0.5rem; letter-spacing: -0.02em; }
.pedido-v10 .pedido-total-mini-anticipo { color: var(--ceniza); font-size: 0.85rem; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); }
.pedido-v10 .pedido-total-mini-anticipo strong { color: var(--blanco); font-weight: 700; }

/* --- Slots de recogida (pills grandes con look brasa/amarillo) --- */
.pedido-v10 .slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
@media (max-width: 768px) { .pedido-v10 .slots-grid { grid-template-columns: repeat(2, 1fr); } }
.pedido-v10 .slot { padding: 1rem 0.75rem 0.85rem; background: var(--humo-2); border: 2px solid rgba(13,13,13,0.08); border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.2s; font-weight: 700; color: var(--negro); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 1.05rem; }
.pedido-v10 .slot:hover:not(.slot-lleno):not(.slot-selected) { border-color: var(--brasa); transform: translateY(-2px); background: var(--blanco); }
.pedido-v10 .slot-selected { background: var(--brasa); color: var(--blanco); border-color: var(--brasa); box-shadow: 0 6px 16px rgba(217,66,20,0.35); }
.pedido-v10 .slot-selected:hover { transform: translateY(-2px); }
.pedido-v10 .slot-lleno { opacity: 0.4; cursor: not-allowed; background: repeating-linear-gradient(45deg, var(--humo-2), var(--humo-2) 6px, rgba(13,13,13,0.05) 6px, rgba(13,13,13,0.05) 12px); }
.pedido-v10 .slot-lleno::after { content: "AGOTADO"; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--brasa); font-weight: 700; margin-top: 0.15rem; }
.pedido-v10 .slot-no-cabe { background: rgba(243,173,44,0.15); border-color: var(--amarillo); color: var(--negro); }
/* Chip pequeño verde con la disponibilidad · legible sobre el fondo humo */
.pedido-v10 .slot-cupo { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #1a6934; background: rgba(31,168,85,0.14); padding: 0.15rem 0.55rem; border-radius: 999px; opacity: 1; }
.pedido-v10 .slot-selected .slot-cupo { color: var(--blanco); background: rgba(255,255,255,0.22); }
.pedido-v10 .slot-no-cabe .slot-cupo { color: #8a6a10; background: rgba(243,173,44,0.28); }
.pedido-v10 .slot-lleno .slot-cupo { display: none; }

/* --- Inputs del formulario --- */
.pedido-v10 .form-group { margin-bottom: 1.25rem; }
.pedido-v10 .form-group label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gris-txt); font-weight: 600; margin-bottom: 0.5rem; }
.pedido-v10 .form-group input { width: 100%; padding: 0.9rem 1rem; border: 1.5px solid rgba(13,13,13,0.1); background: var(--humo); color: var(--negro); font-family: 'Inter', sans-serif; font-size: 1rem; border-radius: 4px; transition: all 0.15s; }
.pedido-v10 .form-group input:focus { outline: none; border-color: var(--brasa); background: var(--blanco); box-shadow: 0 0 0 3px rgba(217,66,20,0.1); }
.pedido-v10 .form-hint { margin-top: 0.4rem; font-size: 0.78rem; color: var(--gris-txt); }
.pedido-v10 .form-hint-ok { color: #1d7a3a; font-weight: 600; }
.pedido-v10 .form-hint-warn { color: var(--brasa); font-weight: 500; }
.pedido-v10 .form-error { color: var(--brasa); font-weight: 600; text-align: center; margin: 1rem 0; min-height: 1.2em; }

/* --- Chip de fidelidad y bienvenida --- */
.pedido-v10 .cliente-fidelidad-bienvenida { background: linear-gradient(135deg, var(--negro) 0%, var(--carbon) 100%); color: var(--blanco); padding: 1.25rem 1.25rem; border-radius: 6px; margin-bottom: 1.25rem; }
.pedido-v10 .cfb-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.pedido-v10 .cfb-hola { font-size: 0.95rem; }
.pedido-v10 .cfb-hola strong { color: var(--amarillo); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem; }
.pedido-v10 .btn-link-inline { background: none; border: none; color: var(--ceniza); font-size: 0.75rem; text-decoration: underline; cursor: pointer; padding: 0; font-family: 'Inter', sans-serif; }
.pedido-v10 .btn-link-inline:hover { color: var(--amarillo); }
.pedido-v10 .cfb-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
.pedido-v10 .cfb-stat { background: rgba(255,255,255,0.08); padding: 0.4rem 0.75rem; border-radius: 999px; font-size: 0.78rem; color: var(--ceniza); }
.pedido-v10 .cfb-stat strong { color: var(--blanco); font-weight: 600; }
.pedido-v10 .cfb-premio { margin-top: 0.75rem; padding: 0.9rem 1rem; background: rgba(243,173,44,0.12); border-left: 3px solid var(--amarillo); border-radius: 3px; display: flex; align-items: flex-start; gap: 0.7rem; }
.pedido-v10 .cfb-premio-emoji { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--amarillo); flex-shrink: 0; }
.pedido-v10 .cfb-premio-emoji svg { width: 24px; height: 24px; }
.pedido-v10 .cfb-premio-text strong { display: block; color: var(--amarillo); font-family: 'Playfair Display', serif; font-size: 1.05rem; margin-bottom: 0.25rem; }
.pedido-v10 .cfb-premio-on { display: block; color: #a8e6c1; font-size: 0.85rem; font-weight: 500; }
.pedido-v10 .cfb-premio-hint { display: block; color: var(--ceniza); font-size: 0.85rem; }
.pedido-v10 .cfb-progreso { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
.pedido-v10 .cfb-progreso-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--ceniza); }
.pedido-v10 .cfb-progreso-header strong { color: var(--blanco); }
.pedido-v10 .cfb-progreso-fraccion { color: var(--amarillo); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; }
.pedido-v10 .cfb-progreso-barra { height: 6px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
.pedido-v10 .cfb-progreso-fill { height: 100%; background: linear-gradient(90deg, var(--brasa), var(--amarillo)); border-radius: 999px; transition: width 0.5s ease; }
.pedido-v10 .cfb-progreso-refuerzo { margin-top: 0.5rem; font-size: 0.8rem; color: var(--ceniza); font-style: italic; }
.pedido-v10 .cfb-ya-pedido { background: rgba(243,173,44,0.15); border-left: 3px solid var(--amarillo); padding: 0.9rem 1rem; border-radius: 3px; margin-bottom: 0.75rem; display: flex; gap: 0.7rem; }
.pedido-v10 .cfb-yp-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--amarillo); flex-shrink: 0; }
.pedido-v10 .cfb-yp-icon svg { width: 24px; height: 24px; }
.pedido-v10 .cfb-yp-body strong { display: block; color: var(--blanco); margin-bottom: 0.4rem; font-size: 0.9rem; }
.pedido-v10 .cfb-yp-body span { display: block; color: var(--ceniza); font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.7rem; }
.pedido-v10 .cfb-yp-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pedido-v10 .btn-wa { background: #25d366; color: var(--blanco); padding: 0.55rem 1rem; text-decoration: none; font-size: 0.82rem; font-weight: 600; border-radius: 3px; display: inline-flex; align-items: center; gap: 0.4rem; }
.pedido-v10 .btn-wa:hover { background: #1fb556; }
.pedido-v10 .cliente-recurrente-bienvenida { background: rgba(217,66,20,0.08); padding: 0.9rem 1rem; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.9rem; color: var(--negro); }
.pedido-v10 .cliente-recurrente-bienvenida strong { color: var(--brasa); }

/* --- Botones del pedido (CTA final) --- */
.pedido-v10 .btn { display: inline-block; padding: 1rem 1.5rem; border: none; font-family: 'Inter', sans-serif; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: all 0.2s; border-radius: 4px; }
.pedido-v10 .btn-primary { background: var(--brasa); color: var(--blanco); }
.pedido-v10 .btn-primary:hover { background: var(--brasa-hi); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,66,20,0.35); }
.pedido-v10 .btn-block { display: block; width: 100%; }
.pedido-v10 .btn-grande { padding: 1.2rem 1.5rem; font-size: 1rem; letter-spacing: 0.15em; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.pedido-v10 .btn-link { background: transparent; color: var(--gris-txt); text-transform: none; letter-spacing: 0; font-weight: 500; text-decoration: underline; padding: 0.5rem; }
.pedido-v10 .btn-link:hover { color: var(--brasa); }

/* --- Ocultar el h1.form-titulo que dejamos oculto pero presente (compatibilidad) --- */
.pedido-v10 .form-titulo { display: none !important; }
.pedido-v10 .form-sub { display: none !important; }

/* =====================================================================
   Banner "Tienes un pedido en curso" — aparece en la landing cuando el
   cliente vuelve y hay un pedido guardado en localStorage del sábado actual.
   Sticky bajo el nav, contraste alto, dos acciones: continuar o descartar.
   ===================================================================== */
.pedido-activo-banner { background: linear-gradient(90deg, #f3ad2c 0%, #ffd066 100%); color: #1a1614; padding: 0.85rem 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.15); position: relative; z-index: 90; }
.pedido-activo-banner .pab-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.pedido-activo-banner .pab-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 240px; }
.pedido-activo-banner .pab-etiqueta { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; color: #1a1614; letter-spacing: -0.005em; }
.pedido-activo-banner .pab-detalle { font-size: 0.82rem; color: rgba(26,22,20,0.78); letter-spacing: 0.01em; }
.pedido-activo-banner .pab-acciones { display: flex; align-items: center; gap: 0.5rem; }
.pedido-activo-banner .pab-btn-continuar { background: #1a1614; color: #f3ad2c; border: none; padding: 0.7rem 1.4rem; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; cursor: pointer; transition: all 0.22s; }
.pedido-activo-banner .pab-btn-continuar:hover { background: #24201d; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,22,20,0.3); }
.pedido-activo-banner .pab-btn-descartar { background: transparent; color: rgba(26,22,20,0.5); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; }
.pedido-activo-banner .pab-btn-descartar:hover { color: #1a1614; background: rgba(26,22,20,0.12); }
@media (max-width: 640px) {
  .pedido-activo-banner { padding: 0.75rem 1rem; }
  .pedido-activo-banner .pab-inner { gap: 0.75rem; }
  .pedido-activo-banner .pab-etiqueta { font-size: 0.92rem; }
  .pedido-activo-banner .pab-detalle { font-size: 0.75rem; }
  .pedido-activo-banner .pab-btn-continuar { padding: 0.55rem 1rem; font-size: 0.7rem; }
}

/* =====================================================================
   Checklist de 3 pasos en la pantalla de confirmación
   Reemplaza los dos bloques separados (SPEI / WhatsApp) por un solo
   checklist numerado. Visualmente comunica ORDEN y PROGRESO.
   ===================================================================== */
.pedido-v10 .conf-checklist { background: var(--blanco); border: 1px solid rgba(13,13,13,0.06); box-shadow: 0 6px 24px rgba(13,13,13,0.05); border-radius: 4px; padding: 2rem 1.75rem; margin-bottom: 1.5rem; }
.pedido-v10 .conf-checklist-titulo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; color: var(--negro); letter-spacing: -0.01em; margin-bottom: 1.75rem; text-align: center; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(13,13,13,0.08); }
.pedido-v10 .conf-step { display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px dashed rgba(13,13,13,0.1); }
.pedido-v10 .conf-step:last-child { border-bottom: none; padding-bottom: 0.5rem; }
.pedido-v10 .conf-step:first-of-type { padding-top: 0.5rem; }
.pedido-v10 .conf-step-num { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.35rem; background: var(--negro); color: var(--amarillo); flex-shrink: 0; box-shadow: 0 4px 14px rgba(13,13,13,0.15); }
.pedido-v10 .conf-step-wa .conf-step-num { background: #25d366; color: var(--blanco); box-shadow: 0 4px 14px rgba(37,211,102,0.35); }
.pedido-v10 .conf-step-spei .conf-step-num { background: var(--brasa); color: var(--blanco); box-shadow: 0 4px 14px rgba(217,66,20,0.3); }
.pedido-v10 .conf-step-comp .conf-step-num { background: #25d366; color: var(--blanco); box-shadow: 0 4px 14px rgba(37,211,102,0.35); }
.pedido-v10 .conf-step-body { min-width: 0; }
.pedido-v10 .conf-step-titulo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.2rem; color: var(--negro); line-height: 1.2; margin-bottom: 0.5rem; letter-spacing: -0.005em; }
.pedido-v10 .conf-step-descr { color: var(--gris-txt); font-size: 0.88rem; line-height: 1.55; margin-bottom: 1.1rem; }
.pedido-v10 .conf-step-descr strong { color: var(--negro); font-weight: 600; }
.pedido-v10 .conf-step-cta { display: block; width: 100%; padding: 1.15rem 1.5rem; text-align: center; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; border-radius: 4px; transition: all 0.22s; border: none; cursor: pointer; }
.pedido-v10 .conf-step-cta-wa { background: #25d366; color: var(--blanco); box-shadow: 0 6px 20px rgba(37,211,102,0.32); animation: conf-wa-pulse 2.4s infinite; }
.pedido-v10 .conf-step-cta-wa:hover { background: #1fb556; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,0.45); }
@media (max-width: 640px) {
  .pedido-v10 .conf-checklist { padding: 1.5rem 1.15rem; }
  .pedido-v10 .conf-step { grid-template-columns: 42px 1fr; gap: 0.9rem; padding: 1.25rem 0; }
  .pedido-v10 .conf-step-num { width: 40px; height: 40px; font-size: 1.15rem; }
  .pedido-v10 .conf-step-titulo { font-size: 1.05rem; }
  .pedido-v10 .conf-step-cta { padding: 1rem 1rem; font-size: 0.88rem; letter-spacing: 0.12em; }
}

/* =====================================================================
   SPRINT 3 · Pantalla de CONFIRMACIÓN con look v10 (parrillero sofisticado)
   Toda la pantalla vive dentro de .pedido-v10 (mismo wrapper que el form),
   se apoya en .pv2-nav, .pv2-hero, .pv2-body y agrega bloques específicos:
   resumen del pedido, banners de fidelidad, paso 1 SPEI, paso 2 WhatsApp,
   comprobante para guardar, botones finales.
   ===================================================================== */

/* ---------- Check en el hero de confirmación ---------- */
.pedido-v10 .conf-hero-check { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; background: var(--amarillo); color: var(--negro); align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.7rem; margin-bottom: 1rem; box-shadow: 0 8px 24px rgba(243,173,44,0.35); }

/* ---------- Bloque resumen del pedido (dark card sobre humo) ---------- */
.pedido-v10 .conf-resumen { background: linear-gradient(135deg, var(--negro) 0%, var(--carbon) 100%); color: var(--blanco); padding: 1.75rem 1.75rem 1.25rem; border-radius: 4px; margin-bottom: 1.5rem; border: none; box-shadow: 0 6px 24px rgba(13,13,13,0.12); }
.pedido-v10 .conf-resumen-titulo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem; color: var(--amarillo); margin-bottom: 1rem; letter-spacing: 0.01em; }
.pedido-v10 .conf-resumen-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.92rem; }
.pedido-v10 .conf-resumen-row:last-child { border-bottom: none; }
.pedido-v10 .conf-resumen-lbl { color: var(--ceniza); flex-shrink: 0; }
.pedido-v10 .conf-resumen-val { color: var(--blanco); text-align: right; font-weight: 500; }
.pedido-v10 .conf-resumen-val a { color: var(--amarillo); text-decoration: underline; }
.pedido-v10 .conf-resumen-sep { border-top: 1px dashed rgba(255,255,255,0.12); margin: 0.5rem 0; }
.pedido-v10 .conf-resumen-total { color: var(--amarillo) !important; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem !important; }
.pedido-v10 .conf-resumen-anticipo { color: var(--brasa-hi) !important; font-weight: 700; font-size: 1.05rem; }
.pedido-v10 .conf-resumen-descuento { color: var(--amarillo) !important; font-weight: 700; }

/* ---------- Banners de fidelidad (premio nuevo · estado programa) ---------- */
.pedido-v10 .conf-banner { display: flex; gap: 1.15rem; align-items: flex-start; padding: 1.15rem 1.35rem; border-radius: 4px; margin-bottom: 1.25rem; background: var(--blanco); border: 1px solid rgba(13,13,13,0.06); box-shadow: 0 6px 24px rgba(13,13,13,0.05); }
.pedido-v10 .conf-banner-premio { background: linear-gradient(135deg, var(--amarillo) 0%, #ffd66b 100%); border: none; color: var(--negro); }
/* Banner "plano" — sin icon, con línea vertical dorada tipo blockquote elegante */
.pedido-v10 .conf-banner-plano { border-left: 3px solid var(--amarillo); padding-left: 1.25rem; }
.pedido-v10 .conf-banner-icon { width: 34px; height: 34px; flex-shrink: 0; color: var(--negro); display: inline-flex; align-items: center; justify-content: center; margin-top: 0.05rem; }
.pedido-v10 .conf-banner-icon svg { width: 28px; height: 28px; }
.pedido-v10 .conf-banner-body { flex: 1; }
.pedido-v10 .conf-banner-titulo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.1rem; color: var(--negro); margin-bottom: 0.3rem; letter-spacing: -0.005em; }
.pedido-v10 .conf-banner-detalle { color: var(--gris-txt); font-size: 0.88rem; line-height: 1.55; }
.pedido-v10 .conf-banner-premio .conf-banner-titulo { color: var(--negro); }
.pedido-v10 .conf-banner-premio .conf-banner-detalle { color: rgba(13,13,13,0.78); }
.pedido-v10 .conf-banner-premio .conf-banner-sub { display: block; margin-top: 0.4rem; color: rgba(13,13,13,0.55); font-size: 0.78rem; font-style: italic; }

/* ---------- Paso 1 · SPEI · Paso 2 · WhatsApp ---------- */
.pedido-v10 .conf-paso { background: var(--blanco); border: 1px solid rgba(13,13,13,0.06); box-shadow: 0 6px 24px rgba(13,13,13,0.05); padding: 1.75rem; border-radius: 4px; margin-bottom: 1.5rem; }
.pedido-v10 .conf-paso-spei { border-top: 3px solid var(--amarillo); }
.pedido-v10 .conf-paso-wa { border-top: 3px solid #25d366; }
.pedido-v10 .conf-paso-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.pedido-v10 .conf-paso-num { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.15rem; background: var(--negro); color: var(--amarillo); flex-shrink: 0; }
.pedido-v10 .conf-paso-wa .conf-paso-num { background: #25d366; color: var(--blanco); }
.pedido-v10 .conf-paso-etiqueta { color: var(--brasa); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 600; margin-bottom: 0.1rem; }
.pedido-v10 .conf-paso-wa .conf-paso-etiqueta { color: #1fa855; }
.pedido-v10 .conf-paso-titulo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.3rem; color: var(--negro); line-height: 1.2; }
.pedido-v10 .conf-paso-descr { color: var(--gris-txt); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.1rem; }

/* Datos beneficiario / banco (solo texto, no copiable) */
.pedido-v10 .conf-spei-info { background: var(--humo-2); padding: 0.9rem 1rem; border-radius: 3px; margin-bottom: 0.85rem; }
.pedido-v10 .conf-spei-info-row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.88rem; border-bottom: 1px dashed rgba(13,13,13,0.08); }
.pedido-v10 .conf-spei-info-row:last-child { border-bottom: none; }
.pedido-v10 .conf-spei-info-lbl { color: var(--gris-txt); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 600; }
.pedido-v10 .conf-spei-info-val { color: var(--negro); font-weight: 600; text-align: right; }

/* Filas copiables (CLABE / cuenta / monto) */
.pedido-v10 .conf-copy-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--humo-2); border: 1px solid rgba(13,13,13,0.06); border-radius: 3px; margin-bottom: 0.6rem; transition: border-color 0.15s; }
.pedido-v10 .conf-copy-row:hover { border-color: rgba(217,66,20,0.3); }
.pedido-v10 .conf-copy-row-info { flex: 1; min-width: 0; }
.pedido-v10 .conf-copy-row-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gris-txt); font-weight: 600; margin-bottom: 0.15rem; }
.pedido-v10 .conf-copy-row-val { font-family: 'Menlo', 'Monaco', monospace; font-size: 1.05rem; color: var(--negro); font-weight: 700; word-break: break-all; letter-spacing: 0.03em; }
.pedido-v10 .conf-copy-row-monto .conf-copy-row-val { font-family: 'Playfair Display', serif; color: var(--brasa); font-size: 1.5rem; letter-spacing: 0; }
.pedido-v10 .conf-copy-row-monto { border-color: rgba(217,66,20,0.35); background: rgba(217,66,20,0.06); }
.pedido-v10 .conf-btn-copy { background: var(--negro); color: var(--amarillo); border: none; padding: 0.55rem 0.9rem; border-radius: 3px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; font-family: 'Inter', sans-serif; flex-shrink: 0; transition: all 0.15s; }
.pedido-v10 .conf-btn-copy:hover { background: var(--brasa); color: var(--blanco); }
.pedido-v10 .conf-btn-copy.copiado { background: #1fa855; color: var(--blanco); }

/* Botón WhatsApp del paso 2 */
.pedido-v10 .conf-btn-wa { display: block; width: 100%; background: #25d366; color: var(--blanco); padding: 1.3rem 1.5rem; text-align: center; text-decoration: none; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; border-radius: 4px; transition: all 0.2s; margin-top: 0.5rem; box-shadow: 0 6px 20px rgba(37,211,102,0.35); animation: conf-wa-pulse 2s infinite; }
.pedido-v10 .conf-btn-wa:hover { background: #1fb556; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,0.45); }
@keyframes conf-wa-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,0.35); } 50% { box-shadow: 0 6px 20px rgba(37,211,102,0.55), 0 0 0 6px rgba(37,211,102,0.15); } }
.pedido-v10 .conf-wa-nota { margin-top: 0.85rem; font-size: 0.78rem; color: var(--gris-txt); text-align: center; line-height: 1.5; }
.pedido-v10 .conf-wa-nota strong { color: #1fa855; font-weight: 700; }

/* ---------- Comprobante (pre) ---------- */
.pedido-v10 .conf-comprobante { background: var(--blanco); border: 1px solid rgba(13,13,13,0.06); box-shadow: 0 6px 24px rgba(13,13,13,0.05); border-radius: 4px; margin-bottom: 1.5rem; overflow: hidden; }
.pedido-v10 .conf-comprobante-header { padding: 1rem 1.5rem; background: var(--negro); color: var(--amarillo); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pedido-v10 .conf-comprobante-header small { color: var(--ceniza); font-family: 'Inter', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.pedido-v10 .conf-comprobante-pre { padding: 1.25rem 1.5rem; font-family: 'Menlo', 'Monaco', monospace; font-size: 0.78rem; line-height: 1.6; color: var(--negro); background: var(--humo); white-space: pre-wrap; word-wrap: break-word; margin: 0; max-height: 320px; overflow-y: auto; }
.pedido-v10 .conf-comprobante-actions { padding: 0.85rem 1.5rem; background: var(--humo-2); }
.pedido-v10 .conf-btn-comprobante { display: block; width: 100%; background: var(--negro); color: var(--blanco); padding: 0.85rem 1rem; border: none; border-radius: 3px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.15s; }
.pedido-v10 .conf-btn-comprobante:hover { background: var(--brasa); }
.pedido-v10 .conf-btn-comprobante.copiado { background: #1fa855; }

/* ---------- Divider + botones finales + footer marca ---------- */
.pedido-v10 .conf-divider { border: none; border-top: 1px solid rgba(13,13,13,0.1); margin: 2rem 0 1.5rem; }
.pedido-v10 .conf-footer { text-align: center; padding: 2.5rem 1rem 1rem; color: var(--gris-txt); font-size: 0.78rem; }
.pedido-v10 .conf-footer-logo { display: block; width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 0.75rem; object-fit: cover; }
.pedido-v10 .conf-footer-marca { font-family: 'Playfair Display', serif; color: var(--negro); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.pedido-v10 .conf-footer-tag { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; }

@media (max-width: 768px) {
  .pedido-v10 .conf-paso { padding: 1.35rem 1.1rem; }
  .pedido-v10 .conf-resumen { padding: 1.25rem 1.1rem 0.85rem; }
  .pedido-v10 .conf-copy-row { padding: 0.7rem 0.85rem; }
  .pedido-v10 .conf-copy-row-val { font-size: 0.95rem; }
  .pedido-v10 .conf-copy-row-monto .conf-copy-row-val { font-size: 1.3rem; }
  .pedido-v10 .conf-comprobante-pre { padding: 1rem 1.1rem; font-size: 0.72rem; }
  .pedido-v10 .conf-comprobante-header { padding: 0.85rem 1.1rem; flex-wrap: wrap; }
  .pedido-v10 .conf-comprobante-actions { padding: 0.75rem 1.1rem; }
  .pedido-v10 .conf-paso-titulo { font-size: 1.15rem; }
  .pedido-v10 .conf-paso-num { width: 38px; height: 38px; font-size: 1rem; }
  .pedido-v10 .conf-btn-wa { padding: 1.1rem 1rem; font-size: 0.95rem; }
}

/* =====================================================================
   SPRINT 4 · Pantalla de GRACIAS con look v10 (parrillero sofisticado)
   Comparte wrapper .pedido-v10 y estilos de .pv2-nav, .pv2-hero, .pv2-body.
   El hero usa background image + overlay oscuro (foto de smoker).
   Bloques específicos: fecha destacada, dirección con link, recordatorio,
   firma decorativa, divider marca.
   ===================================================================== */

/* El hero de gracias hereda .pv2-hero pero recibe imagen inline en style="".
   Sin cambios adicionales necesarios — el gradient del overlay se define ahí. */
.pedido-v10 .gr-hero { padding: 4rem 2rem 3.5rem; min-height: 45vh; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 768px) { .pedido-v10 .gr-hero { padding: 3rem 1.25rem 2.5rem; min-height: 38vh; } }

/* Bloque destacado con fecha y hora de recogida */
.pedido-v10 .gr-fecha-block { text-align: center; padding: 2rem 1.5rem; background: linear-gradient(135deg, var(--negro) 0%, var(--carbon) 100%); color: var(--blanco); border-radius: 4px; margin-bottom: 1.5rem; box-shadow: 0 6px 24px rgba(13,13,13,0.12); }
.pedido-v10 .gr-fecha-lbl { color: var(--ceniza); text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.72rem; margin-bottom: 0.6rem; font-weight: 500; opacity: 0.85; }
.pedido-v10 .gr-fecha-dia { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.75rem; color: var(--amarillo); line-height: 1.2; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.pedido-v10 .gr-fecha-hora { color: var(--blanco); font-size: 0.95rem; }
.pedido-v10 .gr-fecha-hora strong { color: var(--amarillo); font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; margin: 0 0.15em; }

/* Card de dirección con link a Google Maps */
.pedido-v10 .gr-direccion { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; background: var(--blanco); border: 1px solid rgba(13,13,13,0.06); border-radius: 4px; box-shadow: 0 6px 24px rgba(13,13,13,0.05); margin-bottom: 1.5rem; text-decoration: none; color: var(--negro); transition: all 0.2s; }
.pedido-v10 .gr-direccion:hover { border-color: rgba(217,66,20,0.3); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(13,13,13,0.08); }
.pedido-v10 .gr-direccion-icon { width: 34px; height: 34px; flex-shrink: 0; color: var(--brasa); display: inline-flex; align-items: center; justify-content: center; }
.pedido-v10 .gr-direccion-icon svg { width: 26px; height: 26px; }
.pedido-v10 .gr-direccion-body { flex: 1; min-width: 0; }
.pedido-v10 .gr-direccion-lbl { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.68rem; color: var(--gris-txt); font-weight: 600; }
.pedido-v10 .gr-direccion-val { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.1rem; margin-top: 0.15rem; color: var(--negro); }
.pedido-v10 .gr-direccion-arrow { color: var(--brasa); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.pedido-v10 .gr-direccion-arrow svg { width: 20px; height: 20px; }

/* Banner recordatorio del efectivo restante */
.pedido-v10 .gr-recordatorio { display: flex; gap: 1.1rem; align-items: center; background: rgba(243,173,44,0.12); border-left: 3px solid var(--amarillo); padding: 1.1rem 1.35rem; border-radius: 3px; margin-bottom: 2rem; }
.pedido-v10 .gr-recordatorio-icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--brasa); display: inline-flex; align-items: center; justify-content: center; }
.pedido-v10 .gr-recordatorio-icon svg { width: 26px; height: 26px; }
.pedido-v10 .gr-recordatorio-body { color: var(--negro); font-size: 0.9rem; line-height: 1.5; }
.pedido-v10 .gr-recordatorio-body strong { color: var(--brasa); font-weight: 700; font-family: 'Playfair Display', serif; font-size: 1.02rem; }

/* Firma decorativa */
.pedido-v10 .gr-firma { text-align: center; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--gris-txt); padding: 1.75rem 1rem 0.5rem; letter-spacing: 0.005em; }

/* Divider marca al pie */
.pedido-v10 .gr-divider-marca { display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 0.5rem 0 2rem; color: var(--gris-txt); font-family: 'Playfair Display', serif; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; flex-wrap: wrap; }
.pedido-v10 .gr-divider-marca .star { color: var(--brasa); font-size: 1rem; opacity: 0.85; }

@media (max-width: 768px) {
  .pedido-v10 .gr-fecha-block { padding: 1.5rem 1.25rem; }
  .pedido-v10 .gr-fecha-dia { font-size: 1.4rem; }
  .pedido-v10 .gr-fecha-hora strong { font-size: 1.2rem; }
  .pedido-v10 .gr-direccion { padding: 1rem 1.1rem; gap: 0.85rem; }
  .pedido-v10 .gr-direccion-val { font-size: 0.98rem; }
  .pedido-v10 .gr-recordatorio { padding: 0.95rem 1.1rem; }
  .pedido-v10 .gr-recordatorio-body { font-size: 0.85rem; }
  .pedido-v10 .gr-firma { font-size: 1.1rem; padding: 1.25rem 1rem 0.4rem; }
  .pedido-v10 .gr-divider-marca { font-size: 0.72rem; letter-spacing: 0.22em; gap: 0.6rem; padding: 0.4rem 0 1.75rem; }
}