/* Sistema de pedidos (/ingresar, /pedidos, /admin).
 * Se carga despues de styles.css y reutiliza su paleta, tipografias y botones. */

.app-body { min-height: 100svh; }

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

/* ---------- Botones extra ---------- */
.boton--bloque { width: 100%; }
.boton--chico { padding: 0.6rem 1.25rem; font-size: 0.95rem; }
.boton--borde {
  background: transparent;
  color: var(--crema);
  border: 1px solid var(--linea);
}
.boton--borde:hover { border-color: var(--crema-2); }
button.boton { border: 0; cursor: pointer; }
button.boton.boton--borde { border: 1px solid var(--linea); }
.boton:disabled { opacity: 0.45; cursor: default; transform: none; }
.boton--rojo:disabled:hover { background: var(--rojo); }

.enlace {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  color: var(--crema-2);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace:hover { color: var(--rojo-claro); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--crema);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.barra__marca img { width: 30px; height: 30px; }
.barra__quien {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--crema-2);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra__salir {
  background: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--crema);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.barra__salir:hover { border-color: var(--crema-2); }

/* ---------- Contenedor ---------- */
.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.75rem 1rem 5rem;
}
.app__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
}
.app__bajada { margin: 0.6rem 0 1.5rem; color: var(--crema-2); }
.app__bajada strong { color: var(--crema); }
.app__subtitulo {
  margin: 2.25rem 0 1rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.35rem;
}
.cargando { color: var(--crema-2); }

.tarjeta-app {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: var(--borde);
  padding: 1.15rem;
}
.tarjeta-app__titulo {
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.2rem;
}
.tarjeta-app__extra { color: var(--rojo-claro); font-size: 1rem; }

/* ---------- Formularios ---------- */
.formulario { display: flex; flex-direction: column; gap: 1rem; }
.formulario__error {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(200, 16, 46, 0.16);
  border: 1px solid rgba(229, 32, 63, 0.5);
  font-size: 0.92rem;
}

.campo { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; min-width: 0; }
.campo--grupo { border: 0; padding: 0; }
.campo__etiqueta {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema-2);
  padding: 0;
}
.campo__input {
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--negro);
  color: var(--crema);
  font: inherit;
  font-size: 1rem; /* 16px: evita el zoom automatico de iOS */
}
.campo__input:focus { border-color: var(--crema-2); outline: none; }
.campo__input:focus-visible { outline: 3px solid var(--rojo-claro); outline-offset: 1px; }
.campo__input:disabled { opacity: 0.7; }
.campo__input::placeholder { color: rgba(242, 231, 211, 0.38); }
select.campo__input { appearance: auto; }
.campo__fila { display: flex; gap: 0.5rem; align-items: center; }
.campo__ayuda { margin: 0.5rem 0 0; color: var(--crema-2); font-size: 0.85rem; }

.radio {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  cursor: pointer;
}
.radio input { accent-color: var(--rojo); margin-top: 0.3rem; }
.radio:has(input:checked) { border-color: var(--rojo); background: rgba(200, 16, 46, 0.08); }
.radio strong { font-weight: 600; }

/* ---------- Ingresar ---------- */
.ingreso {
  max-width: 420px;
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 4.5rem) 1.25rem 3rem;
  text-align: center;
}
.ingreso__logo-link { display: inline-block; }
.ingreso__logo { width: 150px; height: auto; margin: 0 auto; }
.ingreso__titulo {
  margin: 1.5rem 0 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 7vw, 2.1rem);
}
.ingreso .formulario { text-align: left; }
.ingreso__ayuda { margin-top: 1.5rem; color: var(--crema-2); font-size: 0.9rem; }
.ingreso__ayuda a { color: var(--crema); }

/* ---------- Pestanas ---------- */
.pestanas {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}
.pestana {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: transparent;
  color: var(--crema-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.pestana__sub {
  font-family: var(--texto);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
}
.pestana[aria-selected='true'],
.pestana[aria-current='page'] {
  color: var(--crema);
  border-color: var(--rojo);
  background: rgba(200, 16, 46, 0.12);
}
.pestanas--admin {
  max-width: 760px;
  margin: 1rem auto 0;
  padding: 0 1rem;
}

/* ---------- Dias ---------- */
.dias { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.dia {
  background: var(--negro-3);
  border: 1px solid var(--linea);
  border-radius: var(--borde);
  padding: 1rem 1rem 1.1rem;
}
.dia--cerrado { background: var(--negro-2); }
.dia__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.85rem;
}
.dia__nombre {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.3rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.dia__fecha { color: var(--crema-2); font-weight: 400; }
.dia__hoy {
  align-self: center;
  font-family: var(--texto);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--crema);
  color: var(--negro);
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
}
.dia__vacio { margin: 0; color: var(--crema-2); }
.dia__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea);
}
.dia__total { color: var(--crema-2); }
.dia__total strong { color: var(--crema); font-family: var(--display); font-size: 1.3rem; }
.dia__nota { margin: 0.85rem 0 0; color: var(--crema-2); font-size: 0.92rem; }
.dia__nota--ok { color: var(--crema); }
.dia__nota .enlace { margin-left: 0.5rem; }

