:root {
  --tinta: #16202c;
  --tinta-2: #223042;
  --papel: #f2f4f7;
  --tarjeta: #ffffff;
  --linea: #dde2e9;
  --texto: #1b2430;
  --suave: #667386;
  --acento: #0f6b64;
  --acento-2: #0b524d;
  --deuda: #b42318;
  --favor: #157347;
  --obl-bg: #e7edfb; --obl-fg: #27448c;
  --cre-bg: #dcf2ee; --cre-fg: #0b5c55;
  --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--papel);
  --bs-primary: var(--acento);
  --bs-primary-rgb: 15, 107, 100;
  --bs-link-color: var(--acento);
  --bs-link-hover-color: var(--acento-2);
  --bs-border-color: var(--linea);
}
html { font-size: 15px; }
body { background: var(--papel); color: var(--texto); }
.btn-primary { --bs-btn-bg: var(--acento); --bs-btn-border-color: var(--acento); --bs-btn-hover-bg: var(--acento-2); --bs-btn-hover-border-color: var(--acento-2); --bs-btn-active-bg: var(--acento-2); --bs-btn-active-border-color: var(--acento-2); }
.btn-outline-primary { --bs-btn-color: var(--acento); --bs-btn-border-color: var(--acento); --bs-btn-hover-bg: var(--acento); --bs-btn-hover-border-color: var(--acento); --bs-btn-active-bg: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Estructura */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { background: var(--tinta); color: #c9d3e0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; gap: .6rem; align-items: center; padding: 1.25rem 1.25rem 1rem; color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }
.brand i { font-size: 1.35rem; color: #5ec4b8; }
.nav-lateral { display: flex; flex-direction: column; padding: .5rem .75rem; gap: 2px; flex: 1; }
.nav-lateral a { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; color: #c9d3e0; text-decoration: none; border-radius: 6px; border-left: 3px solid transparent; }
.nav-lateral a:hover { background: var(--tinta-2); color: #fff; }
.nav-lateral a.activo { background: var(--tinta-2); color: #fff; border-left-color: #5ec4b8; font-weight: 500; }
.sidebar-pie { padding: 1rem 1.25rem; border-top: 1px solid #2b394c; font-size: .9rem; }
.sidebar-pie .usuario { display: flex; gap: .5rem; align-items: center; color: #fff; margin-bottom: .4rem; }
.sidebar-pie .salir { color: #9fb0c5; text-decoration: none; }
.sidebar-pie .salir:hover { color: #fff; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 2rem .25rem; }
.titulo-pagina { font-size: 1.6rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.subtitulo-pagina { color: var(--suave); font-size: .95rem; margin-top: .1rem; }
.contenido { padding: .75rem 2rem 3rem; max-width: 1280px; }
.btn-menu { border: 0; }

@media (max-width: 991.98px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 1040; width: 250px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.abierto { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .topbar, .contenido { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Tarjetas y tablas */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 8px; }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--linea); font-weight: 600; }
.tarjeta-cuerpo { padding: 1.1rem; }
.tabla { width: 100%; margin: 0; border-collapse: collapse; }
.tabla th { font-weight: 500; font-size: .85rem; color: var(--suave); text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--linea); background: #fafbfc; white-space: nowrap; }
.tabla td { padding: .6rem .9rem; border-bottom: 1px solid #eceff3; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tfoot td { font-weight: 600; background: #fafbfc; border-top: 2px solid var(--linea); }
.tabla-scroll { overflow-x: auto; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.num { text-align: right; }
.deuda { color: var(--deuda); font-weight: 600; }
.favor { color: var(--favor); font-weight: 600; }
.cero { color: #9aa5b4; }
.vacio { padding: 2.2rem 1rem; text-align: center; color: var(--suave); }
.vacio i { font-size: 1.8rem; display: block; margin-bottom: .4rem; opacity: .6; }
.fila-detalle td { background: #f8fafb; padding-left: 2.4rem; font-size: .9rem; }
.fila-detalle .tabla th { background: transparent; }

/* Cifras destacadas */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.kpi { background: var(--tarjeta); border: 1px solid var(--linea); border-left: 4px solid var(--linea); border-radius: 8px; padding: .9rem 1.1rem; }
.kpi-etq { color: var(--suave); font-size: .85rem; }
.kpi-val { font-size: 1.55rem; font-weight: 600; text-align: left; letter-spacing: -.01em; margin-top: .15rem; }
.kpi-nota { color: var(--suave); font-size: .8rem; margin-top: .1rem; }
.kpi.k-deuda { border-left-color: var(--deuda); } .kpi.k-deuda .kpi-val { color: var(--deuda); }
.kpi.k-cre { border-left-color: var(--cre-fg); }
.kpi.k-obl { border-left-color: var(--obl-fg); }
.kpi.k-favor { border-left-color: var(--favor); } .kpi.k-favor .kpi-val { color: var(--favor); }

/* Etiquetas */
.badge.bg-obl { background: var(--obl-bg) !important; color: var(--obl-fg); font-weight: 500; }
.badge.bg-cre, .badge.bg-cred { background: var(--cre-bg) !important; color: var(--cre-fg); font-weight: 500; }
.rol-chip { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 99px; background: #eef1f5; color: #394658; margin: 1px 2px 1px 0; }
.rol-chip.cliente { background: var(--cre-bg); color: var(--cre-fg); }

/* Formularios */
.form-label { font-size: .88rem; font-weight: 500; margin-bottom: .25rem; }
.form-control, .form-select { border-color: #cdd5df; }
.num-in { text-align: right; font-variant-numeric: tabular-nums; }
.form-text { font-size: .8rem; }
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--linea); margin-bottom: 1.1rem; flex-wrap: wrap; }
.pestanas a { padding: .6rem .95rem; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: .4rem; align-items: center; }
.pestanas a:hover { color: var(--texto); }
.pestanas a.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 500; }
.dl-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem 1.5rem; margin: 0; }
.dl-rejilla dt { font-size: .8rem; font-weight: 500; color: var(--suave); }
.dl-rejilla dd { margin: 0; }
.picker-menu { position: absolute; z-index: 1060; background: #fff; border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.12); width: 100%; max-height: 260px; overflow: auto; }
.picker-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .5rem .75rem; }
.picker-menu button:hover, .picker-menu button:focus { background: #eef6f5; }
.picker-menu small { color: var(--suave); }
.pos-rel { position: relative; }

/* Libro de la cuenta corriente */
.libro .tabla td, .libro .tabla th { padding-top: .55rem; padding-bottom: .55rem; }
.libro .col-pp { font-weight: 600; }
.libro tr.saldada td { color: #6b7685; }
.estado-pago { font-size: .8rem; }

@media print {
  .sidebar, .topbar .btn-menu, .no-imprimir, .btn, .pestanas { display: none !important; }
  .app { display: block; }
  body { background: #fff; font-size: 12px; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta, .kpi { border-color: #bbb; break-inside: avoid; }
  .fila-detalle { display: table-row !important; }
  .collapse { display: table-row !important; }
}

/* Inicio de sesión */
.login-pag { min-height: 100vh; display: grid; place-items: center; background: var(--tinta); padding: 1rem; }
.login-caja { background: #fff; width: 100%; max-width: 380px; border-radius: 10px; padding: 2rem; }
.login-caja h1 { font-size: 1.35rem; font-weight: 600; margin-bottom: .25rem; }

/* Colores definidos por el usuario en la lista de precios: se imprimen tal cual */
.celda-color { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.muestra-color { display: inline-block; padding: .15rem .6rem; border: 1px solid var(--linea); border-radius: 4px; }

.mensaje-cliente { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .6rem; white-space: pre-wrap; }

/* Comprobante de abono: pegar una captura de pantalla */
.pegado { border: 2px dashed #b9c3d0; border-radius: 8px; padding: .75rem; background: #fafbfc; }
.pegado:focus-within, .pegado.sobre { border-color: var(--acento); background: #eef6f5; }
.pegado-img { max-width: 100%; max-height: 220px; border: 1px solid var(--linea); border-radius: 6px; display: block; margin-bottom: .5rem; }
.miniatura-comprobante { height: 34px; width: auto; max-width: 70px; object-fit: cover; border: 1px solid var(--linea); border-radius: 4px; vertical-align: middle; }
.mensajes-informe { margin-top: 1rem; }
.panel-mensajes .msg-fila { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; }
.panel-mensajes .msg-fila .mensaje-cliente { flex: 1; margin-bottom: 0; }