/* ===========================================================================
   paneles.css — Los componentes base que se repiten en todo el ERP
   ===========================================================================
   Tarjetas, campos, botones, tablas, chips, interruptores y la carcasa de
   modal. Los colores vienen de `novagreen.css`: acá no hay un solo hex.

   Cada medida está copiada de los estilos inline del mockup de escritorio.
   Las referencias a la fuente van en el comentario de cada bloque.
   =========================================================================== */

body.con-scroll { overflow: auto; height: auto; min-height: 100vh; }

/* Formularios de una columna. El mockup los limita en 1000 px para que las
   líneas de texto no se estiren. */
.panel { max-width: 1000px; }

/* ── Enlaces ──────────────────────────────────────────────────────────────
 * Subrayado propio, no `text-decoration`: el filete de 1 px se puede teñir
 * al pasar el mouse y queda a la altura correcta. */
.enlace-nav {
  font-size: 13px; color: var(--verde); text-decoration: none;
  border-bottom: 1px solid var(--verde-claro); padding-bottom: 1px;
}
.enlace-nav:hover { border-bottom-color: var(--verde); }

/* ── Avisos ───────────────────────────────────────────────────────────────
 * Un aviso NO es un toast: se queda hasta que se resuelve lo que informa. */
.aviso { padding: 13px 16px; font-size: 14px; margin-bottom: 22px; border: 1px solid; line-height: 1.45; }
.aviso-ok    { background: var(--verde-suave); border-color: var(--verde-borde); color: var(--verde); }
.aviso-error { background: var(--rojo-fondo);  border-color: var(--rojo-borde);  color: var(--rojo-texto); }
.aviso-ambar { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-texto); }
/* El tercero de la familia: para lo que informa sin alertar. Faltaba, y una
   pantalla lo usaba sin que existiera —el aviso salía sin fondo ni borde. */
.aviso-verde { background: var(--verde-suave); border-color: var(--verde-borde); color: var(--verde); }


/* ── Tarjetas ─────────────────────────────────────────────────────────────
 * Mockup: `border: 1px solid #DBD4C4; background: #FFFDF8`, encabezado con
 * `padding: 16px 22px` y el rótulo en versalitas de 12 px. Se lee como
 * estructura y no compite con el contenido. */
.caja { background: var(--elevado); border: 1px solid var(--filete); }
.caja-cab {
  padding: 16px 22px;
  border-bottom: 1px solid var(--filete);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-suave);
}
/* La nota del encabezado es un dato, no un rótulo: sale de las versalitas. */
.caja-nota {
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--texto-tenue);
}
.caja-nota.mono { font-size: 12px; }
.caja-cuerpo { padding: 22px; }
.caja-sin-aire { padding: 0; }

/* Pie de tarjeta: la franja donde viven los botones de la tarjeta. */
.caja-pie {
  border-top: 1px solid var(--filete); background: var(--barra);
  padding: 16px 22px; display: flex; flex-direction: column; gap: 9px;
}
.caja-pie-nota { font-size: 12px; color: var(--texto-tenue); text-align: center; line-height: 1.45; }

.ayuda { font-size: 13px; color: var(--texto-tenue); line-height: 1.5; }
.ayuda code {
  font-family: var(--mono); font-size: 12px; background: var(--barra);
  border: 1px solid var(--filete); padding: 1px 5px;
}

/* ── Formularios ──────────────────────────────────────────────────────────
 * Mockup: rótulo ARRIBA del campo, 14 px 500, en caja normal — no en
 * versalitas. Las versalitas son de los rótulos de sección; usarlas también
 * acá borraba la diferencia entre «este bloque se llama X» y «escribí X».
 *
 * Campo: 44 px, fondo blanco puro y borde más marcado que el de la tarjeta,
 * para que se distinga de la caja que lo contiene. */
.campo-bloque { display: flex; flex-direction: column; gap: 7px; }
.campo-bloque label { font-size: 14px; font-weight: 500; color: var(--texto); }
.campo-ayuda-txt { font-size: 12px; color: var(--texto-tenue); line-height: 1.45; }
.opcional { font-size: 12px; font-weight: 400; color: var(--texto-apagado); margin-left: 6px; }

