/* ===========================================================================
   novagreen.css — Tokens del sistema visual + pantalla de mostrador
   ===========================================================================
   Los valores salen de `docs/01-sistema-de-diseno.md` y de los estilos inline
   de los tres mockups. Ninguno está estimado.

   Tres reglas que atraviesan el archivo:
     · `border-radius: 0` en todo. Excepción: los puntos de estado redondos
       de 7 px (barra superior) y 9 px (mostrador). Los cuadrados de 6, 8, 9
       y 10 px son cuadrados a propósito.
     · Cero sombras y cero gradientes. La jerarquía sale de tres fondos
       (#FAF8F2 lienzo → #FFFDF8 elevado → #F1ECE0 barras) y filetes de 1 px.
     · El verde es acento, no superficie: no pasa del ~8 % de la pantalla. La
       única superficie verde llena del mostrador es el botón Tarjeta.
   =========================================================================== */

:root {

  /* ── Verde · marca y acento ──────────────────────────────────────────── */
  --verde:            #1F5C3D;  /* total, botón primario, chip de tecla, foco */
  --verde-enlace:     #14402B;  /* hover de enlace */
  --verde-suave:      #E7EFE9;  /* fondo de chip de tecla y de chip elegido */
  --verde-borde:      #C3D6C9;  /* borde de chip verde, barra secundaria */
  --verde-fila:       #F4F7F3;  /* hover de fila y de celda */
  --verde-fondo:      #EFF4F0;  /* fila seleccionada, tarjeta de conclusión */
  --verde-claro:      #B9CDBF;  /* subrayado de enlace en reposo */
  --sobre-verde:      #F7FAF7;  /* texto sobre verde lleno */

  /* ── Lienzo y neutros ────────────────────────────────────────────────── */
  --lienzo:           #FAF8F2;  /* lienzo de la aplicación */
  --elevado:          #FFFDF8;  /* tarjetas, inputs, celdas, panel derecho */
  --blanco:           #FFFFFF;  /* SOLO interior de campos y cuerpo del editor */
  --barra:            #F1ECE0;  /* barras, sidebar, pies de modal, zona de cobro */
  --tabla-cab:        #F5F2EA;  /* encabezado de tabla, pie de resumen, nota */
  --nav-hover:        #E9E3D5;  /* hover de ítem de navegación */
  --apagado-fondo:    #E7E3D8;  /* fondo de control deshabilitado */
  --filete:           #DBD4C4;  /* borde estructural de 1 px */
  --filete-claro:     #E2DBCA;  /* borde suave */
  --filete-linea:     #EFE9DB;  /* divisor entre filas */
  --borde-leyenda:    #D3CBB8;  /* borde del chip de la leyenda del mostrador */
  --borde-campo:      #C9C1AE;  /* borde de campo y de botón secundario */

  --texto:            #1B1C18;  /* texto principal */
  --texto-medio:      #4B4A42;  /* texto secundario */
  --texto-suave:      #6B6A60;  /* rótulos */
  --texto-tenue:      #8A8778;  /* texto de apoyo */
  --texto-mudo:       #9A9686;  /* unidad del peso, fechas de vigencia */
  --texto-apagado:    #A8A494;  /* texto atenuado, valores nulos */
  --glifo:            #B4AF9E;  /* glifo ✕ en reposo */
  --texto-vacio:      #C7BFAC;  /* placeholder, cifra en cero */

  /* ── Alerta · ladrillo ───────────────────────────────────────────────── */
  --rojo:             #8E3B2E;  /* sin conexión, rechazo, vencido, anular */
  --rojo-sobre:       #FFF4EE;  /* texto sobre ladrillo lleno */
  --rojo-punto:       #FFC9B8;  /* punto pulsante sobre ladrillo */
  --rojo-fondo:       #F6E9E5;  /* fondo de panel de alerta */
  --rojo-borde:       #E2C6BE;  /* borde de panel de alerta */
  --rojo-texto:       #6E332A;  /* texto dentro de panel de alerta */

  /* ── Advertencia · ámbar ─────────────────────────────────────────────── */
  --ambar-fondo:      #F5EEDC;
  --ambar-borde:      #E3D5AC;
  --ambar-texto:      #6E5411;
  --ambar-punto:      #8A6A1F;
  /* Quinto tono, del mockup de Caja: el subrayado del enlace dentro del panel
     ámbar. Con `--ambar-borde` el enlace no se despega del fondo. */
  --ambar-subrayado:  #C9AF6A;

  /* ── Velo de los modales · el único rgba legítimo del sistema ────────── */
  --velo: rgba(19, 20, 16, .58);

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --sans: 'Schibsted Grotesk', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Alias en retirada ───────────────────────────────────────────────────
   * Estos nombres quedaron escritos en las pantallas y apuntaban a colores
   * que NO están en la paleta (#8A6A22, #2F6F9F, #E0CFC9, #A87A6E). Acá
   * quedan redirigidos al tono correcto para que nada se rompa mientras se
   * corrige cada pantalla; se borran cuando la última deje de usarlos. */
  --ambar:         var(--ambar-texto);
  --azul:          var(--verde);
  --rojo-suave:    var(--borde-campo);
  --rojo-tenue:    var(--rojo);
  --gris-inactivo: var(--apagado-fondo);
  --borde-boton:   var(--borde-campo);
  --verde-hover:   var(--verde-fila);
}

/* Esquina viva en todo. Los puntos redondos la reponen más abajo. */
* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; }

