* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --green-900: #1a3a1a;
  --green-700: #367c39;
  --green-600: #3d8b40;
  --green-500: #4caf50;
  --green-100: #e8f5e9;
  --yellow-100: #fff8e1;
  --yellow-600: #f9a825;
  --red-100: #fce4ec;
  --red-600: #e53935;
  --blue-100: #e3f2fd;
  --blue-600: #1e88e5;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eee;
  --gray-300: #ddd;
  --gray-500: #888;
  --gray-700: #555;
  --gray-900: #222;
  --sidebar-w: 240px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--gray-900);
  background: var(--gray-100);
  display: flex;
  min-height: 100vh;
}

/* --- SIDEBAR --- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--green-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 10;
}
.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-header h2 { font-size: 18px; font-weight: 700; }
.sidebar-sub { font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: 1px; }
.sidebar-nav { list-style: none; padding: 12px 0; flex: 1; }
.sidebar-nav a {
  display: block; padding: 10px 20px; color: rgba(255,255,255,.7);
  text-decoration: none; transition: .15s;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
  background: rgba(255,255,255,.1); color: #fff;
}
.sidebar-footer {
  padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
}
.user-info { margin-bottom: 8px; }
.user-info strong { display: block; font-size: 13px; }
.user-info span { opacity: .6; }
.btn-logout {
  color: rgba(255,255,255,.5); text-decoration: none; font-size: 12px;
}
.btn-logout:hover { color: #fff; }

/* --- CONTENT --- */
.content {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 24px 32px;
  min-width: 0;
}

/* --- PAGE HEADER --- */
.page-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.page-header h1 { font-size: 22px; font-weight: 600; }

/* --- STATS --- */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: #fff; border-radius: 8px; padding: 16px 20px;
  border-left: 4px solid var(--gray-300);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.stat-card.stat-warning { border-left-color: var(--yellow-600); }
.stat-card.stat-success { border-left-color: var(--green-600); }
.stat-card.stat-info { border-left-color: var(--blue-600); }
.stat-value { display: block; font-size: 24px; font-weight: 700; }
.stat-label { font-size: 12px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; }

/* --- FILTERS --- */
.filters-bar {
  background: #fff; border-radius: 8px; padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.filters-form {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.filters-form select, .filters-form input[type="text"] {
  padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px;
  font-size: 13px; background: #fff;
}
.filters-form select { min-width: 160px; }
.filters-form input[type="text"] { min-width: 200px; }

/* --- TABLE --- */
.table-info {
  font-size: 12px; color: var(--gray-500); margin-bottom: 8px;
}
.table-wrapper {
  background: #fff; border-radius: 8px; overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 16px;
}
.data-table {
  width: 100%; border-collapse: collapse;
}
.data-table th {
  text-align: left; padding: 10px 14px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--gray-500);
  border-bottom: 2px solid var(--gray-200); background: var(--gray-50);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--gray-200);
  font-size: 13px; white-space: nowrap;
}
.data-table tbody tr:hover { background: var(--green-100); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-mono { font-family: "SF Mono", "Cascadia Code", "Consolas", monospace; font-size: 12px; }
.truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tablas de partes (Compras de refacciones): sin barra de desplazamiento. La descripción absorbe el ancho que sobra y se recorta con «…»; el cursor muestra el nombre completo */
.tabla-partes th { padding: 8px 5px; font-size: 10.5px; letter-spacing: .3px; }
.tabla-partes td { padding: 7px 5px; font-size: 12px; }
.tabla-partes td.font-mono { font-size: 11.5px; }
.tabla-partes td.truncate { width: 100%; max-width: 0; min-width: 70px; }
/* Semáforo por sucursal: columnas compactas (sin scroll) y títulos largos que bajan de línea; el ancho sobrante se reparte entre todas las columnas */
#semaforo th { white-space: normal; line-height: 1.2; vertical-align: bottom; }

/* --- BADGES --- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.badge-pendiente { background: var(--yellow-100); color: var(--yellow-600); }
.badge-validada { background: var(--green-100); color: var(--green-700); }
.badge-en_espera { background: var(--blue-100); color: var(--blue-600); }
.badge-capturada_equip { background: var(--gray-200); color: var(--gray-700); }
.badge-tipo-md { background: var(--red-100); color: var(--red-600); }
.badge-tipo-so { background: var(--blue-100); color: var(--blue-600); }

/* --- BUTTONS --- */
.btn {
  display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: 13px;
  font-weight: 500; text-decoration: none; border: none; cursor: pointer;
  transition: .15s;
}
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-700); }
.btn-outline { background: transparent; border: 1px solid var(--gray-300); color: var(--gray-700); }
.btn-outline:hover { background: var(--gray-100); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-full { width: 100%; text-align: center; }

/* --- PAGINATION --- */
.pagination {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 12px 0; font-size: 13px; color: var(--gray-500);
}

/* --- DETAIL PAGE --- */
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 20px;
}
.detail-card {
  background: #fff; border-radius: 8px; padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.detail-card h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--gray-500); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--gray-200);
}
.detail-list { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; }
.detail-list dt { color: var(--gray-500); }
.detail-list dd { font-weight: 500; }

