/* =========================================================
   EPPS — Sistema de Control de EPPs
   Design System v3.0 — Professional UX/UI
   ========================================================= */

/* ---- FUENTES ---- */
/* Material Symbols Rounded + Inter cargados localmente */

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
  user-select: none;
}

/* ---- VARIABLES DE DISEÑO ---- */
:root {
  /* Identidad corporativa – Sedacusco azul petróleo */
  --brand-900: #003a57;
  --brand-800: #00527a;
  --brand-700: #00669a;
  --brand-600: #0077b6;  /* Primary brand */
  --brand-500: #0096c7;
  --brand-400: #48cae4;
  --brand-300: #90e0ef;
  --brand-100: #caf0f8;
  --brand-50:  #e8f9fc;

  /* Sidebar oscuro premium */
  --nav-bg:          #0d1b2a;
  --nav-surface:     #162035;
  --nav-border:      rgba(255,255,255,0.06);
  --nav-text:        #8fa8c0;
  --nav-text-hover:  #dce9f5;
  --nav-hover:       rgba(0,119,182,0.12);
  --nav-active-bg:   rgba(0,119,182,0.18);
  --nav-active-text: #48cae4;
  --nav-active-bar:  #0096c7;
  --nav-label:       rgba(143,168,192,0.5);

  /* Área de contenido (fondo claro limpio) */
  --bg:          #f0f4f8;
  --surface:     #ffffff;
  --surface-alt: #f7f9fc;
  --border:      #dde3ea;
  --border-md:   #c8d2dc;

  /* Texto */
  --text-primary:   #0d1b2a;
  --text-secondary: #4a6177;
  --text-muted:     #7f95a8;
  --text-placeholder: #a8bac9;

  /* Semánticos */
  --green:     #10b981;
  --green-bg:  #d1fae5;
  --green-text:#065f46;
  --amber:     #f59e0b;
  --amber-bg:  #fef3c7;
  --amber-text:#92400e;
  --red:       #ef4444;
  --red-bg:    #fee2e2;
  --red-text:  #991b1b;
  --blue:      #3b82f6;
  --blue-bg:   #dbeafe;
  --blue-text: #1e40af;

  /* Radios y espaciado */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(13,27,42,0.06);
  --shadow-sm: 0 2px 6px rgba(13,27,42,0.08);
  --shadow-md: 0 4px 16px rgba(13,27,42,0.10);
  --shadow-lg: 0 8px 32px rgba(13,27,42,0.12);

  /* Sidebar width */
  --nav-w: 252px;
}

/* ---- RESET BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text-secondary);
  overflow-x: hidden;
}

/* Scrollbars finos */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-600); }

/* Tipografía */
h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
p { margin: 0; }
a { text-decoration: none; }
.small, small { font-size: 12px; }
.text-muted, .text-secondary { color: var(--text-muted) !important; }

/* ============================================================
   SIDEBAR NAV
   ============================================================ */
.sidebar {
  width: var(--nav-w);
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  min-height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Logo container */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 16px 8px;
  padding: 14px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: opacity .2s;
  flex-shrink: 0;
}
.brand-logo:hover { opacity: 0.9; }
.brand-logo img { height: 38px; width: auto; object-fit: contain; }

/* Divisores de sección */
.nav-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 20px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nav-label);
}
.nav-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nav-border);
}

/* Listas nav */
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0 10px;
}
.sidebar-nav .nav-item { margin: 2px 0; }

/* Links */
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-radius: var(--radius);
  color: var(--nav-text);
  font-size: 13.5px;
  font-weight: 500;
  transition: all .18s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.sidebar-nav .nav-link:hover {
  color: var(--nav-text-hover);
  background: var(--nav-hover);
}
.sidebar-nav .nav-link.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  font-weight: 600;
}
.sidebar-nav .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--nav-active-bar);
  border-radius: 0 3px 3px 0;
}