body {
  font-family: var(--sans);
  background: var(--lienzo);
  color: var(--texto);
}

/* ⚡ Los controles nativos no heredan `color` ni `font-family`: el navegador
 * les impone los suyos. Sin esta línea, cada `<button>` y cada `<input>` sin
 * clase salía en negro puro (#000000) —que NO está en la paleta— y en la
 * tipografía del sistema operativo. Se ve en los botones de producto del
 * mostrador y en los campos de Empresa e Integraciones. */
button, input, select, textarea {
  font-family: inherit;
  color: var(--texto);
}

/* El bloqueo de scroll es SOLO del mostrador: esa pantalla entra completa en
   1920×1080 y scrollear ahí haría perder de vista el total mientras se cobra.
   Las de gestión scrollean normal. */
body.mostrador { overflow: hidden; height: 100vh; }

/* ⚡ `hidden` tiene que ganar SIEMPRE.
 *
 * El atributo `hidden` se apoya en `[hidden] { display: none }` de la hoja del
 * navegador, que pierde contra CUALQUIER regla de autor con `display`. En el
 * mostrador, `.venta-vacia { display: flex }` pisaba a `hidden`, así que el
 * cartel «Sin venta en curso» seguía tapando la lista con la venta ya armada:
 * el cajero veía «1 ítem» en el encabezado, el total correcto abajo… y ninguna
 * línea. Medido en producción con la bandeja de 485 g ya cargada. */
[hidden] { display: none !important; }

/* Los números nunca cambian de ancho al cambiar de valor: el cajero mira el
   total miles de veces por turno y un número que salta es un defecto. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Las tres animaciones permitidas ──────────────────────────────────────
 * No hay más movimiento que este en todo el ERP. Los valores son los del
 * mockup, carácter por carácter. */
@keyframes ng-pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@keyframes ng-caret { 0%, 45% { opacity: 1 } 55%, 100% { opacity: 0 } }
@keyframes ng-in    { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ===========================================================================
   MOSTRADOR
   =========================================================================== */

.pos { display: grid; grid-template-rows: 64px 1fr 52px; height: 100vh; }
.pos-cuerpo { display: grid; grid-template-columns: 496px 1fr 560px; min-height: 0; }

/* ── Barra superior ───────────────────────────────────────────────────────── */

.barra-sup {
  background: var(--barra); border-bottom: 1px solid var(--filete);
  padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
}
.barra-grupo { display: flex; align-items: center; }
.barra-izq { gap: 22px; }
.barra-der { gap: 18px; }
.barra-div { width: 1px; height: 22px; background: var(--filete); }

.marca { font-size: 14px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--verde); }
.turno-txt { font-size: 13px; color: var(--texto-suave); letter-spacing: .01em; }
.turno-txt .mono { font-size: 12px; font-weight: 600; color: var(--texto); }