.detail-totals {
  background: #fff; border-radius: 8px; padding: 20px; max-width: 360px;
  margin-left: auto; margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.total-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 14px;
}
.total-final { font-size: 18px; font-weight: 700; border-top: 2px solid var(--gray-200); padding-top: 8px; margin-top: 4px; }

/* --- VALIDATION --- */
.validate-section {
  background: #fff; border-radius: 8px; padding: 24px;
  margin-top: 24px; border: 2px solid var(--green-500);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.validate-section h3 { font-size: 16px; margin-bottom: 16px; }
.validate-form { max-width: 600px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
.form-group select, .form-group input, .form-group textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--gray-300);
  border-radius: 6px; font-size: 13px; font-family: inherit;
}
.validation-info {
  margin-top: 16px; padding: 12px 16px; background: var(--green-100);
  border-radius: 6px; font-size: 13px; color: var(--green-700);
}

/* --- LOGIN --- */
.login-body {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; background: linear-gradient(135deg, var(--green-900), var(--green-700));
}
.login-card {
  background: #fff; border-radius: 12px; padding: 40px;
  width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-header { text-align: center; margin-bottom: 28px; }
.login-header h1 { font-size: 28px; color: var(--green-900); }
.login-header p { color: var(--gray-500); margin-top: 4px; }
.login-org { display: block; font-size: 11px; color: var(--gray-500); margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; }
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.alert-error { background: var(--red-100); color: var(--red-600); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .content { margin-left: 0; padding: 16px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .filters-form { flex-direction: column; }
  .filters-form select, .filters-form input[type="text"] { min-width: 100%; }
}

/* --- DASHBOARD --- */
.stat-card.kpi-md { border-left-color: var(--red-600); }
.filters-form label { font-size: 12px; color: var(--gray-700); display: flex; align-items: center; gap: 6px; }
.filters-form input[type="date"] { padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
.bar { background: var(--gray-200); border-radius: 4px; height: 10px; overflow: hidden; min-width: 120px; }
.bar span { display: block; height: 100%; background: var(--green-500); }
.split-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; background: var(--gray-200); }
.split-md, .split-so { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; }
.split-md { background: var(--red-600); }
.split-so { background: var(--blue-600); }
.kpi-note { margin-top: 8px; font-size: 12px; color: var(--gray-500); }
h3 { margin: 8px 0; }

/* --- ANALISIS --- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { background: #fff; border-radius: 8px; padding: 14px 18px; border-left: 4px solid var(--gray-300); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kpi.green { border-left-color: var(--green-600); }
.kpi.amber { border-left-color: var(--yellow-600); }
.kpi .kpi-sin { display: block; margin-top: 4px; color: #8a6d00; text-transform: none; letter-spacing: 0; }
.kpi.red { border-left-color: var(--red-600); }
.kpi-v { display: block; font-size: 22px; font-weight: 700; }
.kpi-l { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; }
.chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.chart-wide { grid-column: span 2; }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 320px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips:empty { display: none; }
.chip { background: var(--green-100); color: var(--green-700); border-radius: 14px; padding: 3px 4px 3px 12px; font-size: 12px; font-weight: 600; }
.chip button { border: 0; background: transparent; color: var(--green-700); font-size: 15px; cursor: pointer; padding: 0 6px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .chart-grid { grid-template-columns: 1fr; } .chart-wide { grid-column: auto; } }

/* --- ESTADO DE CUENTA (replica del Excel de John Deere) --- */
.branch-tab { padding: 6px 14px; border-radius: 16px; background: var(--gray-200); color: var(--gray-700); text-decoration: none; font-size: 13px; font-weight: 600; }
.branch-tab:hover { background: var(--green-100); }
.branch-tab.active { background: var(--green-600); color: #fff; }
.xl-pick { background: #fff; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.xl-pick form { margin-bottom: 8px; }
.xl-pick select { padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: 6px; margin-left: 6px; }
.xl-sheet { background: #fff; border: 1px solid #bfbfbf; font-size: 12px; }
.xl-title { background: #d9d9d9; text-align: center; font-weight: 700; padding: 10px; border-bottom: 1px solid #bfbfbf; }
.xl-info { border-collapse: collapse; margin: 10px 12px; }
.xl-info td { padding: 3px 10px 3px 0; }
.xl-info .lbl { font-weight: 700; padding-right: 8px; white-space: nowrap; }
.xl-sec { background: #d9d9d9; font-weight: 700; padding: 6px 12px; border-top: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; margin-top: 12px; }
.xl-scroll { overflow: auto; }
.xl-detail { max-height: 80vh; min-height: 260px; }
/* border-collapse: separate evita que las filas se vean por las rendijas entre titulos fijos */
table.xl { border-collapse: separate; border-spacing: 0; width: 100%; border-top: 1px solid #d0d0d0; border-left: 1px solid #d0d0d0; }
table.xl th, table.xl td { border: 0; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; padding: 4px 8px; white-space: nowrap; }
table.xl thead th { background: #f2f2f2; text-align: center; font-weight: 700; font-size: 11px; white-space: normal; line-height: 1.25; }
#docs thead th { position: sticky; top: 0; z-index: 3; }
#docs thead tr.xl-filter th { background: #fafafa; font-weight: 400; }
#docs th, #docs td { padding: 4px 6px; }
table.xl th.xl-band { background: #d9d9d9; font-size: 13px; }
table.xl th.xl-fin { color: #8c8c8c; }
table.xl .xl-gap { width: 14px; min-width: 14px; padding: 0; background: #fff; border-top-color: #fff; border-bottom-color: #fff; }
table.xl td.num { text-align: right; font-family: "Consolas", monospace; }
table.xl .xl-lbl { font-weight: 700; }
table.xl tr.xl-sub td { background: #f2f2f2; font-weight: 700; }
.xl-pagos { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding: 8px 12px; }
table.xl.xl-pay { width: auto; min-width: 340px; }
table.xl tr.xl-sub-note td { color: #595959; font-size: 0.92em; }
table.xl tr.xl-emerg td { background: #ffd966; font-weight: 700; }
table.xl tr.xl-emerg.over td { background: #f4b6b6; color: #9c0006; }
table.xl tbody tr:hover td { background: #eef6ee; }
table.xl tr.xl-mark td { background: #f1f8f1; }
table.xl tfoot td { position: sticky; bottom: 0; background: #d9d9d9; font-weight: 700; z-index: 2; }
.xl-filter select, .xl-filter input { width: 100%; min-width: 0; padding: 2px 4px; border: 1px solid #c8c8c8; border-radius: 3px; font-size: 11px; }
select.mk-sel, select.cls-sel { padding: 2px 6px; border: 1px solid #c8c8c8; border-radius: 3px; font-size: 12px; min-width: 44px; }
.xl-link { font-weight: 400; font-size: 0.85em; margin-left: 6px; color: #2e6b31; }
.cr-table thead tr.cr-filter th { background: #fff; padding: 6px 8px; font-weight: 400; text-transform: none; }
.cr-table .cr-filter input, .cr-table .cr-filter select { display: block; box-sizing: border-box; width: 100%; max-width: 150px; padding: 4px 6px; margin: 1px 0; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 12px; background: #fff; }
.cr-table .cr-filter input.on, .cr-table .cr-filter select.on { border-color: var(--green-600); background: #f1f8f1; }
.cr-table tfoot td { position: sticky; bottom: 0; background: #d9d9d9; font-weight: 700; z-index: 2; border-top: 1px solid #bfbfbf; }
.xl-toggle small { font-weight: 400; margin-left: 6px; }
.cr-block { margin-bottom: 12px; }
.xl-search { background: #fff; border-radius: 8px; padding: 12px 16px; margin: 0 0 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.xl-search label { font-size: 13px; }
.xl-search-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.xl-search-row input { width: 360px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; }
.xl-search-res { margin-top: 10px; }
.xl-search-res tr.g-row { cursor: pointer; }
.xl-search-res tr.g-row:hover td { background: #eef6ee; }
.g-fact { margin: 0 0 6px 18px; font-size: 13px; }
.kpi-grid.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1500px) { .kpi-grid.six { grid-template-columns: repeat(3, 1fr); } }
.kpi.blue { border-left-color: var(--blue-600); }
.kpi-grid.six .kpi-v { font-size: clamp(17px, 1.45vw, 24px); white-space: nowrap; }
.kpi-grid.five { grid-template-columns: repeat(5, 1fr); }
.kpi-grid.mes-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
@media (max-width: 1100px) { .kpi-grid.five { grid-template-columns: repeat(2, 1fr); } }
.mes-bar { height: 6px; background: var(--gray-200); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.mes-bar span { display: block; height: 100%; background: var(--green-600); }
.cr-table tfoot .foot-tipos { font-weight: 400; font-size: 12px; }
.kpi .mxn { font-size: 11px; font-weight: 600; color: var(--gray-500); letter-spacing: .3px; margin-left: 2px; }
.kpi .kpi-link { display: block; color: inherit; text-decoration: none; }
.kpi a.kpi-link:hover { text-decoration: underline; }
.kpi a.kpi-link.kpi-v:hover { color: var(--green-700); }
.kpi-grid > [data-tip]:nth-child(4n):hover::after { left: auto; right: 12px; }
/* Globo de ayuda con el desglose de una cifra (texto en data-tip, renglones separados por salto de linea) */
[data-tip] { position: relative; cursor: help; }
[data-tip]:hover::after {
  content: attr(data-tip); white-space: pre-line; position: absolute; left: 12px; top: calc(100% + 6px); z-index: 50;
  width: max-content; max-width: 360px; padding: 10px 12px; border-radius: 8px; background: #1f2d1f; color: #fff;
  font-size: 12px; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: 0; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.cr-opt { display: block; font-weight: 400; font-size: 14px; margin: 6px 0; }
.cr-opt input { width: auto; margin-right: 6px; }
.cr-opt small { color: var(--gray-500); }
.cr-vista { font-weight: 400; color: var(--gray-700); }
.cr-cell select, .cr-cell input { padding: 4px 6px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
.cr-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.form-group .cr-line select.cr-branch { width: 260px; max-width: 100%; }
.form-group .cr-line input.cr-monto { width: 150px; }
.cr-line .cr-branch { min-width: 170px; }
.cr-line .cr-monto { width: 120px; text-align: right; font-family: "Consolas", monospace; }
.cr-del { border: 0; background: transparent; color: #9c0006; font-size: 18px; cursor: pointer; line-height: 1; }
.cr-add { margin-top: 6px; }
.alloc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: var(--gray-100); border-radius: 6px; padding: 2px 6px; margin: 2px; }
.alloc-chip input { width: 62px; padding: 2px 4px; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; }

.xl-toggle { cursor: pointer; user-select: none; position: relative; }
.xl-toggle:hover { background: #cfcfcf; }
.xl-toggle .chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; }
.is-hidden { display: none !important; }
/* Resumen de pagos: tarjeta flotante a la derecha (cerrada = una pastilla con el total; abierta = tarjeta con el desglose) */
.xl-work { display: block; margin-top: 16px; }
.xl-main { min-width: 0; }
.xl-side { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 380px; max-width: calc(100vw - 36px); }
.pay-pill { display: flex; align-items: baseline; gap: 10px; margin-left: auto; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--green-600, #2e7d32); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28); font: inherit; }
.pay-pill:hover { filter: brightness(1.08); }
.pay-pill-lbl { font-size: 10.5px; letter-spacing: .06em; opacity: .85; }
.pay-pill-val { font-family: "Consolas", monospace; font-size: 17px; font-weight: 700; }
.pay-pill-pct { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.2); }
.xl-side.over .pay-pill { background: #b3261e; }
.pay-card { display: none; background: #fff; border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.32); overflow: hidden; max-height: calc(100vh - 36px); overflow-y: auto; }
.xl-side.open .pay-card { display: block; }
.xl-side.open .pay-pill { display: none; }
.pay-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #1f3d20; color: #fff; font-weight: 700; font-size: 13px; }
.pay-head small { display: block; font-weight: 400; font-size: 10.5px; opacity: .75; }
.pay-head button { border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.pay-hero { padding: 14px 16px 12px; background: linear-gradient(180deg, #eef7ee, #fff); text-align: center; }
.pay-hero-lbl { display: block; font-size: 11px; letter-spacing: .06em; color: #4a6b4b; font-weight: 700; }
.pay-hero-val { display: block; font-family: "Consolas", monospace; font-size: 30px; font-weight: 800; color: #1f3d20; margin: 2px 0 8px; }
.pay-meter { position: relative; height: 8px; border-radius: 999px; background: #e3e8e3; }
.pay-meter-bar { height: 100%; border-radius: 999px; background: #2e9e4f; max-width: 100%; }
.pay-meter-limit { position: absolute; left: 50%; top: -3px; width: 2px; height: 14px; background: #b3261e; }
.xl-side.over .pay-meter-bar { background: #d93025; }
.pay-hero-note { display: block; margin-top: 6px; font-size: 11.5px; color: #595959; }
.xl-side.over .pay-hero-note { color: #b3261e; font-weight: 700; }
.pay-body { padding: 4px 10px 12px; }
.pay-body .xl-pagos { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 6px 0; }
.pay-body table.xl.xl-pay { width: 100%; min-width: 0; }
.badge-no_corresponde { background: var(--red-100); color: var(--red-600); }

/* --- SUBMENU DE FACTURAS --- */
.sidebar-nav ul.sub { list-style: none; margin: 0 0 6px 0; padding: 0; }
.sidebar-nav ul.sub a { padding: 6px 16px 6px 34px; font-size: 13px; }
.sidebar-nav ul.sub .cnt { float: right; background: rgba(255,255,255,.16); border-radius: 10px; padding: 0 8px; font-size: 11px; line-height: 18px; }

/* campos de fecha (selector con formato 20 oct 2026) */
.filters-form input.js-date, .filters-form input.flatpickr-input { min-width: 0; width: 130px; }

/* Facturas: columnas ordenables y paginacion con saltos */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: var(--green-100, #e8f3e8); }
th.sortable .sort-ind { font-size: 10px; color: #9a9a9a; margin-left: 2px; }
th.sortable.sorted .sort-ind { color: var(--green-600, #2e7d32); }
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.pager .pg-cur { background: var(--green-600, #2e7d32); color: #fff; border-color: var(--green-600, #2e7d32); cursor: default; }
.pager .pg-gap { color: #8c8c8c; padding: 0 2px; }
.pager .pg-goto { margin-left: 10px; font-size: 13px; color: #595959; }
.pager .pg-goto input { width: 64px; padding: 4px 6px; border: 1px solid var(--gray-300, #ccc); border-radius: 6px; }

/* Tipo de pedido pendiente en Facturas */
.badge-promo { background: #fff1cc; color: #8a5a00; border: 1px solid #f0c75e; }
.badge-sintipo { background: #fde7e5; color: #9c1c13; border: 1px solid #f0b3ae; }

/* Dashboard: detalle de las barras seleccionadas */
.drill { background: #fff; border-radius: 8px; padding: 16px; margin: 16px 0; }
.drill-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.drill-actions { display: flex; gap: 8px; }
.drill-scroll { max-height: 420px; overflow: auto; margin-top: 8px; }

/* Facturas: resumen de trabajo. Tokens semanticos sobre los primitivos de :root */
:root {
  --work-pending: var(--yellow-600);   /* lo que falta por validar */
  --work-ready: var(--green-600);      /* listo para validar / avance */
  --work-alert: var(--red-600);        /* falta definir SO/MD */
  --work-track: var(--gray-200);
  --work-card-bg: #fff;
}
.work-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 1000px) { .work-hero { grid-template-columns: 1fr; } }
.work-card { display: flex; flex-direction: column; gap: 4px; background: var(--work-card-bg); border-radius: 8px; padding: 14px 18px; border-left: 4px solid var(--gray-300); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.work-main { border-left-color: var(--work-pending); }
.work-ok { border-left-color: var(--work-ready); }
.work-warn { border-left-color: var(--work-alert); }
.work-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-500); }
.work-lbl small { text-transform: none; letter-spacing: 0; }
.work-num { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--gray-900); text-decoration: none; }
.work-money { font-family: "Consolas", monospace; font-size: 14px; color: var(--gray-700); }
.work-sub { font-size: 12px; color: var(--gray-500); }
.work-prog { height: 10px; background: var(--work-track); border-radius: 999px; overflow: hidden; margin: 4px 0; }
.work-prog span { display: block; height: 100%; background: var(--work-ready); border-radius: 999px; }
.work-prog.sm { height: 8px; min-width: 110px; display: inline-block; width: 110px; vertical-align: middle; margin-right: 6px; }
.work-table { margin-bottom: 6px; }
.muted { color: var(--gray-500); }
.drill-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.drill-chips .chip { border: 1px solid var(--gray-300); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--gray-700); }
.drill-chips .chip:hover { background: var(--green-100); }
.drill-chips .chip.on { background: var(--green-600); border-color: var(--green-600); color: #fff; font-weight: 700; }

/* Resumen de trabajo: tabla centrada (solo la sucursal queda a la izquierda) */
.work-table table { width: 100%; }
.work-table th, .work-table td, .work-table .text-right { text-align: center; }
.work-table th:first-child, .work-table td:first-child { text-align: left; min-width: 150px; padding-left: 18px; }
.work-table td { vertical-align: middle; }

/* Menu lateral: grupos por tipo de uso (token semantico sobre el blanco del menu) */
:root { --nav-group-fg: rgba(255,255,255,.5); }
.sidebar-nav .nav-group { padding: 14px 20px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nav-group-fg); }
.sidebar-nav .nav-group:first-child { padding-top: 6px; }

/* Resumen de pagos fijo en la parte superior derecha (junto a mes, sucursales y buscador) */
.xl-top { display: grid; grid-template-columns: minmax(0, 1fr) 760px; gap: 14px; align-items: start; margin-bottom: 14px; }
@media (max-width: 1300px) { .xl-top { grid-template-columns: 1fr; } }
.xl-top-left .xl-pick, .xl-top-left .xl-search { margin-bottom: 14px; }
.xl-top .xl-side { position: static; width: auto; max-width: none; }
.xl-top .pay-card { display: block; max-height: none; overflow: visible; box-shadow: 0 1px 3px rgba(0,0,0,.1); border-radius: 10px; }
.xl-top .pay-head { padding: 8px 14px; }
.xl-top .pay-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px; align-items: center; text-align: left; padding: 8px 14px 10px; }
.xl-top .pay-hero-val { font-size: 26px; margin: 0; }
.xl-top .pay-hero-note { margin-top: 4px; }
.xl-top .pay-body { padding: 0 10px 10px; }
.xl-top .xl-pagos { flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.xl-top .xl-pagos table.xl.xl-pay { width: auto; flex: 1 1 250px; min-width: 0; }
.xl-top .xl-pagos table.xl.xl-pay:first-child { flex: 1.8 1 430px; }
.xl-top table.xl.xl-pay td, .xl-top table.xl.xl-pay th { padding: 3px 8px; font-size: 12px; white-space: normal; }

/* Encabezado y vencimientos del estado de cuenta: ocupan el hueco bajo el buscador, junto al resumen de pagos */
.xl-mini { margin-bottom: 14px; }
.xl-mini .xl-title { padding: 6px 10px; font-size: 12px; }
.xl-mini .xl-info { margin: 4px 10px; font-size: 12px; }
.xl-mini .xl-info td { padding: 1px 8px 1px 0; }
.xl-mini .xl-sec { margin-top: 6px; padding: 4px 10px; font-size: 12px; }
.xl-mini table.xl th, .xl-mini table.xl td { padding: 2px 6px; font-size: 11px; line-height: 1.25; }
.xl-mini table.xl thead th { font-size: 10px; }

/* Hueco compacto: datos del dealer en lineas y buscador de folio en una sola fila */
.xl-mini .xl-info-line { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 5px 10px; font-size: 11.5px; }
.xl-mini .xl-info-dir { flex-basis: 100%; color: var(--gray-700); }
.xl-mini .xl-sec { padding: 2px 10px; font-size: 11px; margin-top: 0; }
.xl-top-left .xl-search { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 14px; }
.xl-top-left .xl-search label { white-space: nowrap; font-size: 13px; }
.xl-top-left .xl-search .xl-search-row { flex: 1 1 260px; }
.xl-top-left .xl-search #g-res { flex-basis: 100%; }

/* Mes y sucursales en menos alto para que el hueco alcance */
.xl-top-left .xl-pick { padding: 8px 12px; margin-bottom: 10px; }
.xl-top-left .xl-pick form { margin-bottom: 6px; }
.xl-top-left .branch-tab { padding: 4px 10px; font-size: 12px; }
.xl-top-left .xl-search { margin-bottom: 10px; }
.xl-mini table.xl td.xl-lbl { white-space: nowrap; }
.xl-mini table.xl th, .xl-mini table.xl td { padding: 1px 6px; line-height: 1.15; }

/* ===== UX (22 oct): foco visible, importes, parcial en violeta, boton de peligro, dialogo y aviso ===== */
:root {
  --partial-fg: #5b2fa3;          /* pago parcial (P): violeta, distinto del azul de SO y En espera */
  --partial-bg: #f1ecfb;
  --partial-border: #cdbdf0;
  --danger-fg: #b3261e;
  --danger-bg: #fdecea;
  --focus-ring: #1e88e5;
}
/* Foco visible para captura por teclado */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px;
}
/* Importes: alineados a la derecha y con digitos del mismo ancho */
td.num, th.num, td.text-right, th.text-right, .font-mono, .work-money, .pay-hero-val, .pg-val, .kpi-v, .stat-value {
  font-variant-numeric: tabular-nums;
}
td.num, td.text-right { text-align: right; }
.work-table td.text-right, .work-table th.text-right { text-align: center; }  /* el resumen de trabajo va centrado */
/* Pago parcial (P) */
.badge-parcial { background: var(--partial-bg); color: var(--partial-fg); border: 1px solid var(--partial-border); }
table.xl tr.xl-mark-p td { background: var(--partial-bg); }
table.xl tr.xl-mark-p td.c-monto { color: var(--partial-fg); font-weight: 700; }
/* Aviso de limite superado (usa el rojo de MD con borde) */
.badge-limite { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid #f0b3ae; font-weight: 700; }
/* Boton de peligro: deshacer o quitar una asignacion */
.btn-danger { background: transparent; border: 1px solid var(--danger-fg); color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-fg); color: #fff; }
.cr-del { border-radius: 6px; padding: 2px 8px; border: 1px solid transparent; }
.cr-del:hover { background: var(--danger-bg); border-color: var(--danger-fg); }
/* Cuadro del monto parcial y avisos en pantalla (sustituyen a prompt() y alert()) */
dialog.dlg { border: 0; border-radius: 12px; padding: 20px 22px; width: 360px; max-width: calc(100vw - 32px); box-shadow: 0 16px 48px rgba(0,0,0,.35); }
dialog.dlg::backdrop { background: rgba(20,30,20,.45); }
dialog.dlg h4 { margin: 0 0 4px; font-size: 17px; }
dialog.dlg label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 700; }
dialog.dlg input { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 16px; font-variant-numeric: tabular-nums; }
.dlg-err { min-height: 18px; margin-top: 6px; font-size: 12.5px; color: var(--danger-fg); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #3b1d1a; color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; max-width: min(560px, calc(100vw - 32px)); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Notas de credito: matriz, antiguedad y simulador */
.cr-bar { display: flex; align-items: center; gap: 16px; margin: 6px 0 8px; flex-wrap: wrap; }
.cr-matrix th[data-k]:hover { text-decoration: underline; }
.cr-matrix .cr-warn { background: #fdecea; color: #b3261e; font-weight: 700; }
.cr-matrix .cr-pendrow td { background: #f6f6f6; border-top: 2px solid #bfbfbf; }
.cr-pbar { display: inline-block; width: 90px; height: 10px; background: #e3e3e3; border-radius: 5px; vertical-align: middle; overflow: hidden; }
.cr-pbar i { display: block; height: 100%; background: var(--green-600); }
.cr-aging { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0; }
.cr-ag { background: #fff; border-radius: 8px; padding: 10px 14px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cr-ag-bar { height: 70px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.cr-ag-bar i { display: block; width: 46px; background: var(--yellow-600); border-radius: 4px 4px 0 0; min-height: 2px; }
.cr-ag.old .cr-ag-bar i { background: var(--red-600); }
.cr-sim { background: #fffbe6; border: 1px solid #e6d98a; border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.cr-sim details { margin-top: 8px; }
.cr-sim summary { cursor: pointer; }
@media (max-width: 700px) { .cr-aging { grid-template-columns: repeat(2, 1fr); } }

/* Simulador de pago */
.sim-reglas { margin: 6px 0 10px; line-height: 1.5; }
.sim-chk { display: inline-flex; align-items: center; gap: 6px; }
.sim-table input.sim-cash { width: 120px; text-align: right; }
.sim-table input[type=date] { width: 138px; }
.sim-table .cr-warn { background: #fdecea; color: #b3261e; font-weight: 700; }
.sim-h { margin: 16px 0 6px; font-size: 15px; }
.sim-h small { color: var(--gray-500); font-weight: 400; }

/* Cierre del estado de cuenta y facturas pagadas */
.cierre-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: #fffbe6; border: 1px solid #e6d98a; font-size: 13px; }
.cierre-bar.cerrado { background: #eaf5ea; border-color: #9fcf9f; }
.pg-group { background: #fff; border-radius: 8px; margin: 8px 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pg-group > summary { cursor: pointer; padding: 10px 14px; }

.nowrap { white-space: nowrap; }
.pagination { margin: 12px 0; display: flex; align-items: center; }

/* Emergencia para pago y real */
.xl-emerg-col { display: flex; flex-direction: column; gap: 8px; }
.xl-pay thead th[colspan] { text-align: left; font-size: 11px; letter-spacing: .3px; }
.xl-real .xl-emerg td { background: #eef2f7; }

/* Los dos cuadros de emergencia van apilados en la columna derecha (sin heredar el flex de las tablas hermanas) */
.xl-top .xl-pagos .xl-emerg-col { flex: 1 1 250px; min-width: 0; }
.xl-top .xl-pagos .xl-emerg-col table.xl.xl-pay { flex: 0 0 auto; width: 100%; }
.pay-body .xl-pagos .xl-emerg-col table.xl.xl-pay { flex: 0 0 auto; width: 100%; }

.xl-top .xl-pagos .xl-emerg-col { flex: 1 1 320px; }
.xl-emerg-col .xl-pay thead th[colspan] { white-space: nowrap; }

.xl-top .xl-pagos .xl-emerg-col { flex: 1 1 250px; }
.xl-emerg-col .xl-pay thead th[colspan] { white-space: normal; }

/* Simulador de pago: guia de uso y marca S del detalle */
.sim-guia ol { margin: 6px 0 6px 20px; padding: 0; line-height: 1.6; }
.sim-guia details { margin-top: 4px; color: #475569; font-size: 12px; }
.sim-guia summary { cursor: pointer; }
.sim-mk { display: inline-block; min-width: 44px; text-align: center; padding: 2px 6px; border: 1px solid #c8c8c8; border-radius: 3px; background: #fff; font-size: 12px; }
table.xl tr.xl-mark .sim-mk { font-weight: 700; color: #166534; border-color: #86c78e; }
.sim-table thead th { vertical-align: bottom; }
.sim-table th, .sim-table td { padding-left: 8px; padding-right: 8px; }
/* Filtro de varias opciones (Tipo de documento) */
.xl-multi { position: relative; }
.xl-multi-btn { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; min-width: 0; padding: 2px 6px; border: 1px solid #c8c8c8; border-radius: 3px; background: #fff; font-size: 11px; color: #222; cursor: pointer; text-align: left; font-family: inherit; }
.xl-multi-btn.on { border-color: #2e7d32; background: #f1f8f1; font-weight: 600; }
.xl-multi-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xl-multi-flecha { font-size: 10px; color: #555; }
.xl-multi-panel { position: fixed; z-index: 1200; max-height: 280px; overflow: auto; background: #fff; border: 1px solid #94a3b8; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 4px 0; font-size: 12px; }
.xl-multi-panel label { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap; font-weight: 400; text-transform: none; letter-spacing: 0; color: #222; }
.xl-multi-panel label:hover { background: #eef6ee; }
.xl-multi-cab { padding: 2px 8px 4px; border-bottom: 1px solid #e2e8f0; margin-bottom: 2px; }
.xl-multi-cab button { border: 0; background: transparent; color: #1d4ed8; font-size: 11.5px; cursor: pointer; padding: 2px 4px; }
/* Columnas de fecha ordenables (Estado de cuenta y Simulador): clic en el título */
table.xl th.xl-sort { cursor: pointer; user-select: none; }
table.xl th.xl-sort::after { content: " ↕"; color: #94a3b8; font-weight: 400; }
table.xl th.xl-sort[aria-sort="ascending"]::after { content: " ▲"; color: #166534; }
table.xl th.xl-sort[aria-sort="descending"]::after { content: " ▼"; color: #166534; }
table.xl th.xl-sort:hover, table.xl th.xl-sort:focus-visible { background: #e8f1e8; outline: none; }
/* Simulador de pago: el detalle usa las mismas medidas que el Estado de cuenta (#docs): relleno compacto, títulos y filtros fijos
   al hacer scroll (la posición de cada fila la calcula stickHeaders() en payment_sim.html) y columnas separadoras angostas. */
#sim-docs thead th { position: sticky; top: 0; z-index: 3; }
#sim-docs thead tr.xl-filter th { background: #fafafa; font-weight: 400; }
#sim-docs th, #sim-docs td { padding: 4px 6px; }
#sim-docs .xl-gap { width: 1px; min-width: 14px; padding: 0; }
#sim-docs thead tr:nth-child(2) th:first-child { min-width: 66px; }
#sim-docs thead tr:nth-child(2) th.xl-fin { min-width: 84px; }
#sim-docs th.xl-band { white-space: nowrap; font-size: 12px; }
#sim-docs td.c-orden { color: #475569; text-align: center; }
/* Avisos y botones del detalle: más aire entre bloques */
#det-aviso { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
#det-aviso .validation-info, #det-aviso .kpi-note { margin: 0; padding: 10px 14px; line-height: 1.5; }
#det .cr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 16px; }
#det .drill-chips { display: flex; flex-wrap: wrap; gap: 10px; }
#det .kpi-grid { margin-bottom: 14px; }