.estado {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.estado--abierto { color: #fff; background: var(--rojo); border-color: var(--rojo); }

/* ---------- Opciones (encargado y menu) ---------- */
.opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.opcion { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.opcion__nombre {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  line-height: 1.3;
}
.opcion__cant { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.opcion__campo { flex: 1; min-width: 0; }

.mini {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--negro-2);
}
.mini--vacia { display: block; border: 1px dashed var(--linea); }

.contador { display: flex; align-items: center; flex: none; }
.contador__btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--linea);
  background: var(--negro);
  color: var(--crema);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.contador__btn:first-child { border-radius: 10px 0 0 10px; }
.contador__btn:last-child { border-radius: 0 10px 10px 0; }
.contador__btn:hover { background: var(--negro-2); }
.contador__n {
  width: 3.2rem;
  height: 40px;
  border: 1px solid var(--linea);
  border-inline: 0;
  background: var(--negro);
  color: var(--crema);
  text-align: center;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.contador__n::-webkit-outer-spin-button,
.contador__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.insignia {
  flex: none;
  font-size: 0.75rem;
  color: var(--crema-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

/* ---------- Pedido del encargado: cantidades por plato ---------- */
.menu-dia {
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: var(--negro);
  border: 1px solid var(--linea);
}
.menu-dia__opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.menu-dia__opciones li { display: flex; gap: 0.6rem; align-items: baseline; line-height: 1.3; }
.menu-dia__n {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  color: var(--rojo-claro);
}
.menu-dia__postre { margin: 0.6rem 0 0; color: var(--crema-2); font-size: 0.92rem; }
.menu-dia__postre strong { color: var(--crema); font-weight: 500; }

.opcion__nombre .menu-dia__n { margin-right: 0.45rem; }
.pedido__sub {
  margin: 1.1rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
  color: var(--crema-2);
}
.extra {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem 0.8rem;
  border: 1px dashed var(--linea);
  border-radius: 12px;
}
.extra[hidden] { display: none; }
.extra legend { padding: 0 0.3rem; font-weight: 500; }
.extra__ayuda { margin: 0 0 0.6rem; color: var(--crema-2); font-size: 0.88rem; }
.extra__ayuda--ok { color: var(--crema); }
.extra .opcion__nombre::first-letter { text-transform: uppercase; }

.pedido-hecho { list-style: none; margin: 0; padding: 0; }
.pedido-hecho li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: 0.95rem;
}
.pedido-hecho li:last-child { border-bottom: 0; }
.pedido-hecho li span { color: var(--crema-2); }

/* ---------- Admin: menu del dia ---------- */
.menu-campos { display: grid; gap: 0.6rem; }
.menu-campos .campo__etiqueta { display: flex; justify-content: space-between; gap: 0.5rem; }
.sin-servicio { display: flex; align-items: center; gap: 0.5rem; color: var(--crema-2); cursor: pointer; }
.sin-servicio input { accent-color: var(--rojo); width: 18px; height: 18px; }

/* ---------- Admin: navegador de fecha / semana ---------- */
.navegador {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1.25rem;
}
.navegador__flecha {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--crema);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.navegador__flecha:hover { border-color: var(--crema-2); }
.navegador__centro { flex: 1; min-width: 0; margin: 0; }
.navegador__fecha { text-align: center; color-scheme: dark; }
.navegador__texto {
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.1rem;
}

/* ---------- Admin: resumen ---------- */
.resumen__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.resumen__total { margin: 0 0 0.9rem; color: var(--crema-2); }
.resumen__total strong {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 1;
  color: var(--crema);
  margin-right: 0.35rem;
}
.resumen__mail { margin-top: 2rem; color: var(--crema-2); font-size: 0.9rem; }
.resumen__mail .enlace { display: block; margin-top: 0.35rem; }

.barras { list-style: none; margin: 0; padding: 0; 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: 500; }
.barras__n { font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
.barras__pista {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 4px;
  background: var(--negro-2);
  overflow: hidden;
}
.barras__barra {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--rojo);
  border-radius: 4px;
}

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linea);
}
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple strong { font-family: var(--display); font-size: 1.1rem; }

/* ---------- Admin: empresas ---------- */
.empresas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.empresa--inactiva { opacity: 0.6; }
.empresa__email { margin: 0 0 1rem; color: var(--crema-2); font-size: 0.92rem; overflow-wrap: anywhere; }
.empresa__acciones { display: grid; gap: 0.9rem; margin-bottom: 0.75rem; }

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  background: var(--crema);
  color: var(--negro);
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.aviso[data-tipo='error'] { background: var(--rojo); color: #fff; }
.aviso--visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pantallas grandes ---------- */
@media (min-width: 640px) {
  .barra { padding-inline: 1.5rem; }
  .app { padding-inline: 1.5rem; }
  .pestanas--admin { padding-inline: 1.5rem; }
  .dia { padding: 1.25rem 1.4rem 1.35rem; }
  .empresa__acciones { grid-template-columns: 1fr 1.4fr; }
  .mini { width: 60px; height: 60px; }
}