/* Íconos Material dentro del sidebar */
.sidebar-nav .nav-link .nav-icon,
.sidebar-nav .nav-link .material-symbols-rounded {
  font-size: 19px;
  width: 22px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  transition: font-variation-settings .2s;
}
.sidebar-nav .nav-link:hover .nav-icon,
.sidebar-nav .nav-link:hover .material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  opacity: 1;
}
.sidebar-nav .nav-link.active .nav-icon,
.sidebar-nav .nav-link.active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  opacity: 1;
}

/* Footer del sidebar */
.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--nav-border);
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.content {
  margin-left: var(--nav-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   TOPBAR / APP-HEADER
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 62px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}

.title-group { line-height: 1.25; }
.title-group h1 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.title-group .sub {
  font-size: 11px;
  color: var(--brand-600);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Grupo del usuario en el topbar */
.user-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Chip de usuario / alertas */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: border-color .18s, box-shadow .18s;
  text-decoration: none;
  cursor: default;
}
.chip:hover { border-color: var(--border-md); box-shadow: var(--shadow-sm); }
.chip .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(16,185,129,0.5);
  flex-shrink: 0;
}
.chip .badge { font-size: 10px; padding: 2px 6px; }

/* Botón de salir en el topbar */
.user-group .btn-salir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--red-bg);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius);
  color: var(--red-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
}
.user-group .btn-salir:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.container-fluid { padding: 24px 28px 40px; }

.app-breadcrumb { margin-bottom: 20px; }
.app-breadcrumb .breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  --bs-breadcrumb-divider: '›';
}
.app-breadcrumb .breadcrumb-item { display: flex; align-items: center; }
.app-breadcrumb .breadcrumb-item a {
  color: var(--brand-600);
  font-weight: 600;
  text-decoration: none;
}
.app-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--text-muted);
  margin: 0 4px;
}
.app-breadcrumb .breadcrumb-item.active {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow .2s, border-color .2s !important;
}
.card:hover {
  border-color: var(--border-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card-header {
  background: var(--surface-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 14px 20px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   BOTONES — Compactos, claros, modernos
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: all .18s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: var(--shadow-xs) !important;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm) !important; }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 10px 22px !important; font-size: 14px !important; }
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; border-radius: var(--radius-sm) !important; }

/* Variantes de botón */
.btn-primary {
  background: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--brand-700) !important; border-color: var(--brand-700) !important; }

.btn-success {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}
.btn-success:hover { background: #059669 !important; border-color: #059669 !important; }

.btn-danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
.btn-danger:hover { background: #dc2626 !important; border-color: #dc2626 !important; }

.btn-warning {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
}
.btn-warning:hover { background: #d97706 !important; border-color: #d97706 !important; }

.btn-secondary {
  background: var(--surface-alt) !important;
  border-color: var(--border-md) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover { background: var(--border) !important; color: var(--text-primary) !important; }

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--brand-600) !important;
  color: var(--brand-600) !important;
}
.btn-outline-primary:hover { background: var(--brand-50) !important; }

.btn-outline-danger {
  background: transparent !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}
.btn-outline-danger:hover { background: var(--red-bg) !important; }

.btn-outline-light {
  background: #ffffff !important;
  border-color: var(--border-md) !important;
  color: var(--text-secondary) !important;
}
.btn-outline-light:hover { background: var(--surface-alt) !important; color: var(--text-primary) !important; }

/* ============================================================
   FORMULARIOS E INPUTS
   ============================================================ */
.form-label, label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  display: block;
}

.form-control, .form-select {
  background: #fff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-md) !important;
  border-radius: var(--radius) !important;
  padding: 9px 13px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: border-color .18s, box-shadow .18s !important;
  box-shadow: var(--shadow-xs) !important;
  width: 100%;
}
.form-control::placeholder { color: var(--text-placeholder); opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 3px rgba(0,119,182,0.12) !important;
  outline: none !important;
}
.form-control.bg-transparent, .form-control.bg-dark,
.form-select.bg-transparent, .form-select.bg-dark {
  background: #fff !important;
  color: var(--text-primary) !important;
  border-color: var(--border-md) !important;
}

/* Form-floating override */
.form-floating > .form-control,
.form-floating > .form-select {
  height: 52px !important;
  padding: 20px 13px 6px !important;
}
.form-floating > label {
  padding: 12px 13px !important;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  transform: scale(.8) translateY(-8px) translateX(2px) !important;
  color: var(--brand-600) !important;
  font-weight: 600;
}

/* Checkbox / Radio bonitos */
.form-check-input:checked {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(0,119,182,0.15) !important; }

/* ============================================================
   TABLAS — Densas, limpias, de alto contraste
   ============================================================ */
.table {
  --bs-table-color: var(--text-secondary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--brand-50);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-striped-bg: var(--surface-alt);
  margin: 0;
  font-size: 13.5px;
}
.table thead th {
  background: var(--surface-alt) !important;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 11px 14px !important;
  border-top: none !important;
  border-bottom: 2px solid var(--border-md) !important;
  white-space: nowrap;
}
.table td {
  padding: 10px 14px !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-secondary);
}
.table tr:last-child td { border-bottom: none !important; }
.table-hover > tbody > tr:hover > td { background-color: var(--brand-50) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--surface-alt) !important; }

