/* Hoja de estilo unica. Va en un archivo y no en la pagina porque la politica de
   contenido (server/config.py) prohibe los estilos en linea: una sola regla, sin
   excepciones, es mas facil de sostener que una lista de excepciones.

   Criterio de diseno: esto sustituye a una rejilla MSFlexGrid que la gente lleva
   veinte anos usando. Se prioriza densidad de informacion y contraste sobre
   decoracion; nadie pidio una aplicacion bonita, pidieron ver muchos registros. */

:root {
  --tinta: #16191d;
  --tinta-suave: #5a6472;
  --fondo: #f4f5f7;
  --papel: #ffffff;
  --linea: #d3d8e0;
  --acento: #14507d;
  --acento-suave: #e8f0f7;
  --malo: #a11726;
  --malo-suave: #fdeaec;
  --bueno: #1a6b3c;
  --bueno-suave: #e6f4ec;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

/* ── barra superior ───────────────────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .55rem 1rem;
  background: var(--acento); color: #fff;
}
.barra a { color: #fff; text-decoration: none; }
.barra a:hover { text-decoration: underline; }
.marca { font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.sesion { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.quien { opacity: .85; }

/* Insignia de vigencia de un espacio de prueba. Cambia de color solo cuando queda
   poco: un color de alarma permanente deja de leerse a los dos dias. */
.vigencia {
  font-size: .82rem; padding: .12rem .5rem; border-radius: 10px;
  background: rgba(255, 255, 255, .16); white-space: nowrap;
}
.vigencia.pocos { background: #b7791f; }
.vigencia.vencida { background: var(--malo); }

/* ── estructura ───────────────────────────────────────────────────────────── */
.cuerpo { display: flex; align-items: flex-start; min-height: calc(100vh - 46px); }

.lateral {
  flex: 0 0 15rem; padding: .75rem 0 2rem;
  background: var(--papel); border-right: 1px solid var(--linea);
  /* El menu se queda a la vista al recorrer un listado largo: en el legado la barra
     de botones siempre estaba ahi y perderla de vista desorienta. */
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
}
.lateral h2 {
  margin: 1rem .9rem .35rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-suave);
}
.lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral a {
  display: block; padding: .32rem .9rem; color: var(--tinta);
  text-decoration: none; font-size: .9rem; border-left: 3px solid transparent;
}
.lateral a:hover { background: var(--acento-suave); }
.lateral a.activo {
  background: var(--acento-suave); border-left-color: var(--acento); font-weight: 600;
}

.principal { flex: 1 1 auto; padding: 1.1rem 1.4rem 3rem; min-width: 0; }

h1 { margin: 0 0 .2rem; font-size: 1.45rem; }
h2 { margin: 1.6rem 0 .5rem; font-size: 1.05rem; }
.sub { margin: 0 0 1.2rem; color: var(--tinta-suave); }
.nota { color: var(--tinta-suave); font-size: .85rem; }
.vacio { color: var(--tinta-suave); font-style: italic; }
.acciones { margin: .2rem 0 1rem; font-size: .9rem; }
a { color: var(--acento); }

/* Campo trampa del formulario publico: invisible para una persona, a la vista de un
   programa que rellena formularios. Va AQUI y no con style= en la pagina porque la
   politica de contenido (server/config.py) prohibe los estilos en linea: uno en
   linea no se aplicaria y el campo saldria a la vista, con lo que el formulario
   pareceria roto y ademas dejaria de servir de trampa.
   `left` negativo en vez de display:none porque algunos rellenadores automaticos
   ignoran lo que esta oculto del todo, que es justo a quien queremos atrapar. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* ── avisos ───────────────────────────────────────────────────────────────── */
.aviso {
  margin: .6rem 0; padding: .55rem .8rem; border-radius: 3px;
  border-left: 4px solid var(--tinta-suave); background: var(--papel);
}
.aviso.error { border-left-color: var(--malo); background: var(--malo-suave); color: var(--malo); }
.aviso.ok { border-left-color: var(--bueno); background: var(--bueno-suave); color: var(--bueno); }
.aviso ul { margin: .35rem 0 0; padding-left: 1.2rem; }

/* ── formulario de ficha ──────────────────────────────────────────────────── */
.ficha {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 4px;
  padding: .9rem 1rem;
  /* Varias columnas: un catalogo con veinte campos en una sola columna obliga a
     recorrer toda la pantalla para capturar un registro. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .6rem 1.2rem;
}
.renglon { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.renglon label { font-size: .8rem; color: var(--tinta-suave); font-weight: 600; }
.renglon input[type="text"], .renglon input[type="password"],
.renglon input[type="date"], .renglon textarea {
  padding: .34rem .45rem; border: 1px solid var(--linea); border-radius: 3px;
  font: inherit; font-size: .9rem; background: #fff; min-width: 0;
}
.renglon input:focus, .renglon textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px;
}
.renglon input[readonly] { background: #eef0f3; color: var(--tinta-suave); }
/* El selector de archivo lo dibuja el navegador y no se puede maquetar del todo; lo
   que si se puede es que ocupe el ancho de su renglon como el resto de los campos,
   para que la ficha no quede descuadrada. */
.renglon input[type="file"] { font: inherit; font-size: .9rem; max-width: 100%; }
.renglon input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.renglon.malo input, .renglon.malo textarea { border-color: var(--malo); }
.renglon .malo { color: var(--malo); font-size: .8rem; }
.req { color: var(--malo); }

.botones { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; margin-top: .4rem; }
button {
  padding: .42rem 1.1rem; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--acento); color: #fff; font: inherit; font-weight: 600;
}
button:hover { background: #0f3f63; }
.boton-plano { font-size: .9rem; }

/* Botones que son en realidad acciones sobre una fila: se ven como enlaces porque
   ponerlos como botones dentro de la tabla la vuelve ilegible. */
button.enlace {
  background: none; color: var(--acento); padding: 0; font-weight: 400;
  text-decoration: underline; font-size: .85rem;
}
button.enlace:hover { background: none; color: #0f3f63; }
form.en-linea { display: inline; }

/* ── tabla ────────────────────────────────────────────────────────────────── */
/* El contenedor con desplazamiento propio es lo que evita que un catalogo de veinte
   columnas descuadre la pagina entera. */
.tabla-ancha { overflow-x: auto; background: var(--papel);
               border: 1px solid var(--linea); border-radius: 4px; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
thead th {
  position: sticky; top: 0; background: #eceff3; text-align: left;
  padding: .4rem .55rem; border-bottom: 2px solid var(--linea);
  white-space: nowrap; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--tinta-suave);
}
tbody td { padding: .32rem .55rem; border-bottom: 1px solid #eceef1; vertical-align: top; }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:hover { background: var(--acento-suave); }
td.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* Rejilla de captura: la celda es un campo, pero no debe parecer un formulario de
   veinte campos sueltos. Sin borde salvo al enfocarla, alineada a la derecha y del
   ancho justo del importe, la tabla se sigue leyendo como una tabla. */
input.celda {
  width: 6.5rem; text-align: right; font: inherit; font-size: .85rem;
  font-variant-numeric: tabular-nums;
  padding: .12rem .25rem; border: 1px solid transparent; border-radius: 2px;
  background: transparent;
}
input.celda:hover { border-color: var(--linea); background: #fff; }
input.celda:focus { outline: 2px solid var(--acento); outline-offset: -1px; background: #fff; }
/* Las dos columnas calculadas van en gris, como el fondo QBColor(14) del legado:
   se ven, se suman, y se entiende que no se capturan. */
td.calculada { background: #f0f1f4; color: var(--tinta-suave); }
tfoot th { background: #eceff3; border-top: 2px solid var(--linea); padding: .4rem .55rem;
           text-align: right; }
tfoot th[colspan] { text-align: left; }
td.fila-acciones { white-space: nowrap; }
/* Un registro dado de baja se ve distinto sin dejar de leerse: tacharlo del todo
   hace imposible comprobar que se dio de baja el correcto. */
tr.de-baja td { color: var(--tinta-suave); background: #f7f7f8; font-style: italic; }

/* ── acceso ───────────────────────────────────────────────────────────────── */
.acceso {
  max-width: 22rem; margin: 3rem auto; padding: 1.5rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 5px;
}
.acceso .ficha, .acceso form { display: block; }
.acceso .renglon { margin-bottom: .8rem; }
.acceso input { width: 100%; }
.acceso button { width: 100%; }

/* ── impresion de reserva ─────────────────────────────────────────────────── */
body.impreso { background: #fff; padding: 1.2rem; }
body.impreso table { font-size: .8rem; }
body.impreso th, body.impreso td { border: 1px solid #999; }

@media print {
  .barra, .lateral, .acciones, .ficha, .aviso { display: none; }
  body { background: #fff; }
  .principal { padding: 0; }
}

@media (max-width: 60rem) {
  .cuerpo { flex-direction: column; }
  .lateral { flex: 1 1 auto; width: 100%; position: static; max-height: none;
             border-right: 0; border-bottom: 1px solid var(--linea); }
}

/* Desglose del importe: una tabla estrecha, no la rejilla ancha de un catalogo.
   Va a la izquierda y con ancho propio porque es una lista de conceptos, y estirada
   a toda la pagina obliga a recorrer el ojo de un borde al otro para comparar. */
.desglose { max-width: 30rem; margin: .8rem 0; }
.desglose td { padding: .3rem .55rem; }
.lista-clientes { columns: 2; margin: .4rem 0 1rem 1.2rem; }

/* Papeletas de descuento (Notas de Credito Unicos). Una por hoja: el salto de pagina
   va en la propia seccion porque quien las imprime las recorta y las entrega una a
   una, y dos papeletas en la misma hoja obligan a cortar a mano por la mitad. */
.papeleta { border: 1px solid #333; padding: 1rem 1.2rem; margin: 0 0 1.2rem; }
.papeleta h1 { font-size: 1.1rem; margin: 0 0 .7rem; text-align: center;
               letter-spacing: .06em; text-transform: uppercase; }
.ficha-impresa { width: 100%; margin: 0 0 .7rem; border-collapse: collapse; }
.ficha-impresa th { text-align: left; width: 8.5rem; font-weight: 600;
                    background: #f3f3f5; }
.ficha-impresa th, .ficha-impresa td { border: 1px solid #999; padding: .25rem .45rem; }
.papeleta .desglose { margin-left: auto; }
.papeleta .desglose .total th, .papeleta .desglose .total td {
  font-weight: 700; border-top: 2px solid #333; }
.firma { margin: 2.2rem 0 0; font-size: .82rem; }
.linea-firma { border-top: 1px solid #333; width: 18rem; margin: 2.2rem 0 0; }

@media print {
  .papeleta { page-break-after: always; border: 0; padding: 0; }
  .papeleta:last-of-type { page-break-after: auto; }
}

/* Cuadro de amortizacion de una exclusiva: seis renglones por tres columnas. Es
   estrecho a proposito -no es una rejilla de datos, es un resumen- y la primera
   columna lleva la etiqueta, no un dato. */
.amortizacion { max-width: 34rem; }
.amortizacion th:first-child { text-align: left; width: 11rem; }
.amortizacion thead th { background: #f3f3f5; text-align: right; }
.amortizacion thead th:first-child { text-align: left; }

/* Renglon de agrupacion en el reporte por Canal: el promotor o la ruta de la que
   cuelgan los de abajo. Se distingue por peso y fondo, no por sangria, porque una
   sangria en una tabla ancha se pierde al llegar a la tercera columna. */
tr.nivel-grupo td { background: #eef0f4; font-weight: 600; }

/* Cuando algo cuadra, decirlo tambien. Una pantalla que solo habla cuando hay un
   problema deja a quien la mira sin saber si la comprobacion llego a correr. */
.ok-nota { color: #1d6b3a; background: #eaf6ee; border-left: 3px solid #1d6b3a;
           padding: .5rem .8rem; margin: .6rem 0; }