/* ==========================================================================
   12 · Movimiento reducido
   ==========================================================================
   Se apagan las animaciones, nunca la visibilidad: quien pidió menos
   movimiento recibe menos movimiento, no menos contenido.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hoja__texto > * { opacity: 1; transform: none; }
}

/* ==========================================================================
   13 · Afinado
   ==========================================================================
   Lo que separa un panel armado de uno terminado no son más adornos: es que
   las sombras vengan de una sola escala, que los números se alineen en
   columna, que el foco se vea igual en todas partes y que ningún borde sea
   un color inventado. Todo lo de acá abajo es eso.
   ========================================================================== */
:root {
  /* Una sola escala de elevación. Antes cada bloque inventaba su sombra y el
     panel se leía como piezas de sitios distintos pegadas. */
  --sombra-1: 0 1px 2px rgba(33,22,16,.05), 0 2px 6px rgba(33,22,16,.05);
  --sombra-2: 0 2px 6px rgba(33,22,16,.06), 0 10px 28px rgba(33,22,16,.10);
  --sombra-3: 0 6px 18px rgba(33,22,16,.10), 0 26px 60px rgba(33,22,16,.22);
  /* El brillo interior de un milímetro es lo que hace que un botón de color
     sólido se lea con volumen en vez de como un rectángulo pintado. */
  --filo-luz: inset 0 1px 0 rgba(255,255,255,.22);
}

/* Los precios, los conteos y las horas se comparan en vertical: sin cifras de
   ancho fijo la columna baila. */
.tabla td, .tabla th, .precio, .cat__n, .agotados__n, .hito__c, .marcador {
  font-variant-numeric: tabular-nums;
}
p, .plato__d, .vacio p, .obra p { text-wrap: pretty; }

/* --- Barra ---------------------------------------------------------------- */
.barra {
  background:
    linear-gradient(180deg, var(--nori-2) 0%, var(--nori) 100%);
  box-shadow: 0 1px 0 rgba(253,244,231,.07), 0 10px 30px rgba(12,8,6,.16);
}
.barra__sede .ico { font-size: .95rem; color: var(--naranja); }
.avatar { box-shadow: var(--filo-luz), 0 6px 16px rgba(176,30,36,.3); }
.avatar--dueno { box-shadow: var(--filo-luz), 0 6px 16px rgba(240,144,30,.28); }

/* --- Navegación ----------------------------------------------------------- */
.nav { background: rgba(253,244,231,.92); }
.tab { letter-spacing: -.005em; }
.tab[aria-selected="true"] { color: var(--rojo); }
.tab__hilo { background: linear-gradient(90deg, var(--rojo), var(--rojo-vivo)); }

/* --- Botones -------------------------------------------------------------- */
.btn--fuerte, .btn--naranja { box-shadow: var(--filo-luz), 0 2px 8px rgba(33,22,16,.10); }
.btn--fuerte:hover, .btn--naranja:hover { box-shadow: var(--filo-luz), 0 6px 18px rgba(33,22,16,.16); }
.btn .ico { font-size: 1.05em; }
.btn--grande .ico { font-size: 1.1em; }

/* --- Fichas y contenedores ------------------------------------------------ */
/* Acá le daba la sombra a `.plato::before`, el pseudo de elevación que se quitó
   de 04-carta.css por invisible: sin `content` ya no se genera, así que esta
   regla no pintaba nada. Se va para que nadie salga a buscar esa sombra. */
.envuelve { box-shadow: var(--sombra-1); }
.agotados { box-shadow: 0 2px 6px rgba(176,30,36,.06), 0 14px 34px rgba(176,30,36,.09); }
.agotados__cab .ico { font-size: 1.25rem; }
.modal { box-shadow: var(--sombra-3); }
.ajustes__menu { box-shadow: var(--sombra-3); }
.aviso { box-shadow: var(--sombra-3); }