.estado { display: flex; align-items: center; gap: 8px; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.punto.mal { background: var(--rojo); }
.estado-txt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

/* Sin conexión va en bloque lleno, no en un puntito: no saber que estás
   offline es peor que estarlo. */
.chip-offline {
  background: var(--rojo); color: var(--rojo-sobre); padding: 7px 12px;
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.chip-offline .punto { background: var(--rojo-punto); animation: ng-pulse 1.4s infinite; }

.rotulo { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.rotulo-corto { letter-spacing: .14em; }

.enlace-reimprimir {
  font-size: 12px; color: var(--verde); text-decoration: none;
  border: 0; border-bottom: 1px solid var(--verde-claro);
  padding-bottom: 1px; background: none; cursor: pointer; font-family: var(--sans);
}
.enlace-reimprimir:hover { border-bottom-color: var(--verde); }

/* ── Columna izquierda: peso ──────────────────────────────────────────────── */

.col-peso {
  padding: 40px 36px; border-right: 1px solid var(--filete);
  display: flex; flex-direction: column; justify-content: space-between; min-height: 0;
}
.peso-cab { display: flex; align-items: center; justify-content: space-between; }

.peso-campo {
  min-height: 116px; margin-top: 18px; padding: 6px 2px 12px;
  border-bottom: 3px solid var(--verde);
  display: flex; align-items: baseline; gap: 14px; cursor: text;
}
.peso-campo.sin-foco { border-bottom-color: var(--filete); }
.peso-num {
  font-family: var(--mono); font-size: 92px; font-weight: 500; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texto);
}
.peso-num.vacio { color: var(--texto-vacio); }
.caret { width: 4px; height: 68px; background: var(--verde); animation: ng-caret 1.1s step-end infinite; }
.caret.oculto { visibility: hidden; animation: none; }
.peso-unidad { margin-left: auto; font-family: var(--mono); font-size: 26px; color: var(--texto-mudo); }
.peso-ayuda { font-size: 13px; color: var(--texto-tenue); line-height: 1.5; margin-top: 14px; }

.tarjeta-importe { margin-top: 40px; background: var(--barra); border: 1px solid var(--filete); padding: 22px 24px; }
.importe-fila { display: flex; align-items: baseline; justify-content: space-between; }
/* 38 px a propósito: el total grande vive SOLO en la columna derecha. */
.importe-num { font-family: var(--mono); font-size: 38px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.importe-precio {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filete);
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; color: var(--texto-suave);
}
.importe-precio .mono { font-size: 15px; color: var(--texto); }
.importe-vigente { font-size: 12px; color: var(--texto-mudo); margin-top: 6px; }

.peso-pie {
  border-top: 1px solid var(--filete-claro); padding-top: 18px;
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--texto-tenue);
}

/* ── Columna central: productos ───────────────────────────────────────────── */

.col-productos {
  padding: 28px 28px 24px; border-right: 1px solid var(--filete);
  display: flex; flex-direction: column; gap: 20px; min-height: 0;
}
.buscador {
  height: 52px; background: var(--elevado); border: 1px solid var(--filete-claro);
  padding: 0 14px; display: flex; align-items: center; gap: 12px; flex: none;
}
.buscador.con-foco { border-color: var(--verde); }
.buscador input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 16px; color: var(--texto);
}
.buscador input::placeholder { color: var(--texto-vacio); }
.buscador-nota { font-size: 12px; color: var(--texto-mudo); white-space: nowrap; }

