/* =====================================================================
   Click2Bite · sistema visual "Gourmet cálido"
   Tipografías propias (sin CDN) + variables compartidas por menú público,
   página de inicio y panel.
   ===================================================================== */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/fraunces-opsz.woff2") format("woff2-variations"), url("../fonts/fraunces-opsz.woff2") format("woff2");
}

@font-face {
    font-family: "Fraunces";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/fraunces-opsz-italic.woff2") format("woff2-variations"), url("../fonts/fraunces-opsz-italic.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url("../fonts/dm-sans-opsz.woff2") format("woff2-variations"), url("../fonts/dm-sans-opsz.woff2") format("woff2");
}

:root {
    /* Color de marca: cada restaurante lo cambia con --brand en su página.
       Identidad Click2Bite: naranja de la mascota, morado de "Click" y café de "Bite". */
    --brand: #d76112;
    --c2b-orange: #eb7115;
    --c2b-orange-light: #f29a45;
    --grape: #7b4f8e;
    --grape-soft: #f1eaf6;
    --bite: #b45b24;
    --brand-deep: color-mix(in srgb, var(--brand) 78%, #1a0d06);
    /* Fondo de botones con texto blanco: un poco más oscuro que la marca para que se lea (WCAG AA 4.5:1) */
    --brand-strong: color-mix(in srgb, var(--brand) 84%, #1a0d06);
    --brand-soft: color-mix(in srgb, var(--brand) 10%, #fffaf3);
    --brand-tint: color-mix(in srgb, var(--brand) 22%, #fffaf3);
    --brand-glow: color-mix(in srgb, var(--brand) 38%, transparent);

    --cream: #fbf6ee;
    --cream-2: #f5ede1;
    --paper: #fffdf9;
    --line: #ece2d3;
    --line-2: #e0d3c0;
    --espresso: #2a1b12;
    --cocoa: #5d4737;
    --muted: #736252; /* contraste AA (≥4.5:1) sobre crema y blanco */
    --saffron: #f2a33a;
    --basil: #256a40; /* contraste AA sobre fondos verdes claros */
    --basil-soft: #e6f3ea;
    --danger: #c0392b;
    --danger-soft: #fdecea;

    --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;

    --shadow-1: 0 1px 2px rgba(42, 27, 18, .06), 0 2px 8px -2px rgba(42, 27, 18, .06);
    --shadow-2: 0 2px 4px rgba(42, 27, 18, .05), 0 14px 34px -14px rgba(42, 27, 18, .28);
    --shadow-3: 0 30px 70px -20px rgba(42, 27, 18, .45);

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Bootstrap hereda la marca */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--espresso);
    --bs-link-color: var(--brand-deep);
    --bs-link-hover-color: var(--brand);
    --bs-border-color: var(--line);
    --bs-primary: var(--brand);
    --bs-focus-ring-color: var(--brand-glow);
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--espresso); -webkit-font-smoothing: antialiased; }

.font-display, .display-serif { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -.01em; }
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -.015em; font-weight: 650; }
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }
em.flair, .flair { font-family: var(--font-display); font-style: italic; font-weight: 500; }

