:root{
  --bg: #f5f7fb;
  --panel: #ffffff;
  --line: #e7edf5;
  --text: #0f172a;
  --muted: #64748b;
  --blue: #0b3a6e;      /* azul banco */
  --blue-2: #0a2f59;
  --blue-soft: #e8f1ff; /* fondo suave */
  --ok: #16a34a;
  --warn: #b45309;
  --bad: #b91c1c;
  --topbar-bg: #ffffff;        /* header claro ultra profesional */
  --topbar-text: #1f2937;      /* gris oscuro */
  --topbar-border: #e5e7eb;
}

body{
  background: var(--bg);
  color: var(--text);
  font-size: 14px; /* sobrio, no gigante */
}

.app-nav{
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.kpi{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.kpi .v{
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .1px;
}
.kpi .l{
  font-size: .82rem;
  color: var(--muted);
}
.kpi .pill{
  font-size: .72rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: var(--blue-soft);
  border: 1px solid #d6e6ff;
  color: var(--blue);
  font-weight: 600;
}
.kpi .pill.pill-ok{ color: var(--ok); }
.kpi .pill.pill-warn{ color: var(--warn); }
.kpi .pill.pill-bad{ color: var(--bad); }

/* KPI blocks (solicitante) */
.kpi-card{
  min-height: 92px;
}
.kpi-card-secondary .kpi .v{
  font-size: 1.02rem;
}

/* Compact dashboard layout wrapper */
.page-wrap{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 12px;
  padding-bottom: 16px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Panel lateral: secundario/subtle */
.panel-subtle{
  font-size: .90rem;
}
.panel-subtle .table thead th{
  font-size: .78rem;
}
.panel-subtle .table td{
  font-size: .88rem;
}

.badge-estado{
  border: 1px solid var(--line);
  padding: .28rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .78rem;
  background: #fff;
}
.estado-pendiente{ color: var(--warn); }
.estado-en-espera{ color: var(--bad); }
.estado-autorizada{ color: var(--blue); }
.estado-ejecutada{ color: var(--ok); }
.estado-anulada{ color: var(--bad); }

.table thead th{
  border-bottom: 1px solid var(--line) !important;
  color: var(--muted) !important;
  font-weight: 600;
  font-size: .82rem;
  background: #fbfdff;
}
.table td{
  border-top: 1px solid var(--line) !important;
  vertical-align: middle;
}

.form-control, .form-select{
  border: 1px solid var(--line) !important;
  font-size: .90rem;
}

.btn-primary{
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.btn-primary:hover{
  background: var(--blue-2) !important;
  border-color: var(--blue-2) !important;
}
.btn-outline-primary{
  border-color: #bcd3f3 !important;
  color: var(--blue) !important;
}
.btn-outline-primary:hover{
  background: var(--blue-soft) !important;
}

.section-title{
  font-size: 1.0rem;
  font-weight: 700;
  margin: 0;
}
.subtle{
  font-size: .86rem;
  color: var(--muted);
}
/* Modal refinado */
.modal-content{
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(15,23,42,.18);
}
.modal-header{
  border-bottom: 1px solid var(--line);
}
.modal-footer{
  border-top: 1px solid var(--line);
}
.kv{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:.55rem .75rem;
  border:1px solid var(--line);
  border-radius:.6rem;
  background:#fff;
}
.kv .k{ color: var(--muted); font-size:.82rem; }
.kv .v{ font-weight:700; }
.divider{
  height:1px;
  background: var(--line);
  margin: .75rem 0;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.25rem .5rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: #fff;
  font-size:.78rem;
  color: var(--muted);
}
.tag-dot{
  width:8px; height:8px; border-radius:999px; background: var(--blue);
}
.tag-dot.warn{ background: var(--warn); }
.tag-dot.ok{ background: var(--ok); }
.tag-dot.bad{ background: var(--bad); }
.tag-dot.gray{ background: var(--muted); }
.btn-danger-soft{
  background:#fff5f5;
  border:1px solid #ffd6d6;
  color:#b91c1c;
}
.btn-danger-soft:hover{
  background:#ffecec;
  border-color:#ffc1c1;
}
.estado-caja{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid var(--line);
  color: var(--ok);
  font-weight:700;
  font-size:.78rem;
  background:#fff;
}
.estado-caja::before{
  content:"";
  width:8px; height:8px;
  border-radius:999px;
  background: var(--ok);
}
.estado-caja.insuficiente{
  color: var(--bad);
}
.estado-caja.insuficiente::before{
  background: var(--bad);
}

/* Drawer (offcanvas) para carga rápida */
.drawer-solicitud{
  /* La grilla tiene min-width ~980px; con 50vw suele quedar scroll horizontal y no se ve “Referencia”. */
  --bs-offcanvas-width: min(80vw, 1200px);
}
@media (max-width: 767.98px){ .drawer-solicitud { --bs-offcanvas-width: 100vw; } }

/* Permite que una sección use todo el ancho del viewport aunque esté dentro de .container */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1rem;
  padding-right: 1rem;
}

.oculto{
  display: none !important;
}

/* Modo foco: icono profesional (ojo con tachado) sin librerías */
.modo-foco-icon{
  position: relative;
  display: inline-block;
  width: 1.2em;
  text-align: center;
}
.modo-foco-icon.modo-foco-on::after{
  content: "";
  position: absolute;
  left: -0.15em;
  top: 50%;
  width: 1.5em;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%) rotate(-35deg);
  border-radius: 2px;
  opacity: 0.9;
}

/* Login */
.login-logo{
  display: inline-block;
  max-width: 240px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}