.grupos { display: flex; flex-direction: column; gap: 18px; overflow: hidden; min-height: 0; }
.grupo-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.grupo-linea { flex: 1; height: 1px; background: var(--filete-claro); }
.grupo-conteo { font-family: var(--mono); font-size: 11px; color: var(--texto-apagado); }

.grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* Nombre y precio a la izquierda; el chip de tecla arriba a la derecha. */
.producto {
  min-height: 62px; padding: 11px 12px; background: var(--elevado);
  border: 1px solid var(--filete-claro); cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  text-align: left; font-family: var(--sans);
}
.producto:hover { border-color: var(--verde); background: var(--verde-fila); }
.producto-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.producto-nom { font-size: 14px; font-weight: 500; line-height: 1.2; text-wrap: pretty; }
.producto-precio { font-family: var(--mono); font-size: 12px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.sin-resultados { font-size: 14px; color: var(--texto-tenue); padding: 8px 2px; }

/* ── Columna derecha: venta y cobro ───────────────────────────────────────── */

.col-venta { background: var(--elevado); display: flex; flex-direction: column; min-height: 0; }
.venta-bloque { flex: 1; padding: 28px 32px 0; display: flex; flex-direction: column; min-height: 0; }
.venta-cab { display: flex; align-items: center; justify-content: space-between; flex: none; }
.venta-conteo { font-family: var(--mono); font-size: 12px; color: var(--texto-tenue); }

.venta-caja { margin-top: 16px; flex: 1; min-height: 0; overflow: hidden; }
.venta-vacia {
  height: 100%; border: 1px dashed var(--filete); padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
}
.venta-vacia-t { font-size: 15px; color: var(--texto-tenue); }
.venta-vacia-s { font-size: 13px; color: var(--texto-apagado); max-width: 260px; line-height: 1.5; }

.linea {
  display: grid; grid-template-columns: 1fr auto 28px; align-items: center;
  gap: 3px 14px; border-bottom: 1px solid var(--filete-linea);
}
.linea.sel { background: var(--verde-fondo); }
.linea-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linea-nom { font-weight: 500; line-height: 1.2; }
.linea-det { font-family: var(--mono); line-height: 1.2; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.linea-imp { font-family: var(--mono); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.linea-x {
  font-size: 15px; line-height: 1; color: var(--glifo); text-align: center;
  cursor: pointer; background: transparent; border: 0; font-family: var(--sans);
}
.linea-x:hover { color: var(--rojo); }

/* Tres tramos de densidad: la lista nunca hace scroll ni desborda. */
.venta-lista[data-densidad="1"] .linea { padding: 13px 8px 13px 10px; }
.venta-lista[data-densidad="1"] .linea-nom { font-size: 15px; }
.venta-lista[data-densidad="1"] .linea-det { font-size: 12px; }
.venta-lista[data-densidad="1"] .linea-imp { font-size: 19px; }
.venta-lista[data-densidad="2"] .linea { padding: 9px 8px 9px 10px; }
.venta-lista[data-densidad="2"] .linea-nom { font-size: 14px; }
.venta-lista[data-densidad="2"] .linea-det { font-size: 11px; }
.venta-lista[data-densidad="2"] .linea-imp { font-size: 17px; }
.venta-lista[data-densidad="3"] .linea { padding: 6px 8px 6px 10px; }
.venta-lista[data-densidad="3"] .linea-nom { font-size: 13px; }
.venta-lista[data-densidad="3"] .linea-det { font-size: 11px; }
.venta-lista[data-densidad="3"] .linea-imp { font-size: 15px; }

/* Nunca se oculta nada en silencio. */
.linea-resumen {
  background: var(--ambar-fondo); border-bottom: 1px solid var(--ambar-borde);
  color: var(--ambar-texto); font-size: 13px; padding: 9px 8px 9px 10px;
  display: flex; align-items: center; justify-content: space-between;
}

.total-bloque { flex: none; border-top: 1px solid var(--filete); padding-top: 18px; }
.subtotal-fila { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--texto-suave); }
.subtotal-fila .mono { font-size: 15px; color: var(--texto); }
.total-rotulo { margin-top: 12px; display: block; }
.total-caja { display: flex; justify-content: flex-end; margin-top: 2px; }
.total-num {
  font-family: var(--mono); font-weight: 600; line-height: .92; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--verde);
}
.total-num.vacio { color: var(--texto-vacio); }
/* Se achica según el largo del string para que nunca se corte. */
.total-num[data-largo="1"] { font-size: 92px; }
.total-num[data-largo="2"] { font-size: 78px; }
.total-num[data-largo="3"] { font-size: 64px; }

/* ── Zona de cobro ────────────────────────────────────────────────────────── */

.cobro {
  flex: none; min-height: 208px; border-top: 1px solid var(--filete);
  background: var(--barra); padding: 22px 32px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.cobro-estado { animation: ng-in .18s ease-out; }

.medios-pago { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; }
.medio {
  height: 88px; padding: 0 16px; border: 1px solid var(--borde-campo); background: var(--elevado);
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  cursor: pointer; font-family: var(--sans); text-align: left;
}
.medio:hover:not(:disabled) { border-color: var(--verde); }
.medio-tecla { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--texto-suave); }
.medio-nom { font-size: 18px; font-weight: 600; }
/* La única superficie verde llena de la pantalla. */
.medio.primario { padding: 0 18px; background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.medio.primario .medio-tecla { color: inherit; opacity: .8; }
.medio.primario .medio-nom { font-size: 21px; letter-spacing: -.01em; }
.medio:disabled { background: var(--apagado-fondo); border-color: var(--filete); color: var(--texto-apagado); cursor: not-allowed; }
.medio:disabled .medio-tecla { color: var(--texto-apagado); opacity: 1; }
.cobro-nota { font-size: 13px; line-height: 1.45; color: var(--texto-tenue); margin-top: 14px; }
.cobro-nota.alerta { color: var(--rojo); }

.cobro-cab { display: flex; align-items: center; gap: 12px; }
.punto-grande { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); animation: ng-pulse 1.1s infinite; }
.cuadro { width: 9px; height: 9px; background: var(--rojo); }
.cuadro.ok { background: var(--verde); }
.cobro-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.cobro-rotulo.verde { color: var(--verde); }
.cobro-rotulo.rojo { color: var(--rojo); }

/* Esperando: el texto y el total comparten fila, alineados por la base. */
.espera-fila { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.espera-txt { font-size: 15px; color: var(--texto-medio); max-width: 300px; line-height: 1.45; }
.espera-total { font-family: var(--mono); font-size: 34px; font-weight: 500; color: var(--verde); font-variant-numeric: tabular-nums; }
.btn-esc {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--borde-campo); background: var(--elevado); padding: 11px 16px;
  font-family: var(--sans); font-size: 14px; cursor: pointer;
}
.btn-esc:hover { border-color: var(--rojo); }

.rechazo-motivo { font-size: 15px; color: var(--texto-medio); margin-top: 12px; line-height: 1.45; }
.rechazo-panel {
  background: var(--rojo-fondo); border: 1px solid var(--rojo-borde); color: var(--rojo-texto);
  padding: 14px 16px; margin-top: 16px; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rechazo-panel .reintentos { font-size: 13px; }
.rechazo-panel b { font-family: var(--mono); font-weight: 600; }

.efectivo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: end; }
.efectivo-num {
  margin-top: 8px; padding-bottom: 6px; border-bottom: 3px solid var(--verde);
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 46px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.efectivo-num.vuelto { font-weight: 600; border-bottom-color: var(--filete); }
.efectivo-num.vuelto.ok { color: var(--verde); }
.efectivo-num.vuelto.falta { color: var(--rojo); }
.efectivo-num.vacio { color: var(--texto-vacio); }
.caret-chico { width: 3px; height: 34px; background: var(--verde); animation: ng-caret 1.1s step-end infinite; }
.efectivo-pie { margin-top: 16px; font-size: 13px; color: var(--texto-suave); }
.efectivo-pie b { font-family: var(--mono); font-weight: 600; color: var(--texto); }

.cobrada-cuerpo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cobrada-resumen { font-size: 16px; color: var(--texto); margin-top: 12px; }
.cobrada-factura { font-size: 13px; color: var(--texto-suave); margin-top: 8px; }
.cobrada-factura.cola { color: var(--ambar-texto); }
.cobrada-total { font-family: var(--mono); font-size: 42px; font-weight: 600; line-height: 1; color: var(--verde); font-variant-numeric: tabular-nums; }
/* Si la venta no llegó a la base, el aviso vive acá y se queda. */
.cobrada-aviso { color: var(--rojo); }
.cobrada-pie { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filete); font-size: 13px; color: var(--texto-suave); }

/* El aviso de peso alto: escrito al lado del peso, no en un diálogo. */
.peso-aviso { display: block; margin-top: 6px; color: var(--rojo); }

/* La tecla dentro del botón de cancelar el cobro. */
.btn-esc-tecla { font-size: 12px; color: var(--texto-suave); }

/* El número de la última venta, en la barra superior. */
.ultima-nro { font-weight: 500; color: var(--texto); }
#ultima-venta .enlace-reimprimir { margin-left: 10px; }

/* ── Barra inferior ───────────────────────────────────────────────────────── */

.barra-inf {
  background: var(--barra); border-top: 1px solid var(--filete);
  padding: 0 28px; display: flex; align-items: center; gap: 26px; overflow: hidden;
  font-size: 12px; color: var(--texto-suave);
}
.leyenda { display: flex; align-items: center; gap: 9px; white-space: nowrap; }


/* ═══ Factura A en el mostrador ═══════════════════════════════════════════
 * Va arriba de los medios de pago porque ocurre ANTES: primero se identifica
 * al cliente, después se cobra.
 */

.pedir-cuit {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 0 14px; margin-bottom: 12px;
  background: var(--elevado); border: 1px solid var(--filete);
  font-family: var(--sans); font-size: 14px; color: var(--texto-medio);
  cursor: pointer; text-align: left;
}
.pedir-cuit:hover { border-color: var(--verde); color: var(--verde); }

/* Mientras se tipea: el campo en mono grande, como el peso de la bandeja. Es
   el mismo gesto —números al teclado— y conviene que se vea igual. */
.cuit-pedido {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--verde-fondo); border: 1px solid var(--verde);
}
.cuit-rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verde);
}
.cuit-campo {
  margin-top: 6px; font-size: 30px; font-weight: 600; line-height: 1;
  color: var(--texto); letter-spacing: .04em;
}
.cuit-vacio { color: var(--texto-apagado); }
.cuit-ayuda { margin-top: 8px; font-size: 12px; color: var(--verde); }

/* Con el cliente identificado. Ámbar cuando NO le corresponde la A: el cajero
   tiene que verlo antes de cobrar, no después. */
.cuit-listo {
  padding: 12px 16px; margin-bottom: 12px;
  background: var(--verde-suave); border: 1px solid var(--verde-borde);
}
.cuit-listo.ojo { background: var(--ambar-fondo); border-color: var(--ambar-borde); }
.cuit-nombre { font-size: 15px; font-weight: 600; color: var(--verde); }
.cuit-listo.ojo .cuit-nombre { color: var(--ambar-texto); }
.cuit-datos { margin-top: 3px; font-size: 12px; color: var(--verde); }
.cuit-listo.ojo .cuit-datos { color: var(--ambar-texto); }
.cuit-aviso { margin-top: 6px; font-size: 12px; color: var(--ambar-texto); line-height: 1.45; }