/* ==========================================================================
   Pachoncito · Hoja de estilos única (pedido, acceso, cuenta, reseñas y panel)

   Principios
   · Tema claro y oscuro según el sistema (prefers-color-scheme), con la misma identidad.
   · Movimiento con curvas orgánicas y SOLO transform/opacity (compuestas en GPU):
     las sombras de elevación se pintan una vez en un pseudo-elemento y aparecen con opacity.
   · Tamaños fluidos con clamp() y rem; áreas táctiles de 44 px como mínimo.
   ========================================================================== */

/* Sin zoom por doble toque (el pellizco se bloquea en ui.js) */
html {
    touch-action: pan-x pan-y;
}

/* ---------- Tokens: modo claro (papel cálido) ---------- */

:root {
    color-scheme: light dark;

    --bg: #f5efe6;
    --bg-glow: rgba(214, 160, 82, 0.18);
    --surface: #fffcf7;
    --surface-2: #f7f0e5;
    --surface-3: #ebdfcc;
    --surface-sunken: #f2e9dc;
    --surface-glass: rgba(255, 252, 247, 0.74);

    --text: #241a12;
    --text-muted: #6e5d4c;

    --accent: #95560f;              /* texto e iconos (contraste AA sobre las superficies claras) */
    --accent-strong: #e7ad57;       /* degradado de los botones principales */
    --accent-fill: #c98a2e;
    --accent-soft: rgba(201, 138, 46, 0.12);
    --accent-border: rgba(149, 86, 15, 0.22);
    --glint: rgba(201, 138, 46, 0.7);
    --on-accent: #1d140c;

    --success: #1d7a46;
    --success-soft: rgba(29, 122, 70, 0.1);
    --danger: #b42318;
    --danger-soft: rgba(180, 35, 24, 0.08);
    --info: #1f5fae;
    --info-soft: rgba(31, 95, 174, 0.1);
    --violet: #7a3fb8;
    --violet-soft: rgba(122, 63, 184, 0.1);
    --terracotta: #a8492c;          /* acento cálido secundario: selección y regalos */
    --terracotta-soft: rgba(184, 86, 56, 0.1);
    --terracotta-border: rgba(168, 73, 44, 0.32);
    --photo-glint: rgba(255, 255, 255, 0.55);

    --hairline: rgba(36, 26, 18, 0.08);
    --border: rgba(36, 26, 18, 0.13);
    --highlight: rgba(255, 255, 255, 0.9);   /* filo de luz interior en tarjetas */

    --shadow-sm: 0 1px 2px rgba(70, 45, 20, 0.06), 0 2px 10px rgba(70, 45, 20, 0.05);
    --shadow-lg: 0 1px 2px rgba(70, 45, 20, 0.05), 0 30px 70px -24px rgba(70, 45, 20, 0.3);
    --shadow-hover: 0 2px 6px rgba(70, 45, 20, 0.07), 0 18px 36px -14px rgba(70, 45, 20, 0.28);
    --shadow-accent: 0 10px 26px -10px rgba(201, 138, 46, 0.65);
    --scrim: rgba(52, 36, 20, 0.28);
    --logo-shadow: none;
    --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e5d4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");

    /* Tipografía: sistema (sin fuentes externas: rapidez y privacidad) */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --fs-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
    --fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
    --fs-base: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
    --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --fs-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);

    /* Medidas */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: clamp(20px, 1.2rem + 0.6vw, 28px);
    --radius-pill: 999px;
    --tap: 44px;
    --gutter: clamp(1rem, 0.6rem + 2.4vw, 2rem);
    --content: 36rem;

    /* Movimiento */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* frenada larga y suave */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote elástico suave al soltar */
    --ease-press: cubic-bezier(0.2, 0, 0, 1);         /* respuesta inmediata al pulsar */
    --dur-1: 110ms;
    --dur-2: 240ms;
    --dur-3: 420ms;
    --dur-4: 640ms;
}

/* ---------- Tokens: modo oscuro (obrador de noche) ---------- */

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #110e0c;
        --bg-glow: rgba(227, 162, 74, 0.11);
        --surface: #1d1815;
        --surface-2: #26201c;
        --surface-3: #352d27;
        --surface-sunken: #171310;
        --surface-glass: rgba(29, 24, 21, 0.72);

        --text: #f6f1e9;
        --text-muted: #b3a797;
        --terracotta: #e8906f;
        --terracotta-soft: rgba(232, 144, 111, 0.12);
        --terracotta-border: rgba(232, 144, 111, 0.34);
        --photo-glint: rgba(255, 236, 205, 0.06);

        --accent: #e6a54d;
        --accent-strong: #f3b960;
        --accent-fill: #d8933a;
        --accent-soft: rgba(230, 165, 77, 0.1);
        --accent-border: rgba(230, 165, 77, 0.26);
        --glint: rgba(243, 185, 96, 0.75);
        --on-accent: #1a120b;

        --success: #4ade80;
        --success-soft: rgba(74, 222, 128, 0.1);
        --danger: #f87171;
        --danger-soft: rgba(239, 68, 68, 0.14);
        --info: #6aa8f7;
        --info-soft: rgba(59, 130, 246, 0.14);
        --violet: #c49bfa;
        --violet-soft: rgba(168, 85, 247, 0.14);

        --hairline: rgba(255, 255, 255, 0.06);
        --border: rgba(255, 255, 255, 0.1);
        --highlight: rgba(255, 255, 255, 0.05);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 1px 1px rgba(0, 0, 0, 0.5), 0 34px 80px -24px rgba(0, 0, 0, 0.75);
        --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 40px -14px rgba(0, 0, 0, 0.6);
        --shadow-accent: 0 12px 30px -10px rgba(230, 165, 77, 0.45);
        --scrim: rgba(0, 0, 0, 0.5);
        --logo-shadow: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
        --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a797' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    }
}

