/* resiter/css/40-ajustes-globales.css — Ajustes globales v5.1: selects, tablas compactas, modales claros, selects con búsqueda.
   Forma parte del CSS único de index.html (orden R2): se carga en el orden de los <link>; al editar este archivo,
   subir su ?v= en index.html. */
/* ══════════════════════════════════════════════════
   FIXES GLOBALES v5.1 — 26/05/2026
══════════════════════════════════════════════════ */

/* 1. SELECTS/DROPDOWNS — opciones visibles en dark */
select, .sel-sm {
  color-scheme: dark;
}
select option {
  background: #1a2035 !important;
  color: #e2e8f0 !important;
  padding: 6px 10px;
}
select option:hover,
select option:checked {
  background: #1d4ed8 !important;
  color: #fff !important;
}
/* El primer option (placeholder) */
select option[value=""] {
  color: rgba(255,255,255,.5) !important;
}

/* 1b. Excepción — selects de Mes/Año (Historial, Odómetro, Combustible)
   quedan fuera del componente con buscador (data-ss-skip) y por eso sí
   mostraban el desplegable oscuro nativo de arriba. Se les da estilo
   claro, consistente con el resto de la app. */
.dfb-sel {
  color-scheme: light;
}
.dfb-sel option {
  background: #ffffff !important;
  color: #0c2d5a !important;
  padding: 6px 10px;
}
.dfb-sel option:hover,
.dfb-sel option:checked {
  background: #185FA5 !important;
  color: #ffffff !important;
}

/* 2. THEAD STICKY — en TODAS las tablas */
.table-wrap { position: relative; }
.table-wrap table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}
body.in-module .table-wrap table thead tr {
  background: #f4f7fb !important;
}
body.in-module .table-wrap table thead th {
  background: #f4f7fb !important;
  border-bottom: 1px solid rgba(7,55,99,0.12) !important;
  box-shadow: 0 1px 0 rgba(7,55,99,0.08);
}

