.public-body {
    display: flex;
    flex-direction: column;
}

.food-checkout{position:sticky;top:1rem}.delivery-choice{display:grid;gap:.65rem;margin:.6rem 0 1.25rem}.delivery-choice label{display:flex;gap:.75rem;padding:.85rem;border:1px solid var(--border);border-radius:.85rem;cursor:pointer}.delivery-choice input{margin-top:.25rem}.delivery-choice strong,.delivery-choice small{display:block}.delivery-choice small{margin-top:.2rem;color:var(--muted)}

.food-category{display:flex;align-items:center;gap:.65rem}.food-category img{width:42px;height:42px;border-radius:10px;object-fit:cover}

.food-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: 24px; align-items: start; }
.food-page-brand { display: flex; justify-content: center; margin: 0 0 14px; }
.food-page-brand .brand-public { display: inline-flex; padding: 0; border-radius: 0; background: transparent; max-width: 100%; box-shadow: none; }
.food-page-brand .brand-logo { height: clamp(72px, 12vw, 120px); width: auto; max-width: min(320px, 80vw); }
.food-product-grid { display: grid; gap: 12px; }
.food-category { margin: 20px 0 2px; font-family: var(--font-display); font-size: 1.3rem; }
.food-category:first-child { margin-top: 0; }
.food-product { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.food-product > img { width: 82px; height: 82px; border-radius: 14px; object-fit: cover; }
.food-product:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
.food-page .booking-aside { position: static; }
.food-product strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }
.food-product p { margin: 0 0 7px; color: var(--ink-soft); white-space: normal; overflow-wrap: anywhere; }
.food-product div > span { color: var(--accent); font-weight: 700; }
.quantity-control { display: grid; gap: 5px; width: 86px; color: var(--ink-soft); font-size: .78rem; }
.quantity-control input { width: 100%; text-align: center; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }

@media (max-width: 900px) {
    .food-order-layout { grid-template-columns: 1fr; }
    .food-page-brand { justify-content: center; }
}

@media (max-width: 560px) {
    .food-product { grid-template-columns: 64px minmax(0, 1fr); }
    .food-product:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
    .food-product > img { width: 64px; height: 64px; }
    .quantity-control { grid-column: 1 / -1; width: 100%; grid-template-columns: 1fr 90px; align-items: center; }
}

