/* ════════════════════════════════════════════════════════════════
   Cocina — San Francisco.
   Pantalla de estación de trabajo: se lee de lejos y con las manos
   ocupadas.

   Dos decisiones mandan aquí:

   1. Los tres estados son tres objetos, no tres listas sueltas sobre
      un fondo. Cada uno es un panel con su cabecera y su filo de
      color — por hacer neutro, el horno ámbar, listo menta — porque
      lo primero que hace el cocinero al levantar la vista es buscar
      su columna, y sin bordes las tres se leen como una sola mancha.

   2. Dentro del panel los pedidos son renglones de una misma
      superficie, separados por una línea fina. No seis tarjetas
      flotando: eso multiplica bordes y sombras y vuelve a ensuciar
      lo que el panel acaba de ordenar.
   ════════════════════════════════════════════════════════════════ */

.tablero{min-height:100vh;display:flex;flex-direction:column;background:var(--fondo)}

/* ───────── Cabecera ───────── */
/* Blanca y con el filo de menta abajo, igual que la franja de recepción: son
   dos pantallas del mismo sistema, no dos programas. */
.cabeza{background:var(--papel);border-bottom:2px solid var(--menta);
  padding:14px 28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cabeza .donde{line-height:1.25}
.cabeza .donde strong{display:block;font-family:var(--serif);font-size:var(--t-xl);font-weight:400;color:var(--tinta)}
.cabeza .donde span{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.11em;color:var(--tinta-3)}

/* ───────── El pulso del día ─────────
   Ocupa el hueco que había entre el rótulo y el reloj, y lo paga con
   información: cuántos quedan para hoy, cuántos vencidos, cuál es el siguiente
   en salir. Separadores de un pelo en vez de puntos: menos ruido a la misma
   distancia de lectura. */
.pulso{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:var(--t-s);color:var(--tinta-2)}
.pulso b{font-family:var(--mono);font-size:var(--t-m);font-weight:600;color:var(--tinta);
  letter-spacing:-.02em;margin-right:3px}
.pulso .mal,.pulso .mal b{color:var(--alerta)}
.pulso i{width:1px;height:15px;background:var(--linea-firme)}
@media(max-width:880px){.pulso{display:none}}

/* ───────── Sin conexión ─────────
   Esta pantalla está en San Francisco y el servidor en otro lado: el canal se
   corta. Cuando pasa, la pantalla sigue mostrando pedidos —viejos— y se ve
   idéntica a cuando está al día. Por eso el aviso es una banda ancha arriba de
   todo y no un puntito: se lee desde el otro lado de la cocina, que es la
   distancia real a la que se trabaja.

   Y las columnas se apagan un poco. Que lo que está en pantalla se vea
   distinto es lo que impide que alguien lo lea como si fuera de ahora. */
.banda-conexion{display:none}
body.sin-conexion .banda-conexion{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--alerta);color:#fff;
  padding:11px 20px;font-size:var(--t-l);font-weight:600;
  letter-spacing:.01em;text-align:center}
body.sin-conexion .banda-conexion svg{width:19px;height:19px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body.sin-conexion .columnas{opacity:.55;filter:saturate(.4)}
body.sin-conexion .cabeza{border-bottom-color:var(--alerta)}

/* El reloj es referencia, no protagonista: si compite en tamaño con las horas
   de los pedidos, el ojo tiene que decidir cuál de los dos números leer. */
.cabeza .reloj{margin-left:auto;text-align:right;line-height:1.2}
.cabeza .reloj .h{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.02em;color:var(--tinta-2)}
.cabeza .reloj .f{font-size:var(--t-xs);color:var(--tinta-3)}
.cabeza .salir{background:none;border:0;color:var(--tinta-3);cursor:pointer;
  padding:7px;border-radius:var(--r-s);display:grid;place-items:center}
.cabeza .salir:hover{background:var(--papel-2);color:var(--tinta)}
.cabeza .salir svg{width:17px;height:17px}

/* ───────── Las tres columnas ───────── */
.columnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  padding:24px 28px 36px;align-items:start}
/* Una tablet en vertical no da para tres columnas, pero apilarlas de una en una
   deja renglones de un palmo de ancho. En medio, dos. */
@media(max-width:1060px){.columnas{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:680px){.columnas{grid-template-columns:1fr;padding:18px 16px 28px}}

.columna{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--sombra)}

/* El filo de color de la cabecera es lo que distingue una columna de otra de un
   vistazo. Va arriba y mide 3px: suficiente para encontrarlo desde el otro lado
   de la cocina, poco para no convertirse en un plano de color. */