/* Entre campos, 14 px. Es la distancia del mockup en pantallas; los modales
   la suben a 20 px con `.modal-cuerpo`. */
.grilla-campos { display: flex; flex-direction: column; gap: 14px; }

.input {
  height: 44px; padding: 0 13px;
  font-family: var(--sans); font-size: 15px;
  background: var(--blanco); border: 1px solid var(--borde-campo);
  color: var(--texto); outline: 0; width: 100%;
}
.input:focus { border-color: var(--verde); }
.input::placeholder { color: var(--texto-vacio); }
.input.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.input:disabled { background: var(--apagado-fondo); border-color: var(--filete); color: var(--texto-apagado); cursor: not-allowed; }

/* El campo protagonista de una pantalla: precio por kilo, contado en caja. */
.input-grande {
  height: 62px; font-family: var(--mono); font-size: 34px; font-weight: 500;
  padding: 0 14px; border-bottom: 3px solid var(--verde);
  font-variant-numeric: tabular-nums;
}

/* ── Botones ──────────────────────────────────────────────────────────────
 * Dos alturas y ninguna más:
 *   44 px — botón de pantalla (mockup: `height: 44px; padding: 0 20px`)
 *   46 px — botón de modal    (mockup: `height: 46px; padding: 0 22px`)
 *
 * `inline-flex` y `text-decoration: none` están acá y no en cada pantalla:
 * varios de estos botones son `<a>`, y sin esto quedaban como bloque con el
 * subrayado del enlace. */
.btn-primario,
.btn-secundario {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px;
  font-family: var(--sans); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn-primario   { background: var(--verde); color: var(--sobre-verde); border: 0; font-size: 15px; font-weight: 600; }
.btn-secundario { background: var(--elevado); color: var(--texto); border: 1px solid var(--borde-campo); font-size: 14px; font-weight: 500; }
/* Un <a> hereda el color del enlace: hay que decirlo explícitamente. */
a.btn-primario   { color: var(--sobre-verde); }
a.btn-secundario { color: var(--texto); }
.btn-secundario:hover { border-color: var(--verde); }

/* El destructivo es un secundario con la tinta cambiada: el borde solo se
   tiñe al pasar el mouse, así no grita desde el reposo. */
.btn-peligro { color: var(--rojo); }
.btn-peligro:hover { border-color: var(--rojo); }

.btn-primario:disabled,
.btn-secundario:disabled,
.btn-primario.inactivo {
  background: var(--apagado-fondo); border: 1px solid var(--filete);
  color: var(--texto-apagado); cursor: not-allowed;
}

/* Altura de modal. */
.btn-modal { height: 46px; padding: 0 22px; font-size: 15px; }

/* ⚡ La tercera altura: 36 px, para las acciones que acompañan a otra cosa
 * —«Agregar ítem» al pie de una tabla, «Editar firma» bajo la vista previa.
 *
 * ── Y va ACÁ, no más arriba ──
 *
 * La tenía escrita antes de `.btn-primario` y `.btn-secundario`. Misma
 * especificidad —una clase cada una— así que ganaba la de abajo: el botón
 * seguía midiendo 44 px y el arreglo no hacía nada.
 *
 * Medido en producción antes y después. Las variantes de tamaño van juntas y
 * después de las de color, que es el orden en que se pisan. */
.btn-chico { height: 36px; padding: 0 12px; font-size: 13px; }
.btn-ancho { width: 100%; }

/* ── Tablas ───────────────────────────────────────────────────────────────
 * Mockup: encabezado sobre #F5F2EA con `padding: 12px 22px` y el rótulo en
 * 11 px `.14em` `#8A8778`; filas con `padding: 13px 22px` y divisor #EFE9DB.
 * Encabezado y fila comparten EXACTAMENTE el mismo reparto de columnas. */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left; padding: 12px 22px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-tenue);
  background: var(--tabla-cab); border-bottom: 1px solid var(--filete);
}
.tabla td { padding: 13px 22px; border-bottom: 1px solid var(--filete-linea); font-size: 14px; }
.tabla tbody tr:hover { background: var(--verde-fila); }
/* La fila elegida lleva filete izquierdo de 3 px, no un fondo más fuerte. */
.tabla tbody tr.fila-activa { background: var(--verde-fondo); box-shadow: none; }
.tabla tbody tr.fila-activa td:first-child { border-left: 3px solid var(--verde); }
/* Un registro inactivo atenúa TODA su fila: se ve de un golpe qué está apagado. */
.tabla tbody tr.fila-apagada td { color: var(--texto-apagado); background: var(--tabla-cab); }
/* Las columnas de importe van a la derecha, en mono tabular. */
.tabla .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabla tfoot td { background: var(--tabla-cab); border-bottom: 0; padding: 16px 22px; }
.tabla tfoot .num { font-family: var(--mono); font-size: 18px; font-weight: 600; }

.celda-tenue { color: var(--texto-tenue); }

/* ── Chips de estado ──────────────────────────────────────────────────────
 * Un solo molde, cuatro semánticas. Sin radio: el chip píldora que había
 * antes no está en el diseño. */
.chip-estado {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 9px; border: 1px solid;
  white-space: nowrap;
}
.chip-ok      { color: var(--verde);       background: var(--verde-suave); border-color: var(--verde-borde); }
.chip-espera  { color: var(--ambar-texto); background: var(--ambar-fondo); border-color: var(--ambar-borde); }
.chip-mal     { color: var(--rojo);        background: var(--rojo-fondo);  border-color: var(--rojo-borde); }
.chip-neutro  { color: var(--texto-apagado); background: transparent;      border-color: var(--filete); }

/* Valor nulo: un guión atenuado, nunca un chip vacío. */
.chip-vacio { color: var(--texto-apagado); }

/* ── Chips de filtro ──────────────────────────────────────────────────────
 * Mockup: `padding: 9px 16px`, 14 px, borde de 1 px. El activo NO se pinta
 * de verde lleno: fondo #E7EFE9, borde verde y peso 600. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; font-size: 14px; font-weight: 400;
  color: var(--texto-medio); text-decoration: none;
  background: var(--elevado); border: 1px solid var(--filete);
  cursor: pointer;
}
.chip:hover { border-color: var(--verde); }
.chip.activo { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); font-weight: 600; }
/* El conteo va dentro del mismo chip, en mono y atenuado. */
.chip-cuenta { font-family: var(--mono); font-size: 12px; color: var(--texto-apagado); font-variant-numeric: tabular-nums; }
.chip.activo .chip-cuenta { color: var(--verde); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-div { width: 1px; height: 24px; background: var(--filete); margin: 0 4px; }

/* ── Los tres chips de tecla ──────────────────────────────────────────────
 * Son tres y son distintos. Tenerlos con una sola clase era el origen de
 * varias diferencias contra la captura. */

/* 1 · Tecla asignada a un producto — el verde. */
.chip-tecla {
  display: inline-flex; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--verde); background: var(--verde-suave);
  border: 1px solid var(--verde-borde); padding: 3px 7px;
}
/* En la grilla del mostrador baja a 11 px / `3px 6px`. */
.chip-tecla-pos { font-size: 11px; padding: 3px 6px; }

/* 2 · Tecla informativa del mostrador — «0–9 ,» y «Enter». */
.chip-tecla-gris {
  display: inline-flex; font-family: var(--mono); font-size: 11px;
  color: var(--texto-suave); background: var(--barra);
  border: 1px solid var(--filete); padding: 3px 7px;
}
/* El del buscador es un punto más grande. */
.chip-tecla-gris.grande { font-size: 12px; padding: 3px 8px; }

/* 3 · Tecla de la leyenda inferior del mostrador — tinta plena y borde propio. */
.leyenda-chip {
  display: inline-flex; font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--texto); background: var(--lienzo);
  border: 1px solid var(--borde-leyenda); padding: 3px 7px;
}

/* ── Indicadores ──────────────────────────────────────────────────────────
 * Cuadrados a propósito. Los únicos redondos del sistema son el punto de
 * turno de 7 px y el de espera de 9 px, que están en `novagreen.css`. */
.ind      { width: 8px; height: 8px; flex: none; display: inline-block; }
.ind-6    { width: 6px; height: 6px; }
.ind-9    { width: 9px; height: 9px; }
.ind-10   { width: 10px; height: 10px; }
.ind-verde  { background: var(--verde); }
.ind-suave  { background: var(--verde-borde); }
.ind-ambar  { background: var(--ambar-punto); }
.ind-rojo   { background: var(--rojo); }
.ind-apagado{ background: var(--texto-apagado); }

/* ── Interruptor ──────────────────────────────────────────────────────────
 * Dos tamaños, los del mockup: 38×22 con perilla de 16 en la tabla de Menú,
 * 46×26 con perilla de 18 en Medios de pago e Integraciones.
 * Sin transición: en este sistema solo se mueven tres cosas y ninguna es un
 * interruptor. */
.interruptor { display: inline-flex; cursor: pointer; border: 0; background: none; padding: 0; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor span {
  width: 38px; height: 22px; flex: none; padding: 2px;
  background: var(--apagado-fondo); border: 1px solid var(--borde-campo);
  display: flex; justify-content: flex-start;
}
.interruptor span::after { content: ''; width: 16px; height: 16px; background: var(--texto-apagado); display: block; }
.interruptor input:checked + span { background: var(--verde); border-color: var(--verde); justify-content: flex-end; }
.interruptor input:checked + span::after { background: var(--sobre-verde); }

/* Variante sin checkbox: un <button> que envía su propio formulario. Se usa
   donde el cambio se guarda en el acto y no hay un «Guardar» que apretar. */
.interruptor.activo span { background: var(--verde); border-color: var(--verde); justify-content: flex-end; }
.interruptor.activo span::after { background: var(--sobre-verde); }

.interruptor-grande span { width: 46px; height: 26px; padding: 3px; }
.interruptor-grande span::after { width: 18px; height: 18px; }

.interruptor:disabled { cursor: not-allowed; }

/* ── Carcasa de modal ─────────────────────────────────────────────────────
 * Una sola, sin variantes. El velo es el único rgba legítimo del sistema.
 * Anchos: 520 (anular) · 620 (firma) · 660 (producto) · 680 (proveedor y
 * casilla) · 720 (compra) · 880 (redactar). */
.velo {
  position: fixed; inset: 0; z-index: 45; background: var(--velo);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 56px 24px 40px; overflow-y: auto;
}
.velo.secundario { padding-top: 72px; }

/* ⚡ CORREGIDO — el pie del modal quedaba FUERA de la ventana.
 *
 * `max-height: 100%` se resuelve contra el alto del velo, que es `inset: 0` —o
 * sea la ventana entera—, SIN descontar su propio `padding: 56px 24px 40px`.
 * Con un modal alto, el resultado era 96 px más largo que el espacio real: el
 * pie con «Probar conexión» y «Cancelar» caía debajo del borde inferior.
 *
 * Medido en producción con «Conectar una casilla» a 911 px de alto: el pie
 * terminaba en 1125. Los botones no se veían y había que scrollear el velo
 * entero para llegar a ellos.
 *
 * Afectaba a TODOS los modales del ERP, no solo a este: cualquiera que pasara
 * el alto de la ventana perdía sus botones.
 *
 * `min-height: 0` en el cuerpo es la otra mitad: un hijo de flex column no se
 * encoge por debajo de su contenido salvo que se le diga, así que sin esto el
 * `overflow-y: auto` de más abajo no llegaba a activarse nunca. */
.modal {
  background: var(--lienzo); border: 1px solid var(--borde-campo);
  animation: ng-in .18s ease-out;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 96px);
}
.velo.secundario .modal { max-height: calc(100vh - 112px); }

/* ⚡ Y ESTA es la mitad que faltaba: el `<form>` del medio.
 *
 * Los modales envuelven cuerpo y pie en un `<form>`, porque los campos y los
 * botones tienen que viajar juntos. Ese form es hijo de `.modal` —que sí es
 * flex column con alto limitado— pero por defecto NO es flex container, así que
 * no le propaga el límite a `.modal-cuerpo`.
 *
 * Resultado: `.modal-cuerpo` nunca activaba su `overflow-y: auto`, el form
 * crecía con su contenido y el pie se iba abajo del borde de la ventana, aunque
 * el `.modal` estuviera correctamente limitado a 815 px.
 *
 * Verificado en producción: con esta regla el pie pasa de terminar en 1125 a
 * terminar en 870, dentro de una ventana de 911, y el cuerpo scrollea. */
.modal > form {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.modal-520 { width: 520px; }
.modal-620 { width: 620px; }
.modal-660 { width: 660px; }
.modal-680 { width: 680px; }
.modal-720 { width: 720px; }
.modal-880 { width: 880px; }

.modal-cab {
  flex: none; padding: 20px 26px; border-bottom: 1px solid var(--filete);
  background: var(--barra);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.modal-titulo { font-size: 19px; font-weight: 600; }
.modal-subtitulo { margin-top: 6px; font-size: 13px; color: var(--texto-tenue); line-height: 1.45; }
.modal-cerrar {
  font-size: 16px; line-height: 1; color: var(--texto-tenue);
  background: none; border: 0; padding: 2px 4px; cursor: pointer; font-family: var(--sans);
}
.modal-cerrar:hover { color: var(--rojo); }

.modal-cuerpo {
  padding: 26px; display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto; min-height: 0;
}

/* Un primario deshabilitado SIEMPRE dice por qué al lado. Nunca hay un botón
   gris sin explicación: la nota va a la derecha del pie. */
.modal-pie {
  flex: none; border-top: 1px solid var(--filete); background: var(--barra);
  padding: 18px 26px; display: flex; align-items: center; gap: 12px;
}
.modal-motivo {
  margin-left: auto; font-size: 13px; color: var(--texto-tenue);
  text-align: right; max-width: 340px; line-height: 1.45;
}
.modal-motivo.alerta { color: var(--rojo); }

/* ── Los modales en el teléfono ────────────────────────────────────────────
 *
 * ⚡ TODOS los modales del ERP desbordaban en angosto.
 *
 * Los anchos son fijos —520, 620, 660, 680, 720, 880— y en una pantalla de
 * 390 px eso significa que el modal se sale, aparece scroll horizontal en la
 * página entera y el contenido queda cortado de los dos lados. Medido en el
 * redactor de correo, que es el más ancho, pero pasaba igual en nuevo producto,
 * anular venta, cargar compra y nuevo proveedor.
 *
 * No lo había visto porque nunca abrí un modal con la vista en 390.
 *
 * El ancho pasa a ser el de la pantalla menos el aire del velo, que también se
 * achica: 24 px de margen a cada lado en un teléfono es regalar una octava parte
 * del ancho útil. */
@media (max-width: 1023px) {
  .velo { padding: 16px 12px 12px; }
  .velo.secundario { padding-top: 24px; }

  .modal-520, .modal-620, .modal-660,
  .modal-680, .modal-720, .modal-880 {
    width: 100%; max-width: 100%;
  }
  .modal { max-height: calc(100vh - 28px); }

  /* El encabezado y el pie pierden aire lateral: el contenido lo necesita más. */
  .modal-cab { padding: 16px; }
  .modal-cuerpo { padding: 16px; gap: 16px; }
  .modal-pie { padding: 12px 16px; flex-wrap: wrap; }

  /* ⚡ Con los tres botones repartiéndose una sola fila, «Guardar borrador» y
   * «Descartar» se salían del borde en 390 px: los textos no entran en un tercio
   * de pantalla cada uno.
   *
   * El primario toma la fila entera y los secundarios comparten la siguiente. Es
   * además lo que muestran las capturas angostas del lector: la acción principal
   * a lo ancho y las otras debajo. */
  .modal-pie .btn-primario { flex: 1 0 100%; padding: 0 12px; }
  .modal-pie .btn-secundario { flex: 1 1 40%; min-width: 0; padding: 0 12px; }
  .modal-motivo {
    margin-left: 0; width: 100%; text-align: left; max-width: none; order: 9;
  }
}

/* ── Cabecera de lista ────────────────────────────────────────────────────
 * La línea que va arriba de una tabla: el conteo a la izquierda y el botón
 * primario a la derecha. En el mockup el primario NO vive en la barra
 * superior — vive acá, al lado de lo que va a modificar. */
.cabecera-lista {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 18px;
}
.cabecera-cuenta { font-size: 13px; color: var(--texto-tenue); }