/* ===========================================================
   GesPro Administrativo · Sistema de diseño
   =========================================================== */
:root {
  --fondo:        #f4f6f9;
  --superficie:   #ffffff;
  --superficie-2: #fafbfc;
  --borde:        #e2e6ec;
  --borde-fuerte: #cbd3dd;
  --texto:        #1a2230;
  --texto-2:      #5c6a7e;
  --texto-3:      #8b98aa;
  --marca:        #1f5faa;
  --marca-suave:  #e8f0fa;
  --marca-oscuro: #17477f;
  --ok:           #1a7f52;
  --ok-suave:     #e3f4ec;
  --alerta:       #9a6510;
  --alerta-suave: #fdf3e0;
  --error:        #b3271f;
  --error-suave:  #fceceb;
  --info:         #2c5f8a;
  --sombra:       0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sombra-alta:  0 12px 32px rgba(16,24,40,.16);
  --r:            8px;
  --r-s:          5px;
  --barra:        252px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0e1319; --superficie: #161c25; --superficie-2: #1b222c;
    --borde: #28303b; --borde-fuerte: #3a4452; --texto: #e6ebf2; --texto-2: #9aa7b8; --texto-3: #6b7888;
    --marca: #5b9bd8; --marca-suave: #17293c; --marca-oscuro: #7db3e8;
    --ok: #4ec08a; --ok-suave: #12291f; --alerta: #d9a441; --alerta-suave: #2b2113;
    --error: #e8736a; --error-suave: #2d1715; --info: #6fa8d4;
    --sombra: 0 1px 3px rgba(0,0,0,.4); --sombra-alta: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --fondo: #0e1319; --superficie: #161c25; --superficie-2: #1b222c;
  --borde: #28303b; --borde-fuerte: #3a4452; --texto: #e6ebf2; --texto-2: #9aa7b8; --texto-3: #6b7888;
  --marca: #5b9bd8; --marca-suave: #17293c; --marca-oscuro: #7db3e8;
  --ok: #4ec08a; --ok-suave: #12291f; --alerta: #d9a441; --alerta-suave: #2b2113;
  --error: #e8736a; --error-suave: #2d1715; --info: #6fa8d4;
  --sombra: 0 1px 3px rgba(0,0,0,.4); --sombra-alta: 0 12px 32px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13px; }