/* Fila seleccionada / activa */
.table .table-active td,
.table tr.selected td {
  background-color: rgba(0,150,199,0.08) !important;
  color: var(--brand-700) !important;
  font-weight: 600;
  border-bottom-color: rgba(0,119,182,0.15) !important;
}

/* ============================================================
   BADGES Y ESTADO — Modernos y compactos
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Badge suave de marca (por defecto) */
.badge-soft,
.content .badge:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-primary):not(.bg-info):not(.status-badge) {
  background: var(--brand-50) !important;
  color: var(--brand-700) !important;
  border: 1px solid rgba(0,119,182,0.18) !important;
}

/* Badges Bootstrap override */
.badge.bg-success { background: var(--green-bg) !important; color: var(--green-text) !important; }
.badge.bg-danger  { background: var(--red-bg)   !important; color: var(--red-text)   !important; }
.badge.bg-warning { background: var(--amber-bg) !important; color: var(--amber-text) !important; }
.badge.bg-primary { background: var(--brand-100)!important; color: var(--brand-900)  !important; }
.badge.bg-secondary { background: #e2e8f0 !important; color: #475569 !important; }
.badge.bg-dark    { background: #1e293b !important; color: #f1f5f9 !important; }
.badge.bg-info    { background: var(--blue-bg) !important; color: var(--blue-text) !important; }

/* Status Badges específicos */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-badge.status-vigente, .bg-success-soft {
  background: var(--green-bg) !important;
  color: var(--green-text) !important;
}
.status-badge.status-por-vencer, .bg-warning-soft {
  background: var(--amber-bg) !important;
  color: var(--amber-text) !important;
}
.status-badge.status-pendiente, .bg-info-soft {
  background: var(--blue-bg) !important;
  color: var(--blue-text) !important;
}
.status-badge.status-vencido, .bg-danger-soft {
  background: var(--red-bg) !important;
  color: var(--red-text) !important;
}

/* ============================================================
   MODALES — Modernos y contrastados
   ============================================================ */
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-alt) !important;
}
.modal-header .modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.modal-body { padding: 24px !important; }
.modal-footer { padding: 16px 24px !important; border-top: 1px solid var(--border) !important; }

/* ============================================================
   ALERTAS FLASH
   ============================================================ */
.alert {
  border-radius: var(--radius) !important;
  border: none !important;
  padding: 12px 16px !important;
  font-weight: 500;
  font-size: 13.5px;
}
.alert-success { background: var(--green-bg) !important; color: var(--green-text) !important; border-left: 4px solid var(--green) !important; }
.alert-danger  { background: var(--red-bg)   !important; color: var(--red-text)   !important; border-left: 4px solid var(--red)   !important; }
.alert-warning { background: var(--amber-bg) !important; color: var(--amber-text) !important; border-left: 4px solid var(--amber) !important; }
.alert-info    { background: var(--blue-bg)  !important; color: var(--blue-text)  !important; border-left: 4px solid var(--blue)  !important; }

