/* ================================================================
   DIMSA Finanzas — Design System
   DIMSA Aceros · Ayacucho, Perú
   ================================================================ */

:root {
  --bg:           #F7F6F3;
  --surface:      #FFFFFF;
  --accent:       #1B4F8A;
  --accent-dark:  #153E6E;
  --accent-light: #EBF0F8;
  --positive:     #2E7D52;
  --pos-light:    #E8F5EE;
  --alert:        #B45309;
  --alert-light:  #FEF3C7;
  --negative:     #B91C1C;
  --neg-light:    #FEE2E2;
  --text:         #1A1917;
  --text-sec:     #5C5852;
  --border:       #E5E4E0;
  --sidebar-w:    240px;
  --sidebar-w-c:  60px;
  --topbar-h:     52px;
  --r:            6px;
  --shadow:       0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,.12);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
table { border-collapse: collapse; }

/* ── App Layout ── */
/* sidebar is position:fixed so it leaves grid flow — use block, let margin-left handle offset */
.app-layout {
  display: block;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--accent);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 100;
  transition: width .15s;
}

.sidebar-brand {
  padding: 18px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}

.brand-icon {
  height: 34px; width: auto;
  background: #fff;
  border-radius: var(--r);
  padding: 4px 6px;
  display: block; object-fit: contain;
  flex-shrink: 0;
}

.brand-name  { font-size: 14px; font-weight: 700; color: #fff; }
.brand-sub   { font-size: 10.5px; color: rgba(255,255,255,.55); margin-top: 1px; }

.sidebar-nav { padding: 10px 0; flex: 1; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  transition: background .12s, color .12s;
  position: relative;
}
.nav-item:hover   { background: rgba(255,255,255,.09); color: #fff; }
.nav-item.active  { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255,255,255,.85);
  border-radius: 0 3px 3px 0;
}
.nav-item.disabled { opacity: .35; pointer-events: none; }
.nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-label-text { flex: 1; }

/* ── Sidebar: brand row + collapse toggle ── */
.sidebar-brand-text { flex: 1; min-width: 0; }
.sidebar-collapse-btn {
  background: rgba(255,255,255,.10);
  border: none; color: #fff;
  width: 22px; height: 22px; border-radius: 5px;
  font-size: 11px; line-height: 1; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.22); }

