/*
 * Carta pública del comensal — estilos.
 *
 * ┌─ ESCRITO PARA UN TELÉFONO EN UN LOCAL, NO PARA UNA PANTALLA GRANDE ─────┐
 * │ No hay «versión de escritorio» que luego se encoge. Se diseñó al revés: │
 * │ una columna para el móvil, y en pantallas anchas se limita el ancho y   │
 * │ se centra. Una carta de restaurante en tres columnas no la lee nadie.   │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─ POR QUÉ NO HAY TEMA OSCURO AQUÍ ───────────────────────────────────────┐
 * │ El panel sí lo tiene, porque quien administra trabaja de noche en una   │
 * │ oficina. Esto se lee sentado a una mesa, muchas veces con la luz del    │
 * │ local de frente y siempre con la pantalla llena de huellas.             │
 * │                                                                         │
 * │ Es el mismo razonamiento que está escrito en marca/tokens.json para la  │
 * │ app: bajo luz fuerte, el reflejo suma la misma luminancia a los píxeles │
 * │ negros y a los blancos. En una interfaz oscura el negro se vuelve gris  │
 * │ y el contraste se desploma; en una clara se conserva casi entero.       │
 * └─────────────────────────────────────────────────────────────────────────┘
 */

/* ─────────────────────────────────────────────────────────── TIPOGRAFÍAS ── */

/*
 * Las dos están recortadas al alfabeto que se usa de verdad: Archivo pasó de
 * 189 kB a 34, y la de cifras de 40 kB a menos de 3. En un local con mala señal
 * eso es la diferencia entre leer la carta y mirar una pantalla en blanco.
 *
 * `swap` y no `block`: es preferible ver el texto en la tipografía del sistema
 * durante unas décimas que ver un hueco vacío. Con hambre y mala señal, un
 * hueco vacío se interpreta como que la página está rota.
 */
