/* Estilos compartidos por el menú del invitado y el panel del personal.
   Sin frameworks. La única dependencia externa es la tipografía de la marca.

   DE DÓNDE SALE ESTA PALETA
   Es la paleta oficial de Nube Café Andante, entregada por el cliente:
   #fcffcb, #fff584, #26408b, #821d21, #79745d y #bcceff. Antes aquí había una
   aproximación sacada a ojo de la landing —cremas y olivos— que se parecía a
   la marca sin serlo. Ahora son los colores exactos.

   CÓMO SE REPARTIERON, Y POR QUÉ ASÍ
   La paleta no dice para qué sirve cada color, así que se midió cada pareja
   contra lo que exige WCAG antes de repartir nada. Lo que salió:

   - El azul (#26408b) da 8.94 sobre el fondo y 9.44 sobre tarjeta. Es el mejor
     color de texto de la paleta, así que es la tinta y también las acciones.
   - El vino (#821d21) da 9.12 y queda para lo que va mal, que es donde el rojo
     se entiende solo.
   - La arena (#79745d) se queda en 4.38, por debajo del 4.5 que exige el texto
     normal. Se usa oscurecida (#5A5644, 6.87) para texto, y tal cual para los
     bordes que tienen que transmitir dónde se puede tocar, donde basta con 3.
   - Los tres claros —#fff584, #fcffcb y #bcceff— dan entre 1.04 y 1.46 sobre
     crema. Son colores de FONDO. Usar cualquiera de ellos para texto sobre
     claro deja la pantalla ilegible, y por eso no aparecen como tinta en
     ningún sitio de esta hoja.

   LO LISTO ES AMARILLO, NO VERDE
   La marca no tiene verde. Antes la pantalla de «pedido listo» usaba uno
   traído de fuera, que funcionaba pero se notaba prestado. Ahora esa pantalla
   es el amarillo de Nube con el azul encima: 8.52 de contraste, y la palomita
   amarilla sobre el disco azul otros 8.52. El estado no depende del color de
   todos modos —hay una palomita y la palabra «¡Listo!»—, así que cambiar el
   verde por el amarillo no le quita información a nadie.

   LA TIPOGRAFÍA DE TÍTULOS ESTÁ A MEDIAS
   La marca usa Jayagiri para los rótulos, que es de pago y no está en ningún
   CDN. Mientras no haya licencia, el logotipo va como imagen —que es exacto— y
   el resto en Open Sauce One, que también es de la marca. */

/* Open Sauce One, la misma de la landing. 400 y 700, dos archivos de unos 23 KB.
   font-display: swap enseña el texto de inmediato con la tipografía del sistema
   y lo cambia al llegar la buena: nadie espera a una fuente para pedir un café. */
@font-face {
  font-family: 'Open Sauce One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one/files/open-sauce-one-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sauce One';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one/files/open-sauce-one-latin-700-normal.woff2) format('woff2');
}