/* ---------- Base ---------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--bg);
}

body {
    position: relative;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1rem, 4vh, 3rem) 1rem calc(clamp(1rem, 4vh, 3rem) + env(safe-area-inset-bottom));
}

/* Luz ambiental cálida: capa fija pintada una sola vez (no se anima ni se repinta al hacer scroll) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 36rem at 50% -12rem, var(--bg-glow), transparent 70%),
        radial-gradient(40rem 30rem at 110% 110%, var(--bg-glow), transparent 70%);
}

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

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button, a, label, select, summary, input[type="radio"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

::selection {
    background: var(--accent-soft);
    color: var(--text);
}

h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* ---------- Animaciones (solo transform y opacity) ---------- */

@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeDown {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalIn {
    from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes modalOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); }
}

@keyframes sheetIn {
    from { transform: translate3d(0, 100%, 0); }
    to { transform: none; }
}

@keyframes sheetOut {
    from { transform: none; }
    to { transform: translate3d(0, 100%, 0); }
}

@keyframes pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes unfold {
    from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.98); }
    60% { opacity: 1; }
    to { opacity: 1; transform: none; }
}

@keyframes bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* ---------- Contenedor principal ---------- */

.container {
    position: relative;
    isolation: isolate;
    width: min(100%, var(--content));
    margin-block: auto;
    background: var(--surface);
    padding: var(--gutter);
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--highlight);
    animation: rise var(--dur-4) var(--ease-out) both;
}

/* Destello dorado muy tenue en el canto superior */
.container::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 14%;
    right: 14%;
    height: 1px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, var(--glint), transparent);
    pointer-events: none;
}

/* La animación de entrada empieza cuando el auth wall muestra la página, no mientras está oculta */
.auth-pending .container {
    visibility: hidden;
    animation: none;
}

@media (min-width: 1024px) {
    :root { --content: 38rem; }
}

/* En móvil la tarjeta ocupa toda la pantalla para aprovechar el ancho */
@media (max-width: 480px) {
    body { padding: 0; }

    .container {
        width: 100%;
        min-height: 100dvh;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding-top: calc(1.25rem + env(safe-area-inset-top));
    }

    .container::before { display: none; }
}

/* ---------- Barra superior fija (cuenta · hacer pedido) ---------- */

.top-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) clamp(1rem, 0.8rem + 1vw, 1.5rem);
    padding: 0.625rem var(--gutter);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .top-nav {
        background: linear-gradient(180deg, var(--surface-glass), color-mix(in srgb, var(--surface-glass) 80%, transparent));
        -webkit-backdrop-filter: blur(14px) saturate(1.5);
        backdrop-filter: blur(14px) saturate(1.5);
    }
}

.nav-account,
.nav-cta {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    border-radius: var(--radius-pill);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.nav-account {
    min-width: 0;
    gap: 0.5rem;
    padding: 0.25rem 0.875rem 0.25rem 0.25rem;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--text);
}

.nav-avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-soft), var(--terracotta-soft));
    border: 1px solid var(--accent-border);
    color: var(--accent);
}

.nav-avatar .icon { width: 1.125rem; height: 1.125rem; }

.nav-account-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.nav-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8.5rem;
}

.nav-napas {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.nav-napas .icon { width: 0.875rem; height: 0.875rem; color: var(--terracotta); }
.nav-napas strong { color: var(--accent); font-variant-numeric: tabular-nums; }

.nav-cta {
    flex-shrink: 0;
    gap: 0.4rem;
    padding: 0.5rem 1.05rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--accent-strong), var(--accent-fill));
    box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.nav-cta .icon { width: 1.125rem; height: 1.125rem; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Sonido: botón redondo muy discreto (área táctil de 44 px, icono pequeño) */
.nav-sound {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    opacity: 0.7;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
}

.nav-sound .icon { width: 1.125rem; height: 1.125rem; }
.nav-sound[aria-pressed="false"] { opacity: 0.45; }
.nav-sound:focus { outline: none; }
.nav-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-sound:active { transform: scale(0.88); transition-duration: var(--dur-1); transition-timing-function: var(--ease-press); }

@media (hover: hover) and (pointer: fine) {
    .nav-sound:hover { opacity: 1; }
}

/* Página actual: la cuenta se marca con borde terracota */
.nav-account[aria-current="page"] {
    border-color: var(--terracotta-border);
    background: var(--terracotta-soft);
}

/* Sombra de elevación pre-pintada (solo cambia su opacidad al pasar el cursor) */
.nav-account::after,
.nav-cta::after,
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: var(--shadow-hover);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out);
    pointer-events: none;
}

.stat-card { position: relative; isolation: isolate; }

@media (max-width: 480px) {
    .top-nav {
        margin-top: calc(-1.25rem - env(safe-area-inset-top));
        padding-top: calc(0.5rem + env(safe-area-inset-top));
        padding-bottom: 0.5rem;
        border-radius: 0;
    }
}

@media (max-width: 360px) {
    .nav-name { max-width: 5.5rem; }
    .nav-cta { padding-inline: 0.8rem; }
    .nav-napas-word { display: none; }
    .nav-actions { gap: 0.25rem; }
    .nav-sound { width: 2.5rem; }
}

/* ---------- Cabecera ---------- */

.site-header {
    text-align: center;
    margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0.875rem;
}

.brand-picture {
    display: block;
    width: min(100%, 18.75rem);
}

/* En Mi cuenta y Valoraciones el logo va dentro de un enlace: el enlace toma el ancho del logo para que
   el ancho en % de la imagen tenga referencia y la caja quede centrada en el contenedor flex */
.logo-container > a {
    display: block;
    width: min(100%, 18.75rem);
}

.logo-container > a > .brand-picture {
    width: 100%;
}

.brand-picture-small {
    width: 8.75rem;
}

/* Centrado geométrico exacto: el PNG tiene el mismo margen transparente a cada lado (54 / 56 px de 900),
   así que la caja del logo y su contenido comparten el eje central sin compensaciones manuales. */
.brand-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: var(--logo-shadow);
}

