/* ── base.css — estilos globales del layout Django ── */

/* Puente de diseño: hereda tokens de style.css */
body {
  font-family: var(--font, 'Inter', system-ui, sans-serif);
  background: var(--bg, #f8f9fb);
  color: var(--text, #0f172a);
}
h1, h2, h3, h4 { color: var(--heading, #0f172a); font-family: var(--font, inherit); }
/* 2026-08-26 (Claude, inspiración UX/accesibilidad -- verificado con
   Tab real de Playwright: el contorno "auto" del navegador al navegar
   por teclado salía casi negro sobre negro en Nocturna --
   `rgb(16,16,16)` contra un fondo `#171310` casi idéntico, invisible
   para quien navega sin ratón. `:focus-visible` (no `:focus` -- solo
   se ve al usar teclado, nunca al hacer clic con ratón) con el color de
   acento de cada tema vía `--t-accent`, así que siempre contrasta con
   el fondo real, sea cual sea el tema. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--t-accent, #2b7a78);
  outline-offset: 2px;
}
/* 2026-08-24 (Eduardo, con capturas reales: "esta todo muy mal
   diseñado" -- estudio de coherencia de color de la web pública). Un
   enlace suelto dentro de un párrafo (sin clase propia, como "vota qué
   plato quieres" en menú del día o "política de privacidad" en el
   formulario de reserva) nunca tuvo `color` propio en ningún sitio del
   CSS global -- heredaba el azul de enlace por defecto del navegador,
   una marca visual que no tiene nada que ver con el color de acento de
   cada negocio (var(--t-accent), configurable desde TemaConfig). Los
   enlaces con su propia clase (botones, nav, footer) ya tenían su color
   puesto aparte y no se ven afectados por esto. */
a { color: var(--t-accent, inherit); transition: color .15s; }
a:hover { opacity: .82; }

/* Clases de página Django */
.dj-page { max-width: 1200px; margin: 0 auto; padding: 2rem 24px; }
.dj-page-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--heading, #0f172a); margin-bottom: .25rem; }
.dj-page-sub { color: #64748b; font-size: .9rem; margin-bottom: 2rem; }

/* ── Cabecera dinámica compartida (2026-08-22) ──────────────────────
   Eduardo: "vamos a revisar todas las páginas del sitio para los
   clientes y vamos a convertir esos fondos en la versión de esa
   página igual que has hecho en la página de noticias... toda página
   que compartas ese layout, aplícalo". Mismo fondo que se hizo para
   noticias/css/noticias.css (franjas diagonales + resplandor radial +
   textura de puntos, en el azul de marca) pero puesto AQUÍ, en el CSS
   global, en vez de copiarlo a mano en cada hoja de estilos de cada
   página -- son 7 páginas compartiendo el mismo patrón visual, así que
   vive en un solo sitio (mismo criterio que el resto de utilidades
   compartidas del proyecto). Cada página solo añade la clase
   "hero-dinamico" a su cabecera y quita su propio `background:` --
   el padding/text-align siguen siendo cosa de cada página, no se tocan.
   Bug real encontrado y corregido de paso en 6 de las 7 páginas: el
   título (<h1>) de la cabecera no tenía `color` explícito, así que la
   regla global `h1{color:var(--heading)}` de más arriba ganaba a la
   herencia del blanco del contenedor -- título casi negro sobre fondo
   oscuro (mismo bug ya visto y corregido una vez en noticias.css). */
.hero-dinamico {
  /* 2026-08-24 (Eduardo, estudio de coherencia de color): los 4 tonos del
     degradado eran fijos (#0a1a24…#1a4a58, un azul-marino concreto) --
     cualquier negocio con OTRO color de marca tenía esta misma cabecera
     azul-marino igualmente, sin relación con su paleta. Ahora los 4 tonos
     se derivan de var(--t-accent) mezclado con casi-negro en proporción
     creciente (mismo efecto visual "oscuro a la izquierda, más saturado
     a la derecha"), así que la cabecera es coherente con CUALQUIER color
     de marca que elija cada negocio, no solo con el azul de Aliquindoi. */
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, color-mix(in srgb, var(--t-accent) 45%, transparent) 0%, transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--t-accent) 28%, #060a0c) 0%,
      color-mix(in srgb, var(--t-accent) 52%, #060a0c) 45%,
      color-mix(in srgb, var(--t-accent) 72%, #060a0c) 75%,
      color-mix(in srgb, var(--t-accent) 88%, #060a0c) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-dinamico::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0px, transparent 90px,
      color-mix(in srgb, var(--t-accent) 22%, transparent) 90px, color-mix(in srgb, var(--t-accent) 22%, transparent) 94px,
      transparent 94px, transparent 220px,
      color-mix(in srgb, var(--t-accent) 12%, transparent) 220px, color-mix(in srgb, var(--t-accent) 12%, transparent) 226px
    );
  opacity: .8;
  pointer-events: none;
}
.hero-dinamico::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.hero-dinamico > * { position: relative; z-index: 1; }
/* 2026-08-26 (Claude, inspiración real en tapasrevolution.com --
   mismo patrón ya probado en carta/views.py::carta()/carta.css,
   extendido aquí a los 6 heroes _default que comparten `.hero-
   dinamico`: testimonios/faq/contacto/galería/noticias/reservar).
   Reutiliza BannerImagen vía el context processor `foto_hero_generica`
   -- si hay foto activa, sustituye el degradado por la foto real con
   capa oscura; si no, no cambia nada. `!important` en el color de
   texto: lección de la iteración 42 -- sin él, el h1/h2 oscuro de
   algunos temas puede ganar el empate de especificidad sobre una foto,
   dejando el título casi invisible. */
.hero-dinamico--foto { background-size: cover; background-position: center; }
.hero-dinamico--foto::before,
.hero-dinamico--foto::after { content: none; }
.hero-dinamico--foto h1,
.hero-dinamico--foto p,
.hero-dinamico--foto span { color: #fff !important; }

/* ── Messages ── */
.dj-msgs {
  position: fixed; top: 56px; right: 16px;
  z-index: 1300; list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.dj-msg {
  padding: 10px 18px; border-radius: 8px; font-size: .875rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.12); pointer-events: all;
  animation: djfade .25s ease;
}
.dj-msg.success { background: #d1fae5; color: #065f46; border-left: 4px solid #22c55e; }
.dj-msg.error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.dj-msg.warning { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b; }
.dj-msg.info    { background: #e0f2fe; color: #075985; border-left: 4px solid #0ea5e9; }
@keyframes djfade { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ── Floating Nav Sidebar (NSB) ── */
.nsb-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 1300;
  width: 52px; height: 52px;
  background: var(--primary, #2b7a78); color: #fff;
  border: none; border-radius: 50%; font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.nsb-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.nsb-btn.open  { background: #1e293b; }

.nsb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.35); z-index: 1299; backdrop-filter: blur(2px);
}
.nsb-overlay.open { display: block; }

.nsb-panel {
  position: fixed; top: 0; right: -340px; bottom: 0; width: 320px;
  background: #fff; z-index: 1300;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
  transition: right .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.nsb-panel.open { right: 0; }

.nsb-head {
  /* 2026-08-26 (Claude, captura real con Tab+Enter de teclado en
     Nocturna: la cabecera del menú móvil salía en azul marino fijo
     -- el mismo tipo de color hardcodeado de Aliquindoi que ya se
     corrigió en `.hero-dinamico` (ver comentario ahí, 2026-08-24), pero
     nunca se aplicó a este componente. Mismo arreglo: derivar de
     `var(--t-accent)` en vez de un azul fijo, para que combine con
     CUALQUIER color de marca, no solo el de Aliquindoi. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent, #0057A8) 55%, #060a0c) 0%, var(--t-accent, #0057A8) 100%);
  color: #fff;
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.nsb-head-brand { display: flex; align-items: center; gap: 10px; }
.nsb-head-logo  { font-size: 1.6rem; }
.nsb-head-brand strong { display: block; font-size: .9rem; font-weight: 800; }
.nsb-head-brand span  { display: block; font-size: .68rem; opacity: .72; letter-spacing: .06em; margin-top: 1px; }
.nsb-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 30px; height: 30px; border-radius: 6px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.nsb-close:hover { background: rgba(255,255,255,.28); }

.nsb-body { flex: 1; overflow-y: auto; padding: 14px 0; }
.nsb-section { padding: 2px 0 8px; }
.nsb-section-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; padding: 8px 20px 4px; }

.nsb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; color: #334155; text-decoration: none;
  font-size: .88rem; font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
  border-left: 3px solid transparent;
}
.nsb-link:hover {
  background: #e8fafa; color: #0057A8;
  border-left-color: #0057A8;
}
.nsb-link span { flex: 1; }
/* button que actúa como link (logout POST) */
.nsb-link--btn {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.nsb-ico { width: 18px; height: 18px; flex-shrink: 0; stroke: #94a3b8; transition: stroke .12s; }
.nsb-link:hover .nsb-ico { stroke: #0057A8; }
.nsb-head-logo { stroke: rgba(255,255,255,.9); }
.nsb-divider { height: 1px; background: #f1f5f9; margin: 6px 0; }

/* 2026-08-21: redes sociales, movidas aquí desde el antiguo infobar azul
   al fusionar las dos barras superiores en una sola. */
.nsb-social-row { display: flex; gap: 8px; padding: 4px 20px 8px; }
.nsb-social-link {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; font-size: 1rem; text-decoration: none;
  transition: background .12s, transform .12s;
}
.nsb-social-link:hover { background: #e8fafa; transform: translateY(-1px); }

/* WhatsApp CTA en sidebar */
.nsb-wa-cta {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 16px 8px;
  background: #25D366; color: #fff;
  padding: 12px 16px; border-radius: 10px;
  font-size: .88rem; font-weight: 700; text-decoration: none;
  transition: background .15s;
}
.nsb-wa-cta:hover { background: #1ebe5c; }

/* User pill */
.nsb-user-pill {
  margin: 4px 16px 8px;
  background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 8px; padding: 10px 14px;
  font-size: .85rem; font-weight: 700; color: #0369a1;
}

.nsb-foot {
  padding: 14px 20px; border-top: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 3px;
  font-size: .74rem; color: #94a3b8;
}

/* ── Botón WhatsApp grande compartido (2026-08-22) ──────────────────
   Eduardo: "ese preguntar por whatsapp se puede mejorar" (carta.html,
   se veía como un enlace azul subrayado sin estilo). Causa: .btn-wa-big
   se usa en 4 páginas (carta, cómo-llegar, horarios, home) pero solo
   estaba definido en 2 hojas de estilo (home/index.css y
   testimonios/lista.css, cada una con una versión ligeramente distinta)
   -- las otras 3 páginas nunca cargan esas hojas, así que el botón
   caía al enlace por defecto del navegador. Mismo tipo de bug que ya se
   había encontrado una vez en menu_semana_cuaderno.css y se "arregló"
   con una clase local propia en vez de ir a la raíz -- por eso volvió a
   pasar en otras 3 páginas más. Aquí, en el CSS global, para que no
   pueda volver a faltar. home-cta (fondo de color var(--t-accent))
   sigue con su propia variante clara, sobrescrita solo ahí (ver
   home/static/home/css/index.css). */
/* 2026-08-26 (Claude, auditoría de temas -- captura real: "Ver carta
   completa" en /horarios/ se veía como texto suelto subrayado, sin
   forma de botón). `.btn-primary` se usa en varias páginas del sitio
   pero nunca tuvo una definición base -- cada `*-theme.css` solo le
   ponía `background`/`color`, dando por hecho que ya existía la forma
   (padding, radio, display) en algún sitio compartido, y no era así.
   Mismo patrón que `.btn-wa-big` de aquí abajo: la forma vive aquí, el
   color lo pone cada tema encima. */
.btn-primary {
  display: inline-block;
  background: var(--t-accent, #2b7a78);
  color: #fff;
  padding: .75rem 1.8rem;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-primary:hover { opacity: .88; }

.btn-wa-big {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25d366;
  color: #fff;
  padding: .75rem 1.8rem;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.btn-wa-big:hover { background: #1da851; }

/* 2026-08-22: CTA "Reservar mesa" en la home, hermano de .btn-wa-big
   (mismo problema potencial si se define solo local a una página --
   aquí, en el CSS global, directamente). Outline en vez de relleno para
   no competir visualmente con el verde de WhatsApp cuando van juntos. */
.btn-reservar-big {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  padding: .75rem 1.8rem;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-reservar-big:hover { background: #fff; color: var(--t-accent); }