/* 3. BADGES estado mejorados */
.badge-correcto  { background: rgba(21,128,61,.18); color: #4ade80; border: 1px solid rgba(21,128,61,.3); }
.badge-corregido { background: rgba(234,179,8,.15); color: #facc15; border: 1px solid rgba(234,179,8,.3); }
.badge-observado { background: rgba(245,158,11,.18); color: #fb923c; border: 1px solid rgba(245,158,11,.3); }
.badge-rechazado { background: rgba(185,28,28,.18); color: #f87171; border: 1px solid rgba(185,28,28,.3); }
.badge-pendiente { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
/* ── Selector "todos/varios" con checkboxes (compartido: hoy solo lo usa Comparativo) ── */
.bi-ms-btn{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 9px;font-size:11px;border:1px solid #cbd5e1;border-radius:6px;background:#f8fafc;color:#0f172a;cursor:pointer;min-width:110px;user-select:none;white-space:nowrap;font-family:inherit}
.bi-ms-btn:hover{border-color:#93c5fd;background:#eff6ff}
.bi-ms-btn.open{border-color:#3B82F6;background:#eff6ff;box-shadow:0 0 0 2px rgba(59,130,246,.15)}
.bi-ms-btn.has-sel{border-color:#3B82F6;color:#1d4ed8;font-weight:600}
.bi-ms-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:160px;max-width:220px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.13);z-index:500;max-height:220px;overflow-y:auto;padding:4px 0}
.bi-ms-panel.open{display:block}
.bi-ms-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:11px;color:#1e293b;transition:background .1s}
.bi-ms-item:hover{background:#f1f5f9}
.bi-ms-item input[type=checkbox]{accent-color:#3B82F6;width:13px;height:13px;cursor:pointer;flex-shrink:0}
.bi-ms-sep{border:none;border-top:1px solid #f1f5f9;margin:2px 0}
.dfb-bar{display:flex;align-items:center;gap:5px;padding:7px 0 5px;flex-wrap:wrap;border-bottom:1px solid var(--border-soft);margin-bottom:8px}
.dfb-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.dfb-btn{padding:3px 11px;font-size:11px;font-weight:600;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;transition:all .15s;font-family:inherit;line-height:1.6}
.dfb-btn:hover{background:var(--surface2);color:var(--text)}
.dfb-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.dfb-sep{color:var(--border);font-size:14px;margin:0 2px}
.dfb-sel{padding:3px 8px;font-size:11px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text2);cursor:pointer;font-family:inherit}

/* 4. CARD — menos padding en dark, más densa */
body.in-module .card { padding: 14px 18px !important; margin-bottom: 10px !important; }
body.in-module .kpi-grid { gap: 8px !important; margin-bottom: 12px !important; }
body.in-module .kpi-card { padding: 12px 14px !important; }
body.in-module .kpi-value { font-size: 28px !important; font-weight: 800 !important; }
body.in-module .kpi-label { font-size: 10px !important; }

/* 5. PAGE HEADER compacto en módulos */
body.in-module .page-header { margin-bottom: 14px !important; }
body.in-module .page-header h1 { font-size: 18px !important; }
body.in-module .page-header p  { font-size: 11px !important; }

/* 6. TOPBAR módulo — compacto */
body.in-module 

/* 7. TABAREA más compacto */
body.in-module #tabArea { padding: 16px 20px !important; }

/* 8. Badge PRÉSTAMO con CECO */
.badge-prestamo-ceco {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
}
.badge-prestamo-ceco .p-lbl { font-size: 10px; font-weight: 700; color: #fb923c; }
.badge-prestamo-ceco .p-ceco { font-size: 9px; color: rgba(251,146,60,.7); }

/* 9. HUB — números de tiles más grandes y legibles */
.hub-tile-num { font-size: 38px !important; font-weight: 900 !important; letter-spacing: -.05em !important; }
.hub-tile-name { font-size: 16px !important; font-weight: 700 !important; }
.hub-tile-sub  { font-size: 11.5px !important; }
.hub-greeting  { font-size: 32px !important; }

/* 10. HUB tiles — íconos con efecto hover */
.hub-tile-icon {
  font-size: 28px !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1), filter .2s !important;
  display: inline-block;
}
.hub-tile:hover .hub-tile-icon {
  transform: scale(1.2) rotate(-5deg) !important;
  filter: drop-shadow(0 4px 12px rgba(255,255,255,.25)) !important;
}

/* 11. Feed activity — más compacto */
.hub-feed-text { font-size: 12.5px !important; line-height: 1.35 !important; }

/* 12. Odómetro — form más compacto */
.odo-form-compact .field { margin-bottom: 8px !important; }
.odo-form-compact .field input,
.odo-form-compact .field select { padding: 6px 10px !important; font-size: 12px !important; }

/* 13. Tablas — filas mas densas, para que quepa mas sin perder datos
   (equivalente a como se ve el sistema con el zoom del navegador al 80%,
   pero por defecto, sin que cada quien tenga que bajarlo) */
body.in-module table tbody td { padding: 5px 9px !important; font-size: 11px !important; }
body.in-module table thead th { padding: 6px 9px !important; font-size: 8.5px !important; }
body.in-module table tbody td .btn.sm { padding: 3px 8px !important; font-size: 10px !important; }
body.in-module table tbody td .badge { padding: 2px 7px !important; font-size: 9px !important; }

/* 14. Scrollbar tabArea en módulo */
body.in-module #tabArea::-webkit-scrollbar { width: 4px !important; }

/* 15. Pill row compacta */
body.in-module .pill-row { margin-bottom: 10px !important; }
body.in-module .pill { padding: 5px 13px !important; font-size: 11px !important; }

/* 16. Resto de la UI del modulo mas compacta — mismo criterio que las tablas
   (item 13), para que el sistema se vea denso por defecto sin depender del
   zoom del navegador. */
body.in-module #tabArea { padding: 12px 16px !important; }
body.in-module .card { padding: 12px 14px !important; margin-bottom: 9px !important; }
body.in-module .btn:not(.sm):not(.lg) { padding: 6px 13px !important; font-size: 11px !important; }
body.in-module .field label { font-size: 9.5px !important; }
body.in-module .field input,
body.in-module .field select,
body.in-module .field textarea { padding: 6px 10px !important; font-size: 12px !important; }
body.in-module .fg,
body.in-module .form-group { gap: 9px !important; margin-bottom: 10px !important; }

/* ── MODAL CORRECCION — light ── */
#modal-correccion .modal {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.12) !important;
}
#modal-correccion .modal-title { color: var(--text) !important; border-bottom-color: var(--border) !important; }
#modal-correccion input, #modal-correccion textarea {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
#modal-correccion label { color: var(--text2) !important; }

/* ── MODAL HIST — light ── */
#modal-hist .modal {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.12) !important;
}
#modal-hist .modal-title {
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
/* ── MODAL DRV — light ── */
#modal-drv .modal {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.15) !important;
}
#modal-drv .modal-title {
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}

/* ── SEARCHABLE SELECTS — Filtro de texto en dropdowns ── */
.sel-search-wrap { position: relative; display: inline-block; }
.sel-search-wrap input {
  padding: 7px 30px 7px 12px;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm); background: rgba(255,255,255,.06);
  color: #fff; font-size: 12px; font-family: inherit; outline: none;
  min-width: 160px; cursor: text;
}
.sel-search-wrap input:focus { border-color: var(--accent-light); }
.sel-search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #1a2035; border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm); z-index: 200; max-height: 220px;
  overflow-y: auto; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.sel-search-wrap.open .sel-search-dropdown { display: block; }
.sel-search-opt {
  padding: 8px 14px; font-size: 12px; color: rgba(255,255,255,.75);
  cursor: pointer; transition: background .1s;
}
.sel-search-opt:hover, .sel-search-opt.selected {
  background: rgba(29,78,216,.25); color: #fff;
}
.sel-search-opt.placeholder { color: rgba(255,255,255,.4); font-style: italic; }