/* ══════════════════════════════════════════════════════════════════
   San Marco · SISTEMA PREMIUM RESPONSIVE v1.0
   ──────────────────────────────────────────────────────────────────
   CAPA UNICA, AUTORITATIVA Y MOVIL-PRIMERO.

   Se carga LA ULTIMA (despues de app.css, reservas-modal.css,
   mesas.css, cocina.css y mesa-carta.css) y por tanto su orden de
   cascada gana a igualdad de especificidad. NO introduce ninguna
   dependencia de JavaScript ni cambia el HTML: gobierna el sitio
   completo (web publica + dashboard admin + sala + KDS + cocina&caja
   + carta por mesa) con reglas de presentacion.

   Corrige de raiz:
     1. .admin-shell (240px 1fr) nunca colapsaba -> sidebar en tira
        horizontal desplazable por debajo de 900px.
     2. Tablas del panel inutilizables en movil -> contenedor con
        scroll horizontal tactil y anchura minima legible.
     3. Rejillas (metric/chart/config/footer/hero) sin colapsar.
     4. .btn--danger duplicado y contradictorio (mesas.css lo forzaba
        a rojo solido con !important) -> se unifica al estilo sobrio
        de app.css.
     5. Cabecera, hero, footer y flotantes sin ajustes de movil.
     6. Paneles internos (cocina, KDS, sala, carta) sin ajustes finos.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────── 0 · Base segura para todos los anchos ───────────────
   Solo min-width:0 y overflow-wrap, que NO alteran el tamano intrinseco
   de las rejillas (a diferencia de overflow-wrap:anywhere) y por tanto
   no cambian NADA en escritorio. */

/* Nunca desbordar la pantalla por un hijo rigido. */
.admin-main, .tab-content, .card, .metric, .ck-card, .mc-body, .kds-ticket,
.grupo-card, .mesa-card, .salon-bloque { min-width: 0; }

/* Evita que un email/codigo/URL larguisimo estire la linea. */
.table td, .table th, .ck-tabla td, .ck-tabla th,
.mesa-card__name, .footer-col p, .admin-sidebar__link { overflow-wrap: break-word; }

/* ─────────────── 1 · Contenedores y cabecera publica ─────────────── */

