/* ============================================================
   Conciliador ARCA ↔ Flexxus - Cerámica Fantini
   Paleta tomada del logo: amarillo, naranja, celeste, verde agua
   ============================================================ */

:root {
  --negro: #111111;
  --gris-900: #1c1c1c;
  --gris-700: #3a3a3a;
  --gris-500: #6b6b6b;
  --gris-300: #cccccc;
  --gris-100: #f4f4f4;
  --blanco: #ffffff;

  --amarillo: #f5c93a;
  --naranja: #e96b3a;
  --celeste: #5fc4e7;
  --verde:   #8fd1b4;

  --ok:      #2e9e6a;
  --warn:    #e0a53a;
  --err:     #d94a4a;
  --info:    #3a8fe0;

  --shadow: 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10);
  --radius: 10px;

  /* Aliases semánticos (para poder cambiarlos en modo oscuro) */
  --bg-page:       var(--gris-100);
  --bg-card:       #ffffff;
  --bg-card-hover: #fafafa;
  --bg-input:      #ffffff;
  --bg-input-disabled: #fafafa;
  --bg-subtle:     #f8f9fa;
  --text-strong:   var(--gris-900);
  --text-default:  var(--gris-900);
  --text-soft:     var(--gris-700);
  --text-muted:    var(--gris-500);
  --border:        var(--gris-300);
  --border-soft:   #f0f0f0;
}

/* ===== MODO OSCURO ===== */
body.dark {
  --bg-page:       #0f1419;
  --bg-card:       #1a1f2e;
  --bg-card-hover: #222838;
  --bg-input:      #2a3040;
  --bg-input-disabled: #1e2330;
  --bg-subtle:     #222838;
  --text-strong:   #f5f5f5;
  --text-default:  #e0e0e0;
  --text-soft:     #b0b0b0;
  --text-muted:    #808080;
  --border:        #3a4050;
  --border-soft:   #2a3040;
  --gris-100:      #222838;  /* Se usa por varios componentes */
  --gris-300:      #3a4050;
  --gris-500:      #808080;
  --gris-700:      #b0b0b0;
  --gris-900:      #e0e0e0;
  --blanco:        #1a1f2e;  /* "blanco" en dark = fondo card */
  --negro:         #0f1419;  /* para que headers/footers oscuros sigan oscuros */
  --shadow:    0 2px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.5);
}

/* Aplicar aliases al body y reglas que usaban colores fijos */
body {
  background: var(--bg-page) !important;
  color: var(--text-default);
}
body.dark .card {
  background: var(--bg-card);
  color: var(--text-default);
  box-shadow: var(--shadow);
}
body.dark input,
body.dark select,
body.dark textarea {
  background: var(--bg-input);
  color: var(--text-default);
  border-color: var(--border);
}
body.dark input:disabled,
body.dark select:disabled {
  background: var(--bg-input-disabled);
  color: var(--text-muted);
}
body.dark .file-box {
  background: var(--bg-card);
  border-color: var(--border);
}
body.dark .dashboard-intro {
  background: linear-gradient(135deg, #1a1f2e 0%, #222838 100%);
  color: var(--text-default);
}
body.dark .dashboard-intro strong { color: var(--text-strong); }
body.dark .metrica,
body.dark .grafico-box,
body.dark .historica-item,
body.dark .forma-item,
body.dark .inner-table {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-default);
}
body.dark .metrica-valor,
body.dark .historica-monto {
  color: var(--text-strong);
}
body.dark .tabla-pagos th,
body.dark .tabla-mini th,
body.dark table th {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
body.dark table td {
  border-color: var(--border-soft);
}
body.dark .tab-mini {
  background: transparent;
  border-color: var(--border);
  color: var(--text-soft);
}
body.dark .tab-mini:hover {
  border-color: var(--amarillo);
  color: var(--amarillo);
}
body.dark .tab-mini.active {
  background: var(--amarillo);
  color: #0f1419;
  border-color: var(--amarillo);
}
body.dark .fila-aprobada { background: #252b3a; }
body.dark .app-footer { background: #050708; }
body.dark .persona-row[data-persona-idx]:hover { background: var(--bg-card-hover); }
body.dark .persona-detalle { background: #0a0d13; }
body.dark .modal { background: rgba(0,0,0,0.8); }
body.dark .modal-content { background: var(--bg-card); color: var(--text-default); }
body.dark .btn-link {
  background: transparent;
  border-color: var(--border);
  color: var(--text-soft);
}
body.dark .btn-link:hover {
  border-color: var(--amarillo);
  color: var(--amarillo);
  background: transparent;
}
body.dark .app-header {
  background: #050708;
  color: #f5f5f5;  /* en dark, --blanco vale #1a1f2e (fondo de card) y rompe el contraste */
}
/* Inputs con fondo oscuro necesitan que el placeholder sea legible */
body.dark ::placeholder { color: var(--text-muted); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--gris-100);
  color: var(--gris-900);
  font-size: 14px;
}

/* ============ HEADER ============ */
.app-header {
  background: var(--negro);
  color: var(--blanco);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg,
    var(--amarillo) 0%,
    var(--amarillo) 25%,
    var(--naranja)  25%,
    var(--naranja)  50%,
    var(--celeste)  50%,
    var(--celeste)  75%,
    var(--verde)    75%,
    var(--verde)    100%) 1;
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-mark {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.brand-sub {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 4px;
}
.app-header h1 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}
.app-header h1 span {
  color: var(--amarillo);
  font-weight: 700;
}

/* ============ LAYOUT ============ */
.container {
  max-width: 1280px;
  margin: 24px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.card h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gris-900);
  display: flex;
  align-items: center;
  gap: 10px;
}
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--negro);
  color: var(--amarillo);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

/* ============ Período ============ */
.row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.row label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-700);
  gap: 6px;
}
.row label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.row input[type=number],
.row select {
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 6px;
  background: var(--blanco);
  min-width: 160px;
  font-family: inherit;
}