/* ---------- Estructura ---------- */
#app { display: flex; min-height: 100vh; }
.barra {
  width: var(--barra); flex: 0 0 var(--barra); background: var(--superficie);
  border-right: 1px solid var(--borde); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.barra-marca { padding: 18px 18px 14px; border-bottom: 1px solid var(--borde); }
.barra-marca .logo { display: flex; align-items: center; gap: 10px; }
.barra-marca .ic { width: 30px; height: 30px; border-radius: 7px; background: var(--marca); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.barra-marca .nom { font-weight: 600; font-size: 14px; line-height: 1.25; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.barra-marca .sub { font-size: 11px; color: var(--texto-3); }
.nav { padding: 10px 10px 20px; flex: 1; }
.nav-grupo { margin-top: 14px; }
.nav-grupo > span { display: block; padding: 0 10px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.nav a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-s);
  color: var(--texto-2); font-size: 13.5px; margin-bottom: 1px; }
.nav a:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.nav a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.nav a svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.nav a .pill { margin-left: auto; background: var(--error); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 9px; }
.barra-pie { border-top: 1px solid var(--borde); padding: 10px; display: flex; align-items: center; gap: 9px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--marca-suave); color: var(--marca);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 13px 22px;
  display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 20; }
.cabecera .titulo { flex: 1; min-width: 0; }
.cabecera .titulo p { margin: 1px 0 0; font-size: 12.5px; color: var(--texto-2); }
.contenido { padding: 20px 22px 60px; flex: 1; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta-cab { padding: 13px 16px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tarjeta-cab h3 { flex: 1; min-width: 120px; }
.tarjeta-cuerpo { padding: 16px; }
.tarjeta-pie { padding: 11px 16px; border-top: 1px solid var(--borde); background: var(--superficie-2);
  border-radius: 0 0 var(--r) var(--r); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.rejilla { display: grid; gap: 14px; }
/* Sin esto, una tabla ancha dentro de una tarjeta (los saldos de tesorería, la
   proyección de caja) ensanchaba su columna hasta lo que mide la tabla y, en el
   teléfono, la página entera: quedaba más ancha que la pantalla y había que
   arrastrarla de lado. Así la tarjeta cabe y la tabla se desplaza dentro de su
   .tabla-env, que para eso está. */
.rejilla > * { min-width: 0; }
.r2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.r3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.r4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Indicadores ---------- */
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .etq { font-size: 11.5px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi .val { font-size: 25px; font-weight: 650; margin-top: 5px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: 12px; color: var(--texto-3); margin-top: 3px; }
.kpi.t-ok .val { color: var(--ok); } .kpi.t-mal .val { color: var(--error); } .kpi.t-aviso .val { color: var(--alerta); }

/* ---------- Tablas ---------- */
.tabla-env { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th { text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-2); background: var(--superficie-2);
  border-bottom: 1px solid var(--borde); white-space: nowrap; position: sticky; top: 0; }
table.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.tabla tbody tr:hover { background: var(--superficie-2); }
table.tabla tbody tr.clic { cursor: pointer; }
table.tabla tfoot td { padding: 10px 12px; font-weight: 650; background: var(--superficie-2); border-top: 2px solid var(--borde-fuerte); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.neg { color: var(--error); }
.vacio { padding: 44px 20px; text-align: center; color: var(--texto-3); }
.vacio strong { display: block; color: var(--texto-2); margin-bottom: 4px; font-size: 14px; }

/* ---------- Etiquetas de estado ---------- */
.etiq { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.etiq.t-ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.etiq.t-aviso { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.etiq.t-mal { background: var(--error-suave); color: var(--error); border-color: transparent; }
.etiq.t-info { background: var(--marca-suave); color: var(--marca); border-color: transparent; }

/* ---------- Controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-s); background: var(--superficie);
  color: var(--texto); font-size: 13px; font-weight: 550; cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s; white-space: nowrap; }
.btn:hover { background: var(--superficie-2); border-color: var(--texto-3); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.pri { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.pri:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); }
.btn.peligro { color: var(--error); border-color: var(--error); }
.btn.peligro:hover { background: var(--error-suave); }
.btn.exito { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.plano { border-color: transparent; background: transparent; padding: 5px 8px; }
.btn.plano:hover { background: var(--superficie-2); }
.btn.s { padding: 4px 9px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

input, select, textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-s);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca); }
input[type="number"] { text-align: right; font-family: var(--mono); }
input:disabled, select:disabled { background: var(--superficie-2); color: var(--texto-3); }
textarea { resize: vertical; min-height: 62px; }
label.campo { display: block; }
label.campo > span { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); margin-bottom: 4px; }
label.campo .ayuda { font-weight: 400; color: var(--texto-3); font-size: 11.5px; }
.linea { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.linea > * { flex: 1; min-width: 130px; }
.linea > .fijo { flex: none; min-width: 0; }
.filtros { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
.filtros label.campo { flex: 0 1 auto; min-width: 140px; }
.buscador { flex: 1 1 220px; min-width: 180px; }

/* ---------- Modal ---------- */
.velo { position: fixed; inset: 0; background: rgba(12,18,28,.55); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 100; padding: 20px; overflow-y: auto; }
.modal { background: var(--superficie); border-radius: 11px; box-shadow: var(--sombra-alta);
  width: min(720px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal.ancho { width: min(1080px, 100%); }
.modal-cab { padding: 15px 18px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; }
.modal-cab h2 { flex: 1; }
.modal-cuerpo { padding: 18px; overflow-y: auto; flex: 1; }
.modal-pie { padding: 13px 18px; border-top: 1px solid var(--borde); display: flex; gap: 9px; justify-content: flex-end;
  background: var(--superficie-2); border-radius: 0 0 11px 11px; flex-wrap: wrap; }

/* ---------- Avisos ---------- */
.aviso { padding: 11px 14px; border-radius: var(--r-s); font-size: 13px; display: flex; gap: 9px; align-items: flex-start; }
.aviso.error { background: var(--error-suave); color: var(--error); }
.aviso.ok { background: var(--ok-suave); color: var(--ok); }
.aviso.aviso-alerta { background: var(--alerta-suave); color: var(--alerta); }
.aviso.info { background: var(--marca-suave); color: var(--marca); }
.aviso + * { margin-top: 12px; }

#notis { position: fixed; bottom: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 9px; max-width: 380px; }
.noti { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--marca);
  border-radius: var(--r-s); padding: 11px 14px; box-shadow: var(--sombra-alta); font-size: 13px;
  animation: entra .2s ease; }
.noti.ok { border-left-color: var(--ok); } .noti.error { border-left-color: var(--error); }
/* Ni bien ni mal: se hizo, pero hay algo que conviene saber. */
.noti.aviso { border-left-color: var(--alerta, #d9a441); }
.noti strong { display: block; margin-bottom: 2px; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; overflow-x: auto; }
.pestanas button { padding: 9px 14px; border: none; background: none; color: var(--texto-2); font: inherit;
  font-size: 13.5px; font-weight: 550; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas button:hover { color: var(--texto); }
.pestanas button.activo { color: var(--marca); border-bottom-color: var(--marca); }

/* ---------- Detalle clave/valor ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; }
.kv dt { color: var(--texto-2); font-weight: 550; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Barra de progreso / distribución ---------- */
.barra-dist { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--superficie-2); }
.barra-dist i { display: block; height: 100%; }

/* ---------- Login ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(150deg, var(--fondo), var(--marca-suave)); }
.acceso .caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-alta); padding: 32px; width: min(400px, 100%); }
.acceso .caja h1 { text-align: center; margin-bottom: 4px; }
.acceso .caja .sub { text-align: center; color: var(--texto-2); font-size: 13px; margin-bottom: 22px; }
.acceso label.campo { margin-bottom: 13px; }
/* ---------- Demostración pública ---------- */
.acceso .caja.con-demo { width: min(450px, 100%); }
.acceso .caja.con-demo form h1 { font-size: 15px; margin-bottom: 14px; }
.demo-entrada { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--borde); }
.demo-entrada h1 { text-align: center; margin: 10px 0 8px; }
.demo-entrada p { color: var(--texto-2); font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.demo-entrada ul { margin: 0 0 16px 18px; padding: 0; color: var(--texto-2); font-size: 13px; line-height: 1.65; }
.demo-entrada .demo-contacto { text-align: center; margin: 12px 0 0; }
.demo-etiqueta { display: block; width: fit-content; margin: 0 auto; padding: 3px 11px; border-radius: 999px;
  background: var(--marca-suave); color: var(--marca); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.franja-demo { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 50;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
  border-radius: 999px; padding: 7px 16px; font-size: 12.5px; color: var(--texto-2);
  width: max-content; max-width: calc(100vw - 32px); text-align: center; }
@media (max-width: 600px) { .franja-demo { border-radius: 14px; bottom: 10px; } .franja-demo-detalle { display: none; } }
.franja-demo strong { color: var(--marca); }
.franja-demo a { color: var(--marca); font-weight: 600; }
@media print { .franja-demo { display: none; } }
.credenciales { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde);
  font-size: 12px; color: var(--texto-3); text-align: center; line-height: 1.7; }

/* ---------- Utilidades ---------- */
.fila { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.fila.fin { justify-content: flex-end; }
.entre { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.crece { flex: 1; }
.tenue { color: var(--texto-2); }
.min { font-size: 12px; }
.mini { font-size: 11.5px; color: var(--texto-3); }
.centro { text-align: center; }
.der { text-align: right; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; } .mt-s { margin-top: 8px; }
.cargando { padding: 50px; text-align: center; color: var(--texto-3); }
.cargando::after { content: ''; display: block; width: 22px; height: 22px; margin: 12px auto 0;
  border: 2px solid var(--borde); border-top-color: var(--marca); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.oculto { display: none !important; }

/* ---------- Responsive ---------- */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .barra { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .barra.abierta { transform: none; box-shadow: var(--sombra-alta); }
  .menu-btn { display: inline-flex; }
  .contenido { padding: 16px; }
  .cabecera { padding: 11px 16px; flex-wrap: wrap; }
  /* Con varios botones, el título se quedaba en una columna de una palabra por
     línea: en el teléfono los botones bajan a su propia fila. */
  .cabecera .titulo { flex-basis: calc(100% - 52px); }
  .cabecera > .fila { flex-wrap: wrap; width: 100%; }
}
/* ---------- Desplegables que se buscan escribiendo ----------
   Ver `hacerBuscable` en js/nucleo.js. El <select> sigue ahí, oculto: es quien
   guarda el valor para todo el programa. Lo que se ve es el campo de búsqueda. */
.buscador-caja { position: relative; }
.buscador-campo { width: 100%; }
.buscador-oculto { display: none !important; }

/* Un renglón cuyo artículo ya no está en el catálogo. Se marca para que se vea
   que hay que cambiarlo: antes el desplegable mostraba «Concepto libre» como si
   todo estuviera bien y el documento se rechazaba al guardar. */
.opcion-huerfana { color: var(--error); font-weight: 600; }

.buscador-lista {
  display: none; position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 3px);
  max-height: 260px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s); box-shadow: var(--sombra-alta);
}
.buscador-caja.abierto .buscador-lista { display: block; }

.buscador-opcion { padding: 7px 10px; font-size: 13px; cursor: pointer; line-height: 1.35; }
.buscador-opcion + .buscador-opcion { border-top: 1px solid var(--borde); }
/* Una sola marca para el ratón y para las flechas: si el teclado pinta de un
   color y el ratón de otro, al mezclarlos parecen dos opciones elegidas. */
.buscador-opcion.marcada { background: var(--marca-suave); color: var(--marca-oscuro); }
.buscador-vacio { padding: 9px 10px; font-size: 12.5px; color: var(--texto-2); }

/* Al imprimir no queda rastro: el buscador es para usar, no para el papel. */
@media print { .buscador-caja { display: none !important; } .buscador-oculto { display: block !important; } }

/* ---------- Impresión ----------
   Cualquier pantalla se lleva a papel o a PDF con el botón de la cabecera. Lo
   que se imprime es lo que se está viendo; aquí se quita lo que sólo sirve en
   pantalla y se añade lo que sólo hace falta en el papel. */

/* Sin tamaño declarado: así el usuario puede elegir vertical u horizontal en el
   diálogo del navegador, que es donde lo va a necesitar para una tabla ancha. */
@page { margin: 14mm 12mm; }

/* La cabecera de la hoja: de qué empresa es, qué informe, con qué filtros y
   cuándo se sacó. En pantalla no se ve nunca; la pone app.js al imprimir. */
.hoja-cabecera { display: none; }

@media print {
  /* El tema oscuro no se imprime. Sobre papel blanco su texto claro sale
     invisible, y el usuario no tiene por qué acordarse de cambiar de tema
     antes de imprimir. Los selectores repiten los del tema oscuro para ganarle
     en especificidad, no por gusto. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"],
  :root:not([data-theme="light"]) {
    --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #ffffff;
    --borde: #c3ccd6; --borde-fuerte: #97a3b1;
    --texto: #000000; --texto-2: #333a44; --texto-3: #5a6572;
    --marca: #1f5faa; --marca-suave: #eef3f9; --marca-oscuro: #17477f;
    --ok: #10643f; --ok-suave: #eef6f1; --alerta: #7a4f08; --alerta-suave: #faf4e8;
    --error: #8f1c16; --error-suave: #faeceb; --info: #234a6b;
    --sombra: none; --sombra-alta: none;
  }

  /* Lo que no es el informe: navegación, botones, filtros y lo que flota. */
  .barra, .cabecera, .btn, .filtros, .tarjeta-pie, .pestanas,
  .velo, .resena, .resena-marca, .franja-instalar, .solo-pantalla {
    display: none !important;
  }
  .hoja-cabecera { display: block !important; }

  body, .principal, .contenido, .tarjeta { background: #fff !important; box-shadow: none !important; }
  .contenido { padding: 0 !important; }
  .principal { display: block; }
  .tarjeta { border: 1px solid var(--borde); margin-bottom: 10px; }

  /* Lo que no se parte entre dos hojas. Una fila cortada por la mitad o un
     título al final de una página con su tabla en la siguiente obligan a
     volver atrás para leer. */
  .tarjeta, tr, .kpi, .hoja-cabecera { break-inside: avoid; page-break-inside: avoid; }
  .tarjeta-cab, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* Los títulos de columna se repiten en cada hoja: una tabla de ocho páginas
     sin ellos no se puede leer a partir de la segunda. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* Las barras del gráfico y los distintivos de estado son color de relleno. Sin
     esto el navegador los imprime en blanco y el gráfico sale vacío. */
  svg, .etiq, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Cabe más por hoja sin dejar de leerse. */
  table { font-size: 10px; width: 100%; }
  table td, table th { padding: 4px 6px; }
  .contenido { font-size: 11px; }

  /* Los enlaces del panel son navegación: en papel, texto normal. */
  a { color: inherit !important; text-decoration: none !important; }
}

/* La cabecera de la hoja impresa */
.hoja-cabecera { margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1.5px solid #000; }
.hoja-cabecera .hoja-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hoja-cabecera .hoja-der { text-align: right; }
.hoja-cabecera h1 { margin: 9px 0 2px; font-size: 16px; }
.hoja-cabecera .hoja-mini { font-size: 10.5px; color: #333a44; line-height: 1.45; }

/* Franja de la barra lateral que ofrece instalar el sistema como aplicación.
   Sólo se muestra si el navegador avisa de que puede instalarse (app.js). */
.franja-instalar { padding: 0 10px 10px; }
.franja-instalar .btn { width: 100%; justify-content: center; font-size: 12px;
  border: 1px dashed var(--borde); color: var(--texto-2); }
.franja-instalar .btn:hover { color: var(--marca); border-color: var(--marca); }

/* ---------- Reseñas de campos ---------- */
/* La marca junto a la etiqueta avisa de que hay explicación. Se apaga con una
   clase en <html>, para que el interruptor surta efecto al instante en toda la
   aplicación sin repintar nada. */
.resena-marca { margin-left: 5px; color: var(--texto-2); font-size: 11px; cursor: help; opacity: .65; }
label.campo:hover .resena-marca { opacity: 1; color: var(--marca); }
html.sin-resenas .resena-marca { display: none; }
.boton-resenas.apagado { color: var(--alerta); border: 1px solid var(--alerta); font-size: 12px; white-space: nowrap; }

.resena {
  position: fixed; z-index: 9000; max-width: 330px; padding: 9px 12px;
  background: var(--texto); color: var(--superficie);
  border-radius: 8px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;        /* nunca estorba al cursor ni tapa lo que hay debajo */
}
.resena.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* En pantallas pequeñas ocupa el ancho disponible en vez de salirse */
@media (max-width: 640px) { .resena { max-width: calc(100vw - 24px); } }

/* Al imprimir no pinta nada */
@media print { .resena, .resena-marca { display: none !important; } }

/* ---------- Manual de usuario ---------- */
.manual-rejilla { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }

.manual-indice { position: sticky; top: 76px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px; max-height: calc(100vh - 110px); overflow: auto; }
.manual-indice-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-2); font-weight: 700; margin-bottom: 9px; }
.manual-indice a { display: block; padding: 6px 8px; border-radius: 7px; font-size: 13px;
  color: var(--texto-2); text-decoration: none; line-height: 1.35; }
.manual-indice a:hover { background: var(--fondo); color: var(--marca); }

.manual-cuerpo { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 26px 30px; max-width: 900px; }
.manual-seccion { scroll-margin-top: 80px; }
.manual-seccion + .manual-seccion { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--borde); }
.manual-h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -.3px; }
.manual-h3 { font-size: 14.5px; margin: 20px 0 7px; color: var(--marca); }
.manual-p { margin: 0 0 10px; line-height: 1.62; color: var(--texto); }
.manual-lista, .manual-pasos { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.manual-lista li, .manual-pasos li { margin-bottom: 6px; }
.manual-aviso { border-left: 3px solid var(--marca); background: var(--marca-suave);
  padding: 11px 14px; border-radius: 0 8px 8px 0; margin: 12px 0 14px; line-height: 1.55; }
.manual-tabla { overflow-x: auto; margin: 10px 0 14px; }
.manual-tabla table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.manual-tabla th, .manual-tabla td { border: 1px solid var(--borde); padding: 7px 10px;
  text-align: left; vertical-align: top; }
.manual-tabla th { background: var(--fondo); font-weight: 650; font-size: 12px; }
.manual-cuerpo mark { background: var(--marca-suave); color: var(--marca); border-radius: 3px; padding: 0 2px; }
.manual-vacio { text-align: center; padding: 40px 20px; color: var(--texto-2); }

@media (max-width: 900px) {
  .manual-rejilla { grid-template-columns: 1fr; }
  .manual-indice { position: static; max-height: none; }
  .manual-cuerpo { padding: 18px; }
}

/* Capturas dentro del manual */
.manual-figura { margin: 14px 0 18px; }
.manual-figura img { display: block; width: 100%; border: 1px solid var(--borde);
  border-radius: 9px; background: var(--fondo); }
.manual-figura figcaption { font-size: 12.5px; color: var(--texto-2); margin-top: 7px; line-height: 1.5; }

/* Aviso de autoría. Discreto pero legible: está para constar, no para gritar. */
.copyright { font-size: 11.5px; color: var(--texto-3); letter-spacing: .01em; margin: 0; }
.barra-pie + .copyright { padding: 0 16px 12px; text-align: center; }
@media print { .copyright { color: #666; } }

/* Ambiente de pruebas. La franja sale arriba en cada pantalla; además, el borde
   de color y el logotipo en ámbar se ven aunque se haya bajado por la página,
   para que nadie registre algo real donde se borra cada noche. */
.franja-pruebas { background: var(--alerta-suave); color: var(--alerta); border-bottom: 2px solid var(--alerta);
  padding: 10px 22px; font-size: 13px; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; }
.franja-pruebas strong { letter-spacing: .03em; }
.franja-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
body.entorno-pruebas .principal { border-top: 4px solid var(--alerta); }
body.entorno-pruebas .barra-marca .logo .ic { background: var(--alerta); }
.ir-pruebas { margin-top: 6px; padding-left: 0; font-size: 12px; }
@media (max-width: 600px) { .franja-pruebas { padding: 10px 16px; } }

/* Modo demo (ERP_MODO_DEMO). La franja sale arriba en cada pantalla y, al
   imprimir, cada hoja lleva la etiqueta en la cabecera y una marca de agua. */
.franja-modo-demo { background: #1f2937; color: #fff; padding: 9px 22px; font-size: 13px; display: flex;
  gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.franja-modo-demo strong { letter-spacing: .04em; text-transform: uppercase; }
.franja-modo-demo-detalle { opacity: .8; }
.franja-modo-demo .btn { background: #fff; color: #1f2937; border-color: #fff; }
body.modo-demo .principal { border-top: 4px solid #1f2937; }
.etiqueta-modo-demo { margin: 0 auto 14px; width: fit-content; padding: 4px 12px; border-radius: 999px;
  background: #1f2937; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hoja-demo { display: block; margin-bottom: 8px; padding: 3px 8px; background: #000; color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media (max-width: 600px) { .franja-modo-demo { padding: 9px 16px; } .franja-modo-demo-detalle { display: none; } }
@media print {
  .franja-modo-demo { display: none !important; }
  body.modo-demo::before { content: 'DEMO – datos ficticios'; position: fixed; top: 45%; left: 0; right: 0;
    text-align: center; transform: rotate(-30deg); font-size: 64px; font-weight: 800; color: rgba(0, 0, 0, .07);
    z-index: 0; pointer-events: none; }
}

/* ---------- CRM ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kanban-col { flex: 0 0 260px; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r); display: flex; flex-direction: column; max-height: 70vh; }
.kanban-col.sobre, .kanban-cierre.sobre { outline: 2px dashed var(--marca); outline-offset: -2px; }
.kanban-cab { padding: 10px 12px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; }
.kanban-lista { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.kanban-vacio { color: var(--texto-3); font-size: 12px; text-align: center; padding: 18px 0; }
.kanban-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 9px 10px;
  cursor: grab; box-shadow: var(--sombra); }
.kanban-tarjeta:hover { border-color: var(--marca); }
.kanban-tarjeta.arrastrando { opacity: .5; }
.kanban-titulo { font-weight: 600; font-size: 13px; margin-bottom: 2px; overflow-wrap: anywhere; }
.kanban-cierres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kanban-cierre { border: 1px dashed var(--borde); border-radius: var(--r); padding: 14px; text-align: center; font-weight: 600; }
.kanban-cierre.t-ok { color: var(--ok); background: var(--ok-suave); }
.kanban-cierre.t-mal { color: var(--error); background: var(--error-suave); }
.embudo-fila { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(90px, auto); gap: 10px;
  align-items: center; padding: 6px 0; cursor: pointer; border-bottom: 1px solid var(--borde); }
.embudo-fila:last-child { border-bottom: none; }
.embudo-barra { background: var(--marca-suave); border-radius: 4px; height: 14px; overflow: hidden; }
.embudo-barra > div { background: var(--marca); height: 100%; border-radius: 4px; }
.embudo-monto { text-align: right; font-variant-numeric: tabular-nums; }
.alerta-fila { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde);
  cursor: pointer; }
.alerta-fila:last-child { border-bottom: none; }
.alerta-fila:hover strong { color: var(--marca); }
.agenda { display: flex; flex-direction: column; }
.agenda-fila { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borde); align-items: flex-start; }
.agenda-fila:last-child { border-bottom: none; }
.agenda-fila.vencida { background: var(--error-suave); }
.agenda-fila.hecha { opacity: .8; }
.agenda-icono { width: 28px; height: 28px; border-radius: 50%; background: var(--marca-suave); display: grid;
  place-items: center; flex: 0 0 28px; font-size: 14px; }
.pasos { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.pasos .paso { flex: 1 1 110px; padding: 7px 10px; border: 1px solid var(--borde); background: var(--superficie);
  border-radius: 6px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--texto-2); }
.pasos .paso.hecho { background: var(--marca-suave); color: var(--marca); }
.pasos .paso.actual { background: var(--marca); color: #fff; border-color: var(--marca); font-weight: 600; }
.pasos .paso:disabled { cursor: default; }
@media (max-width: 720px) {
  .kanban-col { flex-basis: 82vw; }
  .embudo-fila { grid-template-columns: 1fr; }
  .embudo-monto { text-align: left; }
}

/* Botón de reportar, al pie de la barra */
.barra .reportar { width: calc(100% - 24px); margin: 0 12px 6px; justify-content: flex-start; font-size: 12.5px;
  color: var(--texto-2); border: 1px dashed var(--borde); }
.barra .reportar:hover { color: var(--marca); border-color: var(--marca); }

/* ---------- Punto de venta ---------- */
.pos-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .pos-rejilla { grid-template-columns: 1fr; } }
.pos-rejilla input[type=search] { width: 100%; flex: 1; min-width: 0; }
.pos-resultados { display: grid; gap: 6px; margin-top: 8px; }
.pos-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); cursor: pointer; }
.pos-item:hover, .pos-item:focus { border-color: var(--marca); background: var(--marca-suave); }
.pos-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.pos-total strong { font-size: 32px; }
.pos-cobrar { width: 100%; font-size: 20px; padding: 14px; }
.pos-medios { display: grid; gap: 8px; margin-bottom: 12px; }
.pos-medio { display: grid; grid-template-columns: 1.4fr 1.3fr 1.2fr auto; gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.pos-medio > .mini:empty { display: none; }
@media (max-width: 700px) { .pos-medio { grid-template-columns: 1fr 1fr; } }
.pos-cobro-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pos-cobro-resumen > div { display: flex; flex-direction: column; padding: 10px; border-radius: 10px; background: var(--superficie-2); }
.pos-cobro-resumen strong { font-size: 22px; }
.pos-cobro-resumen .t-mal strong { color: var(--error); }
.pos-cobro-resumen .t-ok strong { color: var(--ok); }
.ticket { font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #000; background: #fff; padding: 10px; }
.ticket-vista { max-width: 340px; margin: 0 auto; border: 1px dashed var(--borde-fuerte); border-radius: 6px; }
.tk-centro { text-align: center; }
.tk-fila { display: flex; justify-content: space-between; gap: 8px; }
.tk-fila > span:last-child { white-space: nowrap; }
.tk-grande { font-size: 15px; font-weight: 700; }
.tk-linea { border-top: 1px dashed #000; margin: 6px 0; }
.ticket-impresion { display: none; }
@page ticket { size: 80mm auto; margin: 3mm; }
@media print {
  body.imprimiendo-ticket > *:not(.ticket-impresion) { display: none !important; }
  body.imprimiendo-ticket .ticket-impresion { display: block !important; page: ticket; width: 72mm; }
  body.imprimiendo-ticket .ticket { padding: 0; }
}

/* Estado de la conexión del punto de venta */
.pos-red { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; white-space: nowrap; align-self: center; }
.pos-red.ok { color: var(--ok); background: var(--ok-suave); }
.pos-red.aviso { color: var(--alerta); background: var(--alerta-suave); }
.pos-red.mal { color: var(--error); background: var(--error-suave); }