/* ============================================================
   MONOSPACE / CÓDIGO
   ============================================================ */
code, kbd, pre, .mono-data {
  font-family: 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-size: 12.5px !important;
}
code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--brand-700);
}

/* ============================================================
   OVERRIDES "bg-dark" dentro del contenido
   ============================================================ */
.content .bg-dark,
.content .border-secondary {
  background: var(--surface-alt) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
.content pre.bg-dark {
  background: #0d1b2a !important;
  color: #caf0f8 !important;
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* ============================================================
   TEXTO — Color helpers
   ============================================================ */
.text-primary   { color: var(--brand-600)    !important; }
.text-secondary { color: var(--text-secondary)!important; }
.text-muted     { color: var(--text-muted)   !important; }
.text-white     { color: #ffffff             !important; }
.text-white-50  { color: rgba(255,255,255,.65)!important; }
.text-success   { color: var(--green-text)   !important; }
.text-danger    { color: var(--red-text)     !important; }
.text-warning   { color: var(--amber-text)   !important; }

/* ============================================================
   DASHBOARD — Bento cards especiales
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0,119,182,.4); }
  70%  { box-shadow: 0 0 0 8px rgba(0,119,182,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,119,182,0); }
}

.animate-fade-in-up {
  animation: fadeInUp .45s cubic-bezier(0.16,1,0.3,1) forwards;
  opacity: 0;
}
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }

.bento-card {
  transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s !important;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md) !important;
}

.pulsing-dot { animation: pulse-ring 2s infinite; border-radius: 50%; }

.dashboard-insights-card {
  background: linear-gradient(135deg, #0d1b2a 0%, #162035 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.dashboard-insights-card .text-primary { color: var(--brand-400) !important; }

.radial-progress {
  --value: 0;
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, var(--surface) 79%, transparent 80% 100%),
              conic-gradient(var(--brand-600) calc(var(--value) * 1%), var(--surface-alt) 0);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #0d1b2a 0%, #003a57 50%, #00527a 100%);
}
.login-split-container {
  display: flex;
  width: 100%;
  max-width: 920px;
  min-height: 560px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.login-left {
  flex: 1;
  padding: 48px 44px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-right {
  flex: 1.1;
  position: relative;
  overflow: hidden;
}
.login-left h4 { color: var(--text-primary) !important; font-size: 22px; }

/* Slider */
.login-slider { position: absolute; inset: 0; }
.slide-item {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.slide-item.active { opacity: 1; visibility: visible; }
.slide-img-wrap { position: absolute; inset: 0; }
.slide-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.slide-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,30,55,.9) 0%, rgba(0,30,55,.1) 60%);
}
.slide-caption { position: relative; z-index: 1; padding: 36px 32px; }
.slide-caption h4 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.slide-caption p  { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.5; }
.slider-dots {
  position: absolute; bottom: 20px; left: 32px; z-index: 2;
  display: flex; gap: 6px;
}
.slider-dot {
  width: 20px; height: 3px;
  background: rgba(255,255,255,.3);
  border-radius: 99px;
  cursor: pointer;
  transition: all .3s;
}
.slider-dot.active { background: #fff; width: 32px; }

/* Ocultar nebulosa antigua */
.nebula-bg, .nebula-circle-1, .nebula-circle-2, .nebula-circle-3 { display: none !important; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 868px) {
  .login-right { display: none !important; }
  .login-split-container { max-width: 420px; min-height: auto; }
}
@media (max-width: 992px) {
  :root { --nav-w: 240px; }
}
@media (max-width: 768px) {
  .sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--nav-border);
  }
  .content { margin-left: 0; }
  .app-header { position: static; padding: 0 16px; height: 56px; }
  .container-fluid { padding: 16px 16px 32px; }
}