.badge {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-sm);
    padding: 0.375rem 0.95rem;
    border-radius: var(--radius-pill);
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid var(--accent-border);
}

.badge { text-wrap: balance; }

@media (max-width: 400px) {
    .badge { font-size: var(--fs-xs); padding: 0.375rem 0.75rem; letter-spacing: 0; }
}

/* ---------- Formularios ---------- */

.form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-desc,
.hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.55;
}

.hint {
    font-size: var(--fs-xs);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
}

.form-section .field {
    margin-bottom: 0;
}

.field > label,
.label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.field-reveal:not([hidden]) {
    animation: fadeDown var(--dur-3) var(--ease-out);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: var(--tap);
    padding: 0.75rem 0.875rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: max(16px, var(--fs-base)); /* 16 px o más evita el zoom automático de iOS */
    outline: none;
    box-shadow: inset 0 1px 2px var(--hairline);
}

textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.65;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

input[readonly] {
    color: var(--text-muted);
    background: var(--surface-sunken);
    box-shadow: none;
}

select {
    appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

select option {
    background: var(--surface);
    color: var(--text);
}

.code-input {
    text-align: center;
    font-size: 1.375rem !important;
    letter-spacing: 0.4em;
    font-variant-numeric: tabular-nums;
}

input[type="radio"] {
    accent-color: var(--accent-fill);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.choice {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--tap);
    cursor: pointer;
}

.choice-cards {
    border: none;
    display: grid;
    gap: 0.625rem;
}

.choice-cards legend {
    margin-bottom: 0.5rem;
}

.choice-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.choice-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.choice-card:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.choice-note {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.panel-soft {
    padding: 0.875rem;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    border: 1px dashed var(--accent-border);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ---------- Botones ---------- */

.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.125rem;
    padding: 0.75rem 1.125rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(180deg, var(--accent-strong) 0%, var(--accent-fill) 100%);
    color: var(--on-accent);
    box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.btn-link {
    width: auto;
    min-height: var(--tap);
    padding: 0.5rem 0.75rem;
    background: none;
    color: var(--accent);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-align: center;
    justify-content: center;
    align-self: center;
    margin-inline: auto;
}

.btn-small {
    width: auto;
    min-height: var(--tap);
    padding: 0.5rem 0.875rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

.btn-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-soft);
}

.btn-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Botón de Google según sus pautas de marca: fondo blanco, logotipo a color y texto oscuro (en ambos temas) */
.btn-google {
    background: #ffffff;
    color: #1f1f1f;
    border-color: #dadce0;
    font-weight: 500;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.google-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Enlace en línea dentro de un texto (abre el modal de preguntas frecuentes) */
.btn-inline {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ---------- Respuesta física al tocar y al pasar el cursor ----------
   Al pulsar: escala inmediata (curva de presión). Al soltar: vuelve con un rebote leve (spring). */

.btn,
.counter button,
.choice-card,
.account-chip,
.instagram-link,
.modal-close,
.install-close,
.rating-stars label,
.product-card,
.nav-account,
.nav-cta,
.stat-card,
.review-card,
.choice-card {
    transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
}

.btn:active:not(:disabled),
.choice-card:active,
.account-chip:active,
.instagram-link:active,
.modal-close:active,
.install-close:active,
.nav-account:active,
.nav-cta:active {
    transform: scale(0.96);
    transition-duration: var(--dur-1);
    transition-timing-function: var(--ease-press);
}

.counter button:active {
    transform: scale(0.88);
    transition-duration: var(--dur-1);
    transition-timing-function: var(--ease-press);
}

.rating-stars label:active {
    transform: scale(0.84);
    transition-duration: var(--dur-1);
    transition-timing-function: var(--ease-press);
}

/* Sombra de elevación pre-pintada: al pasar el cursor solo cambia su opacidad */
.btn-primary::after,
.btn-secondary::after,
.btn-google::after,
.product-card::after,
.instagram-link::after,
.account-chip::after,
.review-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: var(--shadow-hover);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out);
    pointer-events: none;
}

/* Brillo del botón principal: capa de luz que aparece con opacity */
.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out);
    pointer-events: none;
}

/* ---------- Productos (pedido) ---------- */

.products-section {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.product-card {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface-2);
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 var(--highlight);
}

.product-info {
    min-width: 0;
}

.product-info h3 {
    font-size: var(--fs-lg);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.125rem;
}

.price {
    font-size: var(--fs-base);
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.counter {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--surface-sunken);
    padding: 0.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    flex-shrink: 0;
}

.counter button {
    width: var(--tap);
    height: var(--tap);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.counter output {
    min-width: 2rem;
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Foto de producto: marco listo para <img> (object-fit: cover); sin foto muestra el icono del pan */
.product-photo {
    flex-shrink: 0;
    width: 3.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    overflow: hidden;
    color: var(--accent);
    background:
        radial-gradient(circle at 30% 25%, var(--photo-glint), transparent 60%),
        linear-gradient(145deg, var(--accent-soft), var(--terracotta-soft));
    border: 1px solid var(--accent-border);
}

.product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-photo .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.product-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Detalles del obrador en la carta */
.bakery-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
    text-wrap: balance;
}

.bakery-note .icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--terracotta);
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.125rem 0 0.3rem;
}

.product-tags span {
    padding: 0.0625rem 0.45rem;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--terracotta);
    background: var(--terracotta-soft);
    border: 1px solid var(--terracotta-border);
    white-space: nowrap;
}

.product-sub {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}

/* Producto en el pedido: borde terracota y un leve realce al añadir la primera unidad */
.product-card.is-selected {
    border-color: var(--terracotta-border);
    background: linear-gradient(160deg, var(--terracotta-soft), transparent 75%), var(--surface-2);
}

.product-card.is-selected .product-photo {
    animation: pop var(--dur-3) var(--ease-spring);
}