/* ============ Archivos ============ */
.grid-files {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grid-files-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
}
@media (max-width: 900px) {
  .grid-files { grid-template-columns: 1fr; }
  .grid-files-2 { grid-template-columns: 1fr; }
}
.file-box {
  border: 1.5px dashed var(--gris-300);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--gris-100);
  transition: all .2s;
}
.file-box:hover {
  border-color: var(--negro);
  background: var(--blanco);
}
.file-box.loaded {
  border-style: solid;
  border-color: var(--ok);
  background: #f0faf5;
}
.file-box.error {
  border-color: var(--err);
  background: #fdf2f2;
}
.file-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.tag-arca    { background: var(--celeste); color: var(--negro); }
.tag-flexxus { background: var(--naranja); color: var(--blanco); }

.file-name {
  font-size: 12px;
  color: var(--gris-500);
  font-weight: 500;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hint {
  font-size: 12px;
  color: var(--gris-500);
  margin: 4px 0 10px;
}
.file-box input[type=file] {
  width: 100%;
  font-size: 12px;
}
.file-status {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  min-height: 16px;
}
.file-status.ok  { color: var(--ok); }
.file-status.err { color: var(--err); }

/* ============ Controles de vinculación (File System Access API) ============ */
.vincular-controls {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.btn-link {
  background: transparent;
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  color: var(--gris-700);
  cursor: pointer;
  transition: all .15s;
}
.btn-link:hover {
  border-color: var(--negro);
  color: var(--negro);
  background: white;
}
.btn-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-link.btn-recargar {
  border-color: var(--celeste);
  color: var(--info);
  font-weight: 600;
}
.btn-link.btn-recargar:hover {
  background: var(--celeste);
  color: var(--negro);
}
.btn-link.btn-drive {
  border-color: #4285f4;
  color: #4285f4;
}
.btn-link.btn-drive:hover {
  background: #4285f4;
  color: white;
}
.btn-link.btn-desvincular:hover {
  border-color: var(--err);
  color: var(--err);
}
.vincular-hint {
  font-size: 10px;
  color: var(--gris-500);
  font-style: italic;
  margin-top: 4px;
}

/* ============ Botones ============ */
.actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary {
  background: var(--negro);
  color: var(--amarillo);
}
.btn-primary:hover { background: var(--gris-900); transform: translateY(-1px); }
.btn-secondary {
  background: var(--amarillo);
  color: var(--negro);
}
.btn-secondary:hover { background: #ecc033; }
.btn-ghost {
  background: transparent;
  color: var(--gris-700);
  border: 1px solid var(--gris-300);
}
.btn-ghost:hover { background: var(--gris-100); border-color: var(--gris-500); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ============ Mensajes ============ */
#mensajes { display: flex; flex-direction: column; gap: 8px; }
.msg {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  border-left: 4px solid;
  background: var(--blanco);
  box-shadow: var(--shadow);
}
.msg-info  { border-color: var(--info); }
.msg-ok    { border-color: var(--ok);   background: #f0faf5; }
.msg-warn  { border-color: var(--warn); background: #fff8ea; }
.msg-err   { border-color: var(--err);  background: #fdf2f2; }

/* ============ KPIs ============ */
.kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  padding: 16px;
  border-radius: var(--radius);
  text-align: center;
  background: var(--gris-100);
  border-top: 4px solid var(--gris-300);
}
.kpi .n { font-size: 30px; font-weight: 700; line-height: 1; }
.kpi .l { font-size: 11px; font-weight: 600; margin-top: 6px; color: var(--gris-700); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-ok   { border-top-color: var(--ok);   }
.kpi-ok   .n { color: var(--ok);   }
.kpi-warn { border-top-color: var(--warn); }
.kpi-warn .n { color: var(--warn); }
.kpi-err  { border-top-color: var(--err);  }
.kpi-err  .n { color: var(--err);  }
.kpi-dup  { border-top-color: var(--info); }
.kpi-dup  .n { color: var(--info); }

/* ============ Tabs ============ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gris-300);
  margin-bottom: 16px;
  overflow-x: auto;
}
.tab {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-500);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all .15s;
}
.tab:hover { color: var(--gris-900); }
.tab.active {
  color: var(--negro);
  border-bottom-color: var(--amarillo);
}
.panel { display: none; }
.panel.active { display: block; }

/* ============ Tablas ============ */
.tabla-wrap {
  overflow-x: auto;
  border: 1px solid var(--gris-300);
  border-radius: 6px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
th {
  background: var(--gris-100);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--gris-300);
  color: var(--gris-700);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gris-100);
  vertical-align: top;
}
tr:hover td { background: var(--bg-card-hover); }
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* En Cajas de Herramientas, los números de Faltantes/Rotas/Total van centrados bajo su título */
#view-herramientas table th.num,
#view-herramientas table td.num { text-align: center; }
.dif-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fdecec;
  color: var(--err);
  font-weight: 600;
  white-space: nowrap;
}
.dif-zero { background: #e8f5ee; color: var(--ok); }
.mono { font-family: "SF Mono", Consolas, Monaco, monospace; font-size: 12px; }

.empty {
  padding: 36px;
  text-align: center;
  color: var(--gris-500);
  font-style: italic;
}

.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-bar input {
  padding: 6px 10px;
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  min-width: 200px;
}
.row-count {
  font-size: 11px;
  color: var(--gris-500);
  margin-left: auto;
}

/* ============================================================
 *  PAGO A PROVEEDORES
 * ============================================================ */
.tag-pagos { background: #ff8c42; color: white; }

.filtros-pagos {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gris-300);
}
.filtro-grupo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filtro-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  font-weight: 600;
  margin-right: 4px;
}
.tab-mini {
  background: transparent;
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 12px;
  color: var(--gris-700);
  cursor: pointer;
  transition: all .15s;
}
.tab-mini:hover {
  border-color: var(--negro);
  color: var(--negro);
}
.tab-mini.active {
  background: var(--negro);
  color: white;
  border-color: var(--negro);
}

.tabla-pagos {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tabla-pagos th {
  background: var(--gris-100);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  padding: 10px 8px;
  border-bottom: 2px solid var(--gris-300);
  text-align: left;
}
.tabla-pagos th.num { text-align: right; }
.tabla-pagos td {
  padding: 8px;
  border-bottom: 1px solid var(--gris-100);
  vertical-align: middle;
}
.tabla-pagos td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-pagos td.mono { font-family: ui-monospace, Menlo, monospace; }

.pago-version-badge {
  display: inline-block;
  background: var(--celeste);
  color: var(--negro);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: 2px;
  font-weight: 600;
}

.tabla-pagos input,
.tabla-pagos select {
  width: 100%;
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
  background: white;
}
.tabla-pagos input:focus,
.tabla-pagos select:focus {
  outline: 2px solid var(--celeste);
  outline-offset: -1px;
  border-color: var(--celeste);
}
.tabla-pagos input.mono {
  font-family: ui-monospace, Menlo, monospace;
  text-align: right;
}
.tabla-pagos input:disabled,
.tabla-pagos select:disabled {
  background: #fafafa;
  color: var(--gris-500);
  cursor: not-allowed;
}

.pago-urgencia.urg-alta  { background: #ffebeb; color: #c80000; font-weight: 700; }
.pago-urgencia.urg-media { background: #fff8e1; color: #b07000; }
.pago-urgencia.urg-baja  { background: #e8f5e9; color: #2e7d32; }

.pago-fecha {
  font-size: 10px;
  color: var(--gris-500);
  margin-top: 2px;
}

.btn-aprobar {
  background: var(--ok);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  width: 100%;
}
.btn-aprobar:hover { filter: brightness(0.95); }
.btn-aprobar.aprobado {
  background: var(--negro);
  color: var(--amarillo);
}

.fila-aprobada {
  background: #f8f8f8;
  opacity: 0.7;
}
.fila-aprobada td {
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.2);
}
.fila-aprobada .btn-aprobar {
  text-decoration: none;
}

/* Modal de formas de pago */
.forma-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  margin-bottom: 6px;
  background: white;
}
/* ===== Pago: sub-tabs Gestión/Pagado/Plazo ===== */
.pagos-subtabs {
  display: flex;
  gap: 4px;
  margin: 16px 0;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}
.subtab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all .15s;
  margin-bottom: -2px;
}
.subtab:hover {
  color: var(--text-strong);
}
.subtab.active {
  color: var(--negro);
  border-bottom-color: var(--amarillo);
  font-weight: 700;
}
body.dark .subtab.active {
  color: var(--amarillo);
}
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }

.subtab-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.mini-kpi {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}
.mini-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.mini-kpi-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.mini-kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Columnas de pago real: resaltadas sutilmente */
.col-real {
  background: rgba(66,133,244,0.04);
}
body.dark .col-real {
  background: rgba(66,133,244,0.08);
}

/* Cuando todavía no se cargó monto real, mostramos el planificado atenuado */
.col-planificado {
  color: var(--text-muted);
  font-style: italic;
}

/* Filtros chicos arriba de un gráfico (ej. V1/V2/Todos) */
.grafico-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.grafico-header h3 { margin: 0; }
.grafico-filtros {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.filtro-pill {
  background: transparent;
  border: none;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
}
.filtro-pill:hover {
  color: var(--text-strong);
}
.filtro-pill.active {
  background: var(--bg-card, #fff);
  color: var(--text-strong);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
body.dark .filtro-pill.active {
  background: var(--amarillo);
  color: var(--negro);
}

/* Semáforo de plazo */
.plazo-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.plazo-badge.plazo-excelente { background: #d1fae5; color: #065f46; }
.plazo-badge.plazo-bueno     { background: #dbeafe; color: #1e3a8a; }
.plazo-badge.plazo-medio     { background: #fef3c7; color: #78350f; }
.plazo-badge.plazo-malo      { background: #fee2e2; color: #7f1d1d; }
.plazo-badge.plazo-pendiente { background: #e5e7eb; color: #374151; }
body.dark .plazo-badge.plazo-excelente { background: #14532d; color: #86efac; }
body.dark .plazo-badge.plazo-bueno     { background: #1e3a8a; color: #93c5fd; }
body.dark .plazo-badge.plazo-medio     { background: #451a03; color: #fbbf24; }
body.dark .plazo-badge.plazo-malo      { background: #450a0a; color: #fca5a5; }
body.dark .plazo-badge.plazo-pendiente { background: #1f2937; color: #d1d5db; }

.dif-positiva { color: #059669; font-weight: 600; }
.dif-negativa { color: #dc2626; font-weight: 600; }
.dif-neutra   { color: var(--text-muted); }

/* ===== Dashboard de aprobados ===== */
.dashboard-intro {
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-left: 4px solid var(--celeste);
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-700);
}
.dashboard-intro strong { color: var(--negro); }

.metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.metrica {
  background: white;
  border: 1px solid var(--gris-300);
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.metrica-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  font-weight: 600;
  margin-bottom: 6px;
}
.metrica-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--negro);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metrica-sub {
  font-size: 11px;
  color: var(--gris-500);
  margin-top: 4px;
}

.dashboard-graficos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.grafico-box {
  background: white;
  border: 1px solid var(--gris-300);
  border-radius: 6px;
  padding: 16px;
}
.grafico-box h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-700);
  margin: 0 0 12px;
}
.grafico-box-full {
  grid-column: 1 / -1;
}
.grafico-wrap {
  position: relative;
  height: 280px;
}
.grafico-wrap-alto {
  height: 420px;
}

.tabla-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 12px;
}
.tabla-mini th,
.tabla-mini td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}
.tabla-mini th {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--gris-500);
  font-weight: 600;
}
.tabla-mini td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabla-mini .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

@media (max-width: 900px) {
  .dashboard-graficos { grid-template-columns: 1fr; }
}

/* ===== Presentaciones históricas ===== */
.historica-item {
  background: white;
  border: 1px solid var(--gris-300);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all .15s;
}
.historica-item:hover {
  border-color: var(--negro);
  transform: translateX(2px);
}
.historica-fecha {
  font-weight: 700;
  font-size: 14px;
  min-width: 110px;
}
.historica-stats {
  flex: 1;
  font-size: 12px;
  color: var(--gris-700);
}
.historica-monto {
  font-weight: 700;
  font-size: 15px;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.historica-actions {
  display: flex;
  gap: 6px;
}

.modal-ancho .modal-content {
  max-width: 900px;
  width: 90%;
}

/* ===== Combustible ===== */
.tag-combustible { background: #ea4335; color: white; }

.filtro-periodo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 16px;
}
.filtro-fecha {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-default);
}
body.dark .filtro-fecha {
  color-scheme: dark;
}

.alertas-box {
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alerta {
  padding: 12px 16px;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  border-left: 4px solid;
}
.alerta-ic {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.alerta-alerta {
  background: #fff5f5;
  border-color: #ea4335;
  color: #7f1d1d;
}
.alerta-info {
  background: #eff6ff;
  border-color: #4285f4;
  color: #1e3a8a;
}
.alerta-ok {
  background: #f0fdf4;
  border-color: #34a853;
  color: #14532d;
}
body.dark .alerta-alerta { background: #2b1515; color: #fca5a5; }
body.dark .alerta-info   { background: #1a2133; color: #93c5fd; }
body.dark .alerta-ok     { background: #16231a; color: #86efac; }
body.dark .alerta strong { color: var(--text-strong); }

.desvio-alto  { background: rgba(234,67,53,0.08); }
.desvio-medio { background: rgba(251,188,4,0.1); }
.desvio-bajo  { background: rgba(52,168,83,0.08); }

.kpi .n { font-size: 24px; }
.kpi .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }

/* ===== Menús desplegables del header ===== */
.nav-menu {
  position: relative;
  display: inline-block;
}
.nav-menu-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-menu-btn:hover,
.nav-menu.open .nav-menu-btn {
  background: rgba(255,255,255,0.1);
  border-color: var(--amarillo);
  color: var(--amarillo);
}
.nav-menu-btn .caret {
  font-size: 10px;
  transition: transform .2s;
}
.nav-menu.open .nav-menu-btn .caret {
  transform: rotate(180deg);
}
.nav-menu.has-active .nav-menu-btn {
  border-color: var(--amarillo);
  color: var(--amarillo);
}
.nav-menu-items {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #050708;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  min-width: 240px;
  padding: 6px;
  z-index: 100;
  display: none;
}
.nav-menu.open .nav-menu-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-menu-items .view-tab {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: white;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
}
.nav-menu-items .view-tab:hover {
  background: rgba(255,255,255,0.1);
  color: var(--amarillo);
}
.nav-menu-items .view-tab.active {
  background: var(--amarillo);
  color: #0f1419;
  font-weight: 600;
}
body.dark .nav-menu-items {
  background: #0a0d13;
}
@media (max-width: 700px) {
  .nav-menu-items {
    right: auto;
    left: 0;
  }
}

.btn-tema {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 16px;
  cursor: pointer;
  margin-left: 8px;
  transition: all .15s;
  line-height: 1;
}
.btn-tema:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--amarillo);
}
body.dark .btn-tema {
  border-color: var(--amarillo);
}

/* ===== Botón calendario con badge ===== */
.btn-calendario {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 6px;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}
.btn-calendario:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--amarillo);
}
.badge-calendario {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--err);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  line-height: 1.2;
}
.badge-calendario.badge-secundario {
  background: #4285f4;
}

/* ===== Panel lateral del calendario ===== */
.cal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 999;
}
.cal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.cal-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 90vw;
  background: var(--bg-card);
  box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-panel.open {
  transform: translateX(0);
}
body.dark .cal-panel {
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}
.cal-head {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--negro);
  color: white;
  flex-shrink: 0;
}
.cal-head h2 {
  margin: 0;
  font-size: 16px;
  color: white;
}
.cal-head .modal-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
}
.cal-head .modal-close:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--amarillo);
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cal-nav .btn-link {
  padding: 4px 10px;
  font-weight: 600;
}
.cal-nav .btn-link:first-child,
.cal-nav .btn-link:nth-child(3) {
  padding: 2px 12px;
  font-size: 20px;
  line-height: 1;
}
.cal-titulo {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text-strong);
}

.cal-grid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 14px 4px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 14px 14px;
  flex-shrink: 0;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all .1s;
  position: relative;
  background: transparent;
  color: var(--text-default);
  padding: 2px;
}
.cal-day:hover:not(.cal-day-otro) {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.cal-day-otro {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: default;
}
.cal-day-hoy {
  background: var(--amarillo);
  color: var(--negro);
  font-weight: 700;
}
body.dark .cal-day-hoy {
  color: var(--negro);
}
.cal-day-hoy:hover {
  background: var(--amarillo) !important;
}
.cal-day-activo {
  border-color: var(--negro) !important;
  border-width: 2px;
}
body.dark .cal-day-activo {
  border-color: var(--amarillo) !important;
}
.cal-day-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  min-height: 5px;
}
.cal-day-dots .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.cal-day-dots .dot-imp { background: var(--err); }
.cal-day-dots .dot-sec { background: #4285f4; }

.cal-dia-detalle {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.cal-dia-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.cal-dia-titulo strong {
  font-size: 14px;
  text-transform: capitalize;
  color: var(--text-strong);
}
.cal-dia-titulo .btn-primary {
  padding: 6px 12px;
  font-size: 12px;
}

.cal-evento {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
}
.cal-evento:hover {
  transform: translateX(-2px);
  box-shadow: -2px 2px 8px rgba(0,0,0,0.06);
}
.cal-evento-importante { border-left-color: var(--err); }
.cal-evento-secundario { border-left-color: #4285f4; }
.cal-evento-pasado { opacity: 0.5; }
.cal-evento-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cal-evento-titulo {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
}
.cal-evento-hora {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  flex-shrink: 0;
}
.cal-evento-desc {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.cal-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* Modal evento: inputs y radios */
#modal-evento label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}
#modal-evento input,
#modal-evento textarea {
  margin-top: 4px;
}
.ev-prioridad {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.ev-recurrencia {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ev-recurrencia .ev-radio {
  flex: 1 1 120px;
  padding: 8px 10px;
  font-size: 12px;
}
.ev-rec-info {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.ev-serie-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(245,201,58,0.2);
  color: var(--amarillo);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ev-radio {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 0 !important;
  transition: all .15s;
}
.ev-radio:has(input:checked) {
  border-color: var(--amarillo);
  background: rgba(245,201,58,0.1);
}
.ev-radio input {
  margin: 0;
  width: auto;
}
.ev-radio span {
  font-size: 13px;
  color: var(--text-default);
}

/* ===== Toast de alertas ===== */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--err);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: slideInToast .3s ease;
}
body.dark .toast {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.toast-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-content {
  flex: 1;
}
.toast-titulo {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-strong);
  margin-bottom: 2px;
}
.toast-mensaje {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}
.toast-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.toast-close:hover {
  color: var(--text-strong);
}
@keyframes slideInToast {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (max-width: 500px) {
  .cal-panel { width: 100%; max-width: 100%; }
}
.app-footer {
  width: 100%;
  text-align: center;
  padding: 32px 20px;
  background: var(--negro);
  color: #e8e8e8;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.5px;
  border-top: 3px solid var(--amarillo);
  box-sizing: border-box;
}

/* ============================================================
 *  NAVEGACIÓN ENTRE VISTAS (Conciliación / Herramientas)
 * ============================================================ */
.app-header {
  flex-wrap: wrap;
}
.view-nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.view-tab {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.view-tab:hover {
  color: white;
  border-color: rgba(255,255,255,0.4);
}
.view-tab.active {
  background: var(--amarillo);
  color: var(--negro);
  border-color: var(--amarillo);
}

.view { display: none; }
.view.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============ Grilla archivos variantes ============ */
.grid-files-1 {
  grid-template-columns: 1fr;
  max-width: 600px;
}

/* ============ Tag para herramientas ============ */
.tag-tools {
  background: var(--verde);
  color: var(--negro);
}

/* ============ KPIs extras ============ */
.kpis-4 { grid-template-columns: repeat(4, 1fr); }
.kpis-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 800px) {
  .kpis-4 { grid-template-columns: repeat(2, 1fr); }
  .kpis-5 { grid-template-columns: repeat(2, 1fr); }
}

.kpi-info  { border-top-color: var(--info);  }
.kpi-info  .n { color: var(--info);  }
.kpi-money { border-top-color: var(--amarillo); }
.kpi-money .n { color: var(--negro); }

/* ============ Badges de estado de herramientas ============ */
.badge-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.badge-ok        { background: #e8f5ee; color: var(--ok); }
.badge-faltante  { background: #fdecec; color: var(--err); }
.badge-rota      { background: #fff1e0; color: #d37a00; }

/* Botones pequeños dentro de tabla (para editar estado, etc.) */
.btn-small {
  font-family: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--gris-300);
  background: white;
  border-radius: 4px;
  cursor: pointer;
}
.btn-small:hover { background: var(--gris-100); }

/* ============ MODALES ============ */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal[style*="flex"] { display: flex !important; }
.modal-content {
  background: white;
  border-radius: var(--radius);
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-head, .modal-foot {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-head {
  border-bottom: 1px solid var(--gris-300);
  justify-content: space-between;
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-foot {
  border-top: 1px solid var(--gris-300);
  justify-content: flex-end;
}
.modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--gris-500);
  padding: 4px 10px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--gris-100); color: var(--gris-900); }

/* Input de precios inline */
.precio-input {
  width: 120px;
  padding: 4px 8px;
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  text-align: right;
}
.precio-input:focus { border-color: var(--amarillo); outline: none; }
.precio-faltante { background: #fff8ea !important; }

/* Tag de cantidad en tabla de personas */
.cant-cell {
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  display: inline-block;
  min-width: 28px;
  text-align: center;
}
.cant-faltante { background: #fdecec; color: var(--err); }
.cant-rota     { background: #fff1e0; color: #d37a00; }
.cant-zero     { color: var(--gris-500); font-weight: 500; }

/* Entrada del historial */
.historial-entry {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gris-100);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.historial-entry:hover { background: var(--gris-100); }
.historial-entry .fecha {
  font-weight: 700;
  font-size: 14px;
  min-width: 110px;
}
.historial-entry .stats {
  flex: 1;
  font-size: 12px;
  color: var(--gris-700);
}
.historial-entry .monto {
  font-weight: 700;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

/* ============ Tabla de personas con desplegable ============ */
.persona-row[data-persona-idx] {
  cursor: pointer;
}
.persona-row[data-persona-idx]:hover {
  background: var(--bg-card-hover);
}
.expand-ind {
  font-size: 13px;
  color: var(--gris-500);
  transition: transform .15s;
}
.persona-detalle {
  background: var(--bg-subtle);
}
.persona-detalle > td {
  padding: 12px 24px 16px !important;
}
.inner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.inner-table th {
  background: white;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  padding: 8px 12px;
  border-bottom: 1px solid var(--gris-300);
}
.inner-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.arrastre-badge {
  display: inline-block;
  background: var(--err);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* ============================================================
 *  DARK MODE — ajustes estéticos finos (badges, chips, modals)
 *  Los fondos pastel con tinta de color quedan horribles sobre
 *  el gris oscuro; se reemplazan por variantes saturadas.
 * ============================================================ */
body.dark .badge-ok        { background: #14532d; color: #86efac; }
body.dark .badge-faltante  { background: #4a1515; color: #fca5a5; }
body.dark .badge-rota      { background: #3b2410; color: #fbbf24; }

body.dark .cant-faltante   { background: #4a1515; color: #fca5a5; }
body.dark .cant-rota       { background: #3b2410; color: #fbbf24; }
body.dark .cant-zero       { color: var(--text-muted); }

body.dark .dif-badge       { background: #4a1515; color: #fca5a5; }
body.dark .dif-zero        { background: #14532d; color: #86efac; }

body.dark .precio-faltante { background: #3b2410 !important; }
body.dark .precio-input    { background: var(--bg-input); color: var(--text-default); border-color: var(--border); }
body.dark .precio-input:focus { border-color: var(--amarillo); }

body.dark .modal-content   { background: var(--bg-card); color: var(--text-default); }
body.dark .modal-head      { border-bottom-color: var(--border); }
body.dark .modal-foot      { border-top-color: var(--border); }
body.dark .modal-close     { color: var(--text-muted); }
body.dark .modal-close:hover { background: var(--bg-card-hover); color: var(--text-strong); }

body.dark .btn-small       { background: var(--bg-input); color: var(--text-default); border-color: var(--border); }
body.dark .btn-small:hover { background: var(--bg-card-hover); }

body.dark .inner-table     { background: var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
body.dark .inner-table th  { background: var(--bg-subtle); color: var(--text-muted); border-bottom-color: var(--border); }
body.dark .inner-table td  { border-bottom-color: var(--border-soft); }

body.dark .historial-entry         { border-bottom-color: var(--border-soft); }
body.dark .historial-entry:hover   { background: var(--bg-card-hover); }
body.dark .historial-entry .stats  { color: var(--text-soft); }
body.dark .historial-entry .monto  { color: #86efac; }

body.dark .cal-evento              { background: var(--bg-card); border-color: var(--border); }
body.dark .cal-evento:hover        { box-shadow: -2px 2px 8px rgba(0,0,0,0.4); }
body.dark .cal-evento-secundario   { border-left-color: #60a5fa; }
body.dark .cal-day-dots .dot-sec   { background: #60a5fa; }
body.dark .cal-empty               { color: var(--text-muted); }

body.dark .ev-radio                { border-color: var(--border); }
body.dark .ev-radio:has(input:checked) { border-color: var(--amarillo); background: rgba(245,201,58,0.15); }

body.dark .toast                   { background: var(--bg-card); border-color: var(--border); }
body.dark .toast-titulo            { color: var(--text-strong); }
body.dark .toast-mensaje           { color: var(--text-soft); }

/* Hover sobre filas de tablas grandes ya usa var(--bg-card-hover) globalmente */
body.dark .tabla-wrap { color: var(--text-default); }

body.dark .file-box.loaded { background: #16231a; border-color: #14532d; }
body.dark .file-box.error  { background: #2b1515; border-color: #4a1515; }

body.dark .msg-ok   { background: #16231a; color: #86efac; }
body.dark .msg-warn { background: #3b2410; color: #fbbf24; }
body.dark .msg-err  { background: #2b1515; color: #fca5a5; }

body.dark .pago-urgencia.urg-alta  { background: #4a1515; color: #fca5a5; }
body.dark .pago-urgencia.urg-media { background: #3b2410; color: #fbbf24; }
body.dark .pago-urgencia.urg-baja  { background: #14532d; color: #86efac; }

body.dark .plazo-badge.plazo-medio { background: #3b2410; color: #fbbf24; }
body.dark .plazo-badge.plazo-malo  { background: #4a1515; color: #fca5a5; }

body.dark .tabla-pagos input:disabled,
body.dark .tabla-pagos select:disabled { background: var(--bg-input-disabled); color: var(--text-muted); }


/* ============================================================
   REPORTE PAÑOL
   ============================================================ */
.tag-rep-panol { background: #7c3aed; color: white; }

/* Refuerzo visual cuando estás arrastrando un archivo sobre el dropzone */
.file-box.drag-over {
  border-color: var(--info);
  background: rgba(58, 143, 224, 0.08);
  border-style: solid;
}
body.dark .file-box.drag-over {
  background: rgba(58, 143, 224, 0.15);
}

/* Panel de columnas detectadas: chips verdes (ok) y rojos (faltantes) */
.rep-detectadas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 12px;
  font-size: 12px;
}
.rep-col-title {
  font-weight: 600;
  color: var(--text-soft);
  margin-right: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rep-col-ok,
.rep-col-missing {
  padding: 3px 8px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.rep-col-ok {
  background: rgba(46, 158, 106, 0.12);
  color: var(--ok);
  border: 1px solid rgba(46, 158, 106, 0.3);
}
.rep-col-missing {
  background: rgba(217, 74, 74, 0.12);
  color: var(--err);
  border: 1px solid rgba(217, 74, 74, 0.3);
  text-decoration: line-through;
}

/* Toggle "Excluir Producción" */
.rep-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}
.rep-toggle:hover {
  background: var(--bg-card-hover);
  border-color: var(--info);
}
.rep-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  accent-color: var(--err);
}
.rep-toggle input:checked + span {
  color: var(--err);
  font-weight: 600;
}

/* Δ% vs período anterior debajo de los KPIs */
.rep-kpi-delta {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 14px;
}
.rep-delta-up      { color: var(--ok); }
.rep-delta-down    { color: var(--err); }
.rep-delta-neutral { color: var(--text-muted); font-weight: normal; }

/* Select de filtros (reusa estilos de input pero ancho completo en el grupo) */
.filter-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-default);
  font-size: 13px;
  font-family: inherit;
  min-width: 200px;
  flex: 1;
}
.filter-input:focus {
  outline: none;
  border-color: var(--info);
}

/* Sección de insights */
.rep-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.rep-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.rep-insight-alert {
  border-left-color: var(--err);
  background: rgba(217, 74, 74, 0.06);
}
.rep-insight-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.rep-insight-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 12px;
  text-align: center;
  font-size: 13px;
}

/* Cruzada: primera columna más ancha, números a la derecha */
#rep-tabla-cruzada td:first-child,
#rep-tabla-categorias td:first-child {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ============================================================
   REPORTE DE PROVEEDORES (centro de inteligencia)
   Estética: layout BI, tipografía sobria, colores señalizadores.
   ============================================================ */

/* Empty state */
.rp-empty {
  padding: 32px 24px;
  text-align: center;
}
.rp-empty h2 {
  margin: 0 0 12px;
  font-weight: 500;
  color: var(--text-strong);
}
.rp-empty p {
  color: var(--text-soft);
  margin: 0 0 12px;
}
.rp-empty ul {
  display: inline-block;
  text-align: left;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
  margin: 8px 0 20px;
}

/* Semáforos en KPIs */
.rp-kpi-semaforo {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: 0.3px;
}
.rp-sem-ok      { color: #16a34a; }
.rp-sem-warn    { color: #ca8a04; }
.rp-sem-err     { color: #dc2626; }
.rp-sem-neutral { color: var(--text-muted); font-weight: 400; }

/* Chips de síntesis Pareto */
.rp-pareto-sintesis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.rp-chip {
  padding: 6px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-soft);
}
.rp-chip strong {
  color: var(--text-strong);
  font-weight: 600;
}
.rp-chip-main {
  background: rgba(37, 99, 235, 0.06);
  border-color: #2563eb;
  color: #1e40af;
}
body.dark .rp-chip-main {
  background: rgba(37, 99, 235, 0.15);
  color: #93bbfd;
}

/* Nota contextual (forecast, plazos) */
.rp-nota {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
}

/* Heatmap día-semana */
.rp-heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 8px 0;
}
.rp-hm-celda {
  aspect-ratio: 1;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(37, 99, 235, 0.2);
  transition: transform .15s, box-shadow .15s;
  cursor: default;
  min-height: 80px;
}
.rp-hm-celda:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.rp-hm-dia {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-default);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rp-hm-count {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1;
}
.rp-hm-monto {
  font-size: 10px;
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Barra de score (0-100) dentro de tabla */
.rp-score-bar {
  display: inline-block;
  width: 80px;
  height: 8px;
  background: var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}
.rp-score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s;
}
.rp-score-num {
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-strong);
  vertical-align: middle;
}

/* Tabla "Plazo y formas por proveedor" */
.rp-prov-plazo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rp-prov-plazo-controles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rp-prov-plazo-controles input[type="search"] {
  min-width: 200px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-default);
  font-size: 13px;
}
.rp-prov-plazo-controles select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-default);
  font-size: 13px;
}
.rp-prov-plazo-sub {
  font-size: 10px;
  color: var(--text-soft);
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rp-prov-formas {
  max-width: 360px;
  line-height: 1.8;
}
.rp-forma-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 11px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  margin: 2px 3px 2px 0;
  color: var(--text-default);
  white-space: nowrap;
}

/* ===== Asistente de preguntas (RP_QA) ===== */
.rp-qa-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}
.rp-qa-input-row input {
  flex: 1;
  min-width: 240px;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input, white);
  color: var(--text-default);
  font-family: inherit;
}
.rp-qa-input-row input:focus {
  outline: none;
  border-color: var(--amarillo, #ffc400);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.15);
}

.rp-qa-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.rp-qa-chip {
  background: var(--bg-subtle, #f7f7f5);
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.rp-qa-chip:hover {
  background: var(--amarillo, #ffc400);
  border-color: var(--amarillo, #ffc400);
  color: #1a1a1a;
}
body.dark .rp-qa-chip { background: rgba(148, 163, 184, 0.08); }

.rp-qa-respuesta {
  margin-top: 8px;
}
.rp-qa-respuesta:empty { display: none; }
.rp-qa-respuesta-card {
  background: var(--bg-subtle, #fcfcfa);
  border-left: 4px solid var(--amarillo, #ffc400);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-default);
}
.rp-qa-respuesta-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-default);
}
.rp-qa-respuesta-card p { margin: 6px 0; }
.rp-qa-respuesta-card ul { margin: 6px 0; padding-left: 22px; }
.rp-qa-respuesta-card li { margin: 3px 0; }
.rp-qa-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.rp-qa-tabla td {
  padding: 6px 10px;
  border-bottom: 1px dashed var(--border);
}
.rp-qa-tabla td.num { text-align: right; font-feature-settings: "tnum"; }
.rp-qa-tabla tr:last-child td { border-bottom: none; }
.rp-qa-pos { color: var(--ok, #15803d); font-weight: 600; }
.rp-qa-neg { color: var(--err, #b91c1c); font-weight: 600; }

/* ===== Formas de pago — cards ===== */
.rp-formas-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rp-formas-header-left { flex: 1; min-width: 240px; }
.rp-formas-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amarillo, #ffc400);
  border-radius: 8px;
  padding: 12px 18px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.dark .rp-formas-kpi {
  background: rgba(148, 163, 184, 0.04);
  border-color: rgba(148, 163, 184, 0.18);
  border-left-color: var(--amarillo, #ffc400);
}
.rp-formas-kpi__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-soft);
}
.rp-formas-kpi__valor {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-default);
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.rp-formas-kpi__sub {
  font-size: 11px;
  color: var(--text-soft);
}
.rp-formas-kpi__sema {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: 4px;
  align-self: flex-start;
}

.rp-formas-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.rp-formas-resumen strong {
  color: var(--text-default);
  font-weight: 700;
}

.rp-formas-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.rp-formas-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  margin-bottom: -1px;
  transition: all .15s;
}
.rp-formas-tab:hover { color: var(--text-default); }
.rp-formas-tab.active {
  color: var(--text-default);
  border-bottom-color: var(--amarillo);
}

.rp-formas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.rp-formas-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
body.dark .rp-formas-chart-wrap {
  background: rgba(148, 163, 184, 0.04);
  border-color: rgba(148, 163, 184, 0.18);
}

.rp-forma-card {
  position: relative;
  padding: 14px 16px 16px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rp-forma-card:hover {
  border-color: var(--text-soft);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.rp-forma-card.is-open {
  grid-column: 1 / -1;
  cursor: default;
  border-color: var(--amarillo);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.rp-forma-card.is-open:hover {
  transform: none;
}

.rp-forma-card__detalle {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.rp-forma-card__detalle-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 700;
}
.rp-forma-card__detalle-cerrar {
  background: transparent;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.rp-forma-card__detalle-cerrar:hover {
  background: var(--bg-subtle);
  color: var(--text-default);
}
.rp-forma-prov-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rp-forma-prov-tabla th,
.rp-forma-prov-tabla td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.rp-forma-prov-tabla th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-soft);
}
.rp-forma-prov-tabla td.num,
.rp-forma-prov-tabla th.num {
  text-align: right;
  font-feature-settings: "tnum";
}
.rp-forma-prov-tabla tr:last-child td { border-bottom: none; }
body.dark .rp-forma-card {
  background: rgba(148, 163, 184, 0.04);
  border-color: rgba(148, 163, 184, 0.18);
}

.rp-forma-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2px;
}
.rp-forma-card__valor {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-default);
  line-height: 1.15;
  font-feature-settings: "tnum";
}
.rp-forma-card__sub {
  font-size: 12px;
  color: var(--text-soft);
}
.rp-forma-card__sep {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 8px 0 6px;
}
.rp-forma-card__bar {
  position: relative;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
body.dark .rp-forma-card__bar { background: rgba(148, 163, 184, 0.12); }
.rp-forma-card__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}
.rp-forma-card__pct {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-default);
  letter-spacing: 0.5px;
}
.rp-forma-card__pct-of {
  color: var(--text-soft);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.rp-forma-chip-n {
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}
body.dark .rp-forma-chip {
  background: rgba(148, 163, 184, 0.08);
}

/* Badges de clasificación */
.rp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.rp-badge-ok    { background: rgba(22, 163, 74, 0.12); color: #15803d; border: 1px solid rgba(22, 163, 74, 0.3); }
.rp-badge-warn  { background: rgba(202, 138, 4, 0.12); color: #a16207; border: 1px solid rgba(202, 138, 4, 0.3); }
.rp-badge-err   { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.3); }
.rp-badge-info  { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; border: 1px solid rgba(37, 99, 235, 0.3); }
.rp-badge-muted { background: var(--bg-subtle); color: var(--text-soft); border: 1px solid var(--border); }
body.dark .rp-badge-ok    { color: #86efac; background: rgba(22, 163, 74, 0.18); }
body.dark .rp-badge-warn  { color: #fbbf24; background: rgba(202, 138, 4, 0.18); }
body.dark .rp-badge-err   { color: #fca5a5; background: rgba(220, 38, 38, 0.18); }
body.dark .rp-badge-info  { color: #93bbfd; background: rgba(37, 99, 235, 0.18); }

/* Anomalías */
.rp-anomalias {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rp-anomalia {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid #ca8a04;
  border-radius: 6px;
}
.rp-anomalia-ic {
  font-size: 18px;
  color: #ca8a04;
  flex-shrink: 0;
}
.rp-anomalia-tit {
  font-size: 13px;
  color: var(--text-strong);
  margin-bottom: 3px;
}
.rp-anomalia-sub {
  font-size: 11px;
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Recomendaciones */
.rp-recomendaciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rp-rec {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid #64748b;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.rp-rec-alta  { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.03); }
.rp-rec-media { border-left-color: #ca8a04; background: rgba(202, 138, 4, 0.03); }
.rp-rec-baja  { border-left-color: #2563eb; }
body.dark .rp-rec-alta  { background: rgba(220, 38, 38, 0.08); }
body.dark .rp-rec-media { background: rgba(202, 138, 4, 0.08); }

.rp-rec-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.rp-rec-body { flex: 1; }
.rp-rec-tit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rp-rec-txt {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.rp-rec-badge {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.rp-rec-badge-alta  { background: #dc2626; color: white; }
.rp-rec-badge-media { background: #ca8a04; color: white; }
.rp-rec-badge-baja  { background: #2563eb; color: white; }

/* Modal de drill-down por proveedor */
.rp-drill-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 800px) {
  .rp-drill-grid { grid-template-columns: repeat(2, 1fr); }
}
.rp-drill-kpi {
  padding: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
}
.rp-drill-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.rp-drill-val {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-strong);
}
.rp-drill-section {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  font-weight: 600;
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.rp-drill-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.rp-drill-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.rp-drill-list li:last-child { border-bottom: none; }
.rp-drill-list li strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-strong);
}

/* KPIs deltas (compartido con Reporte Pañol) */
.kpis.kpis-3 { grid-template-columns: repeat(3, 1fr); }

.modal-ancho .modal-content,
.modal-content.modal-ancho {
  max-width: 1000px;
}

/* ===== Remitos Bustos (OCR) — adapta a modo claro/oscuro ===== */
#rb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.rb-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-default);
}
.rb-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.rb-card-img-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.rb-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.rb-card label {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rb-card input[type="number"],
.rb-card input[type="text"] {
  background: var(--bg-input);
  color: var(--text-default);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
}
.rb-card-actions {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.rb-card-actions .btn {
  font-size: 11px;
  padding: 4px 8px;
}
.rb-card-actions .rb-btn-eliminar { color: var(--err); }
.rb-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-page);
  color: var(--text-default);
}
.rb-st-ok    { background: rgba(46, 158, 106, .15); color: var(--ok); }
.rb-st-proc  { background: rgba(58, 143, 224, .15); color: var(--info); }
.rb-st-err   { background: rgba(217, 74, 74, .15); color: var(--err); }
.rb-st-warn  { background: rgba(224, 165, 58, .18); color: var(--warn); }
.rb-st-pend  { background: var(--bg-page); color: var(--text-muted); }

.rb-progress {
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-default);
}
.rb-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.rb-progress-track {
  height: 6px;
  background: var(--bg-page);
  border-radius: 3px;
  overflow: hidden;
}
.rb-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--info);
  transition: width .25s;
}