/* ============================================================
   MISC UTILS
   ============================================================ */
hr { border-color: var(--border); opacity: 1; }
.rounded-pill { border-radius: 99px !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Evitar que reduce-motion rompa el UI */
@media (prefers-reduced-motion: reduce) {
  *, .animate-fade-in-up, .bento-card { animation: none !important; transition: none !important; }
}

/* =========================================================
   EPPS UX Refresh v4
   Objetivo: legibilidad, consistencia y controles sobrios
   ========================================================= */
:root {
  --brand-900: #0b3a53;
  --brand-800: #0e5678;
  --brand-700: #0f6c95;
  --brand-600: #0b84bd;
  --brand-500: #1aa0d2;
  --brand-100: #d9f1fb;
  --brand-50: #eef9fd;
  --nav-bg: #0f172a;
  --nav-surface: #17223a;
  --nav-hover: rgba(255,255,255,0.07);
  --nav-active-bg: #19324f;
  --nav-active-text: #e8f7ff;
  --nav-active-bar: #27a8df;
  --nav-text: #b8c7d9;
  --nav-text-hover: #ffffff;
  --nav-label: #73839a;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #dbe4ee;
  --border-md: #c9d6e4;
  --text-primary: #172033;
  --text-secondary: #47566a;
  --text-muted: #718198;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-md: 0 10px 24px rgba(15, 23, 42, .10);
}

* { letter-spacing: 0 !important; }

body {
  background:
    linear-gradient(180deg, #f8fbff 0%, #f2f6fb 260px, #f4f7fb 100%);
  color: var(--text-secondary);
}

.sidebar {
  background: var(--nav-bg);
  box-shadow: 8px 0 24px rgba(15, 23, 42, .10);
}

.brand-logo {
  margin: 14px 14px 18px;
  padding: 13px 12px;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

.brand-logo img { height: 40px; max-width: 190px; }

.nav-section {
  margin: 18px 18px 8px;
  font-size: 11px;
  color: var(--nav-label);
}

.nav-section::after { display: none; }

.sidebar-nav { padding: 0 12px; }

.sidebar-nav .nav-link {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 600;
}

.sidebar-nav .nav-link:hover {
  color: var(--nav-text-hover);
  background: var(--nav-hover);
}

.sidebar-nav .nav-link.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
  box-shadow: inset 0 0 0 1px rgba(39,168,223,.22);
}

.sidebar-nav .nav-link.active::before {
  top: 8px;
  bottom: 8px;
  width: 3px;
}

.nav-icon,
.btn-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: currentColor;
}

.btn-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.app-header {
  height: 64px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 8px 20px rgba(15,23,42,.04);
}

.title-group h1 {
  font-size: 18px;
  color: #162033;
}

.title-group .sub {
  color: var(--brand-700);
  font-weight: 800;
}

.chip {
  border-radius: 8px;
  background: #fff;
  min-height: 36px;
  box-shadow: var(--shadow-xs);
}

.container-fluid { padding: 24px 32px 44px; }

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content .text-white {
  color: var(--text-primary) !important;
}

.content .text-white-50,
.content .text-secondary,
.content .text-muted {
  color: var(--text-muted) !important;
}

.dashboard-insights-card,
.dashboard-insights-card h1,
.dashboard-insights-card h2,
.dashboard-insights-card h3,
.dashboard-insights-card .text-white,
.content pre.bg-dark,
.content pre.bg-dark .text-white {
  color: #f8fafc !important;
}

.app-breadcrumb .breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
}

.app-breadcrumb .breadcrumb-item a {
  color: var(--brand-700);
  font-weight: 700;
}

.card {
  border-radius: 8px !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.04) !important;
}

.card:hover {
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.06) !important;
}

.card-body { color: var(--text-secondary); }