:root {
  color-scheme: light;

  /* La paleta tal cual la entregó Nube. Estos nombres dicen qué color es;
     los de abajo dicen para qué sirve. */
  --nube-amarillo-palido: #FCFFCB;
  --nube-amarillo: #FFF584;
  --nube-azul: #26408B;
  --nube-vino: #821D21;
  --nube-arena: #79745D;
  --nube-cielo: #BCCEFF;

  /* El amarillo de marca, para los momentos de identidad. */
  --brand-yellow: #FCFFCB;
  --brand-yellow-strong: #FFF584;

  /* Superficies de trabajo. */
  --background: #FDF6EC;
  --surface: #FFFDF8;

  /* Texto. 8.94:1 y 6.87:1 sobre el fondo. */
  --ink: #26408B;
  --muted: #5A5644;

  /* Acciones. Blanco encima da 9.60:1; sobre tarjeta, 9.44:1. */
  --accent: #26408B;
  --accent-strong: #1B2E66;

  /* Dos bordes, porque no hacen el mismo trabajo: el de una tarjeta solo
     decora, el de un campo o un botón transmite dónde se puede tocar y por eso
     necesita 3:1. La arena de la marca da 4.38:1. */
  --border: #EADFC9;
  --border-strong: #79745D;

  /* Estados. Lo normal no lleva color: en una cola donde casi todo está en
     proceso, pintarlo todo de ámbar es ruido. Solo se colorea lo que pide algo. */
  --ok: #26408B;
  /* Lo listo: el amarillo de Nube con el azul encima. 11.44:1. */
  --ready-bg: #FFF584;
  --ready-ink: #1B2E66;
  --alert: #821D21;
  --alert-soft: #FBEFEF;
  /* El azul claro, para avisos que informan sin alarmar. */
  --info-soft: #BCCEFF;

  /* El color del café con leche de la foto del vaso. Solo se usa para dibujarlo. */
  --coffee: #9A7550;

  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(38, 64, 139, .05), 0 8px 24px -12px rgba(38, 64, 139, .18);
  --font: 'Open Sauce One', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Las nubes de la landing, insinuadas: dos manchas amarillas muy tenues detrás
   de todo. No tocan la legibilidad y atan las dos páginas sin repetir el dibujo. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(252, 255, 203, .75), transparent 70%),
    radial-gradient(50% 40% at 92% 18%, rgba(252, 255, 203, .55), transparent 70%);
}

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }

.site-header, .site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px max(24px, calc((100vw - 1100px) / 2));
}
.site-header { border-bottom: 1px solid var(--border); }
.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }

/* El logotipo de verdad, no una imitación con tipografía. La marca usa
   Jayagiri, que es de pago y no está en ningún CDN, así que escribir «Nube» en
   Open Sauce daba un parecido razonable y nada más. La imagen son 12 KB,
   recortada al rectángulo que de verdad tiene tinta y reducida a 483 px de
   ancho: tres veces lo que mide en pantalla, que es lo que necesitan las
   pantallas densas. */
.brand { display: inline-flex; text-decoration: none; }
.brand img { display: block; width: 148px; height: auto; }
.brand:hover img { opacity: .78; }

.stage-label, .back-link { font-size: 13px; color: var(--muted); }
.back-link { padding: 10px 0; text-underline-offset: 4px; }

.container { width: min(100% - 48px, 1100px); margin: 0 auto; padding: 48px 0; flex: 1; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.15; }
h1 { max-width: 850px; margin: 0 0 20px; font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; }
h2 { margin: 18px 0 14px; font-size: 25px; letter-spacing: -.01em; }
p { margin: 0 0 16px; }
.intro { max-width: 640px; color: var(--muted); font-size: 17px; }

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.entry-card, .placeholder-panel {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.entry-card { display: flex; flex-direction: column; text-decoration: none; }
.entry-card:hover { border-color: var(--accent); }
.entry-card .eyebrow { margin-bottom: 0; }
.entry-card p, .placeholder-panel p { max-width: 680px; color: var(--muted); }
.link-label { margin-top: auto; padding-top: 20px; color: var(--accent); font-size: 14px; font-weight: 700; }
.placeholder-panel { margin-top: 40px; }

.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 24px;
  background: var(--brand-yellow);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.divider { height: 1px; margin: 24px 0; background: var(--border); }
.supporting-text { font-size: 14px; }
.placeholder-panel p:last-child { margin-bottom: 0; }
.page-note { margin: 24px 0 0; color: var(--muted); font-size: 13px; }

/* En celulares, las tarjetas se apilan y los márgenes se reducen. */
@media (max-width: 600px) {
  .site-header, .site-footer { gap: 16px; padding: 18px 20px; }
  .stage-label { max-width: 140px; text-align: right; }
  .container { width: calc(100% - 40px); padding: 32px 0; }
  .card-grid { grid-template-columns: 1fr; gap: 16px; }
  .entry-card, .placeholder-panel { padding: 22px; }
  .site-footer { flex-wrap: wrap; }
}