/* =========================================================
   storefront.css -- v2
   Reutiliza las variables EXACTAS de tu styles.css (mismos
   nombres, mismos valores) en vez de inventar una paleta nueva.
   Si cambias --first-color en tu hoja base, esto cambia con ella.

   Pega este bloque :root ANTES de tus overrides -- o mejor,
   simplemente incluye tu styles.css real antes que este archivo
   y bórrame este bloque de :root (quedaría duplicado).
========================================================= */
:root{
    --hue: 207;
    --sat: 90%;
    --lig: 61%;
    --first-color:#ff0032;
    --first-color-alt:#d40029; /* OJO: en tu archivo real, --first-color-alt sigue
                                   calculado en HSL azul (hue:207) -- probablemente
                                   un residuo de cuando el tema era azul antes de
                                   cambiar a rojo. Aquí sí lo puse en rojo real. */
    --transparent-color:#f146242e;
    --title-color: hsl(var(--hue), 12%, 15%);
    --text-color: hsl(var(--hue), 12%, 45%);
    --text-color-light: hsl(var(--hue), 8%, 75%);
    --text-color-lighten: hsl(var(--hue), 8%, 92%);
    --body-color: hsl(var(--hue), 100%, 99%);
    --container-color: #fff;
    --body-font: "Satoshi", sans-serif;
    --transition: .3s;
    --shadow: 0px 60px 56px -12px rgba(9, 40, 163, 0.05);
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
    font-family:var(--body-font);
    background-color:var(--body-color);
    color:var(--text-color);
    padding-bottom:100px;
}
h1,h2,h3{ color:var(--title-color); font-weight:700; }
img{ max-width:100%; height:auto; display:block; }