/* Móvil: foto a la izquierda en dos filas; nombre arriba y contador abajo, sin apretar el texto */
@media (max-width: 480px) {
    .product-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.875rem;
        row-gap: 0.5rem;
        align-items: center;
    }
    .product-main { display: contents; }
    .product-photo { grid-row: span 2; width: clamp(4.5rem, 22vw, 6rem); }
    .product-photo .icon { width: 2rem; height: 2rem; }
    .product-card .counter { justify-self: end; }
}

/* Canje de ñapas acumuladas: el cliente elige cuántas usar */
.napa-redeem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    margin-bottom: 1.125rem;
    border-radius: var(--radius-md);
    border: 1px dashed var(--terracotta-border);
    flex-wrap: wrap;
    background: var(--terracotta-soft);
    animation: fadeDown var(--dur-3) var(--ease-out);
}

.napa-redeem[hidden] { display: none; }

.napa-redeem .counter { margin-left: auto; }

.napa-redeem-info {
    flex: 1 1 9rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.napa-redeem-info strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
}

.napa-redeem-icon .icon,
.napa-redeem-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--terracotta);
}

.payment-note {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.35;
}

.payment-note .icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--success);
}

/* ---------- Obrador en descanso (settings/store) ---------- */

.closed-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    padding: 1.125rem 1.125rem 1.125rem 1rem;
    background:
        radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%),
        var(--surface-2);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
    animation: rise var(--dur-4) var(--ease-out) both;
}

.closed-banner[hidden] { display: none; }

.closed-banner-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--accent-border);
    color: var(--terracotta);
}

.closed-banner-icon .icon { width: 1.375rem; height: 1.375rem; }

.closed-banner-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
}

.closed-banner p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text);
    text-wrap: pretty;
}

.closed-banner .closed-banner-hint {
    margin-top: 0.375rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* La carta sigue visible pero apagada: no invita a tocar lo que no funciona */
#orderForm.is-closed .products-section,
#orderForm.is-closed .napa-redeem {
    opacity: 0.6;
    filter: saturate(0.7);
    transition: opacity var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
}

#orderForm.is-closed .counter button { cursor: not-allowed; }

/* Pequeño latido al cambiar una cantidad o el total (script.js añade .bump) */
.bump {
    display: inline-block;
    animation: bump var(--dur-3) var(--ease-spring);
}

/* ---------- Avisos ---------- */

.alert-box {
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--fs-sm);
    margin-bottom: 1.125rem;
}

.alert-box.is-success {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
    animation: pop var(--dur-3) var(--ease-spring);
}

.alert-box.is-reward {
    text-align: left;
    margin-bottom: 0;
}

.form-message {
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    margin-bottom: 1rem;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-border);
    animation: fadeDown var(--dur-3) var(--ease-out);
}

.form-section .form-message {
    margin-bottom: 0;
}

.login-card form,
main > .form-message {
    margin-top: 1rem;
}

.form-message[data-type="error"] {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-soft);
}

.form-message[data-type="success"] {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-soft);
}

.empty-state,
.loading-state {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
}

/* ---------- Resumen fijo del pedido (vidrio esmerilado) ---------- */

.summary {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0.5rem calc(-1 * var(--gutter)) 0;
    padding: 0.875rem var(--gutter) calc(0.875rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .summary {
        background: var(--surface-glass);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
        backdrop-filter: blur(18px) saturate(1.6);
    }
}

.summary-total {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.summary-total strong {
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.summary {
    flex-wrap: wrap;
}

.summary .btn {
    flex: 1;
}

/* La nota de pago va en su propia línea, bajo el total y el botón */
.summary .payment-note {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    .summary { border-radius: 0; row-gap: 0.5rem; }
}

/* ---------- Pie de página ---------- */

.site-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.625rem;
}

.footer-faq {
    margin-top: 0.625rem;
}

.instagram-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    min-height: var(--tap);
    background: var(--surface-2);
    color: var(--text);
    padding: 0.625rem 1.125rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    border: 1px solid var(--hairline);
}

.instagram-icon {
    width: 18px;
    height: 18px;
    stroke: var(--accent);
}

/* ---------- Iconos (icons.js) ---------- */

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn .icon {
    width: 18px;
    height: 18px;
}

/* ---------- Diálogos: flotan sobre un fondo difuminado ----------
   Entrada con frenada larga (ease-out). La salida la anima ui.js (clase .is-closing). */

.modal {
    margin: auto;
    width: min(100% - 2rem, 26rem);
    max-height: 90dvh;
    padding: 1.5rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--highlight);
    overscroll-behavior: contain;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal {
        background: var(--surface-glass);
        -webkit-backdrop-filter: blur(28px) saturate(1.5);
        backdrop-filter: blur(28px) saturate(1.5);
    }
}

.modal[open] {
    animation: modalIn var(--dur-4) var(--ease-out);
}

.modal.is-closing {
    animation: modalOut var(--dur-2) var(--ease-press) forwards;
}

.modal::backdrop {
    background: var(--scrim);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
}

.modal[open]::backdrop {
    animation: fadeIn var(--dur-3) var(--ease-out);
}

.modal.is-closing::backdrop {
    animation: fadeOut var(--dur-2) var(--ease-press) forwards;
}

/* En móvil, los diálogos salen desde abajo como una hoja (bottom sheet) */
@media (max-width: 600px) {
    .modal,
    .modal.modal-faq {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        max-height: 88dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }

    .modal[open] { animation: sheetIn var(--dur-4) var(--ease-out); }
    .modal.is-closing { animation: sheetOut var(--dur-2) var(--ease-press) forwards; }
}

.modal .section-desc {
    text-align: center;
}

.modal h3 {
    font-family: var(--font-serif);
    color: var(--accent);
    font-size: var(--fs-lg);
    text-align: center;
    margin-bottom: 0.5rem;
}

.info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
    font-size: var(--fs-sm);
}

.info-list li {
    background: var(--surface-2);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
}

.modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0.75rem 0.75rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-header {
        background: var(--surface-glass);
    }
}

