/* ============================================================================
   TribuSoft — Sistema de diseño
   «Quicken modernizado»: registro contable denso, con objetos de verdad.
   ============================================================================

   SIETE REGLAS. No son gusto: son cómo trabaja un contador con 40 clientes y una
   fecha fija.

   1. LA PANTALLA NO SE MUEVE. Cero animaciones, cero paneles que entran deslizando,
      cero desplazamiento automático. El ojo memoriza dónde está cada cosa y la mano
      va sola. Todo movimiento que no aporte información rompe esa memoria.
   2. NADA DE MODALES. Se captura EN LÍNEA sobre la propia tabla. Un modal tapa el
      contexto justo cuando hace falta —el resto de los comprobantes del período— y
      obliga a cerrarlo para comprobar algo.
   3. FILAS RAYADAS. Alternar el fondo es lo que permite seguir una fila de 15
      columnas sin perder el renglón. Es la razón por la que los libros contables se
      rayan desde hace siglos.
   4. OBJETOS VISIBLES. Casillas, radios y botones con borde y relieve. Un control
      que no se ve como control no se usa. Nada de interruptores ni de iconos sueltos
      sin rótulo.
   5. CIFRAS TABULARES Y A LA DERECHA. Los montos se comparan en vertical: dígitos de
      ancho fijo, alineados por la coma. Un RNC o un NCF, en monoespaciado.
   6. DENSIDAD. Se ven 25 filas, no 8. El aire generoso es para páginas de mercadeo;
      aquí cada línea es trabajo.
   7. EL COLOR INFORMA, NO DECORA. Verde, ámbar y rojo significan estado y nada más.
      Si un elemento tiene color sin significar nada, se le quita.
   ========================================================================== */

:root {
  /* Superficies */
  --papel:        #FFFFFF;
  --raya:         #F4F6F9;   /* fila alterna */
  --fondo:        #E8ECF1;   /* fondo de la aplicación, más oscuro que el papel */
  --panel:        #FBFCFD;

  /* Tinta */
  --tinta:        #1B2733;
  --tinta-suave:  #5A6B7B;
  --tinta-tenue:  #8A99A8;

  /* Líneas — visibles a propósito: son las que «cuadran» la pantalla */
  --linea:        #C3CDD8;
  --linea-fuerte: #93A3B4;

  /* Marca */
  --azul:         #1B4F8F;
  --azul-claro:   #E3EDF9;
  --azul-borde:   #2E6BB8;

  /* Estados — significan, no decoran */
  --ok:           #1E7A3C;
  --ok-fondo:     #E4F3E8;
  --aviso:        #9A6800;
  --aviso-fondo:  #FDF3DC;
  --error:        #B3261E;
  --error-fondo:  #FBE6E4;

  /* Campos que faltan por completar. Un tono cálido y MUY claro: tiene que distinguirse
     de un campo lleno sin gritar, porque a veces son treinta en la misma pantalla. Es
     distinto del ámbar de aviso: aquí no hay nada mal, solo falta. */
  --pendiente-fondo:  #FFFCF2;
  --pendiente-campo:  #FFF8E3;
  --pendiente-borde:  #E0C071;

  /* Métrica */
  --alto-fila:    26px;
  --radio:        2px;       /* casi recto: «cuadradito» */
  --sans: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", monospace;
}

/* La pantalla no se mueve: se desactiva toda animación del navegador. */
*, *::before, *::after {
  box-sizing: border-box;
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 13px/1.35 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── ESTRUCTURA FIJA ─────────────────────────────────────────────────────────
   Rejilla de tres zonas que nunca cambia de sitio: barra superior, columna de
   clientes y área de trabajo. El contador siempre sabe dónde mirar.          */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 34px 30px 26px 1fr 24px;
  grid-template-areas:
    "menu     menu"
    "barra    barra"
    "contexto contexto"
    "lateral  trabajo"
    "estado   estado";
  height: 100vh;
}

/* ── BARRA DE MENÚ ─────────────────────────────────────────────────────────── */
.menu {
  grid-area: menu;
  display: flex; align-items: stretch;
  background: var(--azul);
  color: #fff;
  border-bottom: 1px solid #14395F;
}
/* El nombre del producto es UNA palabra: «TribuSoft», con las dos mitades en colores
   distintos. El `gap` de la caja flexible metía 6 px entre ambas y se leía «Tribu Soft»,
   que es otro nombre. La separación con el resto del menú la da el `padding`. */