/* -------- header -------- */
.sf-header{ display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--container-color); box-shadow:var(--shadow); position:sticky; top:0; z-index:20; }
.sf-logo{ width:56px; height:56px; border-radius:1rem; object-fit:cover; background:var(--transparent-color); }
.sf-header-info h1{ margin:0; font-size:1.1rem; font-weight:700; }
.sf-header-meta{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
.sf-badge-horario{ font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:.5rem; background:#123d1f; color:#5cff9e; }
.sf-badge-horario.is-cerrado{ background:#3d1414; color:#ff8a8a; }
.sf-direccion{ font-size:.813rem; color:var(--text-color-light); }

/* -------- categorías -------- */
.sf-categorias-wrap{ position:sticky; top:92px; z-index:15; background:var(--body-color); padding:12px 0 4px; }
.sf-categorias{ display:flex; gap:8px; overflow-x:auto; padding:0 20px 6px; scrollbar-width:none; }
.sf-categorias::-webkit-scrollbar{ display:none; }
.sf-chip-categoria{ flex-shrink:0; border:1px solid var(--text-color-lighten); background:var(--container-color); color:var(--title-color); padding:.6rem 1rem; border-radius:.5rem; font-weight:700; font-size:.875rem; cursor:pointer; white-space:nowrap; transition:var(--transition); }
.sf-chip-categoria.is-active{ background:var(--first-color); border-color:var(--first-color); color:#fff; }

/* -------- buscador -------- */
.sf-buscador-wrap{ padding:6px 20px 16px; }
.sf-buscador{ display:flex; align-items:center; gap:10px; background:var(--container-color); border:1px solid var(--text-color-lighten); border-radius:.75rem; padding:.9rem 1.1rem; }
.sf-buscador i{ color:var(--text-color-light); font-size:1.1rem; }
.sf-buscador input{ border:none; outline:none; background:transparent; font-family:inherit; font-size:.938rem; width:100%; color:var(--title-color); }

/* -------- grid -------- */
.sf-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; padding:0 20px 20px; }
.sf-card{ background:var(--container-color); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; position:relative; transition:transform .15s ease; }
.sf-card:active{ transform:scale(.97); }
.sf-card img{ width:100%; height:130px; object-fit:cover; background:var(--transparent-color); }
.sf-card-body{ padding:.75rem; }
.sf-card-nombre{ font-size:.875rem; font-weight:700; margin:0 0 4px; line-height:1.3; color:var(--title-color); }
.sf-card-precio{ font-size:.938rem; font-weight:700; color:var(--first-color); }
.sf-card-precio small{ font-weight:500; color:var(--text-color-light); text-decoration:line-through; margin-left:6px; }
.sf-card-promo{ position:absolute; top:8px; left:8px; background:var(--first-color); color:#fff; font-size:.688rem; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:.5rem; z-index:2; }
.sf-empty{ grid-column:1/-1; text-align:center; padding:60px 10px; color:var(--text-color-light); font-size:.875rem; }

/* -------- botón flotante del carrito -------- */
.sf-carrito-fab{ position:fixed; bottom:20px; left:20px; right:20px; height:56px; border:none; border-radius:.5rem; background:var(--first-color); color:#fff; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:.938rem; box-shadow:0 8px 24px hsla(var(--hue), var(--sat), var(--lig), .25); z-index:30; cursor:pointer; transition:var(--transition); }
.sf-carrito-fab:hover{ background:var(--first-color-alt); }
.sf-carrito-fab i{ font-size:1.2rem; }
.sf-carrito-fab span:first-of-type{ background:rgba(255,255,255,.25); border-radius:.5rem; padding:2px 9px; font-size:.75rem; }

/* -------- overlays / bottom sheets -------- */
.sf-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:flex-end; justify-content:center; z-index:100; }
.sf-overlay.is-open{ display:flex; }
@media (min-width:720px){ .sf-overlay{ align-items:center; padding:24px; } }

.sf-sheet{ background:var(--container-color); width:100%; max-width:480px; border-radius:1rem 1rem 0 0; max-height:92vh; display:flex; flex-direction:column; position:relative; animation:sfSlideUp .25s ease; }
@media (min-width:720px){ .sf-sheet{ border-radius:1rem; } }
@keyframes sfSlideUp{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.sf-sheet-tall{ height:88vh; }
.sf-sheet-centrado{ padding:36px 24px; text-align:center; }

.sf-sheet-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:var(--text-color-lighten); display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; z-index:5; color:var(--title-color); }
.sf-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 10px; }
.sf-sheet-head h2{ margin:0; font-size:1.1rem; font-weight:700; }
.sf-sheet-body{ padding:16px 20px 24px; overflow-y:auto; flex:1; }
.scroll-area{ -webkit-overflow-scrolling:touch; }

.sf-producto-img{ width:100%; height:220px; object-fit:cover; background:var(--transparent-color); }
.sf-promo-tag{ display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:700; color:var(--first-color); background:var(--transparent-color); padding:5px 12px; border-radius:.5rem; margin-bottom:10px; }
.sf-producto-desc{ font-size:.875rem; color:var(--text-color-light); line-height:1.6; }
.sf-producto-precio-row{ margin:10px 0; }
.sf-producto-precio{ font-size:1.4rem; font-weight:700; color:var(--first-color); }

.sf-cantidad-selector{ display:flex; align-items:center; gap:16px; justify-content:center; background:var(--body-color); border-radius:.5rem; padding:8px; margin:14px 0; }

/* -------- personalización: ingredientes / condimentos -------- */
.sf-personalizar-titulo{ display:flex; align-items:center; gap:6px; font-size:.875rem; font-weight:700; color:var(--title-color); margin-top:16px; }
.sf-personalizar-titulo i{ color:var(--first-color); }
.sf-checklist{ display:flex; flex-direction:column; gap:2px; margin-top:8px; margin-bottom:6px; }
.sf-check-item{ display:flex; align-items:center; gap:10px; padding:.7rem .5rem; border-radius:.5rem; cursor:pointer; transition:var(--transition); }
.sf-check-item:hover{ background:var(--body-color); }
.sf-check-item input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--first-color); flex-shrink:0; cursor:pointer; }
.sf-check-item span{ font-size:.875rem; color:var(--title-color); }
.sf-cantidad-selector button{ width:38px; height:38px; border-radius:50%; border:none; background:var(--first-color); color:#fff; font-size:1.1rem; cursor:pointer; transition:var(--transition); }
.sf-cantidad-selector button:hover{ background:var(--first-color-alt); }
.sf-cantidad-selector span{ font-size:1.1rem; font-weight:700; min-width:24px; text-align:center; color:var(--title-color); }

.sf-comentario-input{ width:100%; border:1px solid var(--text-color-lighten); border-radius:.75rem; padding:12px 14px; font-family:inherit; font-size:.875rem; resize:none; height:64px; margin-bottom:14px; background:var(--body-color); color:var(--title-color); }

/* -------- botón principal: mismo patrón que tu .button, en pill
   para que se sienta "delivery" en los CTA grandes -------- */
.sf-btn-primario{
    display:inline-flex; align-items:center; justify-content:center; column-gap:.5rem;
    border:none; background:var(--first-color); color:#fff;
    font-family:inherit; font-weight:700; font-size:.938rem;
    padding:1.15rem 1.5rem; border-radius:999px; cursor:pointer;
    box-shadow:0 8px 24px hsla(var(--hue), var(--sat), var(--lig), .25);
    transition:var(--transition);
}
.sf-btn-primario:hover{ background:var(--first-color-alt); }
.sf-btn-primario.full{ width:100%; }
.sf-btn-primario:disabled{ opacity:.55; pointer-events:none; }

.sf-btn-secundario{ border:1px solid var(--text-color-lighten); background:var(--container-color); color:var(--title-color); font-family:inherit; font-weight:700; font-size:.875rem; padding:.9rem; border-radius:.5rem; cursor:pointer; transition:var(--transition); }
.sf-btn-secundario:hover{ background:var(--text-color-lighten); }
.sf-btn-secundario.full{ width:100%; margin-top:10px; }

/* -------- carrito -------- */
.sf-carrito-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--text-color-lighten); }
.sf-carrito-item img{ width:56px; height:56px; border-radius:.75rem; object-fit:cover; flex-shrink:0; background:var(--transparent-color); }
.sf-carrito-item-info{ flex:1; min-width:0; }
.sf-carrito-item-nombre{ font-size:.875rem; font-weight:700; color:var(--title-color); }
.sf-carrito-item-precio{ font-size:.813rem; color:var(--text-color-light); margin-top:2px; }
.sf-carrito-item-controles{ display:flex; align-items:center; gap:8px; }
.sf-carrito-item-controles button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--text-color-lighten); background:var(--container-color); cursor:pointer; color:var(--title-color); }