@media (max-width: 640px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .site-header__inner { height: 66px; gap: 1rem; }
  .header-actions { gap: .5rem; }
  .header-actions .btn { padding: .6rem 1.05rem; font-size: .72rem; }
  .nav-mobile { padding: 1rem 1rem 1.6rem; }
  .nav-mobile__link { font-size: 1.2rem; padding: .85rem 0; }
  .nav-mobile__cta { align-self: stretch; text-align: center; margin-top: 1.2rem; }
  .icon-btn, .hamburger { width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .brand__sub { display: none; }
  .header-actions .btn { padding: .5rem .8rem; font-size: .68rem; }
}

@supports (padding: max(0px)) {
  .site-header__inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ─────────────── 2 · Hero (portada) ─────────────── */

@media (max-width: 640px) {
  .hero { min-height: 0; padding-top: 2.2rem; padding-bottom: 2.6rem; }
  .hero__inner { gap: 2.4rem; }
  .hero__title { margin: .6rem 0 1.2rem; }
  .hero__actions { gap: .7rem; margin-bottom: 2.2rem; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__stats { gap: .9rem; padding-top: 1.6rem; }
  .hero__stat-label { font-size: .62rem; letter-spacing: .1em; }
  .hero__visual { aspect-ratio: 4/3; }
}

@media (max-width: 400px) {
  .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .hero__stat-num { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  .hero__stat-label { font-size: .56rem; letter-spacing: .06em; }
}

/* ─────────────── 3 · Footer ─────────────── */

@media (max-width: 640px) {
  .site-footer { padding: 3.2rem 0 1.5rem; margin-top: 4rem; }
  .footer-grid { gap: 2.2rem; margin-bottom: 2.4rem; }
  .footer-tagline { max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .footer-legal { flex-wrap: wrap; gap: 1rem; }
}

/* Rango intermedio: 4 columnas fijas era ilegible entre 700 y 960px. */
@media (min-width: 700px) and (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
}

/* ─────────────── 4 · Flotantes (asistente / reservas / carrito) ─────────────── */

@media (max-width: 640px) {
  .fab-ai { bottom: 1.2rem; right: 1.2rem; }
  .cart-fab { bottom: 1.2rem; left: 1.2rem; padding: .85rem 1.2rem; }
  body.rx-has-fab .fab-ai { bottom: 5.2rem; }
}

@supports (bottom: max(0px)) {
  @media (max-width: 640px) {
    .fab-ai { bottom: max(1.2rem, env(safe-area-inset-bottom)); }
    .cart-fab { bottom: max(1.2rem, env(safe-area-inset-bottom)); }
  }
}

/* ─────────────── 5 · DASHBOARD ADMIN · estructura ─────────────── */

@media (max-width: 900px) {
  /* El defecto raiz: 240px 1fr sin media query. Aqui colapsa. */
  .admin-shell { grid-template-columns: 1fr; min-height: 0; }

  /* Sidebar -> tira horizontal desplazable (una fila de chips). */
  .admin-sidebar {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: center; gap: .35rem;
    padding: .7rem .75rem;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-sidebar__brand { display: none; }
  .admin-sidebar__link {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: .58rem .85rem;
    font-size: .82rem;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
  }
  .admin-sidebar__link.is-active { background: rgba(255,255,255,.18); }
  /* Anula los margin-top:2rem en linea de "Web publica" / "Cerrar sesion". */
  .admin-sidebar__link[style] { margin-top: 0 !important; }

  .admin-main { padding: 1.4rem 1rem 3rem; }
  .admin-header { flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: 1.6rem; }
  .admin-header h1 { font-size: clamp(1.4rem, 4.6vw, 2rem); }
}

@media (max-width: 560px) {
  .admin-main { padding: 1rem .75rem 2.6rem; }
  .admin-header { margin-bottom: 1.2rem; }
  .card { padding: 1.15rem 1rem; }
  .metric { padding: 1.1rem; }
  .metric__value { font-size: 1.75rem; }
  .metric-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin-bottom: 1.8rem; }
}

/* ─────────────── 6 · Tablas del panel (legibles en movil) ─────────────── */

/* Mantiene el recorte redondeado del contenedor y anade scroll tactil. */
.table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  /* Evita que la tabla se aplaste: crece y el contenedor hace scroll. */
  .table-wrap > .table { min-width: 720px; }
  .table th, .table td { padding: .6rem .7rem; }
}

@media (max-width: 560px) {
  .table { font-size: .84rem; }
  .table th { letter-spacing: .03em; }
  .table-wrap > .table { min-width: 660px; }
  .acc-row { gap: .25rem; }
}

/* ─────────────── 7 · Rejillas del dashboard ─────────────── */

/* chart-grid ya baja a 1 columna a 900px; aqui se refina la altura. */
@media (max-width: 900px) {
  .chart-grid { gap: 1rem; margin-top: 1.4rem; }
  .chart-grid .card { padding: 1.1rem 1rem; }
  .chart-box { height: 210px; }
  .chart-box canvas { max-height: 210px; }
}

@media (max-width: 560px) {
  .chart-box { height: 180px; }
  .chart-box canvas { max-height: 180px; }
  .config-grid { gap: .8rem; }
  .form-row-grid { gap: .8rem; }
}

@media (max-width: 420px) {
  .form-row-grid { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
}

/* ─────────────── 8 · Barras de filtros en linea del panel ───────────────
   Las vistas usan <div style="display:flex; gap:1rem"> sin clase. Solo se
   define flex-wrap (propiedad NO declarada en linea), por lo que en
   escritorio no cambia absolutamente nada. */
@media (max-width: 640px) {
  .tab-content [style*="display:flex"],
  .tab-content [style*="display: flex"] {
    flex-wrap: wrap;
    gap: .6rem !important;
  }
  .tab-content [style*="display:flex"] > input,
  .tab-content [style*="display: flex"] > input,
  .tab-content [style*="display:flex"] > select,
  .tab-content [style*="display: flex"] > select,
  .tab-content [style*="display:flex"] > label,
  .tab-content [style*="display: flex"] > label {
    flex: 1 1 140px;
    min-width: 0;
  }
  .tab-content [style*="display:flex"] > .btn,
  .tab-content [style*="display: flex"] > .btn { flex: 1 1 auto; }
}

/* ─────────────── 9 · Botones: unificar .btn--danger ───────────────
   mesas.css forzaba rojo solido con !important. Se restaura el estilo
   sobrio (contorno) definido en app.css y se cubre la clase suelta
   .danger que usaba mesas-admin.js. */
.btn--danger,
.btn.danger {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.btn--danger:hover,
.btn.danger:hover {
  background: var(--danger) !important;
  background-color: var(--danger) !important;
  color: #fff !important;
}

@media (max-width: 640px) {
  .btn { padding: .8rem 1.4rem; font-size: .8rem; }
  .btn--sm { padding: .58rem 1.05rem; font-size: .72rem; }
  .btn--xs { padding: .42rem .7rem !important; }
}

/* ─────────────── 10 · Modales del panel ─────────────── */

@media (max-width: 640px) {
  .mesas-modal { padding: .75rem; }
  .mesas-modal__box { padding: 1.15rem; max-height: 92vh; }
  .ck-modal { padding: .6rem; }
  .ck-modal__box, .ck-modal__box--ancho { max-width: none; max-height: 94vh; }
  .mesas-modal__foot { flex-direction: column; align-items: stretch; }
  .mesas-modal__foot .btn { width: 100%; }
}

/* ─────────────── 11 · Sala / mesas (panel y plano) ─────────────── */

@media (max-width: 720px) {
  .mesas-toolbar { padding: .85rem .8rem; }
  .salon-chips { gap: .4rem; }
  .salon-chip { padding: .45rem .75rem; font-size: .8rem; }
  .mesas-toolbar__actions { gap: .35rem; }
  .salon-bloque { padding: .9rem .85rem; }
  .salon-bloque__tools { flex-wrap: wrap; }
  .mesas-stats { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
}

@media (max-width: 480px) {
  .mesas-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: .7rem; }
  .mesa-card { padding: .8rem .7rem .7rem; }
  .mesa-card__num { font-size: 1.1rem; }
  .grupo-card h4 { font-size: .98rem; }
  .sala-plano__toolbar, .sala-plano__legend { gap: .5rem; }
  .mesa-mini { padding: .65rem .7rem; gap: .6rem; }
  .mesa-mini__num { font-size: 1.2rem; }
}

/* ─────────────── 12 · KDS (cocina) ─────────────── */

@media (max-width: 640px) {
  .kds-shell { padding: .9rem; }
  .kds-header { flex-wrap: wrap; gap: .55rem; }
  .kds-header h1 { font-size: clamp(1.2rem, 5.5vw, 1.6rem); }
  .kds-grid { grid-template-columns: 1fr; gap: .8rem; }
  .kds-ticket { padding: 1rem; }
}

/* ─────────────── 13 · Cocina & Caja (ck-*) ─────────────── */

@media (max-width: 900px) {
  .ck-topbar .ck-btn { flex: 0 1 auto; }
  .ck-comanda__total { margin-left: auto; }
}

@media (max-width: 640px) {
  .ck-filtros { padding: .9rem .85rem; }
  .ck-presets { gap: .3rem; }
  .ck-preset { padding: .38rem .7rem; font-size: .74rem; }
  .ck-kpi { padding: .9rem .85rem; }
  .ck-kpi__value { font-size: 1.35rem; }
  .ck-comanda { padding: .8rem .85rem; }
  .ck-comanda__head { flex-wrap: wrap; row-gap: .25rem; }
  .ck-comanda__total { margin-left: 0; }
  .ck-comanda__items li { flex-wrap: wrap; }
  .ck-modal__box { border-radius: var(--radius-lg); }
}

/* Tablas de cocina: no existia contenedor de scroll. */
.ck-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .ck-tabla { min-width: 420px; }
  .ck-canal { padding: .7rem .75rem; }
}

/* ─────────────── 14 · Carta por mesa (mc-*) ─────────────── */

@media (max-width: 480px) {
  .mc-head__actions { gap: .35rem; }
  .mc-iconbtn { width: 38px; height: 38px; }
  .mc-body { padding-left: .8rem; padding-right: .8rem; }
  .mc-dish { gap: .7rem; }
  .mc-dish__thumb { flex-basis: 72px; width: 72px; height: 72px; }
  .mc-dish__name { font-size: 1rem; }
  .mc-price { font-size: 1rem; }
  .mc-cart-btn { padding: .55rem .8rem; font-size: .78rem; }
  .mc-sheet__panel { padding: 1.35rem 1rem calc(1.3rem + env(safe-area-inset-bottom)); }
}

@supports (padding: max(0px)) {
  .mc-body {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* ─────────────── 15 · Reservas (modal flotante) ─────────────── */

@media (max-width: 640px) {
  .rx-modal { padding-top: calc(1.4rem + env(safe-area-inset-top)); }
  .rx-btn { min-height: 46px; }
  .rx-field input, .rx-field select { min-height: 44px; }
}

@media (max-width: 400px) {
  .rx-modal { padding-left: 1rem; padding-right: 1rem; }
  .rx-title { font-size: 1.35rem; }
}

/* ─────────────── 16 · Accesibilidad tactil ─────────────── */

@media (hover: none) {
  .mesa-card:hover, .salon-chip:hover, .dish-card:hover .dish-card__img { transform: none; }
  .admin-sidebar__link:hover { background: rgba(255,255,255,.06); }
}

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

/* Respeta la preferencia de menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}