.public-body main {
    flex: 1;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(244, 241, 234, 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
}

.page-business .site-header {
    background: var(--bg);
    backdrop-filter: none;
    border-bottom-color: var(--line);
}

.site-header .brand-logo {
    height: clamp(48px, 7vw, 68px);
    max-width: min(300px, 58vw);
}

.field-comment,
.summary-list li.is-comment strong,
.booking-summary-list li.is-comment strong {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.summary-list li.is-comment,
.booking-summary-list li.is-comment {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
}

.summary-list li.is-comment strong,
.booking-summary-list li.is-comment strong {
    text-align: left;
    min-width: 0;
}

.header-inner,
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--header-h);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero {
    padding: 48px 0 28px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.lead {
    max-width: 34rem;
    margin: 18px 0 28px;
    font-size: 1.12rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-panel {
    display: flex;
    justify-content: flex-end;
}

.preview-card {
    width: min(100%, 360px);
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.preview-label {
    margin-bottom: 18px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.preview-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.preview-button {
    width: 100%;
    margin-top: 18px;
}

.section {
    padding: 36px 0 64px;
}

.section-muted {
    background: var(--bg-muted);
}

.section-heading {
    max-width: 36rem;
    margin-bottom: 28px;
}

.section-heading p {
    margin-top: 10px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.step-card,
.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.step-card {
    padding: 24px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}

.step-card p {
    margin-top: 10px;
    color: var(--ink-soft);
}

.rubro-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.rubro-list li {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-weight: 600;
}

.auth-section {
    padding: 48px 0 72px;
}

.auth-card {
    display: grid;
    justify-items: center;
    padding: 32px 28px;
    text-align: center;
}

.auth-card .brand {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 22px;
}

.auth-card .brand-logo {
    height: clamp(56px, 10vw, 76px);
    max-width: min(280px, 80%);
    margin: 0 auto;
}

.auth-card h1 {
    width: 100%;
    font-size: 2.1rem;
    text-align: center;
}

.auth-card .muted {
    max-width: 26rem;
    margin: 10px auto 24px;
    text-align: center;
}

.auth-error,
.flash {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 600;
}

.auth-error,
.flash-error {
    background: #f6e4dc;
    color: #8a3418;
}

.flash-ok {
    background: var(--accent-soft);
    color: var(--accent);
}

.auth-hint {
    margin-top: 16px;
}

.booking-page {
    padding: 28px 0 80px;
}

.booking-hero {
    margin-bottom: 28px;
}

.booking-hero-simple {
    max-width: 36rem;
}

.booking-identity {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.booking-avatar,
.pro-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.4rem;
    flex-shrink: 0;
}

img.booking-photo {
    object-fit: cover;
    padding: 0;
    background: var(--bg-muted);
}

.pro-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1rem;
    background: var(--accent-soft);
    color: var(--accent);
}

.booking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
}

.booking-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.booking-social {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}

.booking-social svg {
    width: 20px;
    height: 20px;
}

.booking-social:hover {
    background: var(--accent);
    color: #fff;
}

.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    gap: 24px;
    align-items: start;
}

.booking-flow,
.booking-step,
.booking-summary-card,
.booking-receipt {
    display: grid;
    gap: 18px;
}

.booking-aside {
    display: grid;
    gap: 18px;
}

.booking-aside .food-page-brand {
    margin-bottom: 0;
}

.booking-step,
.booking-summary-card,
.booking-receipt,
.booking-empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.booking-step-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.booking-step-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 800;
}

.booking-step-head p,
.booking-summary-card .muted {
    margin-top: 6px;
    color: var(--ink-soft);
}

.service-grid,
.professional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.choice-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-card-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.choice-card-copy {
    color: var(--ink-soft);
    font-weight: 500;
    white-space: normal;
    overflow-wrap: anywhere;
}

.choice-card small {
    color: var(--ink-soft);
    font-weight: 600;
}

.choice-card:hover,
.date-chip:hover:not(.is-closed) {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.choice-card:has(input:checked),
.date-chip:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.pro-card {
    align-items: flex-start;
    min-height: 72px;
}

.pro-card .choice-card-body {
    width: 100%;
}

.pro-card .choice-card-copy {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.is-hidden {
    display: none !important;
}

.date-chip-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
}

.date-chip {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 74px;
    padding: 10px 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}

.date-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.date-chip span {
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.date-chip strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
}

.date-chip.is-closed {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bg-muted);
}

.date-fallback {
    max-width: 220px;
}

.has-js .booking-refresh {
    display: none;
}

.booking-aside {
    position: sticky;
    top: 96px;
}

.booking-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.booking-summary-total strong {
    font-family: var(--font-display);
    font-size: 2rem;
}

.booking-summary-list,
.summary-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.booking-summary-list li,
.summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.booking-summary-list span,
.summary-list span {
    color: var(--ink-soft);
}

.slot-groups,
.slot-group,
.slots {
    display: grid;
    gap: 10px;
}

.slot-group-label {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.slots {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

.duration-breakdown {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.duration-breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
}

.duration-breakdown .is-total {
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 1.02rem;
}

.day-agenda,
.timeline-list,
.slot-span {
    display: grid;
    gap: 8px;
}

.day-agenda-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 4px;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

.day-agenda-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: middle;
}

.leg-available::before {
    background: var(--accent);
}

.leg-occupied::before {
    background: #b08968;
}

.leg-blocked::before {
    background: #c9c3b8;
}

.slot-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 42px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.slot-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.slot-row.is-available {
    position: relative;
    cursor: pointer;
}

.slot-row.is-occupied {
    background: #f6eee6;
    border-color: #e4d2c2;
}

.slot-row.is-blocked {
    background: #f4f1ea;
    color: var(--ink-soft);
}

.slot-row.is-available:has(input:checked),
.slot-row.is-in-span {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.slot-row.is-span-end {
    border-style: dashed;
}

.slot-time {
    font-weight: 800;
}

.slot-status {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
}

.slot-span {
    padding: 12px;
    border: 1px solid var(--accent);
    border-radius: 14px;
    background: var(--accent-soft);
}

.slot-span p {
    margin: 0;
    font-weight: 700;
}

.slot-span ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slot-span li {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.booking-confirm-form .day-agenda {
    gap: 12px;
}

.booking-confirm-form .slot-row:not(.is-available) {
    display: none;
}

.booking-confirm-form .timeline-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}

.booking-confirm-form .slot-row.is-available {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    min-height: 44px;
    padding: 8px 6px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.booking-confirm-form .slot-row.is-available:hover {
    border-color: var(--accent);
    background: var(--accent-softer);
}

.booking-confirm-form .slot-row.is-available:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 2px;
}

.booking-confirm-form .slot-row.is-available:has(input:checked),
.booking-confirm-form .slot-row.is-in-span {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-ink);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.booking-confirm-form .slot-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.booking-confirm-form .slot-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
}

@media (max-width: 560px) {
    .booking-confirm-form .timeline-list {
        grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
        gap: 7px;
    }
    .booking-confirm-form .slot-row.is-available {
        min-height: 42px;
        border-radius: 10px;
    }
}

.booking-ok {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.booking-receipt.is-confirmed {
    border-color: var(--accent);
}

.panel .form-foot {
    text-align: center;
}

.site-footer {
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
}

@media (min-width: 1100px) {
    .hero {
        padding: 64px 0 40px;
    }

    .booking-page .booking-hero:not(.booking-hero-simple) {
        max-width: calc(100% - 384px);
    }

    .booking-layout {
        align-items: start;
    }

    .booking-aside {
        position: sticky;
        top: 16px;
    }
}

@media (max-width: 1099px) {
    .header-inner,
    .footer-inner {
        min-height: 64px;
        gap: 10px;
    }

    .header-nav {
        gap: 8px;
    }

    .header-nav .text-link {
        display: none;
    }

    .header-nav .button {
        min-height: 40px;
        padding: 0 14px;
    }

    .hero {
        padding: 24px 0 12px;
    }

    .hero-grid,
    .booking-layout,
    .steps {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .button,
    .preview-card {
        width: 100%;
    }

    .hero-panel {
        position: static;
        justify-content: stretch;
    }

    .auth-section {
        padding: 28px 0 48px;
    }

    .auth-card {
        padding: 22px 18px;
    }

    .booking-page {
        padding: 16px 0 calc(24px + env(safe-area-inset-bottom));
    }

    .booking-identity {
        align-items: center;
    }

    .booking-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.2rem;
    }

    .booking-step,
    .booking-summary-card,
    .booking-receipt {
        padding: 16px;
        border-radius: 20px;
    }

    .service-grid,
    .professional-grid {
        grid-template-columns: 1fr;
    }

    .date-chip-row {
        grid-template-columns: repeat(4, minmax(64px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .choice-card,
    .date-chip {
        min-height: 52px;
    }

    .page-business .booking-aside {
        position: static;
        margin: 0;
        padding: 0;
        background: none;
    }

    .booking-summary-card {
        box-shadow: var(--shadow);
    }

    .site-footer {
        padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
        font-size: 0.85rem;
    }
}

@media (max-width: 767px) {
    .brand-name {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .booking-hero {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .booking-identity {
        gap: 12px;
    }

    .booking-identity > div {
        min-width: 0;
    }

    .booking-meta {
        gap: 6px 10px;
        font-size: 0.9rem;
    }

    .date-chip-row {
        grid-template-columns: repeat(3, minmax(72px, 1fr));
    }

    .summary-list li,
    .booking-summary-list li {
        flex-wrap: wrap;
    }

    .summary-list strong,
    .booking-summary-list strong {
        min-width: 0;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .auth-card .button,
    .auth-card .button-block {
        width: 100%;
    }

    .day-agenda-legend {
        flex-wrap: wrap;
    }
}

/* Carta y checkout: lectura y acciones cómodas desde teléfono. */
@media (max-width: 560px) {
    .food-page .container { padding-left: 12px; padding-right: 12px; }
    .food-product { gap: 12px; padding: 14px; border-radius: 16px; }
    .food-product strong { font-size: 1rem; }
    .food-product p { font-size: .88rem; line-height: 1.35; }
    .quantity-control { grid-template-columns: minmax(0,1fr) 88px; padding-top: 8px; border-top: 1px solid var(--line); }
    .quantity-control .text-link { justify-self: start; min-height: 40px; padding: 0 10px; border-radius: 9px; background: var(--accent-soft); }
    .food-checkout { gap: 14px; }
    .delivery-choice label { min-height: 70px; padding: 12px; border-radius: 14px; }
    .food-page .booking-aside { margin-left: -12px; margin-right: -12px; }
    .food-page .booking-summary-card { border-radius: 18px 18px 0 0; }
}

.page-business:has(.food-page-brand) .site-header{display:none}
.confirmation-page .food-page-brand{display:flex;justify-content:center;margin:0 0 22px}
.confirmation-page .food-page-brand .brand-public{padding:0;border-radius:0;background:transparent;box-shadow:none}
.confirmation-page .food-page-brand .brand-logo{height:clamp(64px,11vw,96px);width:auto;max-width:min(300px,72vw)}
html.food-public.food-theme-oscuro .confirmation-page .food-page-brand .brand-public,
html.food-public.food-theme-oscuro .food-page-brand .brand-public{background:transparent;box-shadow:none}

/* Identidad pública: foto grande; en gastronomía el logo va sobre el checkout. */
.booking-hero{margin-bottom:22px}
.booking-identity{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px 20px;align-items:center;min-width:0}
.booking-avatar,img.booking-photo{width:132px;height:132px;border-radius:32px;box-shadow:var(--shadow-xs)}
.booking-identity-copy{display:grid;gap:10px;min-width:0}
.booking-identity-heading .eyebrow{margin:0 0 4px}
.booking-identity h1{margin:0;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.08;letter-spacing:-.04em}
.booking-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.booking-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:36px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink);text-decoration:none}
.booking-chip .icon{width:16px;height:16px;padding:0;border-radius:0;background:none;color:var(--accent);box-sizing:content-box}
.booking-chip strong{overflow:hidden;max-width:100%;font-size:.82rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.booking-chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.booking-socials{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.booking-social{display:inline-flex;width:auto;height:36px;padding:0 12px 0 8px;gap:7px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 4px 12px rgba(20,32,25,.08)}
.booking-social img,.booking-social svg{width:20px;height:20px;object-fit:contain;border-radius:5px}
.booking-social span{font-size:.72rem;font-weight:800}
.booking-social-whatsapp,.booking-social-instagram,.booking-social-facebook,.booking-social-tiktok{background:var(--surface);color:var(--ink)}
.booking-social:hover{transform:translateY(-1px);filter:none;border-color:var(--accent);color:var(--ink)}

/* Confirmación amable y con jerarquía de comprobante. */
.confirmation-page{padding-top:clamp(28px,6vw,64px)}.confirmation-hero{text-align:center}.confirmation-check{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 30%,transparent)}.confirmation-check svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.confirmation-hero h1{margin:4px 0 9px;font-family:var(--font-sans);font-size:clamp(2rem,7vw,3rem);font-weight:800}.confirmation-hero>p:last-child{max-width:440px;margin:0 auto;color:var(--ink-soft);line-height:1.6}.confirmation-main-card{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;align-items:center;margin:25px 0 12px;padding:16px;border-radius:17px;background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.confirmation-date{display:grid;overflow:hidden;border-radius:11px;background:#fff;color:#18201c;text-align:center}.confirmation-date span{padding:4px;background:var(--warm);color:#fff;font-size:.65rem;font-weight:800;letter-spacing:.08em}.confirmation-date strong{padding:5px;font-size:1.55rem}.confirmation-main-card small{color:rgba(255,255,255,.72)}.confirmation-main-card h2{margin:2px 0 4px;font-family:var(--font-sans);font-size:1rem}.confirmation-main-card p{color:rgba(255,255,255,.82);font-size:.82rem}.receipt-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.receipt-title h2{font-family:var(--font-sans);font-size:1rem}.booking-receipt .summary-list strong small{display:block;margin-top:2px;color:var(--ink-soft);font-weight:500}.confirmation-note{margin:16px 0;padding:13px 14px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}.confirmation-note strong{display:block;font-size:.82rem}.confirmation-note p{margin-top:3px;color:var(--ink-soft);font-size:.78rem;line-height:1.45}.order-code{margin:0 0 12px;color:var(--ink-faint);font-size:.78rem;font-weight:800;letter-spacing:.08em}.confirmation-page .status-pill{display:inline-flex;align-items:center;flex:0 0 auto;min-height:26px;padding:0 10px;border-radius:999px;background:var(--warning-soft);color:var(--warning);font-size:.72rem;font-weight:800}.confirmation-page .status-confirmado{background:var(--accent-soft);color:var(--accent-ink,var(--accent))}.confirmation-page .button-block+.button-block{margin-top:8px}html.food-public .confirmation-check,html.food-public .confirmation-main-card{background:var(--food-accent);color:var(--food-on-accent,#fff)}html.food-public .confirmation-main-card small,html.food-public .confirmation-main-card p{color:color-mix(in srgb,var(--food-on-accent,#fff) 78%,transparent)}html.food-public .confirmation-hero h1,html.food-public .confirmation-hero p,html.food-public .receipt-title h2{font-family:var(--font-sans);color:var(--ink)}

.qty-stepper{display:inline-flex;align-items:center;gap:2px;width:max-content;max-width:100%;min-height:44px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.qty-stepper button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink,var(--accent));font:inherit;font-size:1.25rem;font-weight:700;line-height:1;cursor:pointer}
.qty-stepper input{width:2rem;min-height:38px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1rem;font-weight:800;text-align:center;-moz-appearance:textfield;appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper .qty-symbol{display:block}
.qty-stepper .qty-word{display:none}
.qty-stepper.is-empty{padding:0;border:0;background:transparent}
.qty-stepper.is-empty [data-qty-minus],.qty-stepper.is-empty input{display:none}
.qty-stepper.is-empty [data-qty-plus]{width:auto;min-width:108px;height:44px;padding:0 16px;background:var(--accent);color:var(--food-on-accent,#fff);font-size:.92rem}
.qty-stepper.is-empty .qty-word{display:inline}
.qty-stepper.is-empty .qty-symbol{display:none}
html.food-public.food-style-tarjetas .qty-stepper{margin:12px 14px 0}
html.food-public.food-style-lista .qty-stepper,html.food-public.food-style-compacto .qty-stepper{justify-self:end}
@media (max-width:767px){
.food-product .qty-stepper{grid-column:1 / -1;justify-self:start;margin-top:4px}
html.food-public.food-style-tarjetas .qty-stepper{margin:12px 14px 0}
}

/* Apariencia de la carta pública: se aplica a toda la página del negocio. */
html.food-public {
    --accent: var(--food-accent);
    --accent-hover: color-mix(in srgb, var(--food-accent) 78%, #000);
    --accent-ink: color-mix(in srgb, var(--food-accent) 62%, #0a1812);
    --accent-soft: color-mix(in srgb, var(--food-accent) 16%, #fff);
    --accent-softer: color-mix(in srgb, var(--food-accent) 8%, #fff);
}
html.food-public.food-theme-claro {
    --bg: #f4f6f5; --bg-muted: #e8ecea; --surface: #fff; --surface-raised: #fff; --surface-subtle: #f7f9f8;
    --field-bg: #fff; --field-ink: #18201c;
}
html.food-public.food-theme-calido {
    --bg: #f4eadc; --bg-muted: #eadcc8; --surface: #fffaf2; --surface-raised: #fffdf8; --surface-subtle: #f8f0e4;
    --ink: #3a2c22; --ink-soft: #7a6656; --ink-faint: #9a8776; --line: #e4d4c0; --line-strong: #d2bda4;
    --field-bg: #fffdf8; --field-ink: #3a2c22;
}
html.food-public.food-theme-oscuro {
    color-scheme: dark;
    --bg: #101612; --bg-muted: #171e1a; --surface: #1b241f; --surface-raised: #232e28; --surface-subtle: #151c18;
    --ink: #f3f6f4; --ink-soft: #c5d0c9; --ink-faint: #8b9891; --line: #314038; --line-strong: #445248;
    --accent-hover: color-mix(in srgb, var(--food-accent) 78%, #fff);
    --accent-ink: color-mix(in srgb, var(--food-accent) 55%, #fff);
    --accent-soft: color-mix(in srgb, var(--food-accent) 22%, #18201c);
    --accent-softer: color-mix(in srgb, var(--food-accent) 12%, #121814);
    --field-bg: #232e28; --field-ink: #f3f6f4;
}
html.food-public.food-font-fraunces { --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif; --font-display: "Fraunces", Georgia, serif; }
html.food-public.food-font-system { --font-sans: Georgia, "Times New Roman", serif; --font-display: Georgia, "Times New Roman", serif; }
html.food-public, html.food-public body { background: var(--bg); color: var(--ink); }
html.food-public .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom-color: var(--line); color: var(--ink); }
html.food-public .site-footer { background: var(--bg); color: var(--ink-soft); }
html.food-public .food-page { min-height: 70vh; color: var(--ink); }
html.food-public .food-page h1, html.food-public .food-page h2, html.food-public .food-page h3, html.food-public .food-category, html.food-public .food-product strong { font-family: var(--font-display); color: var(--ink); }
html.food-public .muted, html.food-public .food-product p, html.food-public .quantity-control, html.food-public .booking-step-head p { color: var(--ink-soft); }
html.food-public .food-product div > span { color: var(--food-accent); }
html.food-public .button-primary, html.food-public span.booking-avatar { background: var(--food-accent); color: var(--food-on-accent, #fff); }
html.food-public .button-secondary, html.food-public .button-ghost { color: var(--ink); border-color: var(--line); }
html.food-public .field span, html.food-public .field { color: var(--ink); }
html.food-public .field input, html.food-public .field select, html.food-public .field textarea, html.food-public .quantity-control input {
    background: var(--field-bg, var(--surface));
    color: var(--field-ink, var(--ink));
    border-color: var(--line);
    color-scheme: inherit;
}
html.food-public .field input::placeholder, html.food-public .field textarea::placeholder { color: color-mix(in srgb, var(--field-ink, var(--ink)) 48%, transparent); }
html.food-public .booking-step, html.food-public .booking-summary-card, html.food-public .booking-receipt, html.food-public .booking-empty { background: var(--surface); border-color: var(--line); color: var(--ink); }
html.food-public .booking-step-head span, html.food-public .quantity-control .text-link { background: var(--accent-soft); color: var(--accent-ink); }
html.food-public .food-category { padding-bottom: .35rem; border-bottom: 2px solid color-mix(in srgb, var(--food-accent) 55%, transparent); }
html.food-public .delivery-choice label { border-color: var(--line); color: var(--ink); }
html.food-public .delivery-choice small { color: var(--ink-soft); }
html.food-public .eyebrow { color: var(--food-accent); }

html.food-public.food-style-tarjetas .food-product-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
html.food-public.food-style-tarjetas .food-category { grid-column: 1 / -1; margin: 8px 0 0; }
html.food-public.food-style-tarjetas .food-product { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
html.food-public.food-style-tarjetas .food-product > img { width: 100%; height: 150px; border-radius: 0; }
html.food-public.food-style-tarjetas .food-product > div, html.food-public.food-style-tarjetas .quantity-control { width: auto; padding: 10px 14px 0; }
html.food-public.food-style-tarjetas .quantity-control { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

html.food-public.food-style-lista .food-product-grid { gap: 0; }
html.food-public.food-style-lista .food-product { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html.food-public.food-style-lista .food-product:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
html.food-public.food-style-lista .food-product > img { width: 64px; height: 64px; border-radius: 12px; }
html.food-public.food-style-lista .food-category { margin: 22px 0 6px; }

html.food-public.food-style-compacto .food-product-grid { gap: 6px; }
html.food-public.food-style-compacto .food-product { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; border-radius: 10px; box-shadow: none; }
html.food-public.food-style-compacto .food-product:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
html.food-public.food-style-compacto .food-product > img { width: 44px; height: 44px; border-radius: 8px; }
html.food-public.food-style-compacto .food-product p { display: none; }
html.food-public.food-style-compacto .quantity-control input { width: 58px; min-height: 40px; }

@media (max-width: 640px) {
    .booking-meta { grid-template-columns: 1fr; }
    .booking-social span { display: none; }
    .booking-social { width: 44px; padding: 0; justify-content: center; border-radius: 12px; }
    .confirmation-main-card { grid-template-columns: 62px minmax(0, 1fr); }
    html.food-public.food-style-tarjetas .food-product-grid { grid-template-columns: 1fr; }
    html.food-public.food-style-lista .food-product, html.food-public.food-style-compacto .food-product { grid-template-columns: 52px minmax(0, 1fr); }
    html.food-public.food-style-lista .food-product > img { width: 52px; height: 52px; }
    html.food-public.food-style-compacto .food-product > img { width: 40px; height: 40px; }
    html.food-public.food-style-lista .quantity-control, html.food-public.food-style-compacto .quantity-control { grid-column: 1 / -1; width: 100%; }
}

.pickup-selected-day { margin: 0; color: var(--ink-soft); }
.pickup-selected-day strong { color: var(--ink); }
.day-agenda [data-slot-reset] { margin-top: 8px; }
html.food-public .date-chip,
html.food-public .slot-row { background: var(--surface); color: var(--ink); }
html.food-public .date-chip.is-closed { background: var(--bg-muted); }