.sf-resumen-linea{ display:flex; justify-content:space-between; padding:8px 0; font-size:.875rem; color:var(--text-color); }
.sf-resumen-linea.is-descuento{ color:var(--first-color); font-weight:700; }
.sf-resumen-linea.is-total{ font-size:1.05rem; font-weight:700; color:var(--title-color); border-top:1px dashed var(--text-color-lighten); margin-top:6px; padding-top:14px; }

/* -------- checkout -------- */
.sf-field{ margin-bottom:16px; }
.sf-field span{ display:block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-color-light); margin-bottom:6px; }
.sf-field input{ width:100%; border:1px solid var(--text-color-lighten); border-radius:.75rem; padding:13px 14px; font-family:inherit; font-size:.938rem; background:var(--body-color); color:var(--title-color); }

.sf-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.sf-chip-opcion{ border:1px solid var(--text-color-lighten); background:var(--body-color); color:var(--title-color); padding:.7rem 1rem; border-radius:.75rem; font-weight:700; font-size:.875rem; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); }
.sf-chip-opcion.is-active{ border-color:var(--first-color); background:var(--transparent-color); color:var(--first-color); }

.sf-stripe-card{ border:1px solid var(--text-color-lighten); border-radius:.75rem; padding:14px; background:var(--body-color); }
.sf-help-text{ font-size:.75rem; color:var(--text-color-light); margin:6px 2px 0; }
.sf-help-text.is-error{ color:#e0334d; }

/* -------- éxito -------- */
.sf-exito-icon{ font-size:3.5rem; color:#2ecc71; margin-bottom:10px; }
.sf-folio{ font-size:.938rem; color:var(--text-color-light); margin:6px 0 18px; }
.sf-folio b{ color:var(--title-color); font-size:1.05rem; }

/* -------- loading -------- */
.sf-loading{ position:fixed; inset:0; background:rgba(255,255,255,.85); display:none; align-items:center; justify-content:center; z-index:200; }
.sf-loading.is-visible{ display:flex; }
.sf-loading-dots{ display:flex; gap:8px; }
.sf-loading-dots span{ width:10px; height:10px; border-radius:50%; background:var(--first-color); animation:sfBounce 1s infinite ease-in-out; }
.sf-loading-dots span:nth-child(2){ animation-delay:.15s; }
.sf-loading-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes sfBounce{ 0%,80%,100%{ transform:scale(.6); opacity:.5; } 40%{ transform:scale(1); opacity:1; } }


/* =========================================================
   DARK THEME -- opcional. Si algún día quieres que el storefront
   respete el modo oscuro del sistema (igual que tu admin), solo
   agrega la clase "dark-theme" al <body> y esto se activa solo.
========================================================= */
body.dark-theme{
    --title-color: hsl(var(--hue), 12%, 95%);
    --text-color: hsl(var(--hue), 12%, 75%);
    --body-color: hsl(var(--hue), 40%, 8%);
    --container-color: hsl(var(--hue), 24%, 12%);
    --text-color-lighten: hsl(var(--hue), 24%, 20%);
}