/* screens.css — PULSE
   Reglas de layout de pantalla que no son un componente reutilizable.
   Copiadas verbatim del mockup igual que components.css.
   Casi vacio a proposito: el mockup resuelve practicamente todo con componentes;
   lo especifico de cada vista se logra combinando clases existentes, no
   agregando CSS nuevo. Si una vista "necesita" una clase nueva, el cambio va
   PRIMERO al mockup (golden master) y luego se re-copia. */

/* contenedor de contenido de cualquier pantalla (el padding lateral de la app) */
.app { padding:0 20px 4px; }

/* titulo de pantalla (Ventas, Pauta, Respuesta, Ajustes…) */
.screen-title { font-size:25px; font-weight:800; letter-spacing:-.02em; color:var(--tx); }

/* ── S5-1 · Registrar venta ────────────────────────────────────────────────
   Dos reglas, cero clases nuevas: las dos existen en el mockup y aqui solo se
   extiende su alcance a un contexto que el contact sheet no podia dibujar. */

/* El mockup estila `.edit` solo dentro de `.f-input` (`.f-input .edit`), pero el
   bloque del comprobante con ticket adjunto necesita el mismo "Quitar" a la
   derecha, y ese vive dentro de `.upload`. Mismo declarado, otro contenedor. */
.upload .edit { margin-left:auto; color:var(--link); font-size:12.5px; font-weight:700; }

/* El control NATIVO de fecha-hora se pinta con el esquema de color del sistema:
   sin esto, en tema oscuro el icono del picker sale negro sobre fondo negro (y al
   reves en claro). El mockup no puede tener esta regla porque no tiene controles
   nativos: dibuja el campo de fecha como texto. */
html.t-dark input[type="datetime-local"] { color-scheme: dark; }
html.t-light input[type="datetime-local"] { color-scheme: light; }