.modal-header h2 {
    font-size: var(--fs-lg);
}

/* Punto de aterrizaje del foco al abrir: accesible para lectores de pantalla, sin aro visual */
.modal-header h2:focus {
    outline: none;
}

.modal-close {
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
}

/* ---------- Información alimentaria y alérgenos ---------- */

.food-info {
    margin: 0.25rem 0 1.125rem;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.food-info summary,
.faq-item summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--tap);
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-base);
    font-weight: 500;
    border-radius: var(--radius-md);
}

.food-info summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
    display: none;
}

.food-info summary .icon,
.faq-icon {
    color: var(--accent);
}

.chevron {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform var(--dur-3) var(--ease-spring);
}

details[open] > summary .chevron {
    transform: rotate(180deg);
}

.food-info-body {
    padding: 0.125rem 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Al desplegar: cae con un rebote elástico (transform) mientras aparece (opacity) */
details[open] > .food-info-body,
details[open] > .faq-body,
details[open] > .spec-grid {
    animation: unfold var(--dur-4) var(--ease-spring);
}

.food-info-lead {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.food-info-title {
    margin-top: 0.25rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.allergen-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.5rem;
}

.allergen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--hairline);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    box-shadow: inset 0 1px 0 var(--highlight);
}

.allergen strong {
    display: block;
    color: var(--text);
    font-size: var(--fs-base);
}

.allergen-icon {
    width: 2.125rem;
    height: 2.125rem;
    padding: 0.375rem;
    border-radius: 50%;
    color: var(--accent);
    border: 1px solid var(--accent-border);
    background: var(--accent-soft);
}

.food-info-note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.food-info-note .icon {
    width: 18px;
    height: 18px;
    margin-top: 0.125rem;
    color: var(--accent);
}

/* ---------- Preguntas frecuentes (faq.js) ---------- */

.modal-faq {
    width: min(100% - 2rem, 35rem);
    max-height: 85dvh;
    padding: 0;
    overflow: auto;
}

.faq-list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem 1rem;
}

.faq-item + .faq-item {
    border-top: 1px solid var(--hairline);
}

.faq-item summary {
    padding: 0.75rem 0.5rem;
}

.faq-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0 0.5rem 1rem 2.375rem;
    font-size: var(--fs-base);
    color: var(--text-muted);
    line-height: 1.6;
}

.faq-body strong {
    color: var(--text);
}

.faq-body ul {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-left: 1.125rem;
}

.faq-body li::marker {
    color: var(--accent);
}

.faq-note {
    font-size: var(--fs-xs);
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.contact-btn {
    width: auto;
    flex: 1 1 12rem;
}

.contact-btn .icon {
    color: var(--accent);
}

@media (max-width: 480px) {
    .faq-body { padding-left: 0.5rem; }
}

/* ---------- Reseñas ---------- */

.page-section + .page-section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

.page-section > h2 {
    margin-bottom: 0.75rem;
}

.rating-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr auto 2.5em;
    align-items: center;
    gap: 0.625rem;
}

.summary-row strong {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stars-static {
    color: var(--accent);
    letter-spacing: 0.06em;
}

.rating {
    border: none;
}

.rating legend {
    font-weight: 600;
    margin-bottom: 0.125rem;
}

/* Estrellas accesibles: radios reales, en orden 5→1 y mostrados al revés */
.rating-stars {
    display: inline-flex;
    flex-direction: row-reverse;
}

.rating-stars input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rating-stars label {
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    color: var(--surface-3);
    cursor: pointer;
}

.rating-stars input:checked ~ label {
    color: var(--accent-fill);
}

.rating-stars input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
    border-radius: var(--radius-sm);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-card {
    position: relative;
    isolation: isolate;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    box-shadow: inset 0 1px 0 var(--highlight);
    animation: rise var(--dur-3) var(--ease-out) both;
}

.review-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 0.625rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.verified {
    color: var(--success);
    font-weight: 600;
}

.review-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    font-size: var(--fs-sm);
}

.review-comment {
    margin-top: 0.5rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.signed-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ---------- Validación del teléfono en tiempo real ---------- */

.field.is-valid input { border-color: var(--success); }
.field.is-invalid input { border-color: var(--danger); }

.field-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.25rem;
    font-size: var(--fs-xs);
    font-weight: 500;
}

.field-status:empty { display: none; }
.field.is-valid .field-status { color: var(--success); }
.field.is-invalid .field-status { color: var(--danger); animation: fadeDown var(--dur-2) var(--ease-out); }

.phone-input {
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Mi cuenta y Valoraciones ----------
   Lectura natural a la izquierda (como el formulario de pedido): pedidos, reseñas, avisos y formulario.
   Al centro solo lo que pide simetría: títulos de sección, contadores, código de invitación, medias y acciones. */

.page-centered .page-section > h2,
.page-centered .referral-code {
    text-align: center;
}

.page-centered .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

/* El panel pone la última tarjeta a todo el ancho en móvil; aquí las tres van en una fila */
.page-centered .stat-card:last-child {
    grid-column: auto;
}

/* El hueco de «instalar la app» (#installSlot) no debe romper la separación entre secciones */
.page-centered > .page-section ~ .page-section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

.page-centered .stat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0.375rem;
}

