/* Vista resumen del dia del modulo restaurante. Solo tokens de css/styles.css:
   ningun color, radio ni tamano literal. El resto del layout (cards, panel,
   tablas, chart-box, two-col) es el del sitio y no se redefine aqui. */

/* Columnas de cifras: alineadas a la derecha y con digitos del mismo ancho,
   para que dos importes se comparen de un vistazo sin leerlos. */
.res th.num, .res td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Posicion del top diez: es una etiqueta, no una cifra que se compare. */
.res td.res-pos { color: var(--text-dim); width: 1%; }

/* Subtitulo dentro de un panel partido en dos (propinas por mesero y por
   metodo), un escalon por debajo del h2 del panel. */
.res-sub {
  font-size: var(--fs-1); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--sp-1);
}

/* Nota al pie del resumen: dice de donde sale el turno y que no esta aqui
   (conciliacion de efectivo y bitacora de cancelaciones). */
.res-nota {
  margin-top: var(--sp-2); padding: var(--sp-2);
  border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-dim); font-size: var(--fs-0);
}

/* La tabla que acompana a un chart respira debajo de el. */
.res .chart-box + .tbl-wrap { margin-top: var(--sp-2); }

@media (max-width: 640px) {
  /* En telefono las tablas de cifras se leen con scroll horizontal (.tbl-wrap
     ya lo da); lo que no cabe es el nombre largo del platillo partido en dos. */
  .res td, .res th { padding: var(--sp-1); }
}