@font-face {
  font-family: 'Archivo';
  /* Ruta RELATIVA a este archivo, no absoluta desde la raíz del dominio: así
     la carta funciona igual colgada de una subcarpeta que en su propio
     dominio, sin que haya que tocar el CSS al mudarla. */
  src: url('tipografias/archivo.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plex Cifras';
  src: url('tipografias/cifras.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ──────────────────────────────────────────────────────────────── TOKENS ── */

/*
 * Los colores salen de marca/tokens.json, la misma fuente que alimenta el panel
 * y la app. Aquí van como literales porque esta pieza no pasa por el generador
 * de tokens: es PHP suelto y no comparte compilación con nada.
 */
:root {
  --hueso: #f6f3ed;        /* fondo de la pantalla */
  --loza: #ffffff;         /* tarjetas y barras */
  --ceniza: #e4e0d8;       /* divisores y bordes */
  --carbon: #12171c;       /* todo el texto de lectura */
  --humo: #6b7784;         /* datos secundarios */
  --pizarra: #2a333c;
  --brasa: #d2600f;        /* SOLO lo que exige atención */
  --brasa-honda: #a8480a;  /* relleno con texto blanco */
  --brasa-suave: #fbede1;
  --huacatay: #0b6b4f;     /* listo, servido */
  --huacatay-suave: #e3f0eb;
  --ambar: #f0a81e;        /* en espera */
  --ambar-hondo: #8a5a00;  /* el ámbar como TEXTO: el de marca da 1.9:1 */
  --ambar-suave: #fbf0da;
  --rocoto: #9e1b1b;
  --rocoto-suave: #f7e4e4;

  --radio-chico: 6px;
  --radio: 10px;
  --radio-grande: 16px;

  /* Alto de la barra de acciones. Vive aquí porque el cuerpo necesita el mismo
     número para su relleno inferior, y dos números que tienen que coincidir se
     escriben una sola vez. */
  --alto-acciones: 60px;
}

/* ───────────────────────────────────────────────────────────────── BASE ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Evita el rebote lateral pase lo que pase. Una carta que se desplaza en
     horizontal en el móvil se siente rota aunque no lo esté. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--carbon);
  /*
   * 17 píxeles de base y no 14 como en el panel. Se lee con el teléfono a
   * distancia de brazo, muchas veces con poca luz, y a menudo por alguien que
   * dejó las gafas en casa. Un panel es dense por necesidad; una carta no.
   */
  font: 400 17px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Deja sitio a la barra de acciones fija más el área segura del móvil. */
  padding-bottom: calc(var(--alto-acciones) + env(safe-area-inset-bottom, 0px) + 12px);
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  font-family: 'Archivo', system-ui, sans-serif;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Cifras con ancho fijo: es lo que hace que la columna de precios quede
   alineada y se pueda comparar de un vistazo, que es justo lo que hace quien
   lee una carta. Regla escrita en marca/tokens.json. */
.cifra {
  font-family: 'Plex Cifras', ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Foco visible siempre. Aquí importa más de lo normal: se navega con el pulgar
   y a veces con lector de pantalla en un sitio ruidoso. */
:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Solo para lectores de pantalla: fuera de la vista pero dentro del árbol de
 * accesibilidad.
 *
 * `display: none` NO sirve, porque saca el elemento del árbol y entonces el
 * lector tampoco lo lee, que es justo lo contrario de lo que se busca.
 *
 * Faltaba esta regla y el efecto fue de manual: las etiquetas de las cantidades
 * salieron VISIBLES en mitad de la carta, empujaron la columna del texto hasta
 * dejarla en sesenta píxeles y el nombre de cada plato se partió en una palabra
 * por línea. Un fallo de accesibilidad que además rompe el maquetado.
 */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 8px;
  top: 8px;
  z-index: 50;
  background: var(--brasa-honda);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radio);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────── BARRA ── */

.barra {
  background: var(--loza);
  border-bottom: 1px solid var(--ceniza);
  padding-top: env(safe-area-inset-top, 0px);
}

/*
 * MOTIVO PROPIO 1, en su versión de cabecera: la cinta de marca de 3 px.
 * Es el mismo rail que codifica el estado en las filas del panel y en las
 * líneas del pedido, aquí puesto en horizontal como firma de la casa.
 */
.barra-cinta {
  height: 3px;
  background: var(--brasa);
}

.barra-interior {
  max-width: 46rem;
  margin: 0 auto;
  padding: 12px 16px;
}

.barra-restaurante {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0;
}

.barra-sede {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--humo);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.barra-mesa {
  background: var(--brasa-suave);
  color: var(--brasa-honda);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────── AVISOS ── */

main {
  max-width: 46rem;
  /* El relleno lateral nunca baja de 16 px: es lo que mantiene el texto
     separado del borde en un teléfono de 400 px o menos. */
  margin: 0 auto;
  padding: 16px;
}

.confirmacion,
.aviso-copia,
.aviso-pendiente {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radio);
  font-size: 0.92rem;
  line-height: 1.45;
  /* Los tres avisos llevan cinta de 3 px a la izquierda, igual que las
     tarjetas del panel: es lo que los identifica como avisos de un vistazo. */
  border-left: 3px solid;
}

.confirmacion {
  background: var(--huacatay-suave);
  border-color: var(--huacatay);
  color: #0a4d3a;
}

/*
 * Bloque de rechazos. Va en el naranja de atención de la marca, no en el rojo
 * de error: no falló nada del sistema, simplemente se acabó un plato. El rojo
 * está reservado para lo que sí es un fallo, como que el pedido no llegara a
 * salir. Distinguirlos importa porque el comensal reacciona distinto: ante lo
 * naranja pide otra cosa, ante lo rojo vuelve a intentarlo.
 */
.aviso-rechazo {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radio);
  border-left: 3px solid var(--brasa);
  background: var(--brasa-suave);
  color: #6d3208;
  font-size: 0.92rem;
  line-height: 1.45;
}

.confirmacion-titulo {
  margin: 0 0 6px;
  font-weight: 700;
}

.confirmacion-lista {
  margin: 0;
  padding-left: 18px;
}

.confirmacion-lista li {
  margin: 2px 0;
}

.confirmacion-nota {
  margin: 8px 0 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.aviso-copia {
  background: var(--ambar-suave);
  border-color: var(--ambar);
  color: var(--ambar-hondo);
}

/* La franja naranja: lo que todavía no funciona se dice, no se disimula. El
   brasa es el color que la marca reserva para lo que exige atención. */
.aviso-pendiente {
  background: var(--brasa-suave);
  border-color: var(--brasa);
  color: #6d3208;
}

.aviso-pendiente strong {
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────── ÍNDICE ── */

.indice {
  display: flex;
  gap: 8px;
  /* Se desliza en horizontal en vez de partirse en tres filas: unas categorías
     apiladas se comen media pantalla antes de enseñar un solo plato. */
  overflow-x: auto;
  margin: 0 -16px 20px;
  padding: 0 16px 4px;
  scrollbar-width: none;
}
.indice::-webkit-scrollbar {
  display: none;
}

.indice-enlace {
  flex: 0 0 auto;
  background: var(--loza);
  border: 1px solid var(--ceniza);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.88rem;
  color: var(--carbon);
  text-decoration: none;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────── CARTA ── */

.categoria {
  margin: 0 0 26px;
  /* Compensa la cabecera fija al saltar desde el índice, para que el título de
     la categoría no quede escondido detrás de la barra. */
  scroll-margin-top: 12px;
}

.categoria-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ceniza);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.platos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plato {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ceniza);
}
.plato:last-child {
  border-bottom: 0;
}

/*
 * Foto del plato. Cuadrada y pequeña, a la izquierda.
 *
 * 72 píxeles y no más: a distancia de brazo basta para reconocer un plato, y
 * cada píxel de ancho que se lleva la foto se lo quita al nombre, que es lo que
 * de verdad hay que leer. Con fotos grandes, en un teléfono de 400 píxeles
 * caben tres platos por pantalla y hojear la carta se vuelve interminable.
 *
 * `object-fit: cover` recorta en vez de deformar: las fotos las suben los
 * propios restaurantes y llegan con cualquier proporción. Un cebiche estirado
 * se ve peor que un cebiche recortado.
 */
.plato-imagen {
  flex: 0 0 auto;
  /*
   * 64 y no 72. Se probó con 72 en un teléfono de 400 píxeles y la columna de
   * texto se quedaba en 196: el nombre del plato se partía en dos líneas y la
   * descripción en cuatro, así que cabían menos de tres platos por pantalla.
   * Bajar ocho píxeles la foto devuelve dieciséis al texto, que es donde de
   * verdad hacen falta.
   */
  width: 64px;
  height: 64px;
  border-radius: var(--radio);
  object-fit: cover;
  background: #eeece7;
  /* El borde separa la foto del fondo cuando la imagen es muy clara, que con
     un plato sobre mantel blanco pasa constantemente. */
  border: 1px solid var(--ceniza);
}

.plato-texto {
  /* Sin esto, un nombre de plato largo se niega a encogerse y empuja el precio
     fuera de la pantalla. Es la línea que evita el desplazamiento lateral. */
  min-width: 0;
  flex: 1;
}

.plato-nombre {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

/*
 * Descripción acotada a tres líneas.
 *
 * ┌─ POR QUÉ SE CORTA, SI CORTAR ESCONDE INFORMACIÓN ───────────────────────┐
 * │ Porque una carta se HOJEA. Quien la abre no busca un plato concreto:    │
 * │ recorre para decidir, y para eso necesita ver varios de golpe. Con una  │
 * │ descripción larga junto a una foto, en un teléfono de 400 píxeles cabían│
 * │ dos platos y medio por pantalla, y hojear cuarenta se volvía            │
 * │ interminable.                                                           │
 * │                                                                         │
 * │ Se corta la descripción y NUNCA los alérgenos ni el precio, que van     │
 * │ aparte y siempre completos. Lo que se pierde son adjetivos; lo que      │
 * │ podría mandar a alguien al hospital, no se toca.                        │
 * │                                                                         │
 * │ Tres líneas y no dos: la inmensa mayoría de las descripciones caben     │
 * │ enteras, así que en la práctica casi nunca se corta nada.               │
 * └─────────────────────────────────────────────────────────────────────────┘
 */
.plato-descripcion {
  margin: 3px 0 0;
  font-size: 0.88rem;
  color: var(--humo);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plato-datos {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dato-tiempo,
.dato-alergeno {
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.dato-tiempo {
  background: #eeece7;
  color: var(--humo);
}

/*
 * Los alérgenos en ámbar y con texto oscuro. Es la única información de esta
 * pantalla que puede mandar a alguien al hospital, así que se ve y se lee: el
 * ámbar de marca da 1.9:1 como texto y sería ilegible, por eso el texto va en
 * su versión honda, que da 5.35:1.
 */
.dato-alergeno {
  background: var(--ambar-suave);
  color: var(--ambar-hondo);
  font-weight: 600;
}

/*
 * Columna derecha: el precio arriba y la cantidad debajo.
 *
 * Apilarlos en una sola columna en vez de ponerlos en fila es lo que salva el
 * ancho. Con el campo de cantidad al lado del precio, en un teléfono de 400
 * píxeles la columna de texto se quedaba en 130 y el nombre del plato se partía
 * en tres líneas.
 */
.plato-derecha {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.plato-precio {
  margin: 0;
  font-size: 0.95rem;
  /* Alineado a la derecha para que la columna de precios cuadre. */
  text-align: right;
  padding-top: 1px;
  white-space: nowrap;
}

/*
 * Campo de cantidad.
 *
 * Alto de 36 píxeles, que es lo que se puede tocar con el pulgar sin apuntar.
 * Se le quitan las flechas nativas, que en el móvil son diminutas y están
 * pegadas una encima de otra: el guion pone en su lugar unos botones de menos y
 * más que sí se pueden pulsar. Sin guion queda el campo y el teclado numérico,
 * que funciona igual aunque sea menos cómodo.
 */
.cantidad {
  width: 52px;
  height: 36px;
  border: 1px solid var(--ceniza);
  border-radius: var(--radio);
  background: var(--loza);
  color: var(--carbon);
  text-align: center;
  font-family: 'Plex Cifras', ui-monospace, monospace;
  font-size: 1rem;
  /* Sin esto, iOS acerca la pantalla al enfocar cualquier campo de menos de 16
     píxeles y deja al comensal con la carta a medio ampliar. */
  font-size: max(1rem, 16px);
  -moz-appearance: textfield;
  appearance: textfield;
}

.cantidad::-webkit-outer-spin-button,
.cantidad::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Cuando hay algo pedido, el campo se marca en el color de la marca: de un
   vistazo se ve qué se lleva pedido sin tener que leer los números. */
.cantidad.con-algo {
  border-color: var(--brasa);
  background: var(--brasa-suave);
  color: var(--brasa-honda);
  font-weight: 600;
}

/* Botones de menos y más que añade el guion. Solo existen si hay JavaScript. */
.paso {
  width: 34px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--ceniza);
  border-radius: var(--radio);
  background: var(--loza);
  color: var(--carbon);
  font-size: 1.2rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.paso:disabled {
  opacity: 0.35;
  cursor: default;
}

.grupo-cantidad {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ───────────────────────────────────────────────────────────── ENVIAR ── */

.enviar {
  margin: 26px 0 0;
  text-align: center;
}

.enviar-boton {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--radio);
  /* El relleno de acento va en brasa honda con texto blanco: 5.84:1, que es lo
     que pide la marca para un botón relleno. El brasa normal no llega. */
  background: var(--brasa-honda);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.enviar-boton:active {
  filter: brightness(0.93);
}

.enviar-nota {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--humo);
  line-height: 1.45;
}

/*
 * Pastilla flotante con la cuenta. La añade el guion y solo aparece cuando hay
 * algo marcado. Es la comodidad; la garantía es el botón de arriba, que está
 * siempre y funciona sin JavaScript.
 */
.pastilla {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--alto-acciones) + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 45;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--brasa-honda);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(18 23 28 / 0.22);
  max-width: calc(100% - 32px);
}

.nota-precios {
  margin: 24px 0 0;
  font-size: 0.8rem;
  color: var(--humo);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────── PEDIDO ── */

.pantalla-titulo {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.pedido-resumen {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--humo);
}

.lineas {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * MOTIVO PROPIO 1: la cinta de estado de 3 px en el borde izquierdo de cada
 * línea, la misma que llevan las filas del panel y las mesas de la app.
 *
 * Aquí sí se usa `border-left` y no un pseudo-elemento, al revés que en el
 * panel: allí las filas eran de una tabla con bordes fundidos, donde el borde
 * izquierdo no se pinta. Esto es una lista normal y el borde funciona.
 *
 * Cada estado lleva color Y texto, nunca solo color: en un local con la
 * pantalla llena de huellas, el color se pierde antes que la palabra.
 */
.linea {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--loza);
  border: 1px solid var(--ceniza);
  border-left: 3px solid var(--ceniza);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.linea-lista {
  border-left-color: var(--huacatay);
}
.linea-curso {
  border-left-color: var(--brasa);
}
.linea-espera {
  border-left-color: var(--ambar);
}

/* Una línea anulada. La interfaz no las devuelve hoy, pero si algún día lo
   hace conviene que no se confunda con una que sigue viva. */
.linea-anulada {
  border-left-color: var(--rocoto);
  opacity: 0.65;
}

.linea-texto {
  min-width: 0;
  flex: 1;
}

.linea-plato {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.linea-cantidad {
  color: var(--humo);
  margin-right: 4px;
}

.linea-estado {
  margin: 3px 0 0;
  font-size: 0.82rem;
  color: var(--humo);
}

.linea-importe {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
}

/*
 * MOTIVO PROPIO 2: el corte de ticket.
 *
 * El zigzag del papel cortado de una impresora térmica, justo antes del total.
 * Altura 8 px y paso 12 px, tal como está fijado en marca/tokens.json.
 *
 * Ojo con el ángulo, que es la parte delicada: el centro del degradado cónico
 * está en el borde SUPERIOR del paso y los ángulos se cuentan en el sentido de
 * las agujas del reloj desde arriba, así que la cuña tiene que ir de 135° a
 * 225° para apuntar hacia ABAJO. Escrito como `from -45deg`, que es lo primero
 * que uno teclea, la cuña apunta hacia arriba, queda entera fuera del bloque y
 * el resultado no es un zigzag torcido sino NADA. Sin error en ningún sitio.
 */
.corte-ticket {
  height: 8px;
  margin: 18px 0 14px;
  background-color: var(--ceniza);
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 0 90deg, #0000 0) 0 0 / 12px 100%;
  mask: conic-gradient(from 135deg at 50% 0, #000 0 90deg, #0000 0) 0 0 / 12px 100%;
}

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

.total-etiqueta {
  font-weight: 600;
}

.total-valor {
  font-size: 1.5rem;
}

.total-nota {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--humo);
  text-align: right;
}

/* ──────────────────────────────────────────────────────────────── VACÍO ── */

.vacio {
  text-align: center;
  padding: 40px 16px;
}

.vacio-titulo {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.vacio-texto {
  margin: 0 0 8px;
  color: var(--humo);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────── ACCIONES ── */

/*
 * Barra fija abajo. Se usa con una mano y con el pulgar: la mitad superior de
 * un teléfono de seis pulgadas no se alcanza sin recolocar el aparato, y
 * recolocarlo con la otra mano ocupada por un tenedor no pasa.
 */
.acciones {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  background: var(--loza);
  border-top: 1px solid var(--ceniza);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.accion-form {
  margin: 0;
  flex: 1;
  display: flex;
}

.accion {
  flex: 1;
  /* `relative` para que la marca de pantalla activa, que va posicionada, se
     coloque respecto a este botón y no respecto a la página entera. */
  position: relative;
  /* 48 px de alto mínimo: es el objetivo táctil de Android que fija la marca en
     marca/tokens.json, y aquí se cumple de sobra porque son los botones que se
     pulsan con prisa. */
  min-height: var(--alto-acciones);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--humo);
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.accion-boton {
  width: 100%;
}

.accion-activa {
  color: var(--brasa-honda);
}

/* La marca de la pantalla actual: una barra de 3 px arriba, hermana de la
   cinta de estado. Sirve para saber dónde se está sin depender solo del color
   del texto, que con reflejo se pierde. */
.accion-activa::before {
  content: '';
  position: absolute;
  top: 0;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brasa);
}

.accion-icono {
  display: block;
}

/* ─────────────────────────────────────────────────────────────── PROBLEMA ── */

.cuerpo-problema {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding-bottom: 0;
}

.problema {
  text-align: center;
  padding: 32px 24px;
  max-width: 26rem;
}

.problema-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--brasa-suave);
  color: var(--brasa-honda);
  margin-bottom: 18px;
}

/* La bienvenida no es un fallo, así que no lleva el naranja de atención: la
   marca lo reserva para lo que de verdad exige mirar. Va en el gris de la
   casa, que dice «esto es informativo» sin levantar la voz. */
.problema-icono.icono-bienvenida {
  background: #eeece7;
  color: var(--pizarra);
}

.problema-titulo {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.problema-texto {
  margin: 0 0 8px;
  color: var(--carbon);
  line-height: 1.5;
}

.problema-sugerencia {
  margin: 12px 0 0;
  color: var(--humo);
  font-size: 0.92rem;
  line-height: 1.5;
}

.problema-id {
  margin: 20px 0 0;
  font-size: 0.78rem;
  color: var(--humo);
}

.problema-marca {
  margin: 28px 0 0;
  font-size: 0.75rem;
  color: var(--humo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ────────────────────────────────────────────────────── PANTALLA ANCHA ── */

/*
 * En una tableta o en un ordenador no se estira: se limita el ancho y se
 * centra. Una carta a todo lo ancho de una pantalla de 27 pulgadas obliga a
 * recorrer treinta centímetros con la vista para ir del nombre al precio.
 */
@media (min-width: 48rem) {
  body {
    font-size: 17px;
  }

  .acciones {
    /* En pantalla ancha la barra deja de ser fija y pasa a flotar centrada:
       en un ordenador no hay pulgar que alcance, y una barra pegada al fondo
       de una pantalla grande queda lejísimos del contenido. */
    left: 50%;
    transform: translateX(-50%);
    max-width: 46rem;
    border-radius: var(--radio-grande) var(--radio-grande) 0 0;
    border: 1px solid var(--ceniza);
    border-bottom: 0;
  }

  .accion {
    flex-direction: row;
    gap: 8px;
    font-size: 0.85rem;
  }
}