.menu .marca { display: flex; align-items: center; gap: 0; padding: 0 14px 0 12px; font-weight: 700; letter-spacing: .2px; }
.menu .marca b { font-weight: 800; }
.menu .marca span { color: #8FC0F5; }
.menu button {
  background: none; border: 0; color: #E8F0FA; padding: 0 11px;
  font: inherit; cursor: pointer; border-right: 1px solid #2A5C9B;
}
.menu button:hover { background: #256099; }

/* LA PANTALLA ACTIVA TIENE QUE VERSE SIN LEER.
   Faltaba: `aria-selected="true"` no pintaba nada y las seis pantallas se veían
   idénticas en el menú, así que no había forma de saber en cuál se estaba. Se marca
   como una pestaña de verdad —fondo claro, texto oscuro, y la pestaña «se une» a la
   página por abajo—, que es la convención que todo el mundo ya sabe leer. */
.menu button[aria-selected="true"] {
  background: var(--papel); color: var(--azul); font-weight: 700;
  border-right-color: var(--papel);
  box-shadow: inset 0 -3px 0 var(--papel), inset 0 3px 0 #0E4C86;
}
/* El botón activo va `disabled` para que no se pueda pulsar a sí mismo; eso NO debe
   hacerlo parecer apagado. Un elemento gris se lee como «no disponible», que es lo
   contrario de «aquí estás». */
.menu button[aria-selected="true"]:disabled { opacity: 1; cursor: default; }
.menu button[aria-selected="true"]:hover { background: var(--papel); }

/* Separador entre grupos del menú. Las opciones no van en el orden en que se
   programaron sino por el trabajo que hacen: primero las tres que capturan y declaran
   —depósito, 606 y 607/608—, después las que cotejan, y al final los datos maestros. La
   raya hace visible ese agrupamiento sin necesidad de rótulos. */
/* Campo que el sistema propone rellenar: se señala, no se rellena solo. El dato lo pone
   quien tiene la factura delante; el sistema solo dice dónde va. */
/* Agrupador dentro de un panel: junta campos que se leen como un bloque —los impuestos
   de la factura, el reparto de un cobro— para que no se confundan con el resto. */
.ed-grupo { border: 1px solid var(--linea); padding: 6px; margin-bottom: 6px; }
.ed-grupo h4 { margin: 0 0 5px; font-size: 10px; text-transform: uppercase;
               letter-spacing: .5px; color: var(--tinta-suave); font-weight: 600; }

/* Marca general para un campo que hay que completar. Sirve en cualquier pantalla. */
input.pendiente, select.pendiente, textarea.pendiente {
  background: var(--pendiente-campo);
  border-color: var(--pendiente-borde);
}

input.propuesto, select.propuesto {
  border-color: var(--azul-borde) !important;
  background: var(--azul-claro) !important;
  box-shadow: inset 0 0 0 1px var(--azul-borde);
}

.menu .separa { width: 1px; margin: 7px 6px; background: #4C7FB8; align-self: stretch; }

.menu button.salir { margin-left: auto; color: #BBD6F2; font-size: 12px;
                     border-right: 0; }
.menu button.salir:hover { background: #256099; color: #fff; }
.menu button.salir + .der { margin-left: 0; padding-left: 4px; }

.menu .der { margin-left: auto; display: flex; align-items: center; padding-right: 10px; color: #BBD6F2; }

/* ── BARRA DE HERRAMIENTAS — botones con relieve, con rótulo ────────────────── */
.barra {
  grid-area: barra;
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px;
  background: linear-gradient(#FDFDFE, #EDF1F5);
  border-bottom: 1px solid var(--linea-fuerte);
}
.sep { width: 1px; height: 20px; background: var(--linea); margin: 0 5px; }

.btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 9px;
  background: linear-gradient(#FFFFFF, #EEF2F6);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--tinta); font: inherit; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.btn:hover  { background: linear-gradient(#FFFFFF, #E2E9F1); border-color: var(--azul-borde); }
.btn:active { background: #DCE5EF; box-shadow: 0 1px 2px rgba(0,0,0,.18) inset; }
.btn[disabled] { color: var(--tinta-tenue); background: #F1F3F5; cursor: default; border-color: var(--linea); }
.btn.primario { background: linear-gradient(#2E6BB8, #1B4F8F); border-color: #14395F; color: #fff; font-weight: 600; }
.btn.primario:hover { background: linear-gradient(#3A7CCB, #205C A5); }
.btn.peligro  { border-color: #C8817C; color: var(--error); }

/* ── COLUMNA DE CLIENTES ───────────────────────────────────────────────────── */
.lateral {
  grid-area: lateral;
  background: var(--panel);
  border-right: 1px solid var(--linea-fuerte);
  overflow: auto;
}
.lateral h3 {
  margin: 0; padding: 5px 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--tinta-suave); background: #EDF1F5;
  border-bottom: 1px solid var(--linea);
}
.cliente {
  display: grid; grid-template-columns: 12px 1fr auto;
  align-items: center; gap: 6px;
  padding: 3px 8px; cursor: pointer;
  border-bottom: 1px solid #EDF0F3;
}
.cliente:nth-child(even) { background: var(--raya); }
.cliente:hover  { background: var(--azul-claro); }
.cliente[aria-selected="true"] { background: var(--azul-claro); box-shadow: inset 3px 0 0 var(--azul); font-weight: 600; }
.cliente .rnc { font: 11px var(--mono); color: var(--tinta-tenue); }
.punto { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.punto.ok { background: var(--ok); } .punto.aviso { background: #E6A700; } .punto.error { background: var(--error); }

/* ── ÁREA DE TRABAJO ───────────────────────────────────────────────────────── */
.trabajo { grid-area: trabajo; overflow: auto; padding: 8px; }

/* Pestañas cuadradas, no píldoras */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--linea-fuerte); margin-bottom: -1px; }
.pestanas button {
  padding: 4px 14px; font: inherit; cursor: pointer;
  background: #E4EAF0; border: 1px solid var(--linea-fuerte); border-bottom: none;
  border-radius: var(--radio) var(--radio) 0 0; color: var(--tinta-suave);
}
.pestanas button[aria-selected="true"] { background: var(--papel); color: var(--tinta); font-weight: 600; padding-bottom: 5px; }

/* ── PANEL con título, el «objeto» contenedor ──────────────────────────────── */
.panel { background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); margin-bottom: 8px; }
.panel > header {
  padding: 4px 8px; background: linear-gradient(#F7F9FB, #E9EEF3);
  border-bottom: 1px solid var(--linea); font-weight: 600; font-size: 12px;
  display: flex; align-items: center; gap: 8px;
}
.panel > .cuerpo { padding: 8px; }

/* ── FORMULARIO: rótulo a la izquierda, campos alineados en columna ─────────
   Nada de rótulos flotantes ni campos de ancho variable: la vista baja en línea
   recta por el borde izquierdo de los campos.                                */
.form { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; align-items: center; }
.form label { text-align: right; color: var(--tinta-suave); }
.form .ancho { grid-column: 1 / -1; }

input[type=text], input[type=date], input[type=number], input[type=email], select, textarea {
  height: 22px; padding: 1px 5px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: #fff; color: var(--tinta); font: inherit;
  box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}
textarea { height: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-borde); outline-offset: -2px; border-color: var(--azul-borde); }
input[readonly] { background: #F2F4F6; color: var(--tinta-suave); }
input.num, .num { font: 12px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
input.cod, .cod { font: 12px var(--mono); text-transform: uppercase; }

fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: 6px 10px 8px; margin: 0 0 8px; }
legend { padding: 0 5px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-suave); }

/* Casillas y radios: visibles, con rótulo pulsable */
.opcion { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; cursor: pointer; }
.opcion input { width: 14px; height: 14px; accent-color: var(--azul); cursor: pointer; }

/* ── REGISTRO — la tabla, que es el corazón del programa ────────────────────
   Encabezado fijo, filas rayadas, columnas separadas por línea, y captura en
   línea sobre la propia fila.                                               */
.registro { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papel); }
.registro th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(#F2F5F8, #DFE6ED);
  border-bottom: 1px solid var(--linea-fuerte);
  border-right: 1px solid var(--linea);
  padding: 3px 6px; text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: var(--tinta-suave);
  white-space: nowrap; user-select: none;
}
.registro th.num, .registro td.num { text-align: right; }
.registro td {
  height: var(--alto-fila);
  padding: 2px 6px;
  border-bottom: 1px solid #E7EBEF;
  border-right: 1px solid #EEF1F4;
  white-space: nowrap;
}
.registro tbody tr:nth-child(even) { background: var(--raya); }
.registro tbody tr:hover { background: var(--azul-claro); }
.registro tbody tr[aria-selected="true"] { background: #D6E6F8; box-shadow: inset 2px 0 0 var(--azul); }

/* Estado de la fila: una banda de color a la izquierda, no la fila entera pintada */
tr.st-ok    td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.st-aviso td:first-child { box-shadow: inset 3px 0 0 #E6A700; }
tr.st-error td:first-child { box-shadow: inset 3px 0 0 var(--error); }

/* Fila de captura en línea — reemplaza al modal */
tr.captura { background: var(--aviso-fondo) !important; }
tr.captura td { padding: 1px 3px; border-bottom: 1px solid var(--linea-fuerte); }
tr.captura input, tr.captura select { width: 100%; height: 21px; }

/* Totales, pegados al pie de la tabla */
.registro tfoot td {
  position: sticky; bottom: 0;
  background: #E9EEF3; border-top: 1px solid var(--linea-fuerte);
  font-weight: 700;
}

/* Marca de estado dentro de celda */
.marca { display: inline-block; padding: 0 5px; border-radius: var(--radio); font-size: 11px; border: 1px solid; }
.marca.ok    { color: var(--ok);    background: var(--ok-fondo);    border-color: #A9CDB4; }
.marca.aviso { color: var(--aviso); background: var(--aviso-fondo); border-color: #DDC183; }
.marca.error { color: var(--error); background: var(--error-fondo); border-color: #DBA9A5; }

/* ── BARRA DE ESTADO ───────────────────────────────────────────────────────── */
.estado {
  grid-area: estado;
  display: flex; align-items: center; gap: 14px;
  padding: 0 10px; font-size: 11px; color: var(--tinta-suave);
  background: linear-gradient(#F4F6F9, #E4E9EF);
  border-top: 1px solid var(--linea-fuerte);
}
.estado .der { margin-left: auto; }
.estado b { color: var(--tinta); font-variant-numeric: tabular-nums; }