/* LIDIAPP — estilos. Paleta = colores del logotipo de lido (12-oct-2026): oro, plata y azul,
   tomados de su imagen. Series de graficas (banco/libros) validadas con dataviz en claro y oscuro. */
:root {
  --azul-p: #12304A; --azul: #1B4158; --azul-2: #3B6386; --oro: #C9AE4E; --oro-2: #D4BD5F;
  --plata: #A6A8A5; --plata-c: #DCDDDA; --plata-o: #8E908C;
  --gris-c: #E2E8F0; --gris-m: #A6A8A5; --gris-o: #1F2937;
  --verde: #10B981; --rojo: #EF4444; --ambar: #F59E0B;
  --fondo: #F3F4F3; --superficie: #FFFFFF; --superficie-2: #F7F8F7; --borde: #DCDDDA;
  --texto: #1F2937; --texto-2: #475569; --texto-3: #64748B;
  --serie-banco: #2A66A0; --serie-libros: #A88B2A;
  --ok-fondo: #E7F8F1; --ok-texto: #047857; --amb-fondo: #FEF5E3; --amb-texto: #92400E;
  --rojo-fondo: #FDECEC; --rojo-texto: #B91C1C; --gris-fondo: #EEF1F5;
  --sombra: 0 1px 2px rgba(15,33,55,.06), 0 4px 14px rgba(15,33,55,.06);
  --radio: 10px; --sb-ancho: 264px; --sb-compacta: 68px; --t: 200ms;
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0D1A26; --superficie: #132433; --superficie-2: #182C3D; --borde: #2A3D4E;
    --texto: #E2E8F0; --texto-2: #B6C2D1; --texto-3: #8A9AAE;
    --serie-banco: #4F86BD; --serie-libros: #B0901E;
    --ok-fondo: #0E2E25; --ok-texto: #6EE7B7; --amb-fondo: #33260E; --amb-texto: #FCD34D;
    --rojo-fondo: #3A1515; --rojo-texto: #FCA5A5; --gris-fondo: #1C2C3D; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0D1A26; --superficie: #132433; --superficie-2: #182C3D; --borde: #2A3D4E;
  --texto: #E2E8F0; --texto-2: #B6C2D1; --texto-3: #8A9AAE;
  --serie-banco: #4F86BD; --serie-libros: #B0901E;
  --ok-fondo: #0E2E25; --ok-texto: #6EE7B7; --amb-fondo: #33260E; --amb-texto: #FCD34D;
  --rojo-fondo: #3A1515; --rojo-texto: #FCA5A5; --gris-fondo: #1C2C3D; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 14px/1.45 var(--fuente); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
.sidebar svg, .btn-icono svg, .sb-pestana svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.error { color: var(--rojo-texto); min-height: 1.2em; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* --------------------------------------------------------------- login */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% 10%, #3B6386 0%, #1B4158 45%, #12304A 100%); }
.login-card { width: min(380px, 100%); background: #fff; color: #1F2937; border-radius: 14px; padding: 28px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); display: grid; gap: 14px; border-top: 4px solid var(--oro); border-bottom: 4px solid var(--plata); }
.login-card label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: #334155; }
.login-card input { padding: 11px 12px; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; color: #0F2137; }
.marca { text-align: center; margin-bottom: 8px; }
.marca-1 { font-size: 26px; font-weight: 800; letter-spacing: .12em; color: #0F2137; }
.marca-2 { font-size: 11px; letter-spacing: .32em; color: #A8853F; margin-top: 2px; }
.marca-3 { margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: .18em; color: #1B4158; }
.marca-4 { font-size: 12px; color: #64748B; }

/* --------------------------------------------------------------- botones */
.btn { border: 1px solid var(--borde); background: var(--superficie); padding: 7px 12px; border-radius: 8px; cursor: pointer;
  font-weight: 600; font-size: 13px; transition: background var(--t), border-color var(--t), transform 80ms; white-space: nowrap; }
.btn:hover { border-color: var(--gris-m); }
.btn:active { transform: translateY(1px); }
.btn-oro { background: var(--azul); color: #fff; border-color: var(--azul); box-shadow: inset 0 -2px 0 var(--oro); }
.btn-oro:hover { background: #244E6E; border-color: #244E6E; }
.btn-peligro { background: var(--rojo-fondo); color: var(--rojo-texto); border-color: transparent; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icono { background: none; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; color: inherit; display: inline-grid; place-items: center; }
.btn-icono:hover { background: var(--gris-fondo); }

/* --------------------------------------------------------------- barra lateral auto-hide */
#sb-zona { position: fixed; left: 0; top: 0; bottom: 0; width: 12px; z-index: 39; }
.sb-pestana { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40; width: 18px; height: 64px; border: 0;
  border-radius: 0 10px 10px 0; background: var(--azul-p); color: var(--oro); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--sombra); padding: 0; }
.sb-pestana svg { width: 14px; height: 14px; }
.sidebar { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; width: var(--sb-ancho); background: linear-gradient(180deg, #1B4158 0%, #12304A 100%); color: #DCDDDA;
  display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--t) ease, width var(--t) ease;
  box-shadow: 4px 0 24px rgba(0,0,0,.25); border-right: 1px solid rgba(166,168,165,.35); }
body.sb-abierta .sidebar { transform: translateX(0); }
body.sb-modo-fija .sidebar, body.sb-modo-compacta .sidebar { transform: translateX(0); box-shadow: none; }
body.sb-modo-compacta .sidebar { width: var(--sb-compacta); }
body.sb-modo-fija .contenido { margin-left: var(--sb-ancho); }
body.sb-modo-compacta .contenido { margin-left: var(--sb-compacta); }
body.sb-modo-fija .sb-pestana, body.sb-modo-compacta .sb-pestana, body.sb-modo-fija #sb-zona, body.sb-modo-compacta #sb-zona { display: none; }
.sb-velo { position: fixed; inset: 0; background: rgba(5,12,22,.45); z-index: 45; }
.sb-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 12px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sb-logo { display: flex; gap: 10px; align-items: center; min-width: 0; }
.sb-logo svg { width: 32px; height: 32px; flex: none; }
.sb-logo svg rect { fill: #1E3A5F; stroke: none; }
.sb-logo svg path { stroke: var(--oro); stroke-width: 2; }
.sb-logo-txt { display: grid; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.sb-logo-txt b { color: #fff; letter-spacing: .14em; font-size: 13px; }
.sb-logo-txt small { color: var(--plata); font-size: 10.5px; }
.sb-pin { background: none; border: 0; color: #8FA2B8; padding: 6px; border-radius: 8px; cursor: pointer; }
.sb-pin[aria-pressed="true"] { color: var(--oro); background: rgba(197,160,89,.12); }
.sb-pin:hover { color: #fff; }
.sb-menu { list-style: none; margin: 0; padding: 10px 8px; flex: 1; overflow-y: auto; }
.sb-item > a, .sb-item > button { width: 100%; display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 8px; color: #C5D0DD;
  text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap; position: relative;
  transition: background var(--t), color var(--t); }
.sb-item > a:hover, .sb-item > button:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-item.activo > a { background: rgba(197,160,89,.13); color: #fff; }
.sb-item.activo > a::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--oro); }
.sb-item svg { flex: none; width: 19px; height: 19px; }
.sb-flecha { margin-left: auto; transition: transform var(--t); width: 14px !important; height: 14px !important; }
.sb-item.expandido .sb-flecha { transform: rotate(90deg); }
.sb-sub { list-style: none; margin: 2px 0 6px 0; padding: 0 0 0 31px; display: none; }
.sb-item.expandido .sb-sub { display: block; }
.sb-sub a { display: block; padding: 6px 10px; border-radius: 6px; color: #9FB0C4; text-decoration: none; font-size: 13px; }
.sb-sub a:hover, .sb-sub a.activo { color: #fff; background: rgba(255,255,255,.05); }
body.sb-modo-compacta .sb-logo-txt, body.sb-modo-compacta .sb-txt, body.sb-modo-compacta .sb-flecha,
body.sb-modo-compacta .sb-sub, body.sb-modo-compacta .sb-pie, body.sb-modo-compacta .sb-pin { display: none; }
body.sb-modo-compacta .sb-item > a, body.sb-modo-compacta .sb-item > button { justify-content: center; }
.sb-pie { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #8FA2B8; display: grid; gap: 8px; }
.sb-salir { background: none; border: 1px solid rgba(255,255,255,.15); color: #C5D0DD; border-radius: 8px; padding: 6px; cursor: pointer; }

/* --------------------------------------------------------------- barra superior */
.contenido { min-height: 100%; transition: margin-left var(--t) ease; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; padding: 12px 20px 12px 28px;
  background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.filtros label { display: grid; gap: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.filtros select { min-width: 92px; max-width: 220px; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 7px; background: var(--superficie); font-size: 13px;
  text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.solo-tactil { display: none; }
@media (hover: none), (pointer: coarse) {
  .solo-tactil { display: inline-grid; }
  #sb-zona, .sb-pestana { display: none; }
}
.progreso { margin: 0 20px 0 28px; padding: 8px 12px; border-radius: 0 0 8px 8px; background: var(--azul); color: #fff; font-size: 13px; }
.progreso b { color: var(--oro); }

/* --------------------------------------------------------------- vista */
.vista { padding: 20px 20px 48px 28px; max-width: 1600px; outline: none; }
.titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.titulo h1 { font-size: 20px; margin: 0; color: var(--texto); letter-spacing: -.01em; }
.titulo .sub { color: var(--texto-3); font-size: 13px; }
.seccion { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-3); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
  cursor: pointer; transition: border-color var(--t), transform var(--t); text-align: left; }
.kpi:hover { border-color: var(--oro); transform: translateY(-1px); }
.kpi .et { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.kpi .val { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .nota { font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.kpi.destacado { border-top: 3px solid var(--oro); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--texto-2); cursor: pointer; }
.chip b { color: var(--texto); font-variant-numeric: tabular-nums; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); min-width: 0; }
.tarjeta h3 { margin: 0 0 2px; font-size: 14px; }
.tarjeta .sub { color: var(--texto-3); font-size: 12px; margin-bottom: 8px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); margin: 4px 0 6px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.grafica { position: relative; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica text { fill: var(--texto-3); font-size: 11px; stroke: none; }
.grafica .eje { stroke: var(--borde); stroke-width: 1; }
.tip { position: absolute; pointer-events: none; background: var(--gris-o); color: #fff; padding: 7px 9px; border-radius: 7px; font-size: 12px;
  box-shadow: var(--sombra); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); z-index: 5; }
.tip b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- tablas */
.tabla-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.tabla-herr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; }
.pestana { border: 1px solid transparent; background: none; padding: 5px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.pestana[aria-selected="true"] { background: var(--azul); color: #fff; }
.pestana small { opacity: .75; margin-left: 4px; font-variant-numeric: tabular-nums; }
.buscar { margin-left: auto; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 7px; background: var(--superficie); min-width: 200px; }
.tabla-scroll { overflow: auto; max-height: 64vh; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th { position: sticky; top: 0; background: var(--superficie-2); text-align: left; padding: 8px 10px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-3); border-bottom: 1px solid var(--borde); cursor: pointer; white-space: nowrap; z-index: 1; }
table.t td { padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.t tbody tr { cursor: pointer; }
table.t tbody tr:hover { background: var(--superficie-2); }
table.t tbody tr.sel { background: color-mix(in srgb, var(--oro) 14%, transparent); }
.concepto { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paginas { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px 12px; color: var(--texto-3); font-size: 12.5px; }
.estado { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-conciliado { background: var(--ok-fondo); color: var(--ok-texto); }
.e-manual { background: var(--ok-fondo); color: var(--ok-texto); }
.e-diferencia { background: var(--rojo-fondo); color: var(--rojo-texto); }
.e-pendiente, .e-revision { background: var(--amb-fondo); color: var(--amb-texto); }
.e-excluido { background: var(--gris-fondo); color: var(--texto-3); }
.lado { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; }
.lado-banco { background: color-mix(in srgb, var(--serie-banco) 16%, transparent); color: var(--serie-banco); }
.lado-libro { background: color-mix(in srgb, var(--serie-libros) 18%, transparent); color: var(--serie-libros); }

/* --------------------------------------------------------------- cedula */
.cedula { width: 100%; border-collapse: collapse; font-size: 14px; }
.cedula td { padding: 8px 12px; border-bottom: 1px solid var(--borde); }
.cedula tr.fuerte td { font-weight: 700; color: var(--texto); }
.cedula tr.final td { background: color-mix(in srgb, var(--oro) 12%, transparent); border-top: 2px solid var(--oro); font-size: 15px; }
.cedula tr.sangria td:first-child { padding-left: 28px; color: var(--texto-2); }

/* --------------------------------------------------------------- drawer, modal, avisos */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--superficie); border-left: 1px solid var(--borde);
  box-shadow: -10px 0 30px rgba(0,0,0,.18); z-index: 60; transform: translateX(100%); transition: transform var(--t) ease; display: flex; flex-direction: column; }
.drawer.abierto { transform: translateX(0); }
.drawer-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.drawer-cabeza h2 { margin: 0; font-size: 16px; }
.drawer-cuerpo { padding: 14px 16px 30px; overflow-y: auto; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.caja { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; background: var(--superficie-2); min-width: 0; }
.caja h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.caja .linea { font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--borde); overflow-wrap: anywhere; }
.caja .linea:last-child { border: 0; }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0; font-size: 13px; }
dl.datos dt { color: var(--texto-3); }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
textarea { width: 100%; min-height: 70px; border: 1px solid var(--borde); border-radius: 8px; padding: 8px; background: var(--superficie); resize: vertical; }
.modal { position: fixed; inset: 0; background: rgba(5,12,22,.5); z-index: 70; display: grid; place-items: center; padding: 16px; }
.modal-caja { background: var(--superficie); border-radius: 12px; padding: 18px; width: min(520px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.modal-caja h3 { margin: 0 0 10px; }
.modal-caja label { display: grid; gap: 4px; margin: 8px 0; font-size: 13px; font-weight: 600; }
.modal-caja input, .modal-caja select { padding: 8px; border: 1px solid var(--borde); border-radius: 7px; background: var(--superficie); }
.avisos { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 80; }
.aviso { background: var(--gris-o); color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--sombra); max-width: 420px; font-size: 13px;
  animation: entra var(--t) ease; border-left: 3px solid var(--oro); }
.aviso.mal { border-left-color: var(--rojo); }
.aviso { display: flex; align-items: center; gap: 10px; }
.aviso-accion { margin-left: auto; border: 1px solid #E6CF7A; background: transparent; color: #F2DE8F; font-weight: 700;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.aviso-accion:hover { background: rgba(230,207,122,.18); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
.alerta.rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }
.alerta.ambar { background: var(--amb-fondo); color: var(--amb-texto); }
.alerta b { white-space: nowrap; }
.vacio { padding: 40px; text-align: center; color: var(--texto-3); }
.cargando { opacity: .55; transition: opacity var(--t); }

@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rejilla { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .kpis { grid-template-columns: 1fr; } .barra { padding: 10px 16px; } .vista { padding: 16px; }
  .dos { grid-template-columns: 1fr; } .buscar { min-width: 0; width: 100%; margin-left: 0; }
  body.sb-modo-fija .contenido, body.sb-modo-compacta .contenido { margin-left: 0; }
  body.sb-modo-fija .sidebar, body.sb-modo-compacta .sidebar { transform: translateX(-100%); }
  body.sb-abierta .sidebar { transform: translateX(0) !important; width: var(--sb-ancho); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- marca LIDIAPP (logo de lido) y solicitud de acceso */
.marca-logo { width: 180px; height: auto; display: block; margin: 0 auto 6px; }
.marca-logo.chico { width: 110px; }
.enlace { background: none; border: 0; color: #1E3A5F; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 4px; }
.sb-logo-img { width: 44px; height: 30px; flex: none; background: #fff; border-radius: 7px; padding: 3px 4px; box-sizing: content-box; }
.insignia { margin-left: auto; background: var(--oro); color: #0F2137; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.casillas { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 500; }
.casillas label { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 500; }

/* --- tablero de conciliacion: matriz meses x bancos (lido, 12-oct-2026) */
:root { --mz-verde: #E4F2EA; --mz-verde-t: #1D6B45; --mz-amar: #FBF2D3; --mz-amar-t: #7A5A0B; --mz-rojo: #F8E3E1; --mz-rojo-t: #9A2B2B; --mz-gris: #F0F1F0; }
:root[data-theme="dark"] { --mz-verde: #16352A; --mz-verde-t: #8FD9B2; --mz-amar: #3A3112; --mz-amar-t: #F0D27A; --mz-rojo: #3D1D1D; --mz-rojo-t: #F2A8A8; --mz-gris: #1A2A38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mz-verde: #16352A; --mz-verde-t: #8FD9B2; --mz-amar: #3A3112; --mz-amar-t: #F0D27A; --mz-rojo: #3D1D1D; --mz-rojo-t: #F2A8A8; --mz-gris: #1A2A38; } }
table.mz { width: 100%; border-collapse: separate; border-spacing: 6px; font-size: 13px; }
table.mz thead th { background: var(--azul); color: #fff; border-radius: 8px; padding: 10px 12px; text-align: left; vertical-align: bottom;
  border-bottom: 3px solid var(--oro); position: sticky; top: 0; z-index: 1; }
.mz-banco { font-size: 11px; letter-spacing: .12em; color: var(--oro-2); font-weight: 700; }
.mz-cta { font-weight: 600; line-height: 1.25; }
.mz-cta span { font-weight: 400; color: var(--plata-c); font-size: 11.5px; }
th.mz-mes { width: 70px; text-align: left; color: var(--texto-2); font-weight: 700; background: none; }
table.mz thead th.mz-mes { background: var(--azul-p); color: var(--plata-c); }
td.mz-celda { border-radius: 8px; padding: 10px 12px; vertical-align: top; cursor: pointer; border: 1px solid transparent; transition: transform var(--t), box-shadow var(--t); min-width: 150px; }
td.mz-celda:hover, td.mz-celda:focus-visible { transform: translateY(-1px); box-shadow: var(--sombra); }
.mz-verde { background: linear-gradient(135deg, var(--mz-verde) 0%, color-mix(in srgb, var(--mz-verde) 45%, var(--superficie)) 100%); color: var(--mz-verde-t); border-color: color-mix(in srgb, var(--mz-verde-t) 18%, transparent) !important; }
.mz-amarillo { background: linear-gradient(135deg, var(--mz-amar) 0%, color-mix(in srgb, var(--mz-amar) 45%, var(--superficie)) 100%); color: var(--mz-amar-t); border-color: color-mix(in srgb, var(--mz-amar-t) 18%, transparent) !important; }
.mz-rojo { background: linear-gradient(135deg, var(--mz-rojo) 0%, color-mix(in srgb, var(--mz-rojo) 45%, var(--superficie)) 100%); color: var(--mz-rojo-t); border-color: color-mix(in srgb, var(--mz-rojo-t) 18%, transparent) !important; }
.mz-gris { background: var(--mz-gris); color: var(--texto-3); cursor: default !important; }
.mz-pct { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mz-falt { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.mz-cent, .mz-nota { font-size: 11.5px; opacity: .85; margin-top: 2px; }
.mz-leyenda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.mz-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.mz-resumen { margin-left: auto; color: var(--texto-3); font-size: 12.5px; }

/* matriz v2 (lido, 12-oct-2026): meses en columnas, bancos en filas, celdas chicas */
table.mz { border-spacing: 4px; table-layout: fixed; min-width: 860px; }
table.mz thead th { padding: 7px 4px; text-align: center; font-size: 12px; border-radius: 6px; border-bottom-width: 2px; }
table.mz thead th.mz-cab-banco { width: 210px; text-align: left; padding-left: 10px; background: var(--azul-p); color: var(--plata-c); }
th.mz-fila-banco { text-align: left; padding: 6px 10px; background: var(--superficie-2); border-radius: 6px; border-left: 3px solid var(--oro); }
th.mz-fila-banco .mz-banco { color: var(--azul); font-size: 10.5px; }
th.mz-fila-banco .mz-cta { font-size: 12.5px; color: var(--texto); }
th.mz-fila-banco .mz-cta span { color: var(--texto-3); font-size: 11px; }
td.mz-celda { min-width: 0; padding: 5px 2px; text-align: center; border-radius: 6px; height: 46px; vertical-align: middle; }
.mz-pct { font-size: 14px; line-height: 1.1; }
.mz-falt { font-size: 11px; margin-top: 1px; }
.mz-nota { font-size: 12px; }

/* matriz v3 (lido, 12-oct-2026): cada mes partido en Dep. (cobranza) y Sal. (gastos) */
td.mz-celda.mz-partida { padding: 0; height: auto; background: none; cursor: default; overflow: hidden; border: 1px solid var(--borde); }
td.mz-celda.mz-partida:hover { transform: none; box-shadow: none; }
td.mz-con-hueco { outline: 2px dashed var(--mz-amar-t); outline-offset: -2px; }
.mz-mitad { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px; padding: 4px 6px; cursor: pointer;
  transition: filter var(--t); }
.mz-mitad + .mz-mitad { border-top: 1px solid color-mix(in srgb, var(--texto) 22%, transparent); }
.mz-mitad:hover, .mz-mitad:focus-visible { filter: brightness(.96); }
.mz-et { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; opacity: .75; text-transform: uppercase; }
.mz-mitad .mz-pct { font-size: 12.5px; text-align: center; }
.mz-mitad .mz-falt { font-size: 10.5px; margin: 0; min-width: 18px; text-align: right; }
table.mz { min-width: 1180px; }
.mz-mitad { gap: 3px; padding: 4px 5px; }
.mz-mitad .mz-pct { font-size: 12px; }

/* circulito de empresa en la fila del banco (lido, 12-oct-2026): VM3 verde, DM3 amarillo, a la derecha */
th.mz-fila-banco { position: relative; padding-right: 46px; }
.emp-badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.emp-VM3 { background: #1F8A55; color: #fff; }
.emp-DM3 { background: #E9C23A; color: #3A2E05; }
.emp-badge:not(.emp-VM3):not(.emp-DM3) { background: var(--plata); color: #fff; }

/* matriz v4 (lido, 12-oct-2026): Dep. | Sal. lado a lado con linea VERTICAL, cada mitad rellena de su color */
td.mz-celda.mz-partida { padding: 0; height: 52px; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.mz-par { display: flex; height: 100%; min-height: 52px; }
.mz-par .mz-mitad { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px;
  padding: 3px 2px; min-width: 0; border-top: 0 !important; }
.mz-par .mz-mitad + .mz-mitad { border-left: 1px solid color-mix(in srgb, var(--texto) 28%, transparent); }
.mz-par .mz-et { font-size: 9px; }
.mz-par .mz-pct { font-size: 12px; font-weight: 700; }
.mz-par .mz-falt { font-size: 10px; min-width: 0; text-align: center; }
/* relleno solido (sin degradado que lo deslave) */
.mz-mitad.mz-verde { background: var(--mz-verde) !important; }
.mz-mitad.mz-amarillo { background: var(--mz-amar) !important; }
.mz-mitad.mz-rojo { background: var(--mz-rojo) !important; }
:root { --mz-verde: #D7EDDF; --mz-amar: #F8E9B5; --mz-rojo: #F4D3CF; }
table.mz { min-width: 1240px; }

/* KPIs chicos: los 8 en una franja */
.kpis.kpis-chicos { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.kpis-chicos .kpi { padding: 8px 10px; border-radius: 8px; }
.kpis-chicos .kpi .et { font-size: 10.5px; line-height: 1.2; }
.kpis-chicos .kpi .val { font-size: 15px; margin-top: 2px; }
.kpis-chicos .kpi .nota { font-size: 10.5px; line-height: 1.25; }
@media (max-width: 1300px) { .kpis.kpis-chicos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis.kpis-chicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* matriz v5 (lido, 12-oct-2026): "Dep. | Sal." una sola vez debajo del mes; cuadros mas chicos */
table.mz { min-width: 980px; border-spacing: 3px; }
table.mz thead th.mz-cab-mes { padding: 6px 2px 4px; }
.mz-sub { display: flex; margin-top: 3px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 2px; }
.mz-sub span { flex: 1; font-size: 9.5px; font-weight: 600; color: var(--plata-c); letter-spacing: .03em; }
.mz-sub span + span { border-left: 1px solid rgba(255,255,255,.25); }
td.mz-celda.mz-partida { height: 40px; }
.mz-par { min-height: 40px; }
.mz-par .mz-mitad { padding: 2px 1px; }
.mz-par .mz-pct { font-size: 11.5px; }
.mz-par .mz-falt { font-size: 10px; }
table.mz thead th.mz-cab-banco { width: 190px; }

/* matriz v6 (lido, 12-oct-2026): nombre en DOS renglones (estado de cuenta + circulito / plaza y cuenta) y cuadros angostos */
table.mz { min-width: 860px; border-spacing: 2px; }
table.mz thead th.mz-cab-banco { width: 170px; }
th.mz-fila-banco { padding: 4px 8px; }
.mz-l1 { display: flex; align-items: center; gap: 6px; }
.mz-n1 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; color: var(--azul); }
.mz-l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 500; color: var(--texto-3); margin-top: 1px; }
th.mz-fila-banco .emp-badge { position: static; transform: none; width: 24px; height: 24px; font-size: 8.5px; flex: none; }
td.mz-celda.mz-partida { height: 34px; }
.mz-par { min-height: 34px; }
.mz-par .mz-pct { font-size: 11px; }
.mz-par .mz-falt { font-size: 9.5px; }
table.mz thead th.mz-cab-mes { padding: 4px 1px 3px; font-size: 11.5px; }
.mz-sub span { font-size: 9px; }

/* dorado como acento (lido, 12-oct-2026: "casi no incluiste el dorado") */
:root { --txt-banco: #1F5486; --txt-libro: #85691A; }
:root[data-theme="dark"] { --txt-banco: #8DB6E0; --txt-libro: #D9BE6A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --txt-banco: #8DB6E0; --txt-libro: #D9BE6A; } }
.titulo h1 { display: flex; align-items: center; gap: 10px; }
.titulo-logo { width: 46px; height: auto; flex: none; }
.seccion { border-bottom: 2px solid var(--oro); padding-bottom: 4px; display: inline-block; color: var(--azul); }
.kpi { border-left: 4px solid var(--oro); }
.kpi .et { color: #8C7224; letter-spacing: .02em; }
.kpi .val { color: var(--azul); }
.kpi.destacado { border-top: 1px solid var(--borde); border-left-color: var(--oro-2); background: linear-gradient(90deg, color-mix(in srgb, var(--oro) 10%, var(--superficie)), var(--superficie) 60%); }
:root[data-theme="dark"] .kpi .et { color: var(--oro-2); }
:root[data-theme="dark"] .kpi .val { color: #E2E8F0; }
.btn-volver { margin: 0 0 10px; border-color: var(--oro); color: var(--azul); font-weight: 700; }
.btn-volver:hover { background: color-mix(in srgb, var(--oro) 14%, var(--superficie)); }
/* renglones de la tabla: texto azul = banco, dorado = libros (sin sombreado fuerte) */
table.t tbody tr.fila-banco td { color: var(--txt-banco); }
table.t tbody tr.fila-libro td { color: var(--txt-libro); }
table.t tbody tr.fila-banco td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--txt-banco) 55%, transparent); }
table.t tbody tr.fila-libro td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--oro) 70%, transparent); }
table.t tbody tr td .estado { color: inherit; }
table.t tbody tr td .e-conciliado, table.t tbody tr td .e-manual { color: var(--ok-texto); }
table.t tbody tr td .e-diferencia { color: var(--rojo-texto); }
table.t tbody tr td .e-pendiente, table.t tbody tr td .e-revision { color: var(--amb-texto); }

/* descripcion al poner el cursor sobre la barra azul (lido, 12-oct-2026) */
.sb-tip { position: fixed; z-index: 90; max-width: 260px; background: var(--superficie); color: var(--texto-2); border: 1px solid var(--borde);
  border-left: 3px solid var(--oro); border-radius: 8px; padding: 7px 10px; font-size: 11.5px; line-height: 1.35; box-shadow: var(--sombra);
  pointer-events: none; animation: entra 120ms ease; }
.sb-tip b { display: block; color: var(--azul); font-size: 12px; margin-bottom: 2px; }
.sb-tip::before { content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border: 6px solid transparent;
  border-right-color: var(--oro); border-left: 0; }

/* nombre de la marca: LidiAPP, con "APP" en dorado (lido, 12-oct-2026) */
.app-oro { color: #B8982F; }
.sidebar .app-oro, .sb-logo-txt .app-oro { color: var(--oro-2); }
.marca-nombre { letter-spacing: .04em; font-size: 26px; }
.sb-logo-txt b { letter-spacing: .04em; font-size: 14px; }

/* suma de lo seleccionado (lido, 12-oct-2026): banco, libros y diferencia, debajo del buscador */
.sel-tot { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.sel-tot .st { min-width: 150px; padding: 6px 10px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borde); display: grid; }
.sel-tot .st span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.sel-tot .st b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sel-tot .st small { font-size: 10.5px; color: var(--texto-3); }
.sel-tot .st-banco { border-left: 4px solid var(--txt-banco); } .sel-tot .st-banco b { color: var(--txt-banco); }
.sel-tot .st-libro { border-left: 4px solid var(--oro); } .sel-tot .st-libro b { color: var(--txt-libro); }
.sel-tot .st-dif { border-left: 4px solid var(--rojo); } .sel-tot .st-dif b { color: var(--rojo-texto); }
.sel-tot .st-ok { border-left: 4px solid var(--verde); } .sel-tot .st-ok b { color: var(--ok-texto); }

/* KPIs: los 8 en UNA linea (solo se parten en pantallas de menos de 1000 px) */
.kpis.kpis-chicos { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1300px) { .kpis.kpis-chicos { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .kpis.kpis-chicos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpis-chicos .kpi { padding: 7px 9px; }
.kpis-chicos .kpi .val { font-size: 14px; white-space: nowrap; }
.kpis-chicos .kpi .nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* (12-oct-2026) se probo KPIs todo dorados y a lido no le gusto: se quito. Version con la prueba: app.css v13 */

/* Detalle: barra en 3 renglones (lido, 12-oct-2026) */
.tabla-herr.th3 { display: grid; gap: 8px; }
.th-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.th-fila.th-der { justify-content: flex-end; }
.chips-der, .acciones-der { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.th3 .buscar { margin-left: 0; flex: 0 1 420px; min-width: 220px; }
.pestanas.cuadritos { gap: 6px; }
.pestanas.cuadritos .pestana { border: 1px solid var(--borde); background: var(--superficie); border-radius: 8px; padding: 6px 10px; }
.pestanas.cuadritos .pestana[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: inset 0 -2px 0 var(--oro); }
.th3 .sel-tot { border: 1px solid var(--borde); border-radius: 10px; padding: 6px; gap: 6px; background: var(--superficie-2); }
.th3 .sel-tot::before { content: "Selección"; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding: 0 2px; }
.th3 .sel-tot .st { min-width: 135px; }
/* pista para conciliar a mano */
.pista { margin-top: 3px; font-size: 11px; color: var(--azul); font-weight: 600; white-space: normal; max-width: 300px; }
/* circulitos: VM3 azul marino, DM3 dorado (lido, 12-oct-2026) */
.emp-VM3 { background: #1B4158 !important; color: #fff !important; }
.emp-DM3 { background: #C9AE4E !important; color: #1B2A14 !important; }

/* semaforo CALIDO de 4 niveles (lido, 12-oct-2026): verde, amarillo, naranja, rojo. Version anterior: app.css v15 */
:root { --mz-verde: #DDEBC4; --mz-verde-t: #4A6614; --mz-amar: #FAEDB3; --mz-amar-t: #7A5800; --mz-nar: #F9D6AE; --mz-nar-t: #8C4209;
        --mz-rojo: #F3C3B8; --mz-rojo-t: #8C2214; }
:root[data-theme="dark"] { --mz-verde: #2F3A17; --mz-verde-t: #C9DE8F; --mz-amar: #3D3412; --mz-amar-t: #F2D670; --mz-nar: #42290F; --mz-nar-t: #F5B676;
        --mz-rojo: #431B14; --mz-rojo-t: #F2A291; }
.mz-verde { color: var(--mz-verde-t); } .mz-amarillo { color: var(--mz-amar-t); } .mz-rojo { color: var(--mz-rojo-t); }
.mz-naranja { background: var(--mz-nar); color: var(--mz-nar-t); border-color: color-mix(in srgb, var(--mz-nar-t) 18%, transparent) !important; }
.mz-mitad.mz-naranja { background: var(--mz-nar) !important; }
.mz-chip.mz-verde { background: var(--mz-verde); } .mz-chip.mz-amarillo { background: var(--mz-amar); }
.mz-chip.mz-naranja { background: var(--mz-nar); } .mz-chip.mz-rojo { background: var(--mz-rojo); }

/* barra de arriba (lido, 12-oct-2026): titulo arriba de los filtros, fondo azul marino con el logo
   repetido en chiquito como textura tenue (marca de agua). Version anterior: app.css v17 */
.barra { background: linear-gradient(180deg, #1B4158 0%, #163A50 100%); color: #fff; border-bottom: 3px solid var(--oro);
  backdrop-filter: none; position: sticky; overflow: hidden; }
.barra::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("logo.svg"); background-size: 46px 29px; background-repeat: repeat; background-position: 0 0;
  filter: grayscale(.2) brightness(1.6); }
.barra > * { position: relative; }
.barra-titulo { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.barra-logo { width: 46px; height: auto; background: #fff; border-radius: 8px; padding: 3px 5px; box-sizing: content-box; }
.barra-titulo h1 { margin: 0; font-size: 19px; color: #fff; letter-spacing: .01em; }
.barra-sub { margin-left: auto; color: var(--plata-c); font-size: 12.5px; }
.barra .filtros label { color: var(--oro-2); }
.barra .filtros select { background: #fff; color: #1F2937; border-color: rgba(255,255,255,.35); }
.barra .acciones .btn { background: rgba(255,255,255,.95); color: #1B4158; border-color: transparent; }
.barra .acciones .btn-oro { background: var(--oro); color: #1B2A14; box-shadow: none; }
.barra .acciones .btn-oro:hover { background: var(--oro-2); }
.barra .btn-icono { color: #fff; }
.titulo { display: none; }          /* el titulo ya va en la barra */
.vista { padding-top: 14px; }

/* barra de arriba en GRIS (lido, 12-oct-2026: "me gustaria mas en gris"), mismo formato con la textura de logos.
   Gris plata oscuro para que el titulo blanco y las etiquetas doradas se lean. Version azul marino: app.css v18 */
.barra { background: linear-gradient(180deg, #6E716D 0%, #565955 100%); border-bottom: 3px solid var(--oro); }
.barra::before { opacity: .09; filter: grayscale(1) brightness(2); }
.barra .filtros label { color: #EED98A; }
.barra-sub { color: #E4E5E2; }
.barra .acciones .btn { color: #3F423E; }

/* barra de arriba v3 (lido, 12-oct-2026): "el gris debe ser el mismo que usas en el tablero y en toda la
   pantalla", con el logo en chiquito. Gris de la pantalla apenas mas oscuro para que se distinga.
   Versiones anteriores: azul marino = app.css v18, gris oscuro = app.css v19 */
.barra { background: linear-gradient(180deg, #ECEDEA 0%, #E3E4E1 100%); color: var(--texto); border-bottom: 3px solid var(--oro); }
.barra::before { opacity: .11; filter: none; }
.barra-titulo h1 { color: #1B4158; }
.barra-sub { color: #5C605B; }
.barra-logo { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.barra .filtros label { color: #765F1A; }
.barra .filtros select { background: #fff; color: #1F2937; border-color: #CFD1CC; }
.barra .acciones .btn { background: #fff; color: #1B4158; border-color: #CFD1CC; }
.barra .acciones .btn:hover { border-color: var(--oro); }
.barra .acciones .btn-oro { background: #1B4158; color: #fff; border-color: #1B4158; box-shadow: inset 0 -2px 0 var(--oro); }
.barra .acciones .btn-oro:hover { background: #244E6E; }
.barra .btn-icono { color: #1B4158; }
:root[data-theme="dark"] .barra { background: linear-gradient(180deg, #1A2B3A 0%, #15242F 100%); }
:root[data-theme="dark"] .barra-titulo h1 { color: #E2E8F0; }
:root[data-theme="dark"] .barra .filtros label { color: var(--oro-2); }

/* barra v4: "impactante pero elegante" (lido, 12-oct-2026). Franja azul marino arriba + linea dorada abajo,
   textura de logos que se desvanece hacia la izquierda (no estorba al titulo ni a los filtros), titulo con sello dorado */
.barra { border-top: 5px solid #1B4158; box-shadow: 0 6px 18px rgba(27,65,88,.10); }
.barra::before { opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%); }
.barra-titulo { padding-bottom: 2px; }
.barra-titulo h1 { font-size: 22px; font-weight: 800; letter-spacing: -.005em; position: relative; padding-bottom: 6px; }
.barra-titulo h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--oro) 0%, var(--oro-2) 100%); }
.barra-logo { width: 52px; border: 1px solid #DCDDDA; }

/* barra v5 (lido, 12-oct-2026): "dejalo en blanco como estaba al inicio, se veia mas profesional".
   Se queda SOLO el titulo arriba con el logo; fuera el gris, la textura de logos, la franja y el sello.
   Propuestas anteriores guardadas: azul marino v18, gris oscuro v19, gris claro con logos v20 */
.barra { background: color-mix(in srgb, var(--superficie) 94%, transparent); backdrop-filter: blur(8px); color: var(--texto);
  border-top: 0; border-bottom: 1px solid var(--borde); box-shadow: none; }
.barra::before { display: none; }
.barra-titulo { padding-bottom: 0; }
.barra-titulo h1 { color: var(--azul); font-size: 20px; font-weight: 700; padding-bottom: 0; }
.barra-titulo h1::after { display: none; }
.barra-sub { color: var(--texto-3); }
.barra-logo { width: 46px; background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.barra .filtros label { color: var(--texto-3); }
.barra .filtros select { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.barra .acciones .btn { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.barra .acciones .btn:hover { border-color: var(--gris-m); }
.barra .acciones .btn-oro { background: var(--azul); color: #fff; border-color: var(--azul); box-shadow: inset 0 -2px 0 var(--oro); }
.barra .acciones .btn-oro:hover { background: #244E6E; }
.barra .btn-icono { color: inherit; }
:root[data-theme="dark"] .barra { background: color-mix(in srgb, var(--superficie) 94%, transparent); }
:root[data-theme="dark"] .barra-titulo h1 { color: var(--texto); }
:root[data-theme="dark"] .barra .filtros label { color: var(--texto-3); }

/* Configuracion > Empresas, bancos y cuentas (12-oct-2026) */
.cf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cf-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--texto-2); }
.cf-form .cf-ancho { grid-column: 1 / -1; }
.cf-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cf-prueba { margin: 8px 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie-2); font-size: 12.5px; line-height: 1.5; }
.cf-prueba.ok { border-color: #2E7D4F; background: rgba(46,125,79,.08); }
.cf-prueba.mal { border-color: #B4532A; background: rgba(180,83,42,.08); }
.cf-num { width: 96px; text-align: right; }
tr.cf-baja td { opacity: .55; }
#f-dia:disabled { opacity: .55; }
@media (max-width: 640px) { .cf-form { grid-template-columns: 1fr; } }

/* Poliza de comisiones para el ERP (12-oct-2026) */
.modal-caja.modal-ancho { width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.pz-bloque { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--superficie); }
.pz-bloque.pz-vacio { opacity: .8; }
.pz-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pz-reg { display: inline-block; margin: 2px 0 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; background: rgba(46,125,79,.12); color: var(--ok-texto); }
.pz-tabla td, .pz-tabla th { white-space: nowrap; }
.pz-tabla tfoot td { border-top: 2px solid var(--oro); }
.pz-nom { font-size: 11px; color: var(--texto-3); }
.pz-movs { max-height: 260px; overflow: auto; margin-top: 6px; }

/* casilla Todos del Detalle (12-oct-2026) */
.th-sel { white-space: nowrap; }
.sel-todos { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }

/* aviso de version nueva y version en la barra lateral (12-oct-2026) */
.aviso-version { position: sticky; top: 0; z-index: 60; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 16px; background: #FFF6D6; border-bottom: 2px solid var(--oro); color: #3B3220; font-size: 13px; }
:root[data-theme="dark"] .aviso-version { background: #3A3320; color: #F5EBC8; }
.sb-version { padding: 4px 14px 0; font-size: 10.5px; color: rgba(255,255,255,.55); }

/* parejas sugeridas (12-oct-2026) */
.pz-par .pestana-par { border-style: dashed; }
.pz-par .pestana-par[aria-selected="true"] { border-style: solid; background: var(--oro); border-color: var(--oro); color: #1B2A14; }
.t-par td.concepto { max-width: 260px; }

/* ===== Detalle en dos lados: BANCO | CONTABILIDAD (13-oct-2026) ===== */
.vista-switch { display: inline-flex; border: 1px solid var(--borde); border-radius: 9px; overflow: hidden; }
.vista-switch button { border: 0; background: var(--superficie); padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.vista-switch button[aria-pressed="true"] { background: var(--azul); color: #fff; box-shadow: inset 0 -2px 0 var(--oro); }
.dv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 12px; }
.dv-col { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: var(--superficie); display: flex; flex-direction: column; min-width: 0; }
.dv-cab { padding: 12px 14px 10px; color: #fff; }
.dv-banco .dv-cab { background: linear-gradient(135deg, #1B4158 0%, #2A5675 100%); }
.dv-libro .dv-cab { background: linear-gradient(135deg, #B8993A 0%, #D4BD5F 100%); color: #1B2A14; }
.dv-tit { display: flex; align-items: baseline; gap: 10px; }
.dv-tit span { font-size: 17px; font-weight: 800; letter-spacing: .12em; }
.dv-tit small { font-size: 12px; opacity: .8; }
.dv-cifras { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.dv-cifras div { display: flex; flex-direction: column; }
.dv-cifras b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dv-cifras small { font-size: 10.5px; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }
.dv-cifras .dv-si b { color: #7CE3A6; }
.dv-cifras .dv-no b { color: #FFB4A8; }
.dv-libro .dv-cifras .dv-si b { color: #10633A; }
.dv-libro .dv-cifras .dv-no b { color: #9E1F1F; }
.dv-barra { height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); margin-top: 9px; overflow: hidden; }
.dv-barra i { display: block; height: 100%; background: #2FBF71; border-radius: 3px; }
.dv-libro .dv-barra { background: rgba(27,42,20,.18); }
.dv-todos { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.dv-lista { max-height: 64vh; overflow: auto; }
.dv-fila { display: grid; grid-template-columns: auto 12px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 12px;
  border-bottom: 1px solid var(--borde); font-size: 12.5px; cursor: pointer; transition: background .12s; }
.dv-col:not(:has(input[data-selec])) .dv-fila { grid-template-columns: 12px 44px minmax(0, 1fr) auto; }
.dv-banco .dv-fila { border-left: 3px solid #1B4158; }
.dv-libro .dv-fila { border-left: 3px solid #C9AE4E; }
.dv-fila:nth-child(even) { background: var(--superficie-2); }
.dv-fila:hover { background: #EEF4FA; }
.dv-libro .dv-fila:hover { background: #FBF5E1; }
.dv-fila.sel { background: #FFF3C4 !important; }
.dv-fila.vinculo { background: #E3F6EA !important; box-shadow: inset 0 0 0 2px #2E9E5B; }
.dv-punto { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dv-punto.si { background: #22A060; box-shadow: 0 0 0 3px rgba(34,160,96,.18); }
.dv-punto.no { background: #D93A2B; box-shadow: 0 0 0 3px rgba(217,58,43,.18); }
.dv-fecha { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.dv-concepto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.dv-concepto em { display: block; font-style: normal; font-size: 11px; color: var(--azul); white-space: normal; }
.dv-imp { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.dv-imp.neg { color: #B42318; }
.dv-imp.pos { color: #0F6E3F; }
.dv-nota { padding: 0 14px 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
:root[data-theme="dark"] .dv-fila:hover, :root[data-theme="dark"] .dv-libro .dv-fila:hover { background: #1E3448; }
:root[data-theme="dark"] .dv-fila.sel { background: #3A3320 !important; }
:root[data-theme="dark"] .dv-fila.vinculo { background: #12352A !important; }
:root[data-theme="dark"] .dv-imp.neg { color: #FCA5A5; }
:root[data-theme="dark"] .dv-imp.pos { color: #86EFAC; }
@media (max-width: 900px) { .dv { grid-template-columns: 1fr; } .dv-lista { max-height: none; } }

/* totales de TODO lo filtrado, junto al recuadro de seleccion (13-oct-2026) */
.th3 .sel-tot.tot-todo { background: var(--superficie); border-color: var(--azul-2); }
.th3 .sel-tot.tot-todo::before { content: "Todo"; color: var(--azul); }
.th-fila.th-der { gap: 10px; flex-wrap: wrap; }

/* ===== Detalle Banco | Contabilidad v2 (13-oct-2026): compacto, cargo/abono en negro, sugeridos ===== */
.detalle-compacto .tabla-herr.th3 { gap: 6px; padding: 8px 10px; }
.detalle-compacto .th-fila { gap: 6px; }
.detalle-compacto .pestanas.cuadritos .pestana { padding: 3px 8px; font-size: 12px; }
.detalle-compacto .pestanas.cuadritos .pestana small { font-size: 10.5px; }
.detalle-compacto .buscar { flex: 1 1 200px; min-width: 160px; padding: 6px 9px; font-size: 12.5px; }
.detalle-compacto .btn { padding: 6px 10px; font-size: 12.5px; }
.detalle-compacto .vista-switch button { padding: 5px 9px; font-size: 12px; }
.detalle-compacto .sel-tot { padding: 3px 5px; gap: 4px; }
.detalle-compacto .sel-tot .st { min-width: 104px; padding: 2px 7px; }
.detalle-compacto .sel-tot .st span { font-size: 9.5px; }
.detalle-compacto .sel-tot .st b { font-size: 13px; }
.detalle-compacto .sel-tot .st small { font-size: 9.5px; }
.btn.btn-tablero { background: var(--oro); border-color: var(--oro); color: #1B2A14; font-weight: 700; }
.btn.btn-tablero:hover { background: var(--oro-2); }
body.modo-detalle .barra { padding-top: 6px; padding-bottom: 6px; }
body.modo-detalle .barra-titulo h1 { font-size: 16px; }
body.modo-detalle .barra-logo { width: 34px; }
body.modo-detalle .barra .filtros label { font-size: 10.5px; }
body.modo-detalle .barra .filtros select { padding: 4px 6px; font-size: 12.5px; }
body.modo-detalle .barra .acciones .btn { padding: 5px 9px; font-size: 12px; }
body.modo-detalle .vista { padding-top: 6px; }
/* columnas: banco azul (igual) y contabilidad en tono suave, ya no oro fuerte */
.dv { gap: 10px; padding: 8px; }
.dv-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 7px 12px; position: relative; }
.dv-libro .dv-cab { background: linear-gradient(135deg, #EEE7D2 0%, #E4DCC6 100%); color: #2D2A22; border-bottom: 2px solid #C9AE4E; }
.dv-tit { font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.dv-dato { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.dv-dato b { font-variant-numeric: tabular-nums; }
.dv-orden { margin-left: auto; display: inline-flex; border-radius: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.4); }
.dv-libro .dv-orden { border-color: rgba(45,42,34,.25); }
.dv-orden button { border: 0; background: transparent; color: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer; opacity: .75; }
.dv-orden button[aria-pressed="true"] { background: rgba(255,255,255,.22); opacity: 1; font-weight: 700; }
.dv-libro .dv-orden button[aria-pressed="true"] { background: rgba(45,42,34,.12); }
.dv-cab .dv-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0; margin: 0; background: rgba(255,255,255,.18); }
.dv-libro .dv-cab .dv-barra { background: rgba(45,42,34,.08); }
.dv-cab .dv-barra i { display: block; height: 100%; background: #2FBF71; }
.dv-encab, .dv-fila { display: grid; grid-template-columns: 18px 12px 40px minmax(0, 1fr) 92px 92px; gap: 6px; align-items: center; }
.dv-encab { padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.dv-encab span:nth-child(5), .dv-encab span:nth-child(6) { text-align: right; text-transform: none; }
.dv-fila { padding: 4px 10px; font-size: 12px; }
.dv-libro .dv-fila { border-left-color: #D8CBA0; }
.dv-lista { max-height: none; overflow: visible; }            /* las dos listas bajan JUNTAS con la pagina */
.dv-imp { color: var(--texto); font-weight: 600; }
.dv-fila.con-sug .dv-punto.no { box-shadow: 0 0 0 3px rgba(201,174,78,.55); }
.dv-fila.sugerido { background: #FFF4CC !important; box-shadow: inset 0 0 0 2px #C9AE4E; }
:root[data-theme="dark"] .dv-fila.sugerido { background: #3A3320 !important; }
/* sugerido con diferencia grande: solo aviso (punteado, sin relleno fuerte); no se concilia con doble clic */
/* lido, 13-oct-2026: el sugerido que NO se puede conciliar (diferencia grande, p. ej. 3,693.04 contra 3,639.04) va en ROJO */
.dv-fila.sugerido-solo { background: #FEE4E2 !important; box-shadow: inset 0 0 0 2px #D92D20; cursor: help; }
.dv-fila.con-sug.sug-solo .dv-punto.no { box-shadow: 0 0 0 3px rgba(217,45,32,.45); }
:root[data-theme="dark"] .dv-fila.sugerido-solo { background: #3B1F1F !important; }
/* "Deshacer la ultima" debajo de "Conciliar seleccionados" */
.col-manual { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.btn-deshacer { font-size: 12px; padding: 4px 10px; background: #fff; border: 1px solid #D3D8DF; color: #3D4A5C; white-space: nowrap; }
.btn-deshacer:hover { border-color: #9AA4B2; background: #F6F7F9; }
:root[data-theme="dark"] .btn-deshacer { background: #132433; color: #D9E2EC; border-color: #2A3D4E; }
:root[data-theme="dark"] .dv-libro .dv-cab { background: linear-gradient(135deg, #2B2A24 0%, #24231E 100%); color: #EDE6CF; }
.dv-marca { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #D93A2B; box-shadow: 0 0 0 3px rgba(201,174,78,.55); }
.dv-nota { padding: 0 10px 8px; font-size: 11.5px; }

.dv-col:not(:has(input[data-selec])) .dv-fila { grid-template-columns: 18px 12px 40px minmax(0, 1fr) 92px 92px; }

/* mes en revision (el ultimo mes cerrado) en dorado en el tablero (13-oct-2026): solo el nombre */
.mz-mes-nom.mz-en-revision { background: var(--oro); color: #1B2A14; border-radius: 6px; padding: 1px 8px; font-weight: 800; }

/* ===== Tablero con profundidad (lido, 13-oct-2026: "sombras, contorno dorado, mas 3D... impactante y profesional") ===== */
/* KPIs: tarjeta con relieve, linea dorada arriba, sombra en capas y el valor en azul marino */
.kpis-chicos .kpi { position: relative; overflow: hidden; border: 1px solid #E3E1D6;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.08), 0 8px 18px -8px rgba(27,65,88,.35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kpis-chicos .kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #A8892F, #E6CF7A 50%, #A8892F); }
.kpis-chicos .kpi:hover { transform: translateY(-2px); border-color: #D9C27A;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(16,24,40,.08), 0 14px 26px -10px rgba(27,65,88,.45); }
.kpis-chicos .kpi .val { color: #12304A; font-weight: 800; }
.kpis-chicos .kpi .et { color: #5B6578; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
/* titulos de seccion con su rayita dorada */
.seccion { display: flex; align-items: center; gap: 8px; color: #3D4A5C; }
.seccion::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #A8892F, #E6CF7A); }
/* la matriz: contorno dorado, sombra y encabezado con relieve */
.tabla-caja:has(table.mz) { border: 1px solid #D3D8DF; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 6px 14px -6px rgba(16,24,40,.20), 0 24px 46px -18px rgba(16,24,40,.42); }
table.mz thead th { background: linear-gradient(180deg, #24506C 0%, #1B4158 55%, #163750 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.25); }
table.mz thead th.mz-cab-banco { background: linear-gradient(180deg, #1A3A52 0%, #12304A 100%); }
table.mz thead .mz-sub span { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .02em; color: #E9EEF4 !important; opacity: 1 !important; }
/* mes en revision: dorado CLARO con letra azul marino (el dorado oscuro sobre azul se veia apagado) */
table.mz thead th.mz-th-revision { background: linear-gradient(180deg, #FBF0C4 0%, #F1DC8C 60%, #E3C766 100%) !important;
  color: #12304A !important; box-shadow: inset 0 1px 0 #fff; }
table.mz thead th.mz-th-revision .mz-mes-nom.mz-en-revision { background: transparent; color: #12304A; padding: 0; font-weight: 900; }
table.mz thead th.mz-th-revision .mz-sub span { color: #12304A !important; }
/* nombre del banco con un poco de relieve */
table.mz th.mz-fila-banco { background: linear-gradient(90deg, #FFFFFF 0%, #F4F6F9 100%); box-shadow: inset -1px 0 0 #E5E7EB; }
table.mz tr:hover th.mz-fila-banco { box-shadow: inset 3px 0 0 #9AA4B2, inset -1px 0 0 #E5E7EB; }
.mz-chip-hueco { outline: 2px dashed var(--mz-amar-t); outline-offset: -2px; background: transparent; }
/* cada celda como una teclita: brillo arriba, sombra abajo; al pasar el cursor se levanta */
.mz-par { border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 3px 8px -4px rgba(16,24,40,.25); transition: transform .12s ease, box-shadow .12s ease; }
.mz-par .mz-mitad { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.07); }
.mz-celda:hover .mz-par { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16,24,40,.12), 0 8px 14px -6px rgba(16,24,40,.35); }
.mz-par .mz-imp { font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
/* selector importe / % */
.mz-ver { display: inline-flex; border: 1px solid #D3D8DF; border-radius: 8px; overflow: hidden; margin-right: 6px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.mz-ver button { border: 0; background: #fff; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #3D4A5C; cursor: pointer; }
.mz-ver button[aria-pressed="true"] { background: linear-gradient(180deg, #24506C, #1B4158); color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
:root[data-theme="dark"] .kpis-chicos .kpi { background: linear-gradient(180deg, #17293A 0%, #132433 100%); border-color: #2A3D4E; }
:root[data-theme="dark"] .kpis-chicos .kpi .val { color: #F2DE8F; }
:root[data-theme="dark"] table.mz th.mz-fila-banco { background: linear-gradient(90deg, #17293A 0%, #132433 100%); }
:root[data-theme="dark"] .mz-ver button { background: #132433; color: #D9E2EC; }
.btn-deshacer:disabled { opacity: .55; cursor: default; }

/* ===== Usuarios: que puede hacer cada rol (lido, 13-oct-2026) ===== */
.roles-tabla th.rol-col, .roles-tabla td.rol-col { text-align: center; width: 90px; text-transform: capitalize; }
.roles-tabla .rol-si { color: #157F3B; font-weight: 800; }
.roles-tabla .rol-no { color: #9AA4B2; }
.roles-desc { margin: 8px 2px 4px; font-size: 13px; line-height: 1.45; }
.roles-desc p { margin: 4px 0; }
.rol-ayuda { margin: -2px 0 6px; font-size: 12.5px; }
/* ===== Polizas de comisiones: un marco por poliza (lido: "no se distingue donde termina una y empieza otra") ===== */
.pz-bloque { border: 1.5px solid #B8C0CC; border-left: 5px solid #1B4158; border-radius: 12px; padding: 0 14px 12px; margin: 18px 0;
  background: var(--superficie); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 8px 18px -10px rgba(16,24,40,.30); overflow: hidden; }
.pz-bloque .pz-tit { margin: 0 -14px 10px; padding: 9px 14px; background: linear-gradient(180deg, #F4F6F9, #EBEEF2); border-bottom: 1px solid #D3D8DF; }
.pz-bloque.pz-vacio { opacity: 1; border-left-color: #9AA4B2; }
.pz-bloque.pz-vacio .pz-tit { background: #F6F7F9; }
:root[data-theme="dark"] .pz-bloque { border-color: #2A3D4E; border-left-color: #7FA6C4; }
:root[data-theme="dark"] .pz-bloque .pz-tit { background: #17293A; border-bottom-color: #2A3D4E; }

/* Contabilidad: columna del numero de poliza despues de la fecha (lido, 13-oct-2026) */
.dv-libro .dv-encab, .dv-libro .dv-fila { grid-template-columns: 18px 12px 40px 74px minmax(0, 1fr) 92px 92px; }
.dv-col.dv-libro:not(:has(input[data-selec])) .dv-fila { grid-template-columns: 18px 12px 40px 74px minmax(0, 1fr) 92px 92px; }
.dv-pol { display: grid; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dv-pol b { font-size: 12.5px; color: #12304A; }
.dv-pol small { font-size: 10px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .dv-pol b { color: #F2DE8F; }

/* boton "Tablero principal" en la barra de arriba, en todas las pantallas (lido, 13-oct-2026) */
/* lido, 13-oct-2026: "ponmelo en dorado" (en todos los temas) */
.btn-principal { font-weight: 700; border: 1.5px solid var(--oro) !important; color: #1B2A14 !important; background: var(--oro) !important; }
.btn-principal:hover { background: var(--oro-2) !important; border-color: var(--oro-2) !important; }
:root[data-theme="dark"] .btn-principal { background: var(--oro) !important; color: #1B2A14 !important; border-color: var(--oro) !important; }
.btn-principal[hidden] { display: none !important; }
/* barra lateral: los iconos en dorado clarito, la letra se queda blanca (lido, 13-oct-2026) */
.sb-item svg, .sb-sub svg { color: #F2DE8F; }
.sb-item > a:hover svg, .sb-item > button:hover svg, .sb-item.activo > a svg { color: #FBE9A6; }

/* ===== Modulo auditoria (lido, 13-oct-2026) ===== */
.aud-grav { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.aud-alta { background: #FEE4E2; color: #B42318; }
.aud-media { background: #FEF0C7; color: #93370D; }
.aud-baja { background: #EEF1F5; color: #3D4A5C; }
.aud-tabla tbody tr { cursor: pointer; }
.aud-det { max-width: 420px; font-size: 12.5px; line-height: 1.35; }
.aud-hacer { margin-top: 3px; font-weight: 700; color: #1B4158; }
.aud-aviso { color: #B42318; }
:root[data-theme="dark"] .aud-hacer { color: #F2DE8F; }

/* lido, 13-oct-2026: renglon 1 = los 8 filtros (Empresa, Sucursal, Banco, Cuenta, Movimientos, Ano, Mes, Dia);
   renglon 2 = los botones, con "Tablero principal" a la izquierda, donde antes se bajaba Movimientos */
.barra .filtros { flex: 1 0 100%; flex-wrap: nowrap; }
.barra .filtros label { flex: 0 1 auto; min-width: 0; max-width: 220px; }
.barra .filtros select { max-width: 100%; }
.barra .acciones { flex: 1 0 100%; }
@media (max-width: 900px) { .barra .filtros { flex-wrap: wrap; } }

/* lido, 13-oct-2026 (noche): botones SIEMPRE a la derecha; en el tablero, a la izquierda del mismo renglon, el titulo
   "Bancos y conciliacion" (antes ocupaba su propio renglon abajo); la leyenda del tablero en un solo renglon */
.barra .acciones { justify-content: flex-end; align-items: center; }
.barra .acciones > .acciones-izq { margin-right: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.barra .acciones .barra-seccion { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: inherit; border-bottom: 2px solid var(--oro); padding-bottom: 3px; line-height: 1.3; }
.barra-seccion[hidden] { display: none !important; }
.mz-leyenda { flex-wrap: nowrap; gap: 6px; }
.mz-leyenda > * { flex: 0 0 auto; }
.mz-leyenda .mz-chip { white-space: nowrap; }
.mz-leyenda .mz-resumen { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .mz-leyenda { flex-wrap: wrap; } .mz-leyenda .mz-resumen { white-space: normal; } }
.mz-chip .mz-cuenta { margin-left: 4px; font-weight: 800; }

/* lido, 13-oct-2026 (noche): en el Detalle las pestanas, parejas y chips en el renglon de los botones, compactas */
.barra-herr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.barra-herr[hidden] { display: none !important; }
.barra-herr .pestanas.cuadritos { gap: 4px; flex-wrap: nowrap; }
.barra-herr .pestanas.cuadritos .pestana { padding: 4px 8px; font-size: 12px; }
.barra-herr .chips-der { margin-left: 0; }
/* tablero: un espacio chico entre los KPIs y la leyenda; renglones de bancos mas bajos */
.kpis + .mz-leyenda { margin-top: 8px; }
td.mz-celda { height: 40px; }
td.mz-celda.mz-partida { height: 40px; }
.mz-par { min-height: 40px; }
.mz-par .mz-mitad { padding: 2px 2px; }
th.mz-fila-banco { padding-top: 2px; padding-bottom: 2px; }

/* Detalle (medido a 1366 px): pestanas y botones un poco mas compactos para caber en un renglon; chips junto al titulo */
.barra-herr .pestanas.cuadritos { gap: 3px; }
.barra-herr .pestanas.cuadritos .pestana { padding: 4px 6px; }
.barra-herr .pestana small { margin-left: 3px; }
body.modo-detalle .barra .acciones .btn { padding-left: 7px; padding-right: 7px; }
.barra-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 8px; min-width: 0; }
.barra-chips[hidden] { display: none !important; }
.barra-chips .chips-der { margin-left: 0; }
.barra-chips .chip { padding: 1px 9px; font-size: 11.5px; line-height: 1.5; }

/* tercera tanda (13-oct, noche): columna del banco con espacio para el nombre completo y la cuenta contable abajito */
table.mz thead th.mz-cab-banco { width: 200px; }
th.mz-fila-banco .mz-l2 { font-size: 10px; line-height: 1.1; margin-top: 1px; }
/* Detalle: un espacio chico entre "Tablero principal" y las pestanas */
.barra .acciones-izq > .barra-herr { margin-left: 8px; }
/* Detalle (lido, 13-oct-2026, noche): "trato de tener mas grande el listado". Debajo de la barra, UN solo renglon:
   TODO a la izquierda y SELECCION a la derecha, a su tamano de siempre. Buscar va en la barra junto a Manuales y los
   botones de seleccion en el lugar de Actualizar / Exportar, que suben al renglon del titulo. Si no cabe, baja completo. */
.th-fila.det-uno { flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.det-uno #sel-tot { margin-left: auto; }
.det-uno .sel-tot { flex-wrap: nowrap; align-items: center; }
.det-uno .sel-tot::before { writing-mode: horizontal-tb; transform: none; margin-right: 2px; }
.barra-titulo > .acciones.barra-acc-arriba { flex: 0 0 auto; margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.barra-titulo > .acciones.barra-acc-arriba { max-width: 100%; }
@media (max-width: 1200px) { body.modo-detalle .barra .filtros { flex-wrap: wrap; } }
@media (max-width: 900px) { .barra-titulo > .acciones.barra-acc-arriba { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; } }
.barra-acc-arriba[hidden], .barra-sel[hidden] { display: none !important; }
.barra .acciones > .barra-sel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
body.modo-detalle .barra .acciones > .acciones-izq { flex: 1 1 auto; }
.barra-herr { flex: 1 1 auto; }
.barra-herr .buscar { flex: 1 1 220px; min-width: 150px; max-width: 420px; margin-left: 4px; padding: 5px 9px; font-size: 12.5px; }
@media (max-width: 900px) {
  .det-uno #sel-tot { margin-left: 0; }
  .det-uno .sel-tot { flex-wrap: wrap; }
  .det-uno .sel-tot .st { min-width: 104px; flex: 1 1 104px; }
  .barra-herr .pestanas.cuadritos { flex-wrap: wrap; }
  .barra-herr .buscar { flex: 1 1 100%; max-width: none; margin-left: 0; }
}
/* encabezado de Contabilidad: el mismo mostaza del boton "Tablero principal" (lido: "lo dejaste muy amarillo") */
.dv-libro .dv-cab { background: var(--oro); color: #1B2A14; border-bottom: 2px solid #B8993A; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
/* sin el texto gris del titulo ("los filtros ya se ven"); los chips pegaditos arriba de "Actualizar conciliacion" */
body.modo-detalle #h-sub { display: none; }
.barra .filtros > .barra-chips { margin-left: auto; align-self: flex-end; flex-wrap: nowrap; }
.barra .filtros > .barra-chips .chips-der { flex-wrap: nowrap; }
.barra-chips .chip { padding: 1px 9px; font-size: 11.5px; line-height: 1.5; white-space: nowrap; }
/* pantalla grande: sin el tope de 1600 px y con la misma sangria a los dos lados */
@media (min-width: 900px) {
  body.modo-detalle .vista { max-width: none; padding-left: clamp(32px, 2.6vw, 56px); padding-right: clamp(32px, 2.6vw, 56px); }
  body.modo-detalle .barra { padding-left: clamp(32px, 2.6vw, 56px); padding-right: clamp(32px, 2.6vw, 56px); }
}
/* tablero: la leyenda en un renglon; si de plano no cabe, el texto baja completo (nunca cortado) */
.mz-leyenda { flex-wrap: wrap; row-gap: 4px; }
.mz-leyenda .mz-resumen { flex: 0 0 auto; min-width: auto; overflow: visible; text-overflow: clip; }
@media (max-width: 1400px) { .mz-leyenda { column-gap: 5px; } .mz-leyenda .mz-chip { padding: 3px 8px; font-size: 11.5px; } }
/* (ya existia) tema "Segun el sistema" con Windows oscuro: el titulo de la barra no se leia */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barra-titulo h1 { color: var(--texto); } }

/* Detalle: si la pareja conciliada no esta en pantalla, el encabezado del otro panel dice con quien quedo (13-oct-2026) */
.dv-nota-par { margin-left: auto; background: #E3F4EA; color: #14532D; border: 1px solid #8FCFA8; border-radius: 999px;
  padding: 2px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap;
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
.dv-nota-par[hidden] { display: none !important; }

/* Detalle (lido, 14-oct-2026): columna angosta con la cuenta en corto del lado de BANCOS (Br1223, Bx4415, BrMan) */
.dv-col.dv-banco .dv-encab, .dv-col.dv-banco .dv-fila { grid-template-columns: 18px 12px 40px 50px minmax(0, 1fr) 92px 92px; }
.dv-bco { font-size: 10.5px; font-weight: 800; color: #1B4158; background: #E6EDF5; border-radius: 4px; padding: 1px 4px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .dv-bco { color: #CFE0F2; background: #1E3448; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dv-bco { color: #CFE0F2; background: #1E3448; } }
/* titulos de columna con una columna extra (Banco o Poliza): Concepto a la izquierda, los dos importes a la derecha */
.dv-banco .dv-encab span:nth-child(5), .dv-libro .dv-encab span:nth-child(5) { text-align: left; text-transform: uppercase; }
.dv-banco .dv-encab span:nth-child(6), .dv-banco .dv-encab span:nth-child(7),
.dv-libro .dv-encab span:nth-child(6), .dv-libro .dv-encab span:nth-child(7) { text-align: right; text-transform: none; }

/* registrado en libros DESPUES del corte: solo aviso, no concilia (lido, 14-oct-2026) */
.dv-nota-par.aviso { background: #FFF4D6; color: #6B4E00; border-color: #E8C76A; }
.pista.posterior { color: #6B4E00; }

/* pareja sugerida en AMARILLO (lido, 14-oct-2026: "el naranjado con el rojo de no coincide no lo diferencio... si ponemos amarillo") */
.dv-fila.con-sug .dv-punto.no { background: #F2C230; box-shadow: 0 0 0 3px rgba(201,160,30,.45); }
.dv-fila.con-sug.sug-solo .dv-punto.no { background: #F2C230; box-shadow: 0 0 0 3px rgba(217,45,32,.55); }
.dv-marca { background: #F2C230; box-shadow: 0 0 0 3px rgba(201,160,30,.45); }

/* TABLERO (lido, 14-oct-2026): "todo el tablero esta muy a la izquierda y a la derecha tengo mucho espacio"; los botones
   de arriba llegaban a la orilla y los KPIs y la matriz no. En pantalla grande, sin el tope de 1600 px y con la misma
   sangria a los dos lados en la barra y en el contenido (igual que el Detalle): todo termina en la misma linea. */
@media (min-width: 900px) {
  body.modo-tablero .vista { max-width: none; padding-left: clamp(32px, 2.6vw, 56px); padding-right: clamp(32px, 2.6vw, 56px); }
  body.modo-tablero .barra { padding-left: clamp(32px, 2.6vw, 56px); padding-right: clamp(32px, 2.6vw, 56px); }
}
/* los 6 KPIs a lo ancho del tablero, de TRES renglones: nombre, cantidad y su nota corta (lido 14-oct: de dos se veian
   "muy alargados") */
.kpis.kpis-chicos.kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .kpis.kpis-chicos.kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* a 1024 se cortaba "Diferencia del periodo" */
@media (max-width: 640px) { .kpis.kpis-chicos.kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-3r .et { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* filtros de arriba con el MISMO gris de los meses sin datos del tablero (lido, 14-oct-2026: "estan en blanco, ni se
   ven"). Mismo token --mz-gris, asi en oscuro tambien cambia. */
.barra .filtros select { background-color: var(--mz-gris); border-color: #D3D6D2; }
.barra .filtros select:hover { border-color: var(--gris-m); }
:root[data-theme="dark"] .barra .filtros select { border-color: var(--borde); }
/* filtro con algo elegido: filo dorado (lido, 14-oct-2026: "si, ponle el filo dorado para ver"). El anillo es sombra,
   no borde, para que la caja no cambie de tamano. */
.barra .filtros select.f-activo { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); font-weight: 600; }

/* CAMBIOS EN MESES ANTERIORES (lido, 14-oct-2026: "quiero que quede abierto para que me diga y me resalte ahi"): la
   celda de un mes ya entregado donde se movio algo lleva una esquina azul marino; la leyenda lleva cuantos son. */
td.mz-con-cambio { position: relative; }
td.mz-con-cambio::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; pointer-events: none;
  border-style: solid; border-width: 0 11px 11px 0; border-color: transparent var(--azul) transparent transparent; }
.mz-chip-cambio { background: #E6EEF6; color: var(--azul); border: 1px solid #B8CBDD; text-decoration: none; font-weight: 700; }
.mz-chip-cambio:hover { border-color: var(--azul); }
:root[data-theme="dark"] .mz-chip-cambio { background: #1C2C3D; color: #CFE0F2; border-color: #2A3D4E; }
tr.atenuado td { opacity: .55; }
/* verificacion P-09 (14-oct-2026): en oscuro la esquina de cambios y el filo dorado tambien se ven */
:root[data-theme="dark"] td.mz-con-cambio::after { border-right-color: #8DB6E0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) td.mz-con-cambio::after { border-right-color: #8DB6E0; } }
:root[data-theme="dark"] .barra .filtros select.f-activo { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
/* lido, 14-oct-2026: la empresa se lee en la clave del banco y en el numero de poliza, sin columna Empresa:
   azul = VM3 (Victor), dorado = DM3. El mismo sombreado en los dos lados del Detalle. */
.chip-emp { display: inline-block; font-size: 10.5px; font-weight: 800; color: #1B4158; background: #E6EDF5; border-radius: 4px;
  padding: 1px 4px; line-height: 1.35; vertical-align: 1px; }
.dv-pol b { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800;
  color: #1B4158; background: #E6EDF5; border-radius: 4px; padding: 1px 4px; }
.dv-bco.dv-e-DM3, .dv-pol b.dv-e-DM3, .chip-emp.dv-e-DM3 { color: #6B5410; background: #F3EAC8; }
:root[data-theme="dark"] .dv-pol b, :root[data-theme="dark"] .chip-emp { color: #CFE0F2; background: #1E3448; }
:root[data-theme="dark"] .dv-bco.dv-e-DM3, :root[data-theme="dark"] .dv-pol b.dv-e-DM3, :root[data-theme="dark"] .chip-emp.dv-e-DM3 { color: #F2DE8F; background: #3A3218; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dv-pol b, :root:not([data-theme="light"]) .chip-emp { color: #CFE0F2; background: #1E3448; }
  :root:not([data-theme="light"]) .dv-bco.dv-e-DM3, :root:not([data-theme="light"]) .dv-pol b.dv-e-DM3, :root:not([data-theme="light"]) .chip-emp.dv-e-DM3 { color: #F2DE8F; background: #3A3218; }
}