.form-label,
label.form-label {
  color: #52627a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}

.input-group-text {
  background: #f8fafc !important;
  border-color: var(--border-md) !important;
  color: var(--text-muted) !important;
}

.form-control,
.form-select {
  min-height: 42px;
  border-radius: 8px !important;
  border-color: var(--border-md) !important;
  color: var(--text-primary) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-600) !important;
  box-shadow: 0 0 0 3px rgba(11,132,189,.15) !important;
}

.btn {
  min-height: 38px;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 750 !important;
}

.btn:hover { transform: none; box-shadow: 0 6px 14px rgba(15,23,42,.10) !important; }

.btn-sm {
  min-height: 32px;
  padding: 5px 12px !important;
}

.btn-primary {
  background: #0b84bd !important;
  border-color: #0b84bd !important;
}

.btn-primary:hover {
  background: #0a6f9f !important;
  border-color: #0a6f9f !important;
}

.btn-outline-primary {
  background: #eef8fd !important;
  border-color: #b8e3f6 !important;
  color: #075f89 !important;
}

.btn-outline-primary:hover {
  background: #dff2fb !important;
  border-color: #74c9ec !important;
  color: #064f72 !important;
}

.btn-outline-danger {
  background: #fff5f5 !important;
  border-color: #fecaca !important;
  color: #b4232c !important;
}

.btn-outline-danger:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.btn-outline-warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

.btn-outline-success {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

.btn-secondary,
.btn-outline-light {
  background: #f8fafc !important;
  border-color: var(--border-md) !important;
  color: var(--text-secondary) !important;
}

.table-responsive {
  border-radius: 8px;
}

.table,
.table-dark,
.table-striped {
  --bs-table-color: var(--text-secondary) !important;
  --bs-table-bg: #fff !important;
  --bs-table-border-color: var(--border) !important;
  --bs-table-hover-bg: #f1f8fc !important;
  color: var(--text-secondary) !important;
  background: #fff !important;
}

.table thead th,
.table-dark thead th {
  background: #f3f7fb !important;
  color: #51627a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--border-md) !important;
}

.table tbody tr,
.table-dark tbody tr {
  background: #fff !important;
}

.table tbody td,
.table-dark tbody td {
  background: #fff !important;
  color: var(--text-secondary) !important;
  padding: 13px 16px !important;
}

.table tbody tr:hover td,
.table-dark tbody tr:hover td {
  background: #f6fbfe !important;
}

.table td .fw-bold,
.table td.fw-bold,
.table td .text-white {
  color: var(--text-primary) !important;
}

.badge,
.rounded-pill {
  border-radius: 999px !important;
}

span[style*="rgba(16,185,129"],
.badge.bg-success {
  background: #dff8ed !important;
  color: #05734f !important;
}

span[style*="rgba(244,63,94"],
.badge.bg-danger {
  background: #fee2e2 !important;
  color: #a2172d !important;
}

.modal-content {
  border-radius: 8px !important;
}

.modal-content,
.modal-body,
.modal-header,
.modal-footer {
  color: var(--text-secondary) !important;
}

.user-group .btn-salir {
  min-height: 36px;
  border-radius: 8px;
  background: #fff5f5;
  color: #a2172d;
  border-color: #fecaca;
}

.user-group .btn-salir:hover {
  background: #fee2e2;
  color: #991b1b;
}

/* =========================================================
   EPPS UX Refresh v5 - linea grafica tipo InventoryFlow
   ========================================================= */
:root {
  --primary: #00aeef;
  --primary-strong: #00658d;
  --primary-soft: #c6e7ff;
  --secondary-soft: #e3f2fd;
  --tertiary: #64748b;
  --neutral-bg: #f8fafc;
  --surface-lowest: #ffffff;
  --surface-low: #f2f4f6;
  --surface: #f7f9fb;
  --surface-high: #e6e8ea;
  --outline: #6e7881;
  --outline-variant: #bdc8d1;
  --on-surface: #191c1e;
  --on-surface-variant: #3e4850;
  --shadow-flow: 0 15px 30px -10px rgba(0, 174, 239, .10);
  --shadow-flow-sm: 0 4px 15px -3px rgba(0, 174, 239, .08);
  --nav-w: 252px;
}

html,
body {
  background: var(--surface) !important;
  color: var(--on-surface) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
  filter: blur(100px);
  opacity: .22;
}

body::before {
  width: 520px;
  height: 520px;
  left: -180px;
  top: -180px;
  background: var(--primary-soft);
}

body::after {
  width: 420px;
  height: 420px;
  right: -140px;
  bottom: -160px;
  background: var(--secondary-soft);
}

.sidebar {
  width: var(--nav-w) !important;
  background: var(--surface-lowest) !important;
  border-right: 1px solid rgba(189, 200, 209, .55) !important;
  color: var(--on-surface-variant) !important;
  box-shadow: 15px 0 30px -10px rgba(0, 174, 239, .08) !important;
}

.brand-logo {
  background: var(--surface-lowest) !important;
  margin: 20px 16px 26px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(189, 200, 209, .70) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-flow-sm) !important;
}