.columna-alto{background:var(--papel-2);border-bottom:1px solid var(--linea);
  border-top:3px solid var(--tinta-3);
  padding:12px 16px;display:flex;align-items:baseline;gap:10px}
.columna-alto h2{margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-2)}
.columna-alto .n{margin-left:auto;font-family:var(--mono);font-size:var(--t-s);
  font-weight:500;color:var(--tinta-3)}

.columna.horno .columna-alto{border-top-color:var(--horno)}
.columna.horno .columna-alto h2,.columna.horno .columna-alto .n{color:var(--horno)}
.columna.terminado .columna-alto{border-top-color:var(--menta-honda)}
.columna.terminado .columna-alto h2,.columna.terminado .columna-alto .n{color:var(--menta-honda)}

/* ───────── El pedido ─────────
   Un renglón de la superficie del panel, no una tarjeta. La línea que lo separa
   del siguiente es toda la separación que hace falta. */
.ficha{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--linea);
  padding:14px 16px;cursor:pointer;font-family:inherit;color:inherit;transition:background .12s}
.ficha:first-child{border-top:0}
.ficha:hover{background:var(--menta-palida)}

/* La hora ordena la cola, pero lo primero que hay que leer es QUÉ se hornea.
   Con la hora a 23px y el nombre a 15,5px el orden estaba invertido: se leía el
   número y había que volver a bajar la vista para saber de qué pedido era. */
.ficha-alto{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ficha .hora{font-family:var(--mono);font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em;
  line-height:1.05;color:var(--tinta)}
.ficha .cuando{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3)}
/* La única señal de color del renglón: es para hoy, o ya se pasó. */
.ficha.urge .hora,.ficha.urge .cuando{color:var(--alerta)}

/* Cuánto falta, en pastilla, solo en lo de hoy. Es el dato que la cocina usa de
   verdad; el reloj de pared ya está en la cabecera para el resto. */
.falta{font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;background:var(--papel-2);color:var(--tinta-2);
  white-space:nowrap}
.falta.tarde{background:var(--alerta-palida);color:var(--alerta)}
.falta:empty{display:none}

.ficha h3{margin:3px 0 0;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.ficha .quien{margin:0;font-size:var(--t-s);color:var(--tinta-3)}

/* La nota subrayada y sin fondo. Con fondo, cinco pedidos seguidos convierten la
   columna en una pared ámbar y "sin fresas — alergia" se pierde entre "encargo
   repetido". */
.ficha .nota{margin:6px 0 0;font-size:var(--t-s);line-height:1.42;color:var(--horno);
  border-left:2px solid var(--horno);padding-left:9px}
.ficha .avisado{margin:6px 0 0;font-size:var(--t-xs);color:var(--menta-honda);font-weight:700;
  display:inline-flex;align-items:center;gap:5px}
.ficha .avisado svg{width:12px;height:12px}
/* El cabo suelto de la columna "Listo": hecho, pero el cliente no lo sabe. */
.ficha .sin-avisar{margin:6px 0 0;font-size:var(--t-xs);font-weight:700;color:var(--horno);
  display:inline-flex;align-items:center;gap:6px}
.ficha .sin-avisar::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ───────── Separador de día ─────────
   Una banda dentro del panel. Es lo que evita que el pedido de dentro de dos
   meses se vea igual que el de las tres de la tarde de hoy. */
.grupo{background:var(--papel-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:7px 16px;font-size:var(--t-xs);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-3)}
.grupo:first-child{border-top:0}
.grupo.urge{color:var(--alerta)}

/* El rótulo de "Más adelante" es el que lo vuelve a plegar: sin eso, abrirlo una
   vez deja la columna larga para siempre. */
.grupo-plegar{display:flex;align-items:baseline;gap:9px;width:100%;cursor:pointer;
  text-align:left;font:inherit;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  /* Hereda .grupo, que solo fija los filos de arriba y abajo: sin esto el
     navegador dibuja su borde por defecto en los costados del botón. */
  border-left:0;border-right:0}
.grupo-plegar span{font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--menta-honda)}
.grupo-plegar:hover span{text-decoration:underline}

/* Lo que falta a más de una semana: un renglón tenue al pie, no un pedido más. */
.mas{width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--linea);
  padding:12px 16px;cursor:pointer;font-size:var(--t-s);color:var(--tinta-3);font-family:inherit}
.mas:hover{background:var(--papel-2);color:var(--tinta-2)}

/* Un mínimo para que las tres se lean como tres calles y no como tres cajas de
   tamaños azarosos. Sin estirarlas al alto de la ventana: una columna vacía de
   un metro fue el problema del diseño anterior. */