.text-brand { color: var(--brand) !important; }
.text-cocoa { color: var(--cocoa) !important; }
.text-muted { color: var(--muted) !important; }
.bg-soft { background: var(--brand-soft) !important; }
.bg-cream { background: var(--cream) !important; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; border-radius: 999px; transition: transform .15s var(--ease-out), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.btn:active { transform: scale(.97); }
.btn-brand { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; box-shadow: 0 8px 20px -10px var(--brand-glow); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; box-shadow: 0 12px 26px -10px var(--brand-glow); }
.btn-brand:disabled, .btn-brand.disabled { background: #cbbcad; border-color: #cbbcad; box-shadow: none; color: #fff; }
.btn-outline-brand { border: 1.5px solid var(--brand); color: var(--brand-deep); background: transparent; }
.btn-outline-brand:hover { background: var(--brand-strong, var(--brand)); color: #fff; }
.btn-ink { background: var(--espresso); color: #fff; border-color: var(--espresso); }
.btn-ink:hover { background: #000; color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--espresso); }
.btn-ghost:hover { background: var(--cream-2); color: var(--espresso); }

/* ---------- Formularios ---------- */
.form-control, .form-select { border-radius: 14px; border: 1.5px solid var(--line-2); background-color: var(--paper); padding: .7rem .95rem; color: var(--espresso); transition: border-color .2s, box-shadow .2s; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); background-color: #fff; }
.form-control::placeholder { color: #b3a291; }
.form-label { font-weight: 600; font-size: .9rem; color: var(--cocoa); margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--brand-glow); border-color: var(--brand); }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; }
.input-group-text { border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--cream-2); color: var(--cocoa); }

/* ---------- Marca Click2Bite ---------- */
.c2b-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; flex-shrink: 0; }
.c2b-logo img { height: var(--logo-h, 42px); width: auto; display: block; transition: transform .35s var(--ease-spring); }
.c2b-logo:hover img { transform: rotate(-2deg) scale(1.03); }
.c2b-logo.sm { --logo-h: 36px; }
.c2b-logo.lg { --logo-h: 56px; }
/* Mascota sola (pin con mordida): pantalla de cocina, pie del menú, detalles */
.c2b-pin { display: inline-grid; place-items: center; line-height: 0; flex-shrink: 0; }
.c2b-pin img { height: 38px; width: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); transition: transform .35s var(--ease-spring); }
.c2b-pin:hover img { transform: translateY(-2px) rotate(-6deg); }

/* ---------- Revelado al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

@keyframes c2b-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.shake { animation: c2b-shake .5s both; }
@keyframes c2b-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.pop { animation: c2b-pop .45s var(--ease-spring); }
@keyframes c2b-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes c2b-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(47, 125, 78, .55); } 100% { box-shadow: 0 0 0 10px rgba(47, 125, 78, 0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}

/* Cambiar idioma (English / Español): base para todas las páginas */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; line-height: 1.2; white-space: nowrap; color: inherit; text-decoration: none; }
.lang-switch:hover { color: var(--brand); }
.lang-switch .bi { font-size: 1em; opacity: .8; }
.lang-menu { position: relative; display: inline-block; }
.lang-menu > summary { list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.lang-menu[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.lang-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1070; min-width: 150px; padding: 6px; border-radius: 12px; background: #fffdf9; border: 1px solid rgba(42, 27, 18, .12); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); display: grid; gap: 2px; }
.lang-menu.up .lang-menu-list { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.lang-menu-list a { display: block; padding: 9px 12px; border-radius: 8px; color: #2a1b12; text-decoration: none; font-weight: 600; font-size: .9rem; min-height: 40px; }
.lang-menu-list a:hover, .lang-menu-list a:focus-visible { background: rgba(42, 27, 18, .06); color: #2a1b12; }
.lang-menu-list a[aria-current="true"] { background: rgba(42, 27, 18, .08); }
.lang-menu-list a[aria-current="true"]::after { content: " ✓"; }

/* ===== Aviso de cookies (informativo, no bloquea) ===== */
.cookie-notice { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1080; max-width: 640px; margin: 0 auto; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fffdf9; color: #2a1b12; border: 1px solid rgba(42, 27, 18, .12); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); font-size: .86rem; }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; flex: 1 1 auto; }
.cookie-notice a { font-weight: 700; white-space: nowrap; }
.cookie-notice .bi-cookie { color: var(--brand, #e8491d); }
@media (max-width: 575.98px) { .cookie-notice { flex-direction: column; align-items: stretch; bottom: calc(12px + env(safe-area-inset-bottom)); } .store-body .cookie-notice { bottom: calc(84px + env(safe-area-inset-bottom)); } .cookie-notice .btn { width: 100%; } }
/* Switches: el texto siempre al lado (aunque sea largo) y la ayuda debajo, alineada con el texto */
.form-switch { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .65rem; padding-left: 0; }
.form-switch .form-check-input { float: none; margin: .1em 0 0; flex: 0 0 auto; }
.form-switch .form-check-label { margin-left: 0 !important; flex: 1 1 0; min-width: 0; }
.form-switch > .form-text, .form-switch > .small, .form-switch > small { flex: 1 0 100%; padding-left: calc(2.6em + .65rem); }
/* Pantallas táctiles: casillas y switches con área cómoda para el dedo */
@media (pointer: coarse) {
    .form-check:not(.form-switch) .form-check-input { width: 1.35em; height: 1.35em; margin-top: .05em; }
    .form-switch .form-check-input { width: 2.9em; height: 1.6em; margin-top: 0; }
    .form-switch > .form-text, .form-switch > .small, .form-switch > small { padding-left: calc(2.9em + .65rem); }
    .form-switch .form-check-label { padding-top: .12em; }
}
/* Accesibilidad (contraste AA): ligas, código y colores de estado un tono más oscuros que los de Bootstrap */
:root { --bs-link-color-rgb: 168, 72, 12; --bs-link-hover-color-rgb: 125, 53, 9; --bs-code-color: #9b2458; }
code { color: var(--bs-code-color); }
.text-success { color: #157347 !important; }
.text-danger { color: #b02a37 !important; }
.btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43; }
.btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; --bs-btn-hover-bg: #b02a37; --bs-btn-hover-border-color: #b02a37; }
/* Cada página (menú, cocina, panel) pone el color de su restaurante en <body style="--brand:…">:
   los tonos derivados se recalculan aquí para que sigan ese color y no el de Click2Bite. */
body, [style*="--brand:"] {
    --brand-deep: color-mix(in srgb, var(--brand) 78%, #1a0d06);
    --brand-strong: color-mix(in srgb, var(--brand) 84%, #1a0d06);
    --brand-soft: color-mix(in srgb, var(--brand) 10%, #fffaf3);
    --brand-tint: color-mix(in srgb, var(--brand) 22%, #fffaf3);
    --brand-glow: color-mix(in srgb, var(--brand) 38%, transparent);
}

/* Gran inauguración (App:Prelaunch): franja delgada arriba de las páginas que lleva a la lista de la portada. */
.c2b-launchbar {
    position: relative; z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap;
    min-height: 38px; padding: 7px 16px;
    background: linear-gradient(90deg, #eb7115 0%, #e2552f 28%, #e0457b 58%, #b24c95 80%, #8e4fa6 100%);
    color: #fff; text-decoration: none; font-size: .9rem; line-height: 1.25; text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, .55), inset 0 -1px 0 rgba(120, 30, 70, .3);
}
.c2b-launchbar:hover, .c2b-launchbar:focus-visible { color: #fff; text-decoration: none; filter: brightness(1.06); }
.c2b-launchbar:focus-visible { outline: 3px solid var(--grape); outline-offset: -3px; }
.c2b-launchbar strong { font-weight: 800; letter-spacing: .01em; }
.c2b-launchbar-more { font-weight: 600; opacity: .95; }
.c2b-launchbar .bi-arrow-right { transition: transform .2s ease; }
.c2b-launchbar:hover .bi-arrow-right { transform: translateX(3px); }
@media (max-width: 560px) { .c2b-launchbar { font-size: .84rem; } .c2b-launchbar-more { display: none; } }
.c2b-launchbar + .auth-shell { min-height: calc(100vh - 38px); }
.store-body a.c2b-launchbar, .store-body a.c2b-launchbar:hover { color: #fff; text-decoration: none; }
/* En la tienda la barra superior es fija: mientras se ve la franja, baja para no taparla. */
.c2b-launchbar ~ #store .st-topbar:not(.solid) { top: 38px; transition: top .2s ease, background-color .3s, box-shadow .3s, backdrop-filter .3s; }

/* Argentina: botones de arrepentimiento y de baja a simple vista en el primer acceso (Disp. 954/2025) */
.ar-consumer-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 6px 12px; background: #1f2a44; font-size: .78rem; font-weight: 700; letter-spacing: .02em; position: relative; z-index: 60; }
.ar-consumer-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.ar-consumer-bar a:hover, .ar-consumer-bar a:focus { color: #ffd9b8; }