/* ============================================================= La Pizzería de Aznalcázar — shared.css v3.0 Sistema de diseño premium · Rediseño 2026 ============================================================= */ /* ------------------------------------------------------------------ */ /* TOKENS DE DISEÑO */ /* ------------------------------------------------------------------ */ :root { /* Paleta — blanco, negro, verde único acento */ --bg: #FFFFFF; --bg-soft: #F7F7F5; --bg-elev: #FFFFFF; --surface: #F2F2F0; --line: #E8E8E8; --line-soft: #F0F0EE; --line-hover: #C8C8C4; --text: #111111; --text-muted: #555555; --text-dim: #999999; /* Verde Pantone corporativo — único color acento */ --accent: #58793B; --accent-hover: #465F2E; --accent-deep: #3A5020; --accent-light: rgba(88, 121, 59, .08); --accent-glow: rgba(88, 121, 59, .22); /* Semánticos */ --danger: #C0392B; --ok: #27AE60; --warn: #E67E22; /* Tipografía */ --font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Geometría */ --radius-xs: 4px; --radius-sm: 8px; --radius: 16px; --radius-lg: 28px; --max-w: 1340px; --nav-h: 86px; /* Sombras sutiles */ --shadow-xs: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.03); --shadow-sm: 0 2px 8px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 16px 48px rgba(0,0,0,.05); --shadow-lg: 0 8px 32px rgba(0,0,0,.08), 0 32px 80px rgba(0,0,0,.06); --shadow-green: 0 4px 20px rgba(88,121,59,.20), 0 12px 40px rgba(88,121,59,.10); /* Transiciones unificadas */ --t-fast: .14s ease; --t: .28s cubic-bezier(.2, .7, .3, 1); --t-spring: .38s cubic-bezier(.175, .885, .32, 1.275); } /* ------------------------------------------------------------------ */ /* RESET */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* HARD FIX global — evita scroll horizontal en toda la web. overflow-x:hidden en el elemento raíz NO rompe position:fixed: el ICB de fixed es siempre el viewport, no . */ max-width: 100%; overflow-x: hidden; } body { /* Refuerzo en body por si algún navegador propaga scroll desde body */ max-width: 100%; overflow-x: hidden; } body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; border: none; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4, h5 { margin: 0; line-height: 1.15; } ::selection { background: var(--accent-light); color: var(--accent); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-hover); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* Anillo de foco accesible — sustituye al :focus por defecto en toda la web */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } button:focus-visible, [role="button"]:focus-visible { outline-offset: 4px; } /* ------------------------------------------------------------------ */ /* TIPOGRAFÍA */ /* ------------------------------------------------------------------ */ .eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); } .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; } /* ------------------------------------------------------------------ */ /* LAYOUT */ /* ------------------------------------------------------------------ */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(18px, 4vw, 56px); } .section { padding-block: clamp(64px, 9vw, 120px); } .section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; color: var(--text); letter-spacing: -.03em; line-height: 1.1; text-align: center; margin-bottom: .5rem; } .section-title::after { content: ''; display: block; width: 40px; height: 3px; background: var(--accent); border-radius: 2px; margin: 14px auto 0; } .section-sub { text-align: center; color: var(--text-muted); font-size: .95rem; line-height: 1.7; margin: 0 auto 3rem; max-width: 560px; } .center { text-align: center; display: block; } /* ------------------------------------------------------------------ */ /* BOTONES */ /* ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .9rem 1.8rem; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; min-height: 48px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-spring), box-shadow var(--t-fast); text-decoration: none; white-space: nowrap; } .btn:active { transform: scale(.96) !important; } @media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-glow); } } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 20px rgba(88,121,59,.30); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; box-shadow: 0 8px 28px rgba(88,121,59,.42); transform: translateY(-3px); } } .btn-ghost { background: transparent; border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.9); } @media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: #fff; transform: translateY(-2px); } } /* Outline: borde y texto verde, fondo transparente */ .btn-outline { background: transparent; border-color: var(--accent); color: var(--accent); } @media (hover: hover) and (pointer: fine) { .btn-outline:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); box-shadow: 0 6px 20px var(--accent-glow); transform: translateY(-2px); } } /* Tel: botón de llamada — variante compacta outline neutra */ .btn-tel { background: transparent; border-color: var(--line); color: var(--text-muted); font-size: .75rem; padding: .8rem 1.2rem; } @media (hover: hover) and (pointer: fine) { .btn-tel:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); transform: translateY(-2px); box-shadow: 0 6px 18px var(--accent-glow); } } .btn-block { width: 100%; } /* ------------------------------------------------------------------ */ /* NAVBAR — GLASSMORPHISM */ /* ------------------------------------------------------------------ */ .nav { position: sticky; top: 0; /* CRÍTICO: debe ser > z-index del nav-backdrop (290) para que el stacking context de .nav (y su hijo .nav-links z-index:300) pinte por encima del backdrop. Un hijo no puede superar a un elemento externo si su contexto padre tiene z-index menor. */ z-index: 310; height: var(--nav-h); background: rgba(255, 255, 255, .82); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(220, 220, 216, .55); box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 4px 24px rgba(0,0,0,.05); transition: height .32s cubic-bezier(.4,0,.2,1), background .25s ease, box-shadow .25s ease, border-color .25s ease; } /* Estado compacto al hacer scroll — altura reducida + glass reforzado */ .nav.nav--scrolled { height: 64px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(40px) saturate(240%); -webkit-backdrop-filter: blur(40px) saturate(240%); border-bottom-color: rgba(195, 195, 190, .70); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 36px rgba(0,0,0,.11); } .nav.nav--scrolled .nav-logo { height: 42px; } .nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 100%; } .nav-brand { display: flex; align-items: center; flex-shrink: 0; } .nav-logo { display: block; height: 56px; width: auto; object-fit: contain; transition: height .32s cubic-bezier(.4,0,.2,1); } .nav-center { display: flex; justify-content: center; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; white-space: nowrap; min-height: 40px; transition: color var(--t-fast), background var(--t-fast); } .nav-links a svg { flex-shrink: 0; opacity: .5; transition: opacity var(--t-fast); } @media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--text); background: var(--bg-soft); } .nav-links a:hover svg { opacity: 1; } } .nav-links a.active { color: var(--text); font-weight: 700; } .nav-links a.active svg { opacity: 1; } /* Pedir ahora pill */ .nav-links .nav-order-li a { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 999px; box-shadow: 0 3px 12px rgba(88,121,59,.28); } .nav-links .nav-order-li a svg { opacity: 1; } @media (hover: hover) and (pointer: fine) { .nav-links .nav-order-li a:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(88,121,59,.38); } } .nav-cta { display: flex; align-items: center; gap: 6px; } .nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; border: none; min-height: 52px; min-width: 52px; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); } .nav-cart svg { width: 26px; height: 26px; } /* Asegura que clics sobre el SVG lleguen al botón */ .nav-cart svg, .nav-cart * { pointer-events: none; } @media (hover: hover) and (pointer: fine) { .nav-cart:hover { color: var(--text); background: var(--bg-soft); } } .cart-pill-badge { position: absolute; top: 5px; right: 5px; background: var(--accent); color: #fff; font-weight: 800; font-size: .58rem; min-width: 17px; height: 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid rgba(255,255,255,.9); transition: transform var(--t-spring); pointer-events: none; } .cart-pill-badge[data-cart-count="0"] { display: none; } /* Compat cart-pill */ .cart-pill { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font-size: .78rem; font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } @media (hover: hover) and (pointer: fine) { .cart-pill:hover { border-color: var(--accent); background: var(--accent-light); } } /* Toggle móvil */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: transparent; color: var(--text); font-size: 1.4rem; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } /* CRÍTICO: el icono no debe capturar clics — deben llegar al botón */ .nav-toggle i, .nav-toggle svg, .nav-toggle * { pointer-events: none; } .nav-toggle.is-open { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } /* El botón hamburguesa siempre al extremo derecho del nav */ @media (max-width: 991px) { .nav-toggle { margin-left: auto; } } /* Backdrop drawer */ .nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .42); backdrop-filter: blur(2px); z-index: 290; opacity: 0; pointer-events: none; transition: opacity .24s ease; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } .drawer-header, .drawer-user-li { display: none; } .drawer-user-li:empty { display: none; } /* Responsivo nav */ @media (max-width: 860px) { /* CRÍTICO: backdrop-filter convierte al elemento en "fixed positioning containing block" (CSS spec). Si .nav lo tiene activado, los descendientes con position:fixed (= .nav-links drawer) se posicionan relativo a .nav (86px de alto) y no al viewport, lo que los recorta. Solución: desactivar backdrop-filter en móvil. */ .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .97); } .nav-inner { grid-template-columns: auto 1fr auto; } .nav-center { display: contents; } .nav-toggle { display: inline-flex; } .nav-cta .user-badge, .nav-cta .btn-logout { display: none !important; } .drawer-header { display: block; } .drawer-user-li { display: flex; } /* ══════════════════════════════════════════════════════════════ DRAWER — diseño editorial minimalista Panel blanco puro deslizante desde la derecha. Cabecera: solo X · Navegación: links uppercase con divisores Pie: bloque de usuario pinned al fondo con acciones en rojo ══════════════════════════════════════════════════════════════ */ .nav-links { visibility: visible; position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 92vw); flex-direction: column; align-items: stretch; background: #fff; border-left: 1px solid var(--line-soft); padding: 0; gap: 0; box-shadow: -24px 0 80px rgba(0, 0, 0, .10); z-index: 300; opacity: 0; pointer-events: none; transform: translateX(110%); transition: opacity .22s ease, transform .32s cubic-bezier(.2, .7, .3, 1); overflow-y: auto; overscroll-behavior: contain; } .nav-links.open { opacity: 1; pointer-events: auto; transform: translateX(0); } /* ── Cabecera: solo el botón X, alineado a la derecha ── */ .drawer-close-row { display: flex; align-items: center; justify-content: flex-end; padding: 20px 24px 16px; flex-shrink: 0; } .drawer-title { display: none; } .drawer-close-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--bg-soft); color: var(--text-muted); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .drawer-close-btn:hover { background: var(--line); color: var(--text); } /* ── Links: iconos ocultos, tipografía uppercase trazada ── */ .nav-links li:not(.drawer-header):not(.drawer-user-li) > a svg, .nav-links li:not(.drawer-header):not(.drawer-user-li) > a i { display: none; } .nav-links li:not(.drawer-header):not(.drawer-user-li) > a { display: flex; align-items: center; padding: 0 32px; min-height: 66px; font-size: .72rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--text); border-radius: 0; border-bottom: 1px solid var(--line-soft); background: transparent; gap: 0; transition: color var(--t-fast), background var(--t-fast); } .nav-links li:not(.drawer-header):not(.drawer-user-li) > a:hover, .nav-links li:not(.drawer-header):not(.drawer-user-li) > a:active { color: var(--accent); background: var(--accent-light); } .nav-links li:not(.drawer-header):not(.drawer-user-li) > a.active { color: var(--accent); } /* El botón "Pedir ahora" (pill) se convierte en link plano dentro del drawer */ .nav-links .nav-order-li { padding: 0; margin: 0; } .nav-links .nav-order-li a { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: var(--text) !important; padding: 0 32px !important; min-height: 66px !important; justify-content: flex-start !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .24em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--line-soft) !important; transform: none !important; } .nav-links .nav-order-li a:hover { color: var(--accent) !important; background: var(--accent-light) !important; } .nav-links .nav-order-li a i, .nav-links .nav-order-li a svg { display: none !important; } /* ── Sección de usuario — pinned al fondo ── */ .drawer-user-li { order: 999; margin-top: auto; flex-direction: column; flex-shrink: 0; border-top: 1.5px solid var(--line); } /* Anula el border-bottom del estilo anterior */ .drawer-user-li:not(:empty) { border-bottom: none; } .drawer-user-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 28px 32px 40px; } /* Nombre del usuario: uppercase bold */ .drawer-user-name { font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-decoration: none; margin-bottom: 22px; display: block; /* Evitar que el nombre largo rompa el layout */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Botón MI CUENTA — borde rojo */ .drawer-user-btn-account { display: inline-flex; align-items: center; padding: 9px 20px; border: 1.5px solid var(--danger); border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--danger); background: transparent; cursor: pointer; text-decoration: none; margin-bottom: 14px; transition: background var(--t-fast); white-space: nowrap; } .drawer-user-btn-account:hover { background: rgba(192, 57, 43, .06); } /* Botón CERRAR SESIÓN — texto plano rojo */ .drawer-user-logout { background: transparent; border: none; color: var(--danger); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: left; padding: 0; opacity: .8; transition: opacity var(--t-fast); width: auto; height: auto; border-radius: 0; } .drawer-user-logout:hover { opacity: 1; } /* Avatar: ya no se usa — por si queda en algún render previo */ .drawer-user-avatar { display: none; } /* Estado no autenticado */ .drawer-user-login { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; } } /* ------------------------------------------------------------------ */ /* ESTADO DEL LOCAL */ /* ------------------------------------------------------------------ */ .store-status { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 600; color: var(--text-muted); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; transition: background var(--t); } .store-status.is-open .status-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(39,174,96,.2); } .store-status.is-open .status-text { color: var(--ok); } .store-status.is-closed .status-dot { background: var(--danger); } .store-status.is-closed .status-text { color: var(--danger); } /* ------------------------------------------------------------------ */ /* MODAL SYSTEM */ /* ------------------------------------------------------------------ */ .modal-wrap { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; overflow-y: auto; padding: 0; } @media (min-width: 540px) { .modal-wrap { align-items: center; padding: 24px; } } .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.48); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; z-index: -1; } .modal-box { position: relative; background: #fff; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } @media (min-width: 540px) { .modal-box { border-radius: var(--radius-lg); } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; position: sticky; top: 0; background: #fff; z-index: 1; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; margin: 0; } .modal-close { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: .9rem; cursor: pointer; flex-shrink: 0; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .modal-close:hover { border-color: var(--text); color: var(--text); background: var(--bg-soft); } .modal-body { padding: 20px 24px; flex: 1; overflow-y: auto; } .modal-foot { padding: 16px 24px 20px; border-top: 1px solid var(--line-soft); flex-shrink: 0; background: #fff; } .modal-section { margin-bottom: 20px; } .modal-section-title { font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; } .modal-hint { font-size: .72rem; font-weight: 400; color: var(--text-dim); letter-spacing: .04em; text-transform: none; } .ing-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .ing-item { display: contents; } .ing-item label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); user-select: none; } .ing-item input[type=checkbox] { display: none; } .ing-item input:checked + label { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .ing-item label:hover { border-color: var(--line-hover); color: var(--text); } .modal-section textarea { width: 100%; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: .9rem; padding: 10px 14px; resize: vertical; min-height: 72px; transition: border-color var(--t-fast); } .modal-section textarea:focus { outline: none; border-color: var(--accent); } /* ------------------------------------------------------------------ */ /* SCROLL REVEAL */ /* ------------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .58s cubic-bezier(.2,.7,.3,1), transform .58s cubic-bezier(.2,.7,.3,1); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* Delay progresivo via custom property --ri (set por JS) */ .reveal[style*="--ri"] { transition-delay: calc(var(--ri) * 65ms); } /* Disable animations when user prefers reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------------ */ /* FOOTER — dark brand */ /* ------------------------------------------------------------------ */ .footer { background: #0a1a06; border-top: none; } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.1fr; gap: clamp(28px, 4vw, 52px); padding-block: clamp(52px, 8vw, 88px) clamp(40px, 5vw, 60px); border-bottom: 1px solid rgba(255,255,255,.07); } .footer-col--brand { max-width: 260px; } .footer-logo { height: 36px; width: auto; object-fit: contain; margin-bottom: 18px; opacity: .80; } .footer-tagline { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.32); margin: 0 0 26px; } .footer-heading { font-size: .63rem !important; font-weight: 800 !important; letter-spacing: .28em !important; text-transform: uppercase !important; color: rgba(255,255,255,.30) !important; margin-bottom: 20px !important; } .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .footer-links a { display: inline-flex; align-items: center; gap: 8px; font-size: .87rem !important; font-weight: 500; color: rgba(255,255,255,.60) !important; padding: 5px 0; text-decoration: none; transition: color .16s ease, gap .2s ease; } .footer-links a::before { content: ''; display: block; width: 5px; height: 1px; background: rgba(255,255,255,.22); flex-shrink: 0; transition: background .16s ease, width .2s ease; } @media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: rgba(255,255,255,.92) !important; gap: 14px; } .footer-links a:hover::before { background: var(--accent); width: 8px; } } .footer p { font-size: .86rem; color: rgba(255,255,255,.50); margin-bottom: .55rem; line-height: 1.7; } .footer a { font-size: .86rem; color: rgba(255,255,255,.52); transition: color .16s ease; } @media (hover: hover) and (pointer: fine) { .footer a:hover { color: rgba(255,255,255,.88); } } .footer .tel-link { color: rgba(255,255,255,.60) !important; font-size: .86rem; white-space: nowrap; transition: color .16s ease; } @media (hover: hover) and (pointer: fine) { .footer .tel-link:hover { color: rgba(255,255,255,.92) !important; } } .footer-socials { display: flex; gap: 10px; margin-top: 22px; } .footer-socials a { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; font-size: .88rem; color: rgba(255,255,255,.48); transition: border-color .18s, color .18s, background .18s, transform .18s; } @media (hover: hover) and (pointer: fine) { .footer-socials a:hover { border-color: var(--accent); color: #fff; background: var(--accent); transform: translateY(-2px); } } .footer-bottom { background: #060f04; border-top: none; padding-block: 20px; text-align: center; font-size: .70rem; color: rgba(255,255,255,.22); letter-spacing: .08em; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; } /* Firma del desarrollador en el footer */ .footer-credit { font-size: .66rem; color: rgba(255,255,255,.18); opacity: 1; letter-spacing: .05em; } .footer-credit::before { content: '·'; margin-right: 10px; opacity: .35; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; } .footer-col--brand { max-width: none; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } } /* ------------------------------------------------------------------ */ /* TOAST */ /* ------------------------------------------------------------------ */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); background: var(--text); color: #fff; padding: 11px 22px; border-radius: 999px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; box-shadow: 0 8px 32px rgba(0,0,0,.20); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 9999; white-space: nowrap; max-width: calc(100vw - 40px); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ------------------------------------------------------------------ */ /* UTILITIES */ /* ------------------------------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .divider { border: none; border-top: 1px solid var(--line); margin-block: 24px; } /* Auth styles */ .user-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; font-size: .8rem; font-weight: 600; color: var(--text-muted); cursor: default; white-space: nowrap; } .user-badge strong { color: var(--text); } .btn-logout { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--text-muted); font-size: .78rem; font-weight: 600; cursor: pointer; letter-spacing: .04em; white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } @media (hover: hover) and (pointer: fine) { .btn-logout:hover { border-color: var(--danger); color: var(--danger); background: rgba(192,57,43,.05); } } /* Botón usuario en el nav (escritorio) */ .nav-user { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; border: none; min-height: 52px; min-width: 44px; font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: color var(--t-fast), background var(--t-fast); white-space: nowrap; } /* Los hijos no deben capturar clics */ .nav-user i, .nav-user svg, .nav-user * { pointer-events: none; } @media (hover: hover) and (pointer: fine) { .nav-user:hover { color: var(--text); background: var(--bg-soft); } } /* Avatar circular con inicial (cuando hay sesión) */ .nav-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Nombre del usuario (visible en desktop, oculto en móvil en nav-cta) */ .nav-user-label { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* En móvil el nav-user se oculta del nav-cta (aparece solo en el drawer) */ @media (max-width: 860px) { .nav-cta .nav-user { display: none; } } /* Botón "Salir" de escritorio — solo visible en desktop cuando hay sesión */ .nav-signout { display: none; } /* ocultado en móvil siempre */ @media (min-width: 861px) { .nav-signout:not([hidden]) { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .nav-signout:not([hidden]):hover { border-color: var(--danger); color: var(--danger); background: rgba(192,57,43,.05); } } /* Enlace de login dentro del drawer (sin sesión) */ .drawer-user-login { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; color: var(--accent) !important; text-decoration: none; padding: 14px 20px; min-height: 52px; } /* ------------------------------------------------------------------ */ /* BANNER GLOBAL DE AVISOS (controlado desde el TPV — /config/banner) */ /* ------------------------------------------------------------------ */ /* ================================================================ BANNER RESTAURANTE CERRADO — compartido landing + menú ================================================================ */ #restaurante-cerrado-banner { display: flex; justify-content: center; padding: 0 16px 32px; animation: cerrado-fade-in 0.4s ease-out; } @keyframes cerrado-fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .cerrado-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; background: linear-gradient(135deg, #1a1a1a 0%, #2a1a00 100%); border: 2px solid rgba(255,200,80,.3); border-radius: 20px; padding: 40px 32px; max-width: 680px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,.25); position: relative; overflow: hidden; } .cerrado-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #58793B 0%, #FFB74D 50%, #58793B 100%); } /* Variante: cerrado online pero tienda abierta (horario laboral) */ .cerrado-inner--en-horario { background: linear-gradient(135deg, #1c1400 0%, #2a1f00 100%); border-color: rgba(255,183,77,.45); } .cerrado-inner--en-horario::before { background: linear-gradient(90deg, #FFB74D 0%, #FF9800 50%, #FFB74D 100%); } .cerrado-inner--en-horario .cerrado-icon-wrap { background: rgba(255,183,77,.15); border-color: rgba(255,183,77,.35); } .cerrado-inner--en-horario .cerrado-title { color: #FFD082; } .cerrado-inner--en-horario .cerrado-text strong { color: #FFD082; } .cerrado-icon-wrap { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; background: rgba(255,200,80,.12); border: 2px solid rgba(255,200,80,.25); border-radius: 50%; margin-bottom: 8px; } .cerrado-icon { font-size: 3.5rem; filter: grayscale(0.3) opacity(0.9); animation: cerrado-icon-pulse 2s ease-in-out infinite; } @keyframes cerrado-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .cerrado-content { display: flex; flex-direction: column; gap: 12px; width: 100%; } .cerrado-title { font-size: 1.75rem; font-weight: 700; color: #fff; letter-spacing: -.01em; margin: 0; } .cerrado-text { font-size: 1rem; color: rgba(255,255,255,.7); margin: 0; line-height: 1.5; } .cerrado-horario { font-size: 0.95rem; color: rgba(255,200,80,.85); margin: 4px 0 8px; padding: 12px 20px; background: rgba(255,200,80,.08); border-radius: 12px; border: 1px solid rgba(255,200,80,.15); } .cerrado-horario strong { color: rgba(255,200,80,1); font-weight: 600; } .cerrado-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; } .btn-cerrado { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 12px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; border: 2px solid transparent; cursor: pointer; white-space: nowrap; } .btn-cerrado i { font-size: 1rem; } .btn-cerrado-primary { background: linear-gradient(135deg, #58793B 0%, #6a8f49 100%); color: #fff; border-color: #58793B; box-shadow: 0 2px 8px rgba(88,121,59,.3); } .btn-cerrado-primary:hover { background: linear-gradient(135deg, #6a8f49 0%, #7aa05a 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(88,121,59,.4); } .btn-cerrado-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); } .btn-cerrado-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); transform: translateY(-2px); } @media (max-width: 640px) { .cerrado-inner { padding: 32px 24px; gap: 20px; } .cerrado-icon-wrap { width: 80px; height: 80px; } .cerrado-icon { font-size: 2.8rem; } .cerrado-title { font-size: 1.5rem; } .cerrado-text { font-size: 0.92rem; } .cerrado-actions { flex-direction: column; width: 100%; } .btn-cerrado { width: 100%; padding: 14px 20px; } } .global-banner { /* display se maneja íntegramente desde JS (style.display = 'none'|'flex') */ /* NO poner display:flex aquí — anularía el display:none inyectado por JS */ position: relative; z-index: 320; /* por encima del nav (310) */ align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; /* Gradiente cálido — ámbar → naranja intenso */ background: linear-gradient(135deg, #d97706 0%, #ea580c 100%); color: #ffffff; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; line-height: 1.4; text-align: center; /* Sombra sutil que separa el banner del nav */ box-shadow: 0 3px 14px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .10); /* Estado inicial (oculto): desplazado y transparente */ opacity: 0; transform: translateY(-6px); transition: opacity .3s ease-in-out, transform .3s ease-in-out; will-change: opacity, transform; } /* Estado activo: completamente visible y en su posición */ .global-banner.is-visible { opacity: 1; transform: translateY(0); } .global-banner__icon { font-size: 15px; line-height: 1; flex-shrink: 0; } .global-banner__text { max-width: 1100px; } @media (max-width: 520px) { .global-banner { font-size: 12.5px; padding: 9px 14px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .global-banner { transition: none; } } /* ================================================================ PAGE LOADING OVERLAY — .mlo-* clases compartidas entre Menú y Carta. Cada página tiene su propio ID (#menuLoadingOverlay, #cartaLoadingOverlay) que define el fondo y la transición. ================================================================ */ .mlo-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } /* Logo con respiración suave */ .mlo-logo { width: 80px; height: auto; opacity: .82; animation: mlo-breathe 2s ease-in-out infinite; user-select: none; pointer-events: none; } @keyframes mlo-breathe { 0%, 100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Spinner circular */ .mlo-spinner { width: 46px; height: 46px; border: 3.5px solid var(--bg-soft, #eee); border-top-color: var(--accent, #5c7a29); border-radius: 50%; animation: mlo-spin .85s linear infinite; } @keyframes mlo-spin { to { transform: rotate(360deg); } } .mlo-text { font-family: var(--font-display, serif); font-size: 1.15rem; font-weight: 700; color: var(--text, #111); margin: 0; letter-spacing: -.02em; } .mlo-sub { font-size: .8rem; color: var(--text-muted, #888); margin: -10px 0 0; }