/* Sistema de pedidos (/ingresar, /pedidos, /admin) con el sistema visual
 * "Mantel" (decision #16). Se carga despues de tokens.css; no usa styles.css.
 * Celular primero. Todo texto >= 4.5:1 de contraste (ver tokens.css). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--m-fondo);
  color: var(--m-texto);
  font-family: var(--m-texto-fuente);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--m-rojo); outline-offset: 2px; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--m-alto-control);
  padding: 0.7rem 1.3rem;
  border: 0;
  border-radius: var(--m-radio-boton);
  font-family: var(--m-titulos);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.boton--rojo { background: var(--m-rojo); color: #fff; }
.boton--rojo:hover { background: var(--m-rojo-hover); }
.boton--borde {
  background: var(--m-secundario);
  color: var(--m-texto);
  border: 1.5px solid var(--m-borde);
  font-family: var(--m-texto-fuente);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.boton--borde:hover { border-color: var(--m-texto-3); }
.boton--chico { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.98rem; }
.boton--bloque { width: 100%; }
.boton:disabled { opacity: 0.5; cursor: default; }
.boton--rojo:disabled:hover { background: var(--m-rojo); }

.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--m-texto-2);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace:hover { color: var(--m-rojo); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: rgba(246, 241, 234, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--m-borde);
}
.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--m-titulos);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.barra__marca img { width: 32px; height: 32px; }
.barra__quien {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m-texto-2);
  font-weight: 600;
  font-size: 0.92rem;
}
.barra__salir {
  flex: none;
  min-height: 44px;
  padding: 0 1rem;
  border: 1.5px solid var(--m-borde);
  border-radius: var(--m-radio-chip);
  background: var(--m-secundario);
  color: var(--m-texto);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.barra__salir:hover { border-color: var(--m-texto-3); }

/* ---------- Contenedor y tipografia ---------- */
.app { max-width: 760px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.app--pedidos { padding-bottom: 12rem; } /* lugar para la barra fija */
.app__titulo {
  font-family: var(--m-titulos);
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.app__bajada { margin: 0.5rem 0 1.25rem; color: var(--m-texto-2); }
.app__subtitulo {
  margin: 1.75rem 0 0.8rem;
  font-family: var(--m-titulos);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cargando, .vacio { color: var(--m-texto-2); }
.vacio {
  padding: 1.5rem 1.2rem;
  border-radius: var(--m-radio-tarjeta);
  background: var(--m-tarjeta);
  box-shadow: var(--m-sombra);
  text-align: center;
  font-weight: 600;
}

.tarjeta-app {
  padding: 1.1rem 1.2rem;
  border-radius: var(--m-radio-tarjeta);
  background: var(--m-tarjeta);
  box-shadow: var(--m-sombra);
}
.tarjeta-app__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  margin-bottom: 0.6rem;
  font-family: var(--m-titulos);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tarjeta-app__extra { color: var(--m-rojo); font-size: 1.05rem; }

.estado {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--m-radio-chip);
  background: var(--m-secundario);
  color: var(--m-texto-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.estado--abierto { background: var(--m-rojo); color: #fff; }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 1rem; }
.formulario__error {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #FBE9EA;
  color: var(--m-rojo-hover);
  font-weight: 600;
}
.campo { display: grid; gap: 0.35rem; min-width: 0; }
.campo__etiqueta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--m-texto-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.campo__input {
  width: 100%;
  min-width: 0;
  min-height: var(--m-alto-control);
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--m-borde);
  border-radius: 12px;
  background: var(--m-tarjeta);
  color: var(--m-texto);
  font: inherit;
  font-size: 1rem; /* 16 px: evita el zoom automatico de iOS */
}
.campo__input:focus { border-color: var(--m-texto-3); outline: none; }
.campo__input:focus-visible { outline: 3px solid var(--m-rojo); outline-offset: 1px; }
.campo__input[readonly] { background: var(--m-fondo); color: var(--m-texto-2); }
.campo__input::placeholder { color: var(--m-texto-3); }
.campo__fila { display: flex; gap: 0.5rem; align-items: center; }
.campo__ayuda { color: var(--m-texto-3); font-size: 0.88rem; }

.casilla { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; color: var(--m-texto-2); }
.casilla input { width: 20px; height: 20px; accent-color: var(--m-rojo); }

/* ---------- Ingresar ---------- */
.ingreso { max-width: 420px; margin: 0 auto; padding: clamp(2rem, 8vh, 4rem) 1rem 3rem; }
.ingreso__marca { display: flex; justify-content: center; }
.ingreso__marca img { width: 72px; height: 72px; }
.ingreso__titulo {
  margin: 1.25rem 0;
  font-family: var(--m-titulos);
  font-weight: 700;
  font-size: clamp(1.8rem, 8vw, 2.3rem);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}
.ingreso__titulo .rojo { color: var(--m-rojo); }
.ingreso__ayuda { margin-top: 1.25rem; color: var(--m-texto-2); font-size: 0.95rem; text-align: center; }
.ingreso__ayuda a { color: var(--m-texto); font-weight: 600; }

/* ---------- Pedidos: selector de dia ---------- */
.selector {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.6rem;
  border-radius: var(--m-radio-tarjeta);
  background: var(--m-oscuro);
  color: var(--m-fondo);
  text-align: center;
}
.selector__flecha {
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(246, 241, 234, 0.35);
  border-radius: var(--m-radio-chip);
  background: transparent;
  color: var(--m-fondo);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.selector__flecha:disabled { opacity: 0.3; cursor: default; }
.selector__flecha:not(:disabled):hover { border-color: var(--m-fondo); }
.selector__etiqueta {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: var(--m-radio-chip);
  background: var(--m-rojo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.selector__dia {
  margin: 0.25rem 0 0.1rem;
  font-family: var(--m-titulos);
  font-weight: 700;
  font-size: clamp(1.9rem, 9vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.selector__estado { color: #E6DED3; font-size: 0.92rem; }

/* ---------- Pedidos: resumen de la semana ---------- */
.semana { margin: 0.9rem 0 0; }
.semana__titulo { margin-bottom: 0.4rem; color: var(--m-texto-2); font-size: 0.9rem; font-weight: 600; }
.semana__lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.semana__dia {
  min-height: 44px;
  min-width: 3.4rem;
  padding: 0.25rem 0.6rem;
  border: 1.5px solid var(--m-borde);
  border-radius: 12px;
  background: var(--m-tarjeta);
  color: var(--m-texto);
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
}
.semana__dia strong { display: block; font-family: var(--m-titulos); font-size: 1.05rem; }
.semana__dia[aria-current='date'] { border-color: var(--m-rojo); border-width: 2px; }
.semana__dia--cambios strong::after { content: ' •'; color: var(--m-rojo); }

/* ---------- Pedidos: platos ---------- */
.titulo-bloque {
  margin: 1.4rem 0 0.7rem;
  font-family: var(--m-titulos);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.titulo-bloque small { color: var(--m-texto-3); font-family: var(--m-texto-fuente); font-weight: 600; font-size: 0.82rem; letter-spacing: 0; text-transform: none; }
.platos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.plato {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--m-radio-tarjeta);
  background: var(--m-tarjeta);
  box-shadow: var(--m-sombra);
}
.plato--activo { border-color: var(--m-rojo); }
.plato--ancho { grid-column: 1 / -1; }
.plato__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--m-secundario); }
.plato__foto--vacia { display: grid; place-items: center; }
.plato__foto--vacia img { width: 40px; height: 40px; opacity: 0.35; }
.plato__cuerpo { display: grid; gap: 0.55rem; padding: 0.75rem 0.8rem 0.85rem; flex: 1; align-content: space-between; }
.plato__nombre { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.plato__desc { color: var(--m-texto-3); font-size: 0.88rem; line-height: 1.35; }
.plato__cant { font-family: var(--m-titulos); font-weight: 700; font-size: 1.4rem; }

.contador { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.contador__btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.contador__btn--menos { background: var(--m-secundario); color: var(--m-texto); }
.contador__btn--mas { background: var(--m-rojo); color: #fff; }
.contador__btn--mas:hover { background: var(--m-rojo-hover); }
.contador__btn:disabled { opacity: 0.4; cursor: default; }
.contador__n { min-width: 2ch; font-family: var(--m-titulos); font-weight: 700; font-size: 1.5rem; text-align: center; }

/* Chips (agregados, gustos) y postres */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { display: inline-flex; align-items: stretch; }
.chip__mas, .chip__menos {
  min-height: 44px;
  border: 1.5px solid var(--m-borde);
  background: var(--m-tarjeta);
  color: var(--m-texto);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.chip__mas { padding: 0 0.85rem; border-radius: var(--m-radio-chip); }
.chip--activo .chip__mas {
  background: var(--m-oscuro);
  border-color: var(--m-oscuro);
  color: #fff;
  border-radius: var(--m-radio-chip) 0 0 var(--m-radio-chip);
}
.chip__menos {
  width: 44px;
  border-left: 0;
  border-color: var(--m-oscuro);
  border-radius: 0 var(--m-radio-chip) var(--m-radio-chip) 0;
  background: var(--m-oscuro);
  color: #fff;
  font-size: 1.2rem;
}
.chips--grandes .chip__mas { min-height: 52px; padding: 0 1.2rem; font-size: 1rem; }
.chips--grandes .chip__menos { width: 52px; }
.ayuda { color: var(--m-texto-2); font-size: 0.88rem; }
.ayuda--ok { color: var(--m-texto); font-weight: 600; }
.ayuda--falta { color: var(--m-rojo-hover); font-weight: 600; }

.sello {
  display: inline-block;
  margin: 1rem 0 0;
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--m-texto-2);
  border-radius: 10px;
  color: var(--m-texto-2);
  font-family: var(--m-titulos);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  transform: rotate(-3deg);
}

/* ---------- Pedidos: barra fija ---------- */
.barra-pedido {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 736px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 0.75rem 1.1rem;
  border-radius: var(--m-radio-tarjeta);
  background: var(--m-oscuro);
  color: var(--m-fondo);
  box-shadow: 0 10px 30px rgba(22, 20, 18, 0.3);
}
.barra-pedido__texto { flex: 1; min-width: 0; }
.barra-pedido__total { font-family: var(--m-titulos); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; white-space: nowrap; }
.barra-pedido__sin { white-space: nowrap; margin-right: 0.2rem; padding: 0.05rem 0.45rem; border-radius: var(--m-radio-chip); background: var(--m-fondo); color: var(--m-texto); font-family: var(--m-texto-fuente); font-size: 0.72rem; font-weight: 600; vertical-align: 0.15em; }
.barra-pedido__detalle { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #E6DED3; font-size: 0.85rem; line-height: 1.35; }

/* ---------- Admin ---------- */
.pestanas { display: flex; gap: 0.5rem; max-width: 760px; margin: 1rem auto 0; padding: 0 1rem; }
.pestana {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: var(--m-alto-control);
  border: 1.5px solid var(--m-borde);
  border-radius: var(--m-radio-boton);
  background: var(--m-tarjeta);
  color: var(--m-texto-2);
  font-family: var(--m-titulos);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}
.pestana[aria-current='page'] { border: 2px solid var(--m-rojo); color: var(--m-texto); }

.navegador { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 1.1rem; }
.navegador__flecha {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--m-borde);
  border-radius: var(--m-radio-chip);
  background: var(--m-tarjeta);
  color: var(--m-texto);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.navegador__centro { flex: 1; min-width: 0; }
.navegador__fecha { text-align: center; }
.navegador__texto { font-family: var(--m-titulos); font-weight: 600; font-size: 1.1rem; text-align: center; text-transform: uppercase; }

.resumen__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.resumen__total { margin-bottom: 0.9rem; color: var(--m-texto-2); }
.resumen__total strong { margin-right: 0.35rem; color: var(--m-texto); font-family: var(--m-titulos); font-size: 3rem; line-height: 1; }
.resumen__mail { margin-top: 1.5rem; color: var(--m-texto-2); font-size: 0.92rem; }

.barras { display: grid; gap: 0.8rem; }
.barras__fila { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.75rem; align-items: baseline; }
.barras__nombre { font-weight: 600; }
.barras__n { font-family: var(--m-titulos); font-weight: 700; font-size: 1.35rem; }
.barras__pista { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--m-secundario); }
.barras__barra { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 4px; background: var(--m-rojo); }

.lista-simple li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--m-secundario); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple strong { font-family: var(--m-titulos); font-size: 1.15rem; }

.grilla-admin { display: grid; gap: 0.8rem; }
.empresa--inactiva { opacity: 0.6; }
.empresa__email { margin-bottom: 0.8rem; color: var(--m-texto-2); font-size: 0.92rem; overflow-wrap: anywhere; }

.dias { display: grid; gap: 0.8rem; }
.dia { padding: 1rem 1.1rem 1.1rem; border-radius: var(--m-radio-tarjeta); background: var(--m-tarjeta); box-shadow: var(--m-sombra); }
.dia--cerrado { background: #FBF8F4; }
.dia__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; margin-bottom: 0.8rem; }
.dia__nombre { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--m-titulos); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; }
.dia__fecha { color: var(--m-texto-3); font-weight: 500; }
.dia__pie { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--m-secundario); }
.dia__vacio { color: var(--m-texto-2); }
.menu-dia__opciones li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding: 0.2rem 0; }
.menu-dia__n { color: var(--m-rojo); font-family: var(--m-titulos); font-weight: 700; }
.menu-dia__postre { margin-top: 0.4rem; color: var(--m-texto-2); }
.menu-campos { display: grid; gap: 0.7rem; }
.insignia { padding: 0.1rem 0.55rem; border-radius: var(--m-radio-chip); background: var(--m-secundario); color: var(--m-texto-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed;
  left: 50%;
  top: calc(4.5rem + env(safe-area-inset-top, 0px));
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  background: var(--m-oscuro);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(22, 20, 18, 0.3);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.aviso[data-tipo='error'] { background: var(--m-rojo-hover); }
.aviso--visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pantallas grandes ---------- */
@media (min-width: 640px) {
  .barra { padding-inline: 1.5rem; }
  .app, .pestanas { padding-inline: 1.5rem; }
  .platos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grilla-admin--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gustos { margin-top: 0.9rem; }
.gustos .titulo-bloque { margin-top: 0; }
.gustos .ayuda { margin-bottom: 0.6rem; }
.empresa__acciones { display: grid; gap: 0.8rem; margin-bottom: 0.4rem; }
.menu-dia { display: grid; gap: 0.2rem; }