.page-centered .stat-card h3 {
    font-size: clamp(0.625rem, 0.55rem + 0.4vw, 0.75rem);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.page-centered .stats-grid + .hint {
    margin-bottom: 0;
}

/* Medias de valoración: bloque compacto centrado (sus filas se leen de izquierda a derecha) */
.page-centered .rating-summary {
    align-items: center;
}

.page-centered .rating-summary .hint {
    text-align: center;
}

.page-centered .summary-row {
    width: min(100%, 20rem);
    grid-template-columns: 5.5rem auto 2.5em;
    justify-content: center;
}

.page-centered .page-section > .btn-link {
    display: flex;
}

/* ---------- Cuenta del cliente ---------- */

.account-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--tap);
    margin-top: 0.75rem;
    padding: 0.375rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--text);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.account-chip strong {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.account-chip .icon {
    width: 17px;
    height: 17px;
    color: var(--accent);
}

.chip-divider {
    width: 1px;
    height: 1rem;
    margin: 0 0.25rem;
    background: var(--border);
}

.account-stats {
    margin: 1rem 0 0.5rem;
}

.order-line {
    margin: 0.25rem 0;
}

.referral-code {
    color: var(--text-muted);
}

.referral-code strong {
    color: var(--accent);
    font-size: var(--fs-lg);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Invitación a instalar la app (PWA) ---------- */

.install-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.125rem;
    padding: 0.875rem;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    animation: rise var(--dur-4) var(--ease-out) both;
}

.install-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.install-body {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.install-body strong {
    color: var(--accent);
    font-size: var(--fs-base);
}

.install-body p {
    color: var(--text-muted);
}

.btn-install {
    align-self: flex-start;
    background: linear-gradient(180deg, var(--accent-strong) 0%, var(--accent-fill) 100%);
    color: var(--on-accent);
    border: none;
    font-weight: 600;
}

.install-steps {
    padding-left: 1.25rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ios-share {
    display: inline-block;
    color: var(--info);
    font-weight: 700;
}

.install-close {
    width: var(--tap);
    height: var(--tap);
    margin: -0.625rem -0.625rem 0 0;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

/* ---------- Panel del obrador ---------- */

.admin-page .admin-container {
    width: min(100%, 64rem);
}

.dashboard-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.login-card {
    width: min(100%, 26rem);
    margin: 2rem auto;
    background: var(--surface);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--highlight);
    animation: rise var(--dur-4) var(--ease-out) both;
}

.login-card h2 {
    margin-bottom: 0.25rem;
}

.section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 1.75rem 0 0.875rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--surface);
    padding: 1rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
    text-align: center;
}

.stat-card h3 {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
}

.stat-card .number {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.stat-card .number.profit {
    color: var(--success);
}

.finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.panel-box {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 1.125rem;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
}

.panel-box h2 {
    font-size: var(--fs-base);
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ingredient-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--tap);
    background: var(--surface-sunken);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    border: 1px solid var(--hairline);
}

.ingredient-item strong {
    color: var(--accent);
    white-space: nowrap;
}

.ingredient-item.is-total {
    border-color: var(--accent-border);
}

.cost-field {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--accent);
    font-weight: 600;
}

.cost-field input {
    width: 5.5rem;
    min-height: 40px;
    padding: 0.375rem 0.5rem;
    text-align: right;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.order-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 1.125rem;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1rem;
}

.order-info {
    flex: 1 1 16rem;
    min-width: 0;
}

.order-info h3 {
    font-size: var(--fs-lg);
    margin-bottom: 0.375rem;
    overflow-wrap: anywhere;
}

.order-phone {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    margin-left: 0.375rem;
}

.order-meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.order-meta strong {
    color: var(--text);
}

.meta-success { color: var(--success); font-weight: 600; }
.meta-danger { color: var(--danger); font-weight: 600; }
.meta-accent { color: var(--accent); font-weight: 600; }

.badge-status {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pending { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.status-preparing { background: var(--info-soft); color: var(--info); }
.status-ready { background: var(--violet-soft); color: var(--violet); }
.status-completed { background: var(--success-soft); color: var(--success); }
.status-rejected { background: var(--danger-soft); color: var(--danger); }

.actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.admin-tools,
.test-tools {
    margin-top: 1.75rem;
}

.admin-tools summary,
.test-tools summary {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

.test-tools {
    border-color: var(--violet-soft);
}

.test-tools summary {
    color: var(--violet);
}

.admin-tools[open] summary,
.test-tools[open] summary {
    margin-bottom: 0.75rem;
}

.test-accounts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.375rem 1rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .admin-page { padding: 1rem 0.75rem calc(1rem + env(safe-area-inset-bottom)); }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-card:last-child { grid-column: 1 / -1; }
    .order-card { padding: 0.875rem; }
    .actions-bar .btn-small { flex: 1 1 calc(50% - 0.25rem); }
}

/* ---------- Dashboard del obrador ---------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dashboard-actions .icon,
.dash-section h2 .icon {
    width: 17px;
    height: 17px;
}

#biometricToggleBtn.is-active {
    color: var(--success);
}

.dash-section {
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    animation: rise var(--dur-4) var(--ease-out) both;
}

.dash-section + .dash-section { animation-delay: 60ms; }

.dash-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.dash-section-head .section-title {
    margin: 0;
}

.dash-section > .section-title {
    margin-top: 0;
}

.panel-box h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sunday-select {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.sunday-select .icon {
    position: absolute;
    left: 0.75rem;
    width: 17px;
    height: 17px;
    color: var(--accent);
    pointer-events: none;
}

.sunday-select select {
    width: auto;
    min-width: 15rem;
    padding-left: 2.4rem;
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Indicadores de producción */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.75rem;
}

.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
}

.kpi-card.is-hero {
    grid-column: span 2;
    background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--surface);
    border-color: var(--accent-border);
}

.kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kpi-label .icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.kpi-value {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.is-hero .kpi-value {
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    color: var(--accent);
}

/* Horneados: ya salieron del horno (listos o entregados) */
.kpi-card.is-done {
    background: linear-gradient(160deg, var(--success-soft), transparent 70%), var(--surface);
    border-color: var(--success-soft);
}

.kpi-card.is-done .kpi-label .icon,
.is-done .kpi-value {
    color: var(--success);
}

.is-done .kpi-value {
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.kpi-value.profit {
    color: var(--success);
}

.kpi-sub {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Barra de encargos: control segmentado + buscador */
.orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.segmented {
    --tab-index: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 2 1 26rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
}

/* La píldora se desliza con transform (una por cada cuarto del control) */
.segmented-indicator {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0.25rem;
    width: calc((100% - 0.5rem) / 4);
    border-radius: calc(var(--radius-md) - 4px);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: translate3d(calc(var(--tab-index) * 100%), 0, 0);
    transition: transform var(--dur-3) var(--ease-out);
}

.segmented [role="tab"] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: var(--tap);
    padding: 0.25rem 0.375rem;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: transform var(--dur-3) var(--ease-spring);
}

.segmented [role="tab"][aria-selected="true"] {
    color: var(--text);
    font-weight: 600;
}

.segmented [role="tab"]:active {
    transform: scale(0.96);
    transition-duration: var(--dur-1);
}

.tab-count {
    min-width: 1.4rem;
    padding: 0 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 15rem;
}

.search-field .icon {
    position: absolute;
    left: 0.875rem;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-field input {
    padding-left: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--surface);
}

@media (max-width: 560px) {
    .segmented [role="tab"] {
        flex-direction: column;
        gap: 0.125rem;
        font-size: var(--fs-xs);
    }
}

/* Monitor de costes */
.margin-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
}

.margin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.25rem;
}

.margin-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-base);
}

.margin-head .icon {
    color: var(--accent);
}

.margin-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}

.margin-label { font-weight: 500; }
.margin-cost { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.margin-ok { color: var(--success); font-variant-numeric: tabular-nums; }
.margin-bad { color: var(--danger); font-variant-numeric: tabular-nums; }

.cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.75rem;
}

.cost-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
}

.cost-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cost-card h3 {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.3;
}

.supplier-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-decoration: none;
}

.supplier-link .icon {
    width: 13px;
    height: 13px;
}

.trend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trend-chip .icon {
    width: 14px;
    height: 14px;
}

.trend-chip.is-up { background: var(--danger-soft); color: var(--danger); }
.trend-chip.is-down { background: var(--success-soft); color: var(--success); }
.trend-chip.is-flat { background: var(--surface-2); color: var(--text-muted); }

.price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.price-prev {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.price-arrow { color: var(--text-muted); }

.price-now {
    font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.price-note {
    font-size: var(--fs-xs);
    color: var(--accent);
}

.impact-line {
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.impact-line.is-up { color: var(--danger); }
.impact-line.is-down { color: var(--success); }
.impact-line.is-warning { color: var(--accent); }

.price-update {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.price-field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.price-field input {
    padding-right: 2rem;
    font-variant-numeric: tabular-nums;
}

.price-field span {
    position: absolute;
    right: 0.875rem;
    color: var(--text-muted);
    pointer-events: none;
}

.recipe-spec {
    border-top: 1px solid var(--hairline);
    padding-top: 0.25rem;
}

.recipe-spec summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap);
    list-style: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.recipe-spec summary::-webkit-details-marker { display: none; }

.other-costs {
    margin-top: 1rem;
    padding: 0.25rem 1rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.625rem;
    align-items: end;
    animation: fadeDown var(--dur-3) var(--ease-out);
}

.spec-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ingredient-item .supplier-link {
    color: var(--text);
    font-size: var(--fs-sm);
}

/* Pantalla de bloqueo y acceso biométrico */
.lock-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.lock-glyph {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 0.25rem;
    border-radius: 1.4rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
}

.lock-glyph .icon {
    width: 2.4rem;
    height: 2.4rem;
}

.btn-biometric .icon {
    width: 22px;
    height: 22px;
}

/* Alerta estilo iOS (oferta de Face ID) */
.modal.ios-alert {
    width: min(100% - 3rem, 18.5rem);
    padding: 0;
    margin: auto;
    border-radius: 1.1rem;
    text-align: center;
    overflow: hidden;
}

.ios-alert-body {
    padding: 1.25rem 1.1rem 1rem;
}

.ios-alert-body .lock-glyph {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
}

.ios-alert-body .lock-glyph .icon {
    width: 1.9rem;
    height: 1.9rem;
}

.ios-alert-body h3 {
    color: var(--text);
    margin-bottom: 0.375rem;
}

.ios-alert-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
}

.ios-alert-btn {
    min-height: 2.9rem;
    border: none;
    background: none;
    color: var(--accent);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: opacity var(--dur-2) var(--ease-out);
}

.ios-alert-btn + .ios-alert-btn {
    border-left: 1px solid var(--border);
}

.ios-alert-btn.is-default {
    font-weight: 600;
}

/* El aro de foco va por dentro: la alerta recorta lo que sobresale */
.ios-alert-btn:focus-visible {
    outline-offset: -3px;
    border-radius: 0.5rem;
}

.ios-alert h3:focus {
    outline: none;
}

.ios-alert-btn:active {
    opacity: 0.5;
    transition-duration: var(--dur-1);
}

/* La alerta de iOS siempre aparece centrada, también en móvil (no como hoja inferior) */
@media (max-width: 600px) {
    .modal.ios-alert {
        width: min(100% - 3rem, 18.5rem);
        margin: auto;
        border-radius: 1.1rem;
        padding-bottom: 0;
    }

    .modal.ios-alert[open] { animation: modalIn var(--dur-4) var(--ease-out); }
    .modal.ios-alert.is-closing { animation: modalOut var(--dur-2) var(--ease-press) forwards; }
}

/* Aviso flotante (ui.js → toast) */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 100;
    max-width: min(92vw, 30rem);
    padding: 0.8rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transform: translate3d(-50%, 1rem, 0) scale(0.97);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out);
    pointer-events: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .toast {
        background: var(--surface-glass);
        -webkit-backdrop-filter: blur(20px) saturate(1.5);
        backdrop-filter: blur(20px) saturate(1.5);
    }
}

.toast.is-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.toast[data-type="success"] { color: var(--success); }
.toast[data-type="error"] { color: var(--danger); }

@media (max-width: 480px) {
    .kpi-card.is-hero { grid-column: 1 / -1; }
    .sunday-select, .sunday-select select { width: 100%; min-width: 0; }
}

/* ---------- Indicador de versión (pie, casi imperceptible) ---------- */