.columna-cuerpo{min-height:104px}
.columna-vacia{padding:16px;font-size:var(--t-s);color:var(--tinta-3)}

/* ───────── Detalle ───────── */
.detalle{position:fixed;inset:0;background:rgba(46,42,38,.4);display:grid;place-items:center;
  padding:22px;z-index:60}
.detalle-caja{background:var(--papel);border-radius:var(--r-l);width:min(600px,100%);
  max-height:92vh;overflow-y:auto;box-shadow:var(--sombra-alta)}
.detalle-alto{background:var(--papel-2);border-bottom:1px solid var(--linea);border-top:3px solid var(--menta);
  padding:20px 26px;display:flex;align-items:flex-start;gap:14px}
.detalle-alto .hora{font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--tinta)}
.detalle-alto .dia{font-size:var(--t-s);color:var(--tinta-2);margin-top:6px}
.detalle-alto .num{margin-left:auto;font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-3)}
.detalle-cuerpo{padding:22px 26px}
.detalle-cuerpo h2{font-family:var(--serif);font-size:var(--t-2xl);margin:0 0 4px;font-weight:400;line-height:1.2}
.detalle-cuerpo .cliente{font-size:var(--t-s);color:var(--tinta-2);margin-bottom:18px}
/* En el detalle la nota sí lleva plano: es una sola, no compite con nada. */
.aviso-nota{background:var(--horno-palida);border-left:3px solid var(--horno);color:var(--horno);
  padding:13px 15px;border-radius:var(--r-s);font-size:var(--t-m);margin-bottom:18px;line-height:1.45}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;margin-bottom:20px}
@media(max-width:560px){.datos{grid-template-columns:1fr}}
.datos div{background:var(--papel);padding:11px 14px}
.datos .k{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:4px}
.datos .v{font-size:var(--t-m);font-weight:500}
.datos .v.mono{font-family:var(--mono);font-size:var(--t-s)}
.detalle-pie{display:flex;gap:10px;flex-wrap:wrap;padding:0 26px 24px}
.btn.grande{padding:14px 24px;font-size:var(--t-l);border-radius:var(--r-m);font-weight:600}
.btn.grande svg{width:18px;height:18px}

/* ───────── La hoja de papel ─────────
   La red de seguridad: sin internet la pantalla se apaga y la cocina se queda
   sin saber qué hornear. Impresa y pegada en la pared, no.

   No es la pantalla capturada en papel: es otro documento. Una sola columna,
   negro sobre blanco, y las tres casillas para tachar a mano — porque el día
   que se usa esta hoja el sistema no está para registrar nada. */
.hoja{display:none}

/* El ticket solo existe en el papel. */
.ticket{display:none}

/* ───────── La orden de compra en el detalle ─────────
   Dos columnas, rótulo y valor, sin adornos: es una ficha técnica y se consulta
   de reojo mientras se trabaja. */
.orden-cocina{margin:14px 0;border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.orden-cocina>div{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--linea);font-size:16px}
.orden-cocina>div:first-child{border-top:0}
.orden-cocina .k{min-width:120px;color:var(--tinta-3);text-transform:uppercase;
  font-size:13px;letter-spacing:.05em;padding-top:2px}
.orden-cocina .v{font-weight:600;flex:1}
.orden-cocina .texto .v{font-style:italic;font-weight:500}

/* ───────── La foto de referencia, en el detalle del pedido ─────────
   Grande: esta pantalla se mira de lejos y con las manos ocupadas. */