.brand-logo img {
  height: 42px !important;
  max-width: 180px !important;
}

.nav-section {
  margin: 20px 28px 8px !important;
  color: rgba(62, 72, 80, .62) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
}

.sidebar-nav {
  padding: 0 12px !important;
  gap: 4px !important;
}

.sidebar-nav .nav-link {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: var(--on-surface-variant) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  gap: 14px !important;
  overflow: hidden !important;
}

.sidebar-nav .nav-link svg.nav-icon,
.sidebar-nav .nav-link .nav-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  stroke-width: 1.9 !important;
}

.sidebar-nav .nav-link:hover {
  background: var(--surface-high) !important;
  color: var(--on-surface) !important;
}

.sidebar-nav .nav-link.active {
  background: var(--secondary-soft) !important;
  color: var(--primary-strong) !important;
  font-weight: 800 !important;
  transform: scale(.99);
  box-shadow: none !important;
}

.sidebar-nav .nav-link.active::before {
  display: none !important;
}

.content {
  margin-left: var(--nav-w) !important;
  background: transparent !important;
}

.app-header {
  height: 66px !important;
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(189, 200, 209, .55) !important;
  box-shadow: var(--shadow-flow-sm) !important;
  padding: 0 32px !important;
}

.title-group h1 {
  color: var(--on-surface) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 22px !important;
}

.title-group .sub {
  color: var(--primary-strong) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.chip,
.user-group .btn-salir {
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--surface-lowest) !important;
  border: 1px solid rgba(189, 200, 209, .75) !important;
  box-shadow: var(--shadow-flow-sm) !important;
  color: var(--on-surface) !important;
}

.chip .dot {
  background: #10b981 !important;
}

.chip .badge {
  background: var(--secondary-soft) !important;
  color: var(--primary-strong) !important;
}

.user-group .btn-salir {
  color: #ba1a1a !important;
  border-color: #ffd0cc !important;
  background: #fffafa !important;
}

.user-group .btn-salir svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}

.container-fluid {
  padding: 28px 32px 48px !important;
}

.app-breadcrumb .breadcrumb {
  font-size: 13px !important;
}

.app-breadcrumb .breadcrumb-item a {
  color: var(--primary-strong) !important;
  font-weight: 800 !important;
}

.app-breadcrumb .breadcrumb-item.active,
.app-breadcrumb .breadcrumb-item {
  color: var(--on-surface-variant) !important;
}

.content h1,
.content h2 {
  color: var(--on-surface) !important;
  font-size: 32px !important;
  line-height: 40px !important;
  font-weight: 800 !important;
}

.content h3,
.content h4,
.content h5 {
  color: var(--on-surface) !important;
}

.card {
  background: var(--surface-lowest) !important;
  border: 1px solid rgba(189, 200, 209, .62) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-flow) !important;
}