.app-version {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.4;
    font-variant-numeric: tabular-nums;
    user-select: none;
    pointer-events: none;
}

.site-footer > .app-version {
    margin-top: 0.5rem;
}

.admin-container > .app-version {
    margin-top: 2rem;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Modo pruebas ---------- */

.env-banner {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.5rem;
    background: var(--violet-soft);
    color: var(--violet);
    border-bottom: 1px solid var(--violet-soft);
    font-size: var(--fs-xs);
    text-align: center;
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
}

body.has-env-banner {
    padding-top: calc(var(--env-banner-h, 4rem) + 1rem);
}

body.has-env-banner .top-nav {
    top: var(--env-banner-h, 4rem);
}

@media (max-width: 480px) {
    body.has-env-banner { padding-top: var(--env-banner-h, 4rem); }
}

.test-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--violet-soft);
    color: var(--violet);
    font-size: var(--fs-xs);
    font-weight: 600;
    vertical-align: middle;
}

/* ---------- Cursor (solo ordenadores con ratón o trackpad) ----------
   Elevación sutil + sombra pre-pintada que aparece con opacity. En táctil no se aplica
   para que los efectos no se queden "pegados" tras tocar. */

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover:not(:disabled),
    .btn-secondary:hover:not(:disabled),
    .btn-google:hover,
    .instagram-link:hover,
    .account-chip:hover {
        transform: translate3d(0, -1px, 0);
    }

    .product-card:hover,
    .stat-card:hover,
    .review-card:hover {
        transform: translate3d(0, -2px, 0);
    }

    .nav-account:hover,
    .nav-cta:hover {
        transform: translate3d(0, -1px, 0);
    }

    .nav-account:hover::after,
    .nav-cta:hover::after,
    .stat-card:hover::after {
        opacity: 1;
    }

    .btn-primary:hover:not(:disabled)::after,
    .btn-primary:hover:not(:disabled)::before,
    .btn-secondary:hover:not(:disabled)::after,
    .btn-google:hover::after,
    .product-card:hover::after,
    .instagram-link:hover::after,
    .account-chip:hover::after,
    .review-card:hover::after {
        opacity: 1;
    }

    .btn-secondary:hover:not(:disabled),
    .instagram-link:hover,
    .food-info summary:hover,
    .faq-item summary:hover,
    .btn-small:hover {
        color: var(--accent);
    }

    .counter button:hover {
        transform: scale(1.04);
    }

    .modal-close:hover {
        color: var(--text);
    }

    .rating-stars label:hover,
    .rating-stars label:hover ~ label {
        color: var(--accent-strong);
    }
}

/* ---------- Accesibilidad: sin movimiento si el sistema lo pide ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* ---------- Panel: estado del obrador (interruptor compacto en la cabecera de Producción) ---------- */

.dash-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.store-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding: 0.25rem 0.375rem 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--success-soft);
    border: 1px solid var(--success);
    color: var(--success);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

.store-pill[data-open="false"] {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
}

.store-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.store-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.switch-track {
    position: relative;
    width: 3.25rem;
    height: 1.9rem;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1px solid var(--border);
    transition: background var(--dur-2) var(--ease-out);
}

.switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
    transition: transform var(--dur-3) var(--ease-spring);
}

.store-pill input:checked + .switch-track { background: var(--success); border-color: var(--success); }
.store-pill input:checked + .switch-track .switch-thumb { transform: translate(1.35rem, -50%); }
.store-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.store-pill:has(input:disabled) { cursor: progress; }
.store-pill input:disabled + .switch-track { opacity: 0.6; }

/* ---------- Panel: receta a la vista e importación del catálogo privado ---------- */

.file-button { position: relative; cursor: pointer; }
.file-button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.recipe-panel {
    margin-bottom: 1rem;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--highlight);
}

.recipe-panel h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.625rem;
    font-size: var(--fs-base);
}

.recipe-panel h3 .icon { width: 1.125rem; height: 1.125rem; color: var(--accent); }

.recipe-subtitle {
    margin: 0.875rem 0 0.375rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.recipe-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recipe-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}

.recipe-empty { text-align: center; }
.recipe-empty h3 { justify-content: center; }
.recipe-empty .hint { margin: 0 auto 1rem; max-width: 32rem; }

.recipe-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Mi cuenta: el pedido cuyo estado acaba de cambiar (onSnapshot) se ilumina un momento */
.review-card.is-updated { animation: order-updated 1.6s var(--ease-out); }

@keyframes order-updated {
    0%, 30% { box-shadow: 0 0 0 2px var(--success), var(--shadow-sm); }
    100% { box-shadow: var(--shadow-sm); }
}

@media (prefers-reduced-motion: reduce) {
    .review-card.is-updated { animation: none; }
}

/* ---------- Carta: confirmación tras reservar (acceso directo al seguimiento) ---------- */

.order-done { text-align: center; }

.order-done-glyph {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: var(--success-soft);
    border: 1px solid var(--success);
    color: var(--success);
    animation: pop var(--dur-4) var(--ease-spring);
}

.order-done-glyph .icon { width: 1.75rem; height: 1.75rem; }

.order-done-summary {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 1rem 0 1.25rem;
    padding: 0.875rem 1rem;
    list-style: none;
    text-align: left;
    font-size: var(--fs-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
}

.order-done-summary li:last-child {
    padding-top: 0.375rem;
    border-top: 1px solid var(--hairline);
    font-weight: 600;
}

.btn-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.5rem;
    font-size: var(--fs-lg);
    text-decoration: none;
}

.btn-track .icon { width: 1.375rem; height: 1.375rem; }

.order-done-hint { margin: 0.625rem 0 0.25rem; }

/* Mi cuenta: el pedido que se viene a seguir desde la confirmación */
.review-card.is-tracked {
    border-color: var(--success);
    box-shadow: 0 0 0 1px var(--success), var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    .order-done-glyph { animation: none; }
}