/* Vista de corte del modulo restaurante: bitacora de cancelaciones y cortesias
   mas corte Z con conciliacion de efectivo. Solo tokens de css/styles.css:
   ningun color, radio ni tamano literal. El resto del layout (cards, panel,
   tablas, form.inline, tbl-wrap) es el del sitio y no se redefine aqui. */

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

/* El resultado de la conciliacion. Cuadrada tranquiliza, sobrante llama la
   atencion y faltante alarma: son tres lecturas distintas, no tres colores. */
.crt-cuadrada { color: var(--ok); }
.crt-sobrante { color: var(--warn); }
.crt-faltante { color: var(--danger); }

/* El renglon del efectivo esperado cierra la suma de arriba; el de la
   diferencia es la cifra que el gerente mira primero. */
.crt tr.crt-esperado td { border-top: 1px solid var(--border); color: var(--text-dim); }
.crt tr.crt-dif td {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}

/* Tipo de renglon de la bitacora. La cancelacion es dinero que no se cobro y
   la cortesia es dinero que se regalo: se distinguen por etiqueta, no solo por
   color, para que se lean igual en una pantalla lavada por el sol. */
.crt .badge.crt-b-cancelacion { background: var(--surface-2); color: var(--danger); border: 1px solid var(--danger); }
.crt .badge.crt-b-cortesia { background: var(--surface-2); color: var(--gold); border: 1px solid var(--gold); }

/* El motivo es la columna que hace auditable la bitacora: es la unica que
   puede partirse en varias lineas en vez de forzar scroll horizontal. */
.crt td:nth-child(5) { white-space: normal; min-width: 14ch; }

/* Aviso de la vista: lo que dejo una accion fallida (un campo mal capturado,
   un cierre sin permiso). */
.crt-aviso {
  margin: 0 0 var(--sp-2); padding: var(--sp-2);
  border: 1px solid var(--danger); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text); font-size: var(--fs-1);
}

/* Nota al pie: donde vive el libro de cortes y que le falta para persistir. */
.crt-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);
}

/* Un campo de dinero que no se puede leer se marca en el campo mismo, no solo
   en el aviso de arriba: quien esta contando billetes mira el campo. */
.crt input.crt-malo { border-color: var(--danger); }

/* Por que el boton de cerrar esta apagado. Es una advertencia, no un error ya
   ocurrido: todavia no se cerro nada. */
.crt .crt-falta { color: var(--warn); }

/* El boton de cerrar corte deshabilitado no invita a apretarlo: es la senal de
   que el puesto que opera la pantalla no cierra caja, o de que una de las dos
   cifras de la captura todavia no se puede leer. */
.crt button.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

@media (max-width: 640px) {
  /* En telefono la tabla de cifras ya trae scroll horizontal (.tbl-wrap); lo
     que no cabe es el padding ancho de cada celda. */
  .crt td, .crt th { padding: var(--sp-1); }
  /* Los campos de captura ocupan el ancho completo: contar efectivo con el
     telefono en la mano no admite un campo de dos centimetros. */
  .crt form.inline label.f { flex: 1 1 100%; }
}