.card:hover {
  box-shadow: 0 18px 36px -12px rgba(0, 101, 141, .16) !important;
}

.card-header,
.table thead th,
.table-dark thead th {
  background: var(--surface-low) !important;
}

.form-label,
label.form-label {
  color: var(--tertiary) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.form-control,
.form-select,
.input-group-text {
  min-height: 44px !important;
  border-radius: 8px !important;
  background: var(--surface-lowest) !important;
  border: 1px solid rgba(189, 200, 209, .82) !important;
  color: var(--on-surface) !important;
  box-shadow: 0 4px 15px -10px rgba(0, 101, 141, .28) !important;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
  border-radius: 8px !important;
}

.form-control::placeholder {
  color: #8795a1 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(0, 174, 239, .14) !important;
}

.btn {
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.btn:hover {
  transform: none !important;
  box-shadow: 0 10px 20px -12px rgba(0,101,141,.35) !important;
}

.btn-sm {
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

.btn-primary,
.btn-info {
  background: var(--primary-strong) !important;
  border-color: var(--primary-strong) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-info:hover {
  background: #005678 !important;
  border-color: #005678 !important;
}

.btn-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}

.btn-outline-primary,
.btn-outline-info {
  background: var(--secondary-soft) !important;
  border-color: #b8d8ea !important;
  color: var(--primary-strong) !important;
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
  background: #d3eaf8 !important;
  border-color: var(--primary) !important;
}

.btn-outline-danger {
  background: #fff7f7 !important;
  border-color: #f3b7b7 !important;
  color: #ba1a1a !important;
}

.btn-outline-danger:hover {
  background: #ffdad6 !important;
}

.btn-outline-warning {
  background: #fff8e7 !important;
  border-color: #f5cf74 !important;
  color: #9a6200 !important;
}

.btn-secondary,
.btn-outline-light {
  background: var(--surface-low) !important;
  border-color: var(--outline-variant) !important;
  color: var(--on-surface-variant) !important;
}

.table-responsive {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.table,
.table-dark,
.table-striped {
  --bs-table-bg: var(--surface-lowest) !important;
  --bs-table-color: var(--on-surface) !important;
  --bs-table-border-color: rgba(189, 200, 209, .55) !important;
  --bs-table-hover-bg: rgba(211, 226, 237, .30) !important;
  background: var(--surface-lowest) !important;
  color: var(--on-surface) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead th,
.table-dark thead th {
  color: var(--tertiary) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  padding: 16px 16px !important;
  border-bottom: 1px solid rgba(189, 200, 209, .55) !important;
}

.table tbody td,
.table-dark tbody td {
  color: var(--on-surface-variant) !important;
  padding: 16px 16px !important;
  border-bottom: 1px solid rgba(189, 200, 209, .35) !important;
  background: var(--surface-lowest) !important;
  font-size: 14px !important;
}

.table tbody tr:hover td {
  background: rgba(211, 226, 237, .22) !important;
}

.table td.fw-bold,
.table td .fw-bold,
.table td .text-white {
  color: var(--on-surface) !important;
}

.badge,
.rounded-pill {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.badge.bg-success,
span[style*="rgba(16,185,129"] {
  background: #d7f7e9 !important;
  color: #047857 !important;
}

.badge.bg-danger,
span[style*="rgba(244,63,94"] {
  background: #ffdad6 !important;
  color: #93000a !important;
}

.badge.bg-primary,
.badge.bg-info {
  background: var(--secondary-soft) !important;
  color: var(--primary-strong) !important;
}

.modal-content {
  border-radius: 12px !important;
  border-color: rgba(189, 200, 209, .65) !important;
}

.modal-header,
.modal-footer {
  background: var(--surface-low) !important;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100% !important;
  }

  .content {
    margin-left: 0 !important;
  }

  .app-header {
    padding: 0 16px !important;
  }

  .container-fluid {
    padding: 18px 16px 32px !important;
  }
}