.referencias{margin:14px 0 4px}
.referencias .rot{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-2,#6A645C);margin-bottom:8px}
.referencias .tiras{display:flex;gap:10px;flex-wrap:wrap}
.referencias a{display:block;border:2px solid rgba(0,0,0,.12);border-radius:10px;overflow:hidden;line-height:0}
.referencias img{width:170px;height:170px;object-fit:cover;display:block}

@media print{
  .cabeza,.columnas,.detalle,.aviso,.acceso,.banda-conexion{display:none!important}
  /* .tablero es min-height:100vh en pantalla. Al imprimir sus hijos están
     ocultos pero el contenedor seguía reservando una pantalla entera, así que
     salía una primera hoja en blanco antes de la lista. */
  body,.tablero{background:#fff;display:block;min-height:0;height:auto}
  .hoja{display:block;font-family:var(--sans);color:#000;font-size:11pt}

  .hoja header{border-bottom:2px solid #000;padding-bottom:6pt;margin-bottom:10pt}
  .hoja h1{font-family:var(--serif);font-size:18pt;font-weight:400;margin:0}
  .hoja header p{margin:2pt 0 0;font-size:9pt;color:#444}

  /* El día no se separa de su primer pedido al cambiar de página: un
     encabezado suelto al pie de una hoja es un pedido leído en el día que no es. */
  .hoja h2{font-size:12pt;margin:12pt 0 5pt;padding-bottom:2pt;
    border-bottom:1px solid #000;break-after:avoid}

  .hoja article{border-bottom:1px dotted #999;padding:6pt 0;break-inside:avoid}
  .hoja .fila-alta{display:flex;gap:8pt;align-items:baseline}
  .hoja .hora{font-family:var(--mono);font-size:13pt;font-weight:700;min-width:44pt}
  .hoja .que{flex:1;font-size:12pt;font-weight:600}
  .hoja .num{font-family:var(--mono);font-size:9pt;color:#555}
  .hoja .fila-baja{display:flex;gap:14pt;font-size:9.5pt;color:#333;margin:2pt 0 0 52pt}
  .hoja .est{margin-left:auto;text-transform:uppercase;letter-spacing:.06em;font-size:8.5pt}

  /* La nota lleva alergias y dedicatorias. En pantalla va resaltada; en papel
     el recuadro hace el mismo trabajo, que es que no se lea por encima. */
  .hoja .nota{margin:4pt 0 0 52pt;padding:4pt 6pt;border:1px solid #000;
    font-size:10pt;font-weight:600}
  .hoja .casillas{display:flex;gap:16pt;margin:4pt 0 0 52pt;font-size:9pt;color:#333}
  .hoja .nada{margin-top:20pt;font-size:12pt}

  @page{margin:14mm}
}

/* ───────── Ticket de un pedido ─────────
   Se pega en la caja del producto. Media carta doblada o etiqueta: cabe en una
   tira angosta para que salga igual en una impresora de tickets. */
@media print{
  body.imprimiendo-ticket .hoja{display:none!important}
  body.imprimiendo-ticket .ticket{display:block;font-family:var(--sans);color:#000;
    font-size:11pt;width:72mm;margin:0}

  .ticket .t-alto{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:2px solid #000;padding-bottom:4pt}
  .ticket .t-negocio{font-family:var(--serif);font-size:12pt}
  .ticket .t-num{font-family:var(--mono);font-size:17pt;font-weight:700}

  .ticket h1{font-size:14pt;font-weight:700;margin:8pt 0 2pt;line-height:1.25}
  .ticket .t-cliente{margin:0 0 6pt;font-size:11.5pt}

  .ticket .t-nota{margin:0 0 6pt;padding:4pt 6pt;border:1px solid #000;
    font-size:10.5pt;font-weight:600}
  .ticket .t-nota.alergia{border:2.5px solid #000;font-weight:800;
    text-transform:uppercase;letter-spacing:.02em}

  .ticket .t-datos{width:100%;border-collapse:collapse;font-size:10pt}
  .ticket .t-datos td{padding:2.5pt 0;vertical-align:top;border-bottom:1px dotted #999}
  .ticket .t-datos td:first-child{color:#444;width:34%}

  .ticket .t-orden{width:100%;border-collapse:collapse;font-size:9.5pt;margin:0 0 6pt}
  .ticket .t-orden td{padding:2pt 0;vertical-align:top;border-bottom:1px dotted #bbb}
  .ticket .t-orden td:first-child{color:#444;width:34%;text-transform:uppercase;font-size:8pt;
    letter-spacing:.04em;padding-top:3.5pt}
  .ticket .t-orden td:last-child{font-weight:600}

  .ticket .t-firmas{display:flex;justify-content:space-between;gap:8pt;
    margin-top:12pt;font-size:8.5pt;color:#333}
  .ticket .t-pie{margin:6pt 0 0;font-size:8pt;color:#555}

  body.imprimiendo-ticket{background:#fff}
  body.imprimiendo-ticket .tablero{display:block;min-height:0}
}

/* ───────── Alergias en cocina ─────────
   Aquí es donde alguien echa las fresas. Una dedicatoria y una alergia venían
   con el mismo estilo; la segunda tiene que parar la mano. */
.ficha .nota.alergia,.detalle-caja .aviso-nota.alergia{
  border-color:var(--alerta);background:var(--alerta-palida);color:var(--alerta);
  border-left-width:4px;font-weight:700}
@media print{
  .hoja .nota.alergia{border:2.5px solid #000;font-weight:800;
    text-transform:uppercase;letter-spacing:.02em}
}

/* «+4 · ver todas»: el resto de las fotos de referencia. En cocina el botón es
   del tamaño de una miniatura y con texto — se toca con el dedo, no con ratón. */
.referencias .mas-fotos{flex:none;width:170px;height:170px;
  border:2px dashed var(--linea-firme);border-radius:10px;background:var(--papel-2);
  color:var(--tinta-2);cursor:pointer;font-family:var(--mono);font-size:28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.referencias .mas-fotos span{font-family:inherit;font-size:var(--t-s);letter-spacing:.02em}
.referencias .mas-fotos:hover{border-color:var(--menta-honda);color:var(--tinta)}

/* ───────── calendario del mes ─────────
   La misma rejilla que ve caja en la agenda. Aquí todo es un punto más grande:
   esto se mira de pie, a un brazo de distancia, no sentado frente a un monitor. */
.cal-alto{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px 0}
.cal-alto .modos{display:inline-flex;background:var(--papel-2);border:1px solid var(--linea-firme);
  border-radius:999px;padding:3px}
.cal-alto .modo{border:0;background:none;border-radius:999px;padding:7px 18px;cursor:pointer;
  font-family:inherit;font-size:var(--t-m);color:var(--tinta-2)}
.cal-alto .modo.activo{background:var(--papel);color:var(--tinta);font-weight:600;box-shadow:var(--sombra)}
.cal-alto .nav{display:inline-flex;gap:4px}
.cal-alto .nav button{border:1px solid var(--linea-firme);background:var(--papel);border-radius:var(--r-s);
  padding:6px 13px;cursor:pointer;font-family:inherit;font-size:var(--t-m);color:var(--tinta-2)}
.cal-alto .nav button:hover{border-color:var(--menta-honda);color:var(--tinta)}
.cal-alto .titulo-mes{font-family:var(--serif);font-size:var(--t-xl);color:var(--tinta)}
.cal-alto .leyenda{display:flex;gap:16px;margin-left:auto;font-size:var(--t-s);color:var(--tinta-2)}
/* De qué día se está mirando el tablero, y cómo salir de ahí. Sin esto, cocina
   toca un día del mes y no entiende por qué el tablero "perdió" los demás. */
.cal-alto .viendo-dia{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-m);
  color:var(--tinta-2);background:var(--menta-palida);border:1px solid var(--menta);
  border-radius:999px;padding:6px 8px 6px 16px}
.cal-alto .viendo-dia b{color:var(--tinta)}
.cal-alto .viendo-dia button{border:0;background:var(--papel);border-radius:999px;padding:5px 13px;
  cursor:pointer;font-family:inherit;font-size:var(--t-s);color:var(--tinta-2)}
.cal-alto .viendo-dia button:hover{color:var(--tinta)}

.cal{padding:14px 20px 20px}
.cal-mes{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);padding:14px}
.cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:8px}
.cal-dias span{font-size:var(--t-xs);letter-spacing:.11em;color:var(--tinta-3);padding-left:4px}
.cal-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-celda{min-height:118px;border:1px solid var(--linea);border-radius:var(--r-s);
  padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:6px;background:var(--papel)}
.cal-celda:hover{border-color:var(--menta-honda);background:var(--menta-palida)}
.cal-celda.otro-mes{background:var(--papel-2);opacity:.5}
.cal-celda.es-hoy{border-color:var(--arcilla);background:var(--papel-2)}
.cal-celda .alto{display:flex;align-items:baseline;justify-content:space-between}
.cal-celda .numero-dia{font-family:var(--serif);font-size:var(--t-xl)}
.cal-celda .cuenta{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3)}
.cal-celda .cuenta.lleno{color:var(--alerta);font-weight:700}
.cal-celda .puntos{display:flex;gap:5px}
.cal-celda .primero{font-size:var(--t-s);color:var(--tinta-2);line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cal-celda .primero b{color:var(--tinta-3)}

/* Mismos colores que las columnas del tablero: el punto de una casilla del mes
   y la columna donde vive esa ficha tienen que decir lo mismo. */
.punto-estado{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.punto-estado::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tinta-3)}
i.punto-estado{gap:0}
.punto-estado.cocina::before{background:var(--horno)}
.punto-estado.listo::before{background:var(--menta-honda)}
.punto-estado.entregado::before{background:var(--linea-firme)}

/* En tablet angosta siete columnas de 40 px no son un calendario: se achica la
   casilla y se suelta el renglón del primer pedido, que es lo primero que sobra. */
@media(max-width:900px){
  .cal-celda{min-height:78px}
  .cal-celda .primero{display:none}
  .cal-alto .leyenda{margin-left:0}
}