/* La cabecera del modal lleva la misma diagonal de la marca, muy tenue: es lo
   que la distingue de un degradado cualquiera. */
.modal__cab { position: relative; overflow: hidden; }
.modal__cab::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: repeating-linear-gradient(116deg,
    rgba(255,255,255,.055) 0 2px, transparent 2px 15px);
}
.modal__cab > * { position: relative; z-index: 1; }

/* --- Marcadores y etiquetas ----------------------------------------------- */
.marcador .ico, .eti .ico { font-size: 1em; }
.marcador { border: 1px solid rgba(21,122,71,.16); }
.marcador--alerta { border-color: rgba(176,30,36,.18); }

/* --- Tabla ---------------------------------------------------------------- */
.tabla thead th { border-bottom: 1px solid rgba(253,244,231,.1); }
.tabla tbody tr:hover { background: var(--crema); }
.persona__av { box-shadow: var(--filo-luz); }

/* --- Foco ----------------------------------------------------------------- */
/* Sobre fondo oscuro el naranja se pierde contra el nori; sobre crema el
   contorno solo no basta. Un halo suave detrás resuelve los dos casos. */
:focus-visible { outline: 2.5px solid var(--naranja); outline-offset: 3px;
                 border-radius: 6px; }
.campo:focus-visible, .campo-oscuro:focus-visible { outline-offset: 0; }
.palanca:focus-visible { outline-offset: 4px; border-radius: 99px; }

/* --- Cargando ------------------------------------------------------------- */
.hueso { box-shadow: var(--sombra-1); }

/* --- Impresión ------------------------------------------------------------
   La bitácora se imprime de vez en cuando para una reunión: que salga legible
   y sin telón negro. */
@media print {
  .entrada, .nav, .ajustes, .herramientas, .plato__acc { display: none !important; }
  .barra { background: none; color: var(--tinta); box-shadow: none; }
  .envuelve, .plato { box-shadow: none; border: 1px solid var(--linea); }
  body { background: #fff; }
}

/* ==========================================================================
   14 · Pantalla angosta
   ==========================================================================
   La caja no siempre trabaja en un computador: muchas veces es el celular de
   quien está de turno. Sin esto la rejilla de platos pedía 380 px mínimos en
   una pantalla de 375 y las fichas se salían por el borde derecho.
   ========================================================================== */

/* El mínimo de la columna nunca puede ser mayor que el ancho disponible. Esta
   sola línea es la que evita el desborde en cualquier tamaño. */
.platos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }

@media (max-width: 720px) {
  .barra__i { gap: .65rem; padding: .55rem .9rem; }
  .barra__logo { width: 42px; height: 42px; }
  .barra__marca { font-size: 1rem; white-space: nowrap; }
  .barra__sede .sede__menu { min-width: 248px; }
  /* El nombre se va al menú de ajustes: acá no cabe sin partir la barra en
     tres renglones. */
  .quien { display: none; }
  .barra__d { gap: .45rem; }
  .avatar { width: 36px; height: 36px; border-radius: 11px; }
  .ajustes__b { width: 36px; height: 36px; }

  .nav { top: 54px; }
  /* Icono arriba y rótulo debajo, como la barra de una app. En fila con el
     icono al lado las seis pestañas medían 933 px en una pantalla de 390 y
     había que arrastrarlas para dar con «Tablero»; apiladas caben casi todas
     de una y el blanco de cada una crece en vez de encogerse. */
  /* Las seis reparten el ancho en vez de amontonarse a la izquierda: el blanco
     de cada una queda igual y sobra aire a lado y lado en vez de una fila
     pegada al borde. `1 0 auto` crece pero no aprieta — si algún día no caben,
     la barra se desliza antes que partir un rótulo en dos renglones. */
  .nav__i { padding: 0 .5rem; }
  .tab { flex: 1 0 auto; flex-direction: column; gap: .2em;
         padding: .5rem .35rem .45rem; font-size: .72rem; letter-spacing: -.005em; }
  .tab .ico { font-size: 1.3rem; }
  /* «Pronto» no cabe escrito debajo del rótulo: se vuelve un punto sobre el
     icono. El texto sigue ahí para quien lee con lector de pantalla, y la
     pantalla de detrás lo dice con todas las letras. */
  .tab__obra {
    position: absolute; top: .4rem; left: 50%; translate: .6rem 0; margin: 0;
    width: 7px; height: 7px; padding: 0; border-radius: 99px;
    text-indent: -99px; overflow: hidden; background: var(--naranja);
  }

  /* iOS acerca la pantalla al enfocar cualquier campo de menos de 16 px, y de
     ahí no vuelve solo: el panel se queda torcido hasta que uno lo endereza a
     mano. Subirlos a 16 lo corta en el origen, que es más fiable que pelearse
     con las banderas del `viewport`. */
  .campo, .campo-oscuro, .buscador input, select, textarea { font-size: 16px; }

  main { padding: 1rem .85rem 4.5rem; }

  .herramientas { gap: .5rem; margin-bottom: 1.1rem; }
  .buscador { flex: 1 1 100%; }

  /* Once categorías envueltas acá son seis renglones antes del primer plato:
     media pantalla de filtros. En el celular se deslizan en una sola tira. */
  .pastillas { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
               scroll-snap-type: x proximity; scroll-padding-left: .4rem; }
  .pastilla { scroll-snap-align: start; }
  .btn { padding: .6rem .9rem; }

  .cat { margin: 1.9rem 0 .8rem; }
  .plato { padding: .8rem; gap: .8rem; }
  .plato__foto { width: 60px; height: 60px; }

  /* Las tablas no se aprietan: se deslizan. Apretadas quedan ilegibles. */
  .envuelve { overflow-x: auto; }
  .tabla { min-width: 640px; }

  .modal__pie { padding: .9rem 1.1rem; }
  .modal__pie .btn { flex: 1 1 auto; justify-content: center; }
  .modal__pie .btn--peligro { flex-basis: 100%; margin-right: 0; order: 3; }
}

/* La ficha de sede solo se encoge en la franja donde compite por el ancho con
   el nombre escrito de la marca: pierde el rótulo de encima y se queda con
   «Sur», pero conserva el alto, que es lo que le importa al pulgar. */
@media (min-width: 481px) and (max-width: 720px) {
  .sede { gap: .45rem; padding: .35rem .55rem; border-radius: 11px; }
  .sede__e, .sede__n { display: none; }
  .sede__c { display: block; }
  .sede__pin { width: 22px; height: 22px; border-radius: 7px; }
}

/* Por debajo de 480 px las dos cosas no caben —la barra se desbordaba 96 px en
   un teléfono de 375— y hay que escoger. Se va el nombre escrito, porque el
   logo está al lado diciendo lo mismo, y la sede recupera la ficha entera: en
   la pantalla más pequeña es justo donde más falta hace tener a la vista sobre
   qué sede estás marcando agotados. */
@media (max-width: 480px) {
  .barra__marca { display: none; }
}
/* El nombre de quien entró, arriba del menú de ajustes. En pantalla ancha vive
   en la barra; acá es el único sitio donde se puede comprobar con qué cuenta
   se está trabajando, y en una caja compartida eso importa. */
.ajustes__quien {
  display: none; align-items: center; gap: .6rem;
  padding: .55rem .7rem .7rem; margin-bottom: .2rem;
  border-bottom: 1px solid var(--linea-sutil);
}
.ajustes__quien .persona__av { width: 34px; height: 34px; border-radius: 10px; font-size: .85rem; }
.ajustes__quien b { display: block; font-size: .9rem; }
.ajustes__quien span { font-size: .74rem; color: var(--tinta-3); }
@media (max-width: 720px) { .ajustes__quien { display: flex; } }