/* ── Sidebar: grupos expandibles ── */
.nav-group-header { justify-content: space-between; }
.nav-caret {
  background: none; border: none; color: rgba(255,255,255,.55);
  font-size: 10px; padding: 2px 4px; flex-shrink: 0;
}
.nav-caret:hover { color: #fff; }
.nav-group-items { display: none; padding: 2px 0 4px; }
.nav-group.expanded > .nav-group-items { display: block; }
.nav-subitem {
  display: block;
  padding: 6px 14px 6px 41px;
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
  position: relative;
}
.nav-subitem:hover  { background: rgba(255,255,255,.09); color: #fff; }
.nav-subitem.active { color: #fff; font-weight: 600; }
.nav-subitem.active::before {
  content: '';
  position: absolute;
  left: 22px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.85);
}
.sidebar-back {
  border-top: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* ── Sidebar: colapsado (solo íconos + flyout al hover) ── */
.app-layout.sidebar-collapsed .sidebar { width: var(--sidebar-w-c); overflow: visible; }
.app-layout.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-w-c); }
.app-layout.sidebar-collapsed .sidebar-brand-text,
.app-layout.sidebar-collapsed .sidebar-label-text,
.app-layout.sidebar-collapsed .sidebar-version,
.app-layout.sidebar-collapsed .brand-icon,
.app-layout.sidebar-collapsed .nav-caret { display: none; }
.app-layout.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 14px 0; }
.app-layout.sidebar-collapsed .sidebar-collapse-btn { margin: 0; }
.app-layout.sidebar-collapsed .nav-item,
.app-layout.sidebar-collapsed .nav-group-header { justify-content: center; padding: 9px 0; }
.app-layout.sidebar-collapsed .nav-group { position: relative; }
.app-layout.sidebar-collapsed .nav-group .nav-group-items {
  display: none;
  position: absolute;
  left: 100%; top: 0;
  min-width: 200px;
  background: var(--accent-dark);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  z-index: 200;
}
.app-layout.sidebar-collapsed .nav-group:hover .nav-group-items { display: block; }
.app-layout.sidebar-collapsed .nav-group .nav-group-items::before {
  content: attr(data-group-label);
  display: block;
  padding: 4px 14px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.app-layout.sidebar-collapsed .nav-subitem { padding-left: 14px; }

.sidebar-version {
  padding: 12px 14px;
  font-size: 10px;
  color: rgba(255,255,255,.3);
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* ── Main wrapper ── */
.main-wrapper {
  margin-left: var(--sidebar-w);
  transition: margin-left .15s;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* Ajuste 3 (2026-09-15): un descendiente ancho (tabla/gráfico con su
                          propio scroll horizontal vía .table-wrap) no debe forzar TODA la
                          página a estirarse — sin esto, el contenido ancho de un .table-wrap
                          "escapa" del layout flex y crece toda la cadena de ancestros hasta el
                          body, apareciendo como un scroll de página completo en vez de quedar
                          contenido dentro de su propia card. Verificado: sin esto, .main-wrapper
                          medía ~3010px con "Próximos 6 meses" seleccionado; con esto, 1025px
                          (el ancho real disponible), y cada .table-wrap vuelve a scrollear
                          internamente como corresponde. */
}

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 90;
  box-shadow: var(--shadow);
}
.topbar-left   { flex: 1; display: flex; align-items: center; gap: 10px; }
.topbar-center { display: flex; align-items: center; }
.topbar-right  { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.period-badge {
  background: var(--accent-light);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}

.tc-display        { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.tc-display.ok     { color: var(--text-sec); }
.tc-display .tc-val{ font-family: 'Courier New', monospace; font-weight: 700; color: var(--text); }
.tc-display.no-tc  {
  background: var(--neg-light);
  color: var(--negative);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
}

.user-info { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.role-chip {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .6px;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.role-chip.gm          { background: var(--accent);   color: #fff; }
.role-chip.tesorera    { background: var(--positive);  color: #fff; }
.role-chip.practicante { background: var(--alert);     color: #fff; }

.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-sec);
  padding: 4px 12px;
  border-radius: var(--r);
  font-size: 12px;
  transition: all .12s;
}
.btn-logout:hover { border-color: var(--negative); color: var(--negative); background: var(--neg-light); }

/* ── Main content ── */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 22px 24px 40px;
}

.page-header { margin-bottom: 20px; }
.page-title  { font-size: 19px; font-weight: 700; }
.page-sub    { font-size: 12.5px; color: var(--text-sec); margin-top: 3px; white-space: nowrap; }

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-title  { font-size: 13.5px; font-weight: 700; }
.card-body   { padding: 18px; }
.card-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

/* ── Alert cards ── */
.alert-strip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid;
  margin-bottom: 8px;
  font-size: 13px;
}
.alert-strip.crit   { background: var(--neg-light);   border-color: #FECACA; color: var(--negative); }
.alert-strip.warn   { background: var(--alert-light);  border-color: #FDE68A; color: var(--alert); }
.alert-strip.info   { background: var(--accent-light); border-color: #BFDBFE; color: var(--accent); }
.alert-strip.ok     { background: var(--pos-light);    border-color: #A7F3D0; color: var(--positive); }
.alert-icon  { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.alert-body  { flex: 1; }
.alert-title { font-weight: 700; line-height: 1.3; }
.alert-desc  { font-size: 12px; margin-top: 2px; opacity: .85; }

/* ── Stat / fund cards ── */
.stat-grid  { display: grid; gap: 14px; }
.g2  { grid-template-columns: 1fr 1fr; }
.g3  { grid-template-columns: 1fr 1fr 1fr; }
.g4  { grid-template-columns: repeat(4, 1fr); }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

/* ── Flujo de Caja: fila de 3 recuadros de proyección (ingresos/egresos/extraordinarios) ── */
.cf-estimates-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 1200px) { .cf-estimates-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .cf-estimates-row { grid-template-columns: 1fr; } }

.cf-extra-list { max-height: 160px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cf-extra-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
}
.cf-extra-date { color: var(--text-sec); white-space: nowrap; }
.cf-extra-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-extra-amt.pos { color: var(--positive); font-family: 'Courier New', monospace; }
.cf-extra-amt.neg { color: var(--negative); font-family: 'Courier New', monospace; }
.cf-extra-del { cursor: pointer; color: var(--text-sec); background: none; border: none; font-size: 14px; line-height: 1; padding: 2px 4px; }
.cf-extra-del:hover { color: var(--negative); }
.cf-extra-empty { font-size: 12px; color: var(--text-sec); padding: 8px 0; text-align: center; }

.cf-liquidity-alert {
  margin-top: 14px; border: 1px solid rgba(192,57,43,0.35); background: rgba(192,57,43,0.06);
  border-radius: var(--r); padding: 12px 14px;
}
.cf-liquidity-title { font-size: 12.5px; font-weight: 700; color: var(--negative); margin-bottom: 6px; }
.cf-liquidity-row {
  display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
  padding: 4px 0; color: var(--text);
}
.cf-liquidity-amt { color: var(--negative); font-family: 'Courier New', monospace; white-space: nowrap; }

/* ── Flujo de Caja: tabla diaria operativa (rediseño 2026-09-14) ── */
.cf-daily-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.cf-daily-table th, .cf-daily-table td {
  padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border);
}
.cf-daily-table th { background: var(--accent-light); color: var(--accent); font-weight: 700; }
.cf-daily-table th:first-child, .cf-daily-table td:first-child {
  text-align: left; position: sticky; left: 0; z-index: 2; min-width: 170px;
  background: var(--surface); box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}
.cf-daily-table th:nth-child(n+2), .cf-daily-table td:nth-child(n+2) { min-width: 92px; }
.cf-daily-table th:nth-child(2), .cf-daily-table td:nth-child(2) { background: #FDF6E3; }
.cf-daily-table td:first-child { background: var(--surface); }
.cf-row-saldo-inicial td, .cf-row-saldo-inicial td:first-child { background: var(--accent-light); font-weight: 700; }
.cf-row-saldo-final td, .cf-row-saldo-final td:first-child { background: var(--accent-dark); color: #fff; font-weight: 700; }
.cf-row-saldo-final td.td-neg { color: #FCA5A5; }
/* Ajuste 2 (2026-09-18): la columna Vencidos (nth-child(2)) tiene su PROPIO fondo peach con
   especificidad más alta que el fondo azul oscuro de esta fila (gana el empate porque
   .cf-daily-table td:nth-child(2) tiene un selector más específico) — el texto blanco/salmón de
   Saldo Final quedaba ilegible sobre ese fondo claro. Se fuerza texto oscuro solo en esa celda,
   sin importar el signo del monto. */
.cf-daily-table .cf-row-saldo-final td:nth-child(2) { color: var(--text); background: #FDF6E3; }
.cf-section-header td { font-weight: 700; background: var(--pos-light); }
.cf-section-header.cf-egresos td { background: var(--neg-light); }
/* Corrección 3 (2026-09-22): TOTAL INGRESOS/TOTAL EGRESOS — gris claro, bold, menos oscuro que
   Saldo Inicial/Final a propósito (esas marcan el saldo corriente, esto es solo un subtotal). */
.cf-row-total td, .cf-row-total td:first-child { background: var(--bg); font-weight: 700; }
.cf-daily-table .td-neg { color: var(--negative); font-weight: 700; }
.cf-daily-table .cf-projected { color: var(--text-sec); font-style: italic; font-weight: 400; }
.cf-daily-table .cf-muted { color: var(--text-sec); }

/* Ajuste 5 (2026-09-15): un solo bloque compacto para período/días hábiles/estimados/
   extraordinarios, fondo gris claro (mismo --bg que el resto de la página, distinto del blanco
   --surface de la card) para separarlo visualmente de la tabla de abajo. */
.cf-controls-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 14px;
}
.cf-controls-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.cf-controls-row + .cf-controls-row { margin-top: 8px; }
.cf-chart-inner { position: relative; height: 260px; }

/* ── Flujo de Caja: filas expandibles por proveedor/institución/categoría/cliente (Mejora 1,
   2026-09-16) ── */
.cf-expandable { cursor: pointer; }
.cf-expandable:hover td { background: var(--accent-light); }
.cf-expand-icon { display: inline-block; width: 10px; font-size: 9px; color: var(--text-sec); }
.cf-child-row td { font-size: 11px; color: var(--text-sec); background: var(--surface); }
.cf-child-row .cf-child-label { padding-left: 28px; }

/* ── Dropdown de checkboxes genérico (ej. Dashboard: Gastos por Categoría/CC) ── */
.dd-check { position: relative; display: inline-block; }
.dd-check > .form-select {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer;
  overflow: hidden;
}
.dd-check > .form-select span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-check > .form-select::after { content: '▾'; font-size: 10px; color: var(--text-sec); flex-shrink: 0; }
.dd-check-panel {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-md); padding: 10px; min-width: 200px; max-height: 280px; overflow-y: auto;
}
.dd-check-panel.open { display: block; }
.dd-check-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.dd-check-all { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 8px; font-weight: 600; }

/* ── Desglose por categoría (Dashboard: resumen debajo del gráfico de gastos por CC) ── */
.ecc-breakdown-list { display: flex; flex-direction: column; }
.ecc-breakdown-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12.5px; }
.ecc-breakdown-row.total {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-weight: 700;
}
.ecc-breakdown-amt { font-family: 'Courier New', monospace; }

.stat-lbl  { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-sec); margin-bottom: 6px; }
.stat-val  { font-family: 'Courier New', monospace; font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.2; }
.stat-val.pos { color: var(--positive); }
.stat-val.neg { color: var(--negative); }
.stat-val.alr { color: var(--alert); }
.stat-sub  { font-size: 11px; color: var(--text-sec); margin-top: 4px; }

.fund-bar { height: 5px; background: var(--border); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.fund-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.fund-fill.ok   { background: var(--positive); }
.fund-fill.low  { background: var(--alert); }
.fund-fill.crit { background: var(--negative); }

/* ── Gráfico de barras verticales (CSS puro, sin librería) ── */
.vbar-chart {
  display: flex; align-items: flex-end; gap: 18px;
  height: 180px; padding: 10px 6px 0;
}
.vbar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.vbar-amount { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 4px; font-family: 'Courier New', monospace; }
.vbar-fill {
  width: 100%; max-width: 64px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  transition: height .3s;
  min-height: 2px;
}
.vbar-label { font-size: 11px; color: var(--text-sec); margin-top: 8px; text-align: center; }

/* Variante compacta — hasta 31 columnas (ventas por día del mes), sin monto por barra
   (no entra el texto), el detalle va en el title="" (tooltip nativo). */
.vbar-chart.dense { gap: 4px; overflow-x: auto; }
.vbar-chart.dense .vbar-col { flex: 0 0 auto; width: 22px; }
.vbar-chart.dense .vbar-fill { max-width: 22px; }
.vbar-chart.dense .vbar-amount { display: none; }
.vbar-chart.dense .vbar-label { font-size: 9.5px; margin-top: 4px; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
table { width: 100%; font-size: 13px; }
thead th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-sec);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: #FAFAF8;
  /* Mejora 4 (2026-07-24): columnas ajustables en TODAS las tablas del sistema — antes
     escopado solo a .cxp-resize (módulo CxP). Requiere overflow:hidden para que el asa de
     resize sea visible/funcional en un th; min-width evita que una columna se colapse a 0. */
  resize: horizontal;
  overflow: hidden;
  min-width: 60px;
}
tbody td     { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FAFAF8; }
.td-mono     { font-family: 'Courier New', monospace; font-size: 12.5px; }
.td-right    { text-align: right; }
.td-pos      { color: var(--positive); font-weight: 700; }
.td-neg      { color: var(--negative); font-weight: 700; }
.td-sec      { color: var(--text-sec); font-size: 12px; }
/* Filas compactas (CxP, 2026-09-03): celdas de texto libre (proveedor, descripción,
   categoría/CC, institución...) que antes auto-expandían la fila con textos largos — se
   truncan con elipsis; el title conserva el texto completo al pasar el mouse, el detalle del
   registro lo muestra siempre completo. La columna se puede ensanchar igual con el resize
   nativo del th (Mejora 4) si el usuario necesita ver más. */
.td-clip     { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-sort        { cursor: pointer; user-select: none; }
.th-sort:hover  { color: var(--accent); }
.th-sort.sort-asc, .th-sort.sort-desc { color: var(--accent); }
.th-sort.sort-asc::after  { content: " \25B2"; font-size: 8px; vertical-align: middle; }
.th-sort.sort-desc::after { content: " \25BC"; font-size: 8px; vertical-align: middle; }

/* Mejora 3: min-width:60px del th global de arriba ensancha de más las 3 columnas de solo
   checkbox "seleccionar todo" (Pagos, Conciliación Libros/Banco) — sin asa de resize, no
   tiene sentido ahí. */
.th-checkbox { resize: none; min-width: 0; width: 26px; }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.b-green  { background: var(--pos-light);   color: var(--positive); }
.b-red    { background: var(--neg-light);   color: var(--negative); }
.b-amber  { background: var(--alert-light); color: var(--alert); }
.b-blue   { background: var(--accent-light);color: var(--accent); }
.b-gray   { background: #F0EFE9;            color: var(--text-sec); }
.b-purple { background: #EFE7FB;            color: #6B3FA0; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  transition: all .12s;
  white-space: nowrap; line-height: 1;
}
.btn-primary  { background: var(--accent);   color: #fff; border-color: var(--accent); }
.btn-primary:hover  { background: var(--accent-dark); }
.btn-secondary{ background: var(--surface);  color: var(--text); border-color: var(--border); }
.btn-secondary:hover{ background: var(--bg); border-color: #ccc; }
.btn-positive { background: var(--positive); color: #fff; border-color: var(--positive); }
.btn-positive:hover { background: #256644; }
.btn-danger   { background: var(--negative); color: #fff; border-color: var(--negative); }
.btn-danger:hover   { background: #991B1B; }
.btn-ghost    { background: none; color: var(--text-sec); border-color: transparent; }
.btn-ghost:hover    { background: var(--border); color: var(--text); }
.btn-sm  { padding: 4px 10px; font-size: 12px; }
.btn-lg  { padding: 10px 22px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Forms ── */
.form-group  { margin-bottom: 14px; }
.form-label  { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.form-label.req::after { content: ' *'; color: var(--negative); }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
  outline: none;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27,79,138,.10);
}
.form-input.err, .form-select.err { border-color: var(--negative); }
/* Campos numéricos con formato contable (app.js::enhanceNumberInput, 2026-10-21) */
.num-input { text-align: right; font-variant-numeric: tabular-nums; }
.form-err  { font-size: 11px; color: var(--negative); margin-top: 4px; }
.form-hint { font-size: 11px; color: var(--text-sec); margin-top: 4px; }

.form-row { display: grid; gap: 14px; }
.cols-2   { grid-template-columns: 1fr 1fr; }
.cols-3   { grid-template-columns: 1fr 1fr 1fr; }

/* ── Toolbar ── */
.toolbar       { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar-left  { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }

/* ── Tabs ── */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}
.tab-btn {
  padding: 9px 18px;
  border: none; background: none;
  font-size: 13px; font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.tab-panel      { display: none; }
.tab-panel.active { display: block; }

/* ── Modals ── */
/* z-index base para TODOS los modales (200) — un modal abierto desde dentro de otro (ej. "Anular"
   desde un popup de detalle) recibe un z-index MAYOR asignado en tiempo real por
   static/js/app.js::openModal/closeModal, no acá. No fijar un z-index más alto a mano en un
   template puntual — rompe el apilado dinámico para el resto de casos. Ver Ajuste 3 (2026-09-10)
   en app.js. */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
}
.modal-lg { max-width: 680px; }
.modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title  { font-size: 15px; font-weight: 700; }
.modal-close  { background: none; border: none; font-size: 20px; color: var(--text-sec); line-height: 1; padding: 0 4px; }
.modal-close:hover { color: var(--text); }
.modal-body   { padding: 22px; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}

/* ── Preview de adjuntos (imagen/PDF, ver templates/cuentas_pagar.html::previewAttachment) ── */
.preview-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,.85); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.preview-header {
  width: 90vw; display: flex; justify-content: space-between; align-items: center;
  color: #fff; padding: 8px 0; font-size: 14px;
}
.preview-close {
  background: transparent; border: none; color: #fff; font-size: 14px;
  padding: 4px 10px; border-radius: 4px; cursor: pointer;
}
.preview-close:hover { background: rgba(255,255,255,.2); }
.import-bar {
  flex: 0 0 100%; order: 100;
  height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative;
}
.import-bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 40%; background: var(--primary, #2563EB); border-radius: 2px;
  animation: importSlide 1.2s ease-in-out infinite;
}
@keyframes importSlide {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(380%); }
}
.import-bar-msg {
  flex: 0 0 100%; order: 101;
  font-size: 12px; color: var(--text-sec); text-align: center; margin-top: 4px;
}

/* Importación con avance real (2026-10-20): app.js importFetch() */
.import-progress {
  flex: 0 0 100%; order: 100; margin: 10px 0 4px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  box-shadow: var(--shadow); font-size: 12px; color: var(--text);
}
.ipg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ipg-title { font-weight: 700; font-size: 13px; }
.ipg-pct { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--accent); }
.ipg-steps { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; color: var(--text-sec); }
.ipg-step { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ipg-step.ipg-done { color: var(--positive); }
.ipg-step.ipg-active { color: var(--accent); font-weight: 600; }
.ipg-step.ipg-error { color: var(--negative); font-weight: 600; }
.ipg-step i {
  width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent;
  display: inline-block; animation: ipgSpin .8s linear infinite;
}
@keyframes ipgSpin { to { transform: rotate(360deg); } }
.ipg-track { height: 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.ipg-fill {
  height: 100%; border-radius: 6px; transition: width .35s ease;
  background-color: var(--accent);
  background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%,
                                    rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%, transparent);
  background-size: 18px 18px; animation: ipgStripes .7s linear infinite;
}
@keyframes ipgStripes { from { background-position: 0 0; } to { background-position: 18px 0; } }
.ipg-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px;
            color: var(--text-sec); font-variant-numeric: tabular-nums; }
.ipg-meta b { color: var(--text); }
.ipg-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.ipg-done .ipg-fill { background-color: var(--positive); background-image: none; animation: none; }
.ipg-done .ipg-pct, .ipg-done .ipg-meta span:last-child { color: var(--positive); font-weight: 600; }
.ipg-error .ipg-fill { background-color: var(--negative); background-image: none; animation: none; }
.ipg-error .ipg-pct, .ipg-error .ipg-meta span:last-child { color: var(--negative); font-weight: 600; }

/* ── Login ── */
.login-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  width: 100%; max-width: 360px;
  padding: 38px 34px 30px;
}
.login-logo {
  height: 52px; width: auto; max-width: 100%;
  display: block; object-fit: contain;
  margin: 0 auto 14px;
}
.login-title    { text-align: center; font-size: 21px; font-weight: 800; margin-bottom: 2px; }
.login-subtitle { text-align: center; font-size: 12.5px; color: var(--text-sec); margin-bottom: 28px; }
.login-err {
  background: var(--neg-light);
  border: 1px solid #FECACA;
  color: var(--negative);
  padding: 9px 13px;
  border-radius: var(--r);
  font-size: 12.5px;
  margin-bottom: 14px;
  display: none;
}
.login-warn {
  background: var(--alert-light);
  border: 1px solid #FDE68A;
  color: var(--alert);
  padding: 9px 13px;
  border-radius: var(--r);
  font-size: 12.5px;
  margin-bottom: 14px;
  display: none;
}
.login-btn   { width: 100%; margin-top: 6px; }
.login-footer{ text-align: center; font-size: 10.5px; color: var(--text-sec); margin-top: 22px; }

/* ── Toast ── */
.toast-container {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  padding: 11px 14px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  min-width: 260px; max-width: 380px;
  animation: toastIn .18s ease;
}
.toast.success { border-left-color: var(--positive); }
.toast.error   { border-left-color: var(--negative); }
.toast.warning { border-left-color: var(--alert); }
@keyframes toastIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Pagination ── */
.pagination { display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: 14px; }
.pg-btn {
  min-width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 12.5px; cursor: pointer;
  transition: all .12s;
}
.pg-btn:hover  { border-color: var(--accent); color: var(--accent); }
.pg-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Empty state ── */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-sec);
}
.empty-icon { font-size: 32px; margin-bottom: 10px; }
.empty-text { font-size: 14px; font-weight: 600; }
.empty-sub  { font-size: 12px; margin-top: 4px; }

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Section ── */
.section       { margin-bottom: 24px; }
.section-title {
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── Toggle ── */
.toggle { position: relative; width: 34px; height: 19px; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 20px; cursor: pointer;
  transition: background .18s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
}
.toggle input:checked + .toggle-slider { background: var(--positive); }
.toggle input:checked + .toggle-slider::before { transform: translateX(15px); }

/* ── Utils ── */
.flex         { display: flex; }
.items-center { align-items: center; }
.gap-8        { gap: 8px; }
.gap-12       { gap: 12px; }
.justify-end  { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-sec     { color: var(--text-sec); }
.text-pos     { color: var(--positive); }
.text-neg     { color: var(--negative); }
.text-alr     { color: var(--alert); }
.font-mono    { font-family: 'Courier New', monospace; }
.fw-700       { font-weight: 700; }
.fs-12        { font-size: 12px; }
.fs-11        { font-size: 11px; }
.mt-4         { margin-top: 4px; }
.mt-8         { margin-top: 8px; }
.mt-16        { margin-top: 16px; }
.mb-8         { margin-bottom: 8px; }
.mb-16        { margin-bottom: 16px; }
.mb-20        { margin-bottom: 20px; }
.hidden       { display: none !important; }
.w-full       { width: 100%; }

/* ── Module 3 additions ── */
.form-grid  { display: grid; gap: 12px; }
.g1         { grid-template-columns: 1fr; }
.label-muted { font-size: .8rem; color: var(--text-sec); display: block; margin-bottom: 2px; }
.text-muted  { color: var(--text-sec); }
.row-annulled td { opacity: .5; color: var(--text-sec); }
.stat-card.alert { border-left: 3px solid var(--negative); }
.li-inp { width: 100%; min-width: 0; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }

/* ── Supplier search dropdown ─────────────────────────────────── */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}
.search-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: .875rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.search-dropdown-item:last-child { border-bottom: none; }
.search-dropdown-item:hover { background: var(--bg); }
.search-dropdown-item .sd-ruc { font-family: monospace; color: var(--text-sec); font-size: .8rem; }

/* ── Match detail popover (conciliación) ──────────────────────── */
.match-popover-trigger {
  cursor: pointer;
  border: none;
  background: none;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: .75;
}
.match-popover-trigger:hover { opacity: 1; }
.match-popover {
  position: absolute;
  z-index: 300;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  font-size: 12.5px;
}
.match-popover-loading { color: var(--text-sec); padding: 4px 2px; }
.match-popover-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}
.match-popover-item:last-child { border-bottom: none; }
.match-popover-total {
  display: flex;
  justify-content: flex-end;
  font-weight: 600;
  padding: 6px 2px 2px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

.form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Landing page (home.html) ── */
.home-page { min-height: 100vh; display: flex; flex-direction: column; }
.home-header {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
}
.home-header-brand { display: flex; align-items: center; gap: 10px; }
.home-header-logo { height: 38px; width: auto; max-width: 160px; object-fit: contain; }
.home-header-name { font-weight: 800; font-size: 15px; letter-spacing: .2px; }
.home-header-company { flex: 1; }
.home-header-user { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }

.home-main { flex: 1; padding: 56px 24px; max-width: 980px; margin: 0 auto; width: 100%; }
.home-title {
  text-align: center; font-size: 22px; font-weight: 800; color: var(--text);
  margin-bottom: 40px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .module-grid { grid-template-columns: 1fr; } }

.module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 32px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  transition: box-shadow .12s, border-color .12s, transform .12s;
  position: relative;
}
.module-card:not(.module-card-disabled):hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
  transform: translateY(-2px);
  cursor: pointer;
}
.module-icon { font-size: 34px; line-height: 1; }
.module-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.module-card-disabled {
  opacity: .5;
  cursor: default;
}
.module-badge {
  font-size: 11px; font-weight: 600; color: var(--text-sec);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px;
}

/* ── Multiempresa P4: selector de empresa ─────────────────────── */
.company-switcher { position: relative; display: inline-flex; margin-right: 10px; }
.company-current {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid var(--border); border-left: 3px solid var(--company-color, #1F4E79);
  border-radius: 7px; background: var(--surface, #fff); color: var(--text, #111827);
  font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; cursor: pointer; white-space: nowrap; max-width: 260px;
  transition: background .15s, box-shadow .15s;
}
.company-current.single { cursor: default; }
button.company-current:hover { background: var(--bg, #F3F4F6); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.company-current .company-name { overflow: hidden; text-overflow: ellipsis; }
.company-caret { font-size: 10px; color: var(--text-sec, #6B7280); }
.company-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; display: inline-block; }
.company-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 400; min-width: 230px; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.company-switcher.open .company-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.company-menu-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-sec, #6B7280); padding: 4px 8px 6px; }
.company-option {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 6px;
  background: none; font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.2; color: inherit; text-align: left; cursor: pointer;
}
.company-option:hover { background: var(--bg, #F3F4F6); }
.company-option.active { font-weight: 700; }
.company-check { margin-left: auto; color: var(--positive, #059669); }
body { transition: opacity .18s ease; }
body.company-switching { opacity: .35; pointer-events: none; }
.home-company { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-sec, #6B7280); margin-bottom: 4px; }
.company-logo-preview { max-height: 56px; max-width: 180px; object-fit: contain; border: 1px solid var(--border);
  border-radius: 6px; padding: 4px; background: #fff; }
.home-header-company { padding-left: 24px; }

/* ── Login: selección de empresa (2026-10-05) ─────────────────── */
.login-hello { font-size: 16px; font-weight: 700; text-align: center; margin-top: 4px; }
.login-hello-sub { font-size: 13px; color: var(--text-sec); text-align: center; margin: 4px 0 14px; }
.login-company-list { display: flex; flex-direction: column; gap: 10px; }
.login-company-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--company-color, #1F4E79);
  border-radius: 9px; font-family: inherit; color: var(--text);
  animation: lccIn .28s ease both;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-company-card:hover:not(:disabled) { border-color: var(--company-color, #1F4E79); box-shadow: 0 3px 12px rgba(0,0,0,.10); }
.login-company-card:disabled { cursor: default; opacity: .6; }
.login-company-card.picked { opacity: 1; background: var(--accent-light); }
.lcc-logo { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.lcc-logo img { max-width: 44px; max-height: 44px; object-fit: contain; }
.lcc-text { display: flex; flex-direction: column; min-width: 0; }
.lcc-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcc-ruc { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.login-company-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--text-sec); }
@keyframes lccIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Filtro por producto en listas (2026-10-05) */
.prod-filter { position: relative; display: inline-flex; align-items: center; }
.prod-filter input { padding-right: 26px; }
.prod-filter .prod-filter-x { position: absolute; right: 4px; border: 0; background: var(--surface); padding: 2px 5px; border-radius: 4px; cursor: pointer; color: var(--text-sec); font-size: 12px; }
.prod-filter .prod-filter-x:hover { color: var(--negative); }

/* Sub-tabs dentro de un tab (Sistema → Parámetros, 2026-10-06) */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.subtab-btn { border: 0; background: none; padding: 7px 12px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-sec); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtab-btn:hover { color: var(--text); }
.subtab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Paginación del servidor (2026-10-20): app.js createPager() */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
         padding: 8px 4px; font-size: 12px; color: var(--text-sec); }
.pager b { color: var(--text); font-variant-numeric: tabular-nums; }
.pg-pages { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pg-btn { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px;
          background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pg-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pg-btn[disabled] { opacity: .45; cursor: default; }
.pg-gap { padding: 0 3px; }
.pg-size { display: inline-flex; align-items: center; gap: 6px; }
.pg-size .form-select { width: auto; padding: 3px 26px 3px 8px; font-size: 12px; height: 28px; }