/* SanJo ERP — hoja unica. Sin build, sin dependencias.
 *
 * Criterio: documento institucional, no aplicacion de consumo. Una sola
 * escala tipografica, poco color, mucho blanco. El color se reserva para lo
 * que exige decision: un descuadre, un vencido, una firma unica.
 */

:root {
  --fondo:     #f2f1ee;
  --papel:     #ffffff;
  --lateral:   #1b2428;
  --lateral-2: #2a363b;

  --tinta:     #161d21;
  --medio:     #55626a;
  --tenue:     #8b959b;
  --linea:     #e3e1dc;
  --linea-2:   #f0efec;

  --mar:       #0f5a66;
  --mar-claro: #e9f2f3;
  --bien:      #15704a;
  --bien-suave:#e9f4ee;
  --mal:       #9c1f16;
  --mal-suave: #fbebe9;
  --ojo:       #7d5100;
  --ojo-suave: #fdf4e3;

  --radio:     6px;
  --sombra:    0 1px 2px rgba(22, 29, 33, .05);

  /* Una sola escala: 11 · 12 · 13 · 14 · 16 · 20 · 26 */
  --t-micro: 11px;  --t-menor: 12px;  --t-chico: 13px;  --t-base: 14px;
  --t-medio: 16px;  --t-grande: 20px; --t-cifra: 26px;
}

* { box-sizing: border-box; }

/* `hidden` gana SIEMPRE. Sin esto una regla de clase con `display` le gana al
   atributo, y el formulario de entrada se ve antes de estar conectado. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: var(--t-base)/1.5 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.011em; }

.num, td.num, .dato b, .cifra, input.dinero, .hoja-calculo .c-cantidad {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Entrada ─────────────────────────────────────────────────────────── */

.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

.tarjeta-entrada {
  width: 100%; max-width: 330px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 1px 3px rgba(22,29,33,.06), 0 12px 32px rgba(22,29,33,.06);
  padding: 30px 26px 26px;
  display: grid; gap: 14px;
}
.marca-entrada { margin-bottom: 8px; }

.logo { display: block; font-size: var(--t-grande); font-weight: 650; letter-spacing: -.02em; }
.logo-sub {
  display: block; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--tenue); margin-top: 2px;
}

/* ── Estructura ──────────────────────────────────────────────────────── */

#app { display: grid; grid-template-columns: 218px 1fr; min-height: 100dvh; }

.lateral {
  background: var(--lateral); color: #cfd6d9;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.lateral .marca {
  display: block; padding: 20px 20px 18px;
  text-decoration: none; color: #fff;
  border-bottom: 1px solid var(--lateral-2);
}
.lateral .logo-sub { color: #7d8a90; }

.lateral nav { padding: 10px 0; flex: 1; }
.grupo-nav { margin-bottom: 2px; }

.grupo-titulo {
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .1em;
  color: #6b787e; font-weight: 600;
  padding: 14px 20px 5px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
/* El centro de costo, discreto: informa sin competir con el nombre. */
.grupo-cc { font-size: 9.5px; letter-spacing: .04em; color: #4d585d; font-weight: 500; }

.lateral nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 20px; color: #cfd6d9; text-decoration: none;
  font-size: var(--t-chico); border-left: 2px solid transparent;
}
.lateral nav a:hover { background: var(--lateral-2); color: #fff; }
.lateral nav a.activo {
  background: var(--lateral-2); color: #fff;
  border-left-color: #4fa3ae; font-weight: 550;
}

.lateral-pie { border-top: 1px solid var(--lateral-2); padding: 14px 20px 18px; }
.quien { font-size: var(--t-chico); line-height: 1.4; }
.quien b { display: block; color: #fff; font-weight: 550; }
.quien span {
  font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .09em; color: #7d8a90;
}
.enlace {
  background: none; border: 0; padding: 0; margin-top: 8px;
  color: #7d8a90; cursor: pointer; font: inherit; font-size: var(--t-menor);
  text-decoration: underline; text-underline-offset: 2px;
}
.enlace:hover { color: #fff; }

/* ── Cabecera y vista ────────────────────────────────────────────────── */

.principal { min-width: 0; display: flex; flex-direction: column; }

.barra {
  background: var(--papel); border-bottom: 1px solid var(--linea);
  padding: 18px 30px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10;
}
.barra h1 { font-size: var(--t-grande); }
.barra .sub { color: var(--medio); font-size: var(--t-chico); }
.barra .acciones-barra { margin-left: auto; display: flex; gap: 8px; }

.vista { padding: 24px 30px 64px; max-width: 1180px; }

/* El titulo de cada pantalla vive ahora en la barra superior. */
.encabezado { display: none; }

/* ── Tarjetas ────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 20px 22px; margin-bottom: 18px;
}
.tarjeta > h3 {
  font-size: var(--t-menor); text-transform: uppercase; letter-spacing: .09em;
  color: var(--medio); font-weight: 600;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--linea-2);
  display: flex; align-items: center; gap: 8px;
}
.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── Cifras ──────────────────────────────────────────────────────────── */

.datos { display: grid; gap: 6px 28px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dato { padding: 4px 0; }
.dato span { display: block; color: var(--medio); font-size: var(--t-menor); margin-bottom: 2px; }
.dato b { display: block; font-size: var(--t-cifra); font-weight: 600; letter-spacing: -.025em; }
.dato.chico b { font-size: var(--t-medio); }
.dato b.rojo, .rojo { color: var(--mal); }

.semaforo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--t-base); }
.semaforo.bien { color: var(--bien); }
.semaforo.mal  { color: var(--mal); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ── Tablas ──────────────────────────────────────────────────────────── */

.envoltura { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }

table { border-collapse: collapse; width: 100%; font-size: var(--t-base); }
th {
  text-align: left; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tenue); font-weight: 600;
  padding: 0 10px 9px; white-space: nowrap;
}
td { padding: 9px 10px; border-top: 1px solid var(--linea-2); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child,  td:last-child  { padding-right: 0; }
.num { text-align: right; white-space: nowrap; }
.menor { color: var(--medio); font-size: var(--t-chico); }
tr.cancelado td { color: var(--tenue); text-decoration: line-through; }
tr.total td { border-top: 1.5px solid var(--tinta); background: var(--linea-2); }
tr.subtotal td { border-top: 1px solid var(--linea); background: #fafaf9; }
tr.atrasado td { background: var(--ojo-suave); }
tr.fila-motivo td { background: var(--ojo-suave); }

/* ── Formularios ─────────────────────────────────────────────────────── */

label { display: grid; gap: 5px; font-size: var(--t-menor); color: var(--medio); }
input, select, textarea, button { font: inherit; color: var(--tinta); }
input, select, textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--linea); border-radius: 5px;
  background: var(--papel); font-size: var(--t-base);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--mar); outline-offset: -1px; border-color: var(--mar);
}
input[type="number"], input.dinero { text-align: right; }
input[type="file"] { padding: 6px 8px; font-size: var(--t-chico); }
textarea { min-height: 60px; resize: vertical; }

.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.campos .ancho { grid-column: 1 / -1; }
fieldset { border: 0; padding: 0; margin: 0; }
.casilla { display: flex; align-items: center; gap: 8px; font-size: var(--t-base); color: var(--tinta); }
.casilla input { width: auto; }

button {
  background: var(--mar); color: #fff;
  border: 1px solid var(--mar); border-radius: 5px;
  padding: 8px 16px; font-weight: 550; font-size: var(--t-chico); cursor: pointer;
}
button:hover:not(:disabled) { background: #0c4b55; border-color: #0c4b55; }
button:disabled { opacity: .4; cursor: not-allowed; }
button.suave { background: var(--papel); color: var(--tinta); border-color: var(--linea); font-weight: 500; }
button.suave:hover:not(:disabled) { background: var(--linea-2); border-color: var(--tenue); }
button.chico { padding: 4px 10px; font-size: var(--t-menor); }
button.peligro { background: none; color: var(--mal); border-color: var(--linea); font-weight: 500; }
button.peligro:hover:not(:disabled) { background: var(--mal-suave); border-color: var(--mal); }
button.solo { background: var(--ojo); border-color: var(--ojo); }

.acciones { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }

a.boton {
  display: inline-block; background: var(--mar); color: #fff;
  border-radius: 5px; padding: 8px 16px;
  font-weight: 550; font-size: var(--t-chico); text-decoration: none;
}
a.boton:hover { background: #0c4b55; }
a.boton.suave { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); font-weight: 500; }

/* ── Avisos ──────────────────────────────────────────────────────────── */

.error, .bien-aviso, .ojo {
  border-radius: 5px; padding: 10px 12px;
  font-size: var(--t-chico); margin: 0;
  /* El texto viene de Postgres y ya trae saltos de linea con sentido. */
  white-space: pre-wrap; border: 1px solid;
}
.error      { background: var(--mal-suave);  color: var(--mal);  border-color: #f0d0cc; }
.bien-aviso { background: var(--bien-suave); color: var(--bien); border-color: #c8e3d4; }
.ojo        { background: var(--ojo-suave);  color: var(--ojo);  border-color: #efdcb6; }

.vacio { color: var(--tenue); font-size: var(--t-chico); padding: 6px 0; }
.cargando { color: var(--tenue); font-size: var(--t-chico); padding: 30px 0; }
.firma-unica, .sin-precio { color: var(--ojo); font-weight: 600; }

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: var(--t-micro); font-weight: 600; white-space: nowrap; letter-spacing: .02em;
}
.chip.espera { background: var(--ojo-suave);  color: var(--ojo); }
.chip.listo  { background: var(--bien-suave); color: var(--bien); }
.chip.curso  { background: var(--mar-claro);  color: var(--mar); }
.chip.gris   { background: var(--linea-2);    color: var(--medio); }

/* Un renglon cancelado sigue estando, pero no compite con los vivos. */
tr.tenue td { opacity: .45; }

.globo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.globo.aviso  { background: #b8842a; color: #fff; }
.globo.alarma { background: var(--mal); color: #fff; }
.tarjeta > h3 .globo.aviso { background: var(--ojo-suave); color: var(--ojo); }

.marcador {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 12px; border-radius: 5px;
  font-variant-numeric: tabular-nums; font-size: var(--t-chico);
  background: var(--mar-claro); color: var(--mar); font-weight: 550; flex-wrap: wrap;
}
.marcador.cuadra { background: var(--bien-suave); color: var(--bien); }
/* Una cifra que esta mal: diferencia distinta de cero, efectivo en negativo. */
.mal-num { color: var(--mal); font-weight: 600; }

.marcador.no-cuadra { background: var(--mal-suave); color: var(--mal); }

.renglon-cobro { display: grid; grid-template-columns: 1fr 150px auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.renglon-insumo { display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; align-items: end; margin-bottom: 10px; }

/* ── Captura tipo hoja de cálculo ────────────────────────────────────── */

.hoja-calculo td { padding: 3px 5px; vertical-align: middle; }
.hoja-calculo th { padding-bottom: 7px; }
.hoja-calculo input {
  border: 1px solid transparent; background: #f8f8f7;
  padding: 6px 8px; font-size: var(--t-chico);
}
.hoja-calculo input:hover { border-color: var(--linea); }
.hoja-calculo input:focus { background: var(--papel); }
.hoja-calculo input.mal-escrito { border-color: var(--mal); background: var(--mal-suave); }
.hoja-calculo tfoot td { border-top: 1.5px solid var(--tinta); }
.agregar-renglon { margin-top: 10px; }
#tabla-recibe input, #tabla-nom input { padding: 5px 7px; font-size: var(--t-chico); }
#tabla-recibe td, #tabla-nom td { vertical-align: middle; }

.lista-estado { display: grid; gap: 9px; margin-bottom: 4px; }
.lista-estado > div { padding-left: 24px; position: relative; font-size: var(--t-chico); line-height: 1.55; }
.lista-estado > div::before { position: absolute; left: 0; top: -1px; font-size: var(--t-base); }
.lista-estado .ok::before    { content: "✓"; color: var(--bien); font-weight: 700; }
.lista-estado .falta::before { content: "!"; color: var(--ojo);  font-weight: 700; padding-left: 5px; }
.lista-estado .falta { color: var(--tinta); }

/* ── Documento imprimible ────────────────────────────────────────────── */

.capa {
  position: fixed; inset: 0; background: rgba(22, 29, 33, .5);
  display: grid; place-items: start center;
  padding: 26px 14px; overflow-y: auto; z-index: 100;
}
.hoja {
  background: #fff; box-shadow: 0 12px 48px rgba(0,0,0,.3);
  padding: 34px 40px 28px; width: 100%; max-width: 900px;
  font-size: var(--t-menor); color: #000;
}
.hoja-embebida {
  box-shadow: var(--sombra); border: 1px solid var(--linea);
  border-radius: var(--radio); max-width: none; padding: 24px 26px 20px;
}
.hoja-barra { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-bottom: 16px; }
.hoja-embebida .hoja-barra { justify-content: space-between; }

.mb { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 4px; }
.mb-centro { flex: 1; text-align: center; }
.mb-razon  { font-size: var(--t-medio); font-weight: 700; letter-spacing: .03em; }
.mb-comercial { font-size: var(--t-chico); color: #333; font-style: italic; }
.mb-dato   { font-size: var(--t-micro); color: #333; }
.falta-dato { color: var(--ojo); font-style: italic; }
.mb-derecha { text-align: right; font-size: var(--t-menor); white-space: nowrap; }
.mb-etiqueta { color: #444; }

.ficha-doc { display: flex; justify-content: space-between; gap: 26px; padding: 14px 0 10px; }
.doc-titulo { font-size: var(--t-base); font-weight: 700; margin-bottom: 7px; letter-spacing: .04em; }
.doc-campo { font-size: var(--t-menor); line-height: 1.7; }
.doc-campo span { color: #555; display: inline-block; min-width: 92px; }
.doc-derecha { text-align: left; white-space: nowrap; }
.doc-subtitulo { font-size: var(--t-menor); font-weight: 700; letter-spacing: .05em; margin: 18px 0 6px; }
.bloque-doc { margin-top: 6px; }

table.documento { width: 100%; border-collapse: collapse; font-size: var(--t-menor); }
table.documento thead .fila-membrete td,
table.documento thead .fila-ficha td { border: 0; padding: 0; }
table.documento tr.titulos th {
  border-top: 1.4px solid #000; border-bottom: 1.4px solid #000;
  padding: 5px 7px; font-size: 10.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: #000; white-space: nowrap;
}
table.documento tbody td { border: 0; border-bottom: .5px solid #d5d5d5; padding: 4px 7px; vertical-align: top; }
table.documento tbody td.num, table.documento tr.titulos th.num { text-align: right; }
table.documento td.pendiente { font-weight: 700; }
table.documento tfoot .suma td {
  border-top: 1.4px solid #000; border-bottom: 1.4px solid #000;
  padding: 6px 7px; font-weight: 700; font-size: var(--t-menor);
}
table.documento tr.subtotal td { border-top: .8px solid #bbb; background: #fafaf9; }
table.documento tr.total td { border-top: 1.4px solid #000; background: #f2f1ee; }

.titulo-bloque td {
  padding-top: 15px !important; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: #666;
  border-bottom: 1px solid #000 !important;
}
td.sangria { padding-left: 22px !important; color: #444; }

.firmas { display: flex; justify-content: space-between; gap: 40px; margin-top: 52px; text-align: center; font-size: var(--t-micro); }
.firmas > div { flex: 1; }
.linea-firma { border-top: .8px solid #000; margin-bottom: 5px; }
.pie-hoja { color: #555; font-size: 10px; margin-top: 22px; }
.solo-imprimir { display: none; }

/* ── Impresión ───────────────────────────────────────────────────────── */

@page { size: letter portrait; margin: 14mm 12mm; }

@media print {
  /* Mientras se imprime, la hoja es hija directa de <body> (la mueve
     imprimirHoja). Se oculta todo lo demas. */
  body.imprimiendo { display: block !important; background: #fff; }
  body.imprimiendo > *:not(.hoja) { display: none !important; }
  body.imprimiendo > .hoja {
    margin: 0; padding: 0; max-width: none;
    box-shadow: none; border: 0; border-radius: 0; font-size: 10.5px;
  }
  .no-imprimir { display: none !important; }
  .solo-imprimir { display: inline; }

  /* El navegador vuelve a dibujar el thead arriba de cada pagina. Como el
     membrete vive dentro del thead, sale completo en la hoja 2, la 5 y la 40. */
  table.documento thead { display: table-header-group; }
  table.documento tfoot { display: table-footer-group; }
  table.documento tr, .firmas, .bloque-doc { page-break-inside: avoid; break-inside: avoid; }
  table.documento tbody td { border-bottom: .4px solid #999; }
  .chip { border: 1px solid #999; background: none !important; color: #000 !important; }
  a[href]::after { content: none !important; }
}

/* ── Pantallas angostas ──────────────────────────────────────────────── */

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .lateral nav { display: flex; flex-wrap: wrap; padding: 8px 12px; gap: 2px; }
  .grupo-nav { margin: 0; }
  .grupo-titulo { display: none; }
  .lateral nav a { border-left: 0; border-radius: 4px; padding: 6px 10px; }
  .lateral nav a.activo { border-left: 0; }
  .lateral-pie { display: flex; justify-content: space-between; align-items: center; }
  .barra, .vista { padding-left: 16px; padding-right: 16px; }
  .envoltura { margin: 0 -16px; padding: 0 16px; }
  .renglon-cobro, .renglon-insumo { grid-template-columns: 1fr 110px auto; }
}

/* ── Recibo de nómina ─────────────────────────────────────────────────────
 * Uno por persona y uno por hoja. La escala es propia y no hereda la de las
 * tarjetas: `.dato b` mide 26px, y nueve de esos se comían media página.
 * Aquí los rótulos son chicos y las cifras legibles, que es como se lee un
 * documento y no un tablero. */

.bloque-recibo { page-break-after: always; break-after: page; padding-bottom: 6px; }
.bloque-recibo:last-child { page-break-after: auto; break-after: auto; }

.recibo-membrete { text-align: center; border-bottom: 1.4px solid #000; padding-bottom: 10px; }
.recibo-razon    { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.recibo-comercial{ font-size: 11.5px; font-style: italic; color: #333; margin-top: 1px; }
.recibo-fiscal   { font-size: 10px; color: #444; margin-top: 3px; }

.recibo-encabezado { display: flex; justify-content: space-between; align-items: baseline;
                     margin: 12px 0 10px; }
.recibo-titulo   { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; }
.recibo-folio    { font-size: 10.5px; color: #333; }

.recibo-ficha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 18px;
                border-bottom: .6px solid #bbb; padding-bottom: 11px; margin-bottom: 4px; }
.recibo-ficha > div { min-width: 0; }
.recibo-ficha dt { font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase;
                   color: #666; margin-bottom: 1px; }
.recibo-ficha dd { font-size: 11px; margin: 0; font-weight: 600;
                   overflow-wrap: anywhere; }

.recibo-seccion { font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
                  text-transform: uppercase; color: #333; padding: 13px 0 4px; }

table.recibo-tabla { width: 100%; border-collapse: collapse; font-size: 11px; }
table.recibo-tabla th { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
                        color: #555; font-weight: 600; text-align: left;
                        border-bottom: .8px solid #999; padding: 4px 8px 4px 0; }
table.recibo-tabla td { padding: 5px 8px 5px 0; border-bottom: .4px solid #e2e2e2;
                        vertical-align: baseline; }
table.recibo-tabla th.num, table.recibo-tabla td.num { text-align: right; padding-right: 0; }
table.recibo-tabla tr.recibo-neto td { border-top: .8px solid #000; border-bottom: 0;
                                       font-weight: 700; padding-top: 6px; }

.recibo-total { display: flex; justify-content: space-between; align-items: baseline;
                border-top: 1.4px solid #000; border-bottom: 1.4px solid #000;
                margin-top: 14px; padding: 9px 0; }
.recibo-total span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.recibo-total b    { font-size: 16px; letter-spacing: -.01em; }

.recibo-nota    { font-size: 9.5px; color: #555; margin-top: 6px; }
.recibo-leyenda { font-size: 10px; line-height: 1.65; color: #222; margin-top: 16px; }

.bloque-recibo .firmas { margin-top: 40px; font-size: 9.5px; }
.bloque-recibo .firmas b { font-weight: 600; }

@media print {
  /* La hoja impresa baja a 10.5px de base; el recibo conserva su escala. */
  body.imprimiendo > .hoja .bloque-recibo { font-size: 11px; }
  .bloque-recibo table.recibo-tabla td { border-bottom: .4px solid #bbb; }
}