/* =============================
   Tema moderno + variables
============================= */
:root {
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-bg-alt: #eef2f7;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-text-soft: #64748b;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-accent: #6366f1;
  --color-danger: #dc2626;
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
  --shadow: 0 4px 18px -2px rgba(0,0,0,0.08);
  --trans: 150ms ease;
}

body.dark-theme {
  /* Afinado de contraste para mejor legibilidad y reducir fatiga */
  --color-bg: #18212b;              /* fondo base suavizado */
  --color-surface: #222e3a;         /* superficie principal un paso más clara */
  --color-bg-alt: #2a3947;          /* superficie secundaria (cards alternas) */
  --color-border: #425365;          /* borde con más presencia */
  --color-text: #dde6ef;            /* gris claro (no blanco puro) */
  --color-text-soft: #9fb5c8;       /* secundario */
  --color-primary: #4d8dff;         /* azul base */
  --color-primary-hover: #3a78e9;
  --color-accent: #8295ff;
  --color-danger: #f06e6e;
}

html, body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; }
body.app-body { background: var(--color-bg); color: var(--color-text); transition: background 300ms ease, color 300ms ease; }

/* Navbar / Glass */
.glass-nav { backdrop-filter: blur(10px); background: rgba(17,24,39,0.85)!important; border-bottom: 1px solid rgba(255,255,255,0.06); }
.glass-nav, .navbar { position: relative; z-index: 4000; }
.navbar .dropdown-menu { z-index: 5000; }
.brand-accent { color: var(--color-accent); }

/* Animaciones */
@keyframes fadeIn { from {opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }
@keyframes pop { 0% {transform: scale(.92); opacity:0;} 60% {transform: scale(1.03); opacity:1;} 100% {transform: scale(1);} }
.page-fade { animation: fadeIn 400ms var(--trans); }
.animate-pop { animation: pop 400ms cubic-bezier(.34,1.56,.64,1); }

/* Toggle tema */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:4px; font-size:.8rem; padding:6px 10px; border-radius: var(--radius-sm); backdrop-filter: blur(4px); }
.theme-toggle i { transition: transform .4s ease; }
body.dark-theme .theme-toggle i { transform: rotate(-180deg); }

/* Login */
.login-container { max-width: 380px; margin: 70px auto; background: linear-gradient(145deg,var(--color-surface),rgba(255,255,255,0.92)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px 32px 34px; position: relative; overflow: hidden; }
.login-container h2 { text-align: center; margin-bottom: 28px; background: linear-gradient(90deg,var(--color-primary),var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.login-container .form-control { width:100%; font-size:.95rem; padding:10px 12px; border-radius: var(--radius-sm); border:1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); transition: border var(--trans), box-shadow var(--trans); }
.login-container .form-control:focus { outline:none; border-color: var(--color-primary); box-shadow:0 0 0 3px rgba(37,99,235,0.25); }
.login-container .btn { width:100%; margin-top:16px; }

/* Cards */
.card-like { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.card-like:hover { box-shadow: var(--shadow); transition: box-shadow var(--trans), transform var(--trans); }

/* Botones */
.btn { font-weight:500; letter-spacing:.3px; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-success { background:#16a34a; border-color:#16a34a; }
.btn-success:hover { background:#15803d; border-color:#15803d; }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { filter: brightness(.92); }
.btn-outline-dark { border-color: var(--color-border); color: var(--color-text); }
.btn-outline-dark:hover { background: var(--color-primary); color:#fff; }

/* Formularios */
form label { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color: var(--color-text-soft); font-weight:600; margin-top:8px; }
input, select, textarea { background: var(--color-surface); color: var(--color-text); }

/* Titulos */
h2, h3, h4 { color: var(--color-text); font-weight:600; letter-spacing:.5px; }

/* Tablas */
.table { background-color: var(--color-surface); border-color: var(--color-border); }
.table th { background: linear-gradient(90deg,var(--color-primary),var(--color-accent)); color:#fff; border-color: var(--color-border); font-weight:500; }
.table td { color: var(--color-text); vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd){ background-color: rgba(0,0,0,0.02); }
.table tbody tr:hover { background: rgba(99,102,241,0.08); transition: background var(--trans); }
table .btn-sm { padding:.35rem .55rem; font-size:.7rem; letter-spacing:.4px; }
/* Tabla compacta para ocupar menos espacio por contrato */
.table-compact th, .table-compact td { padding: .4rem .55rem; line-height: 1.1; font-size: .85rem; }
.table-compact .btn-sm { padding:.28rem .45rem; font-size:.68rem; }

/* Badges */
.badge { font-weight:500; letter-spacing:.4px; }
.badge.bg-secondary { background: linear-gradient(135deg,#64748b,#475569)!important; }
.badge.bg-success { background: linear-gradient(135deg,#16a34a,#15803d)!important; }
.badge.bg-primary { background: linear-gradient(135deg,#2563eb,#1d4ed8)!important; }
.badge.bg-warning { background: linear-gradient(135deg,#f59e0b,#d97706)!important; }
.badge.bg-danger { background: linear-gradient(135deg,#dc2626,#b91c1c)!important; }
/* Estado especial: PENDIENTE DE FIRMA con alto contraste */
.badge.bg-firma { background: linear-gradient(135deg,#9333ea,#7c3aed)!important; color:#fff!important; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
/* Badge contrato recuperado (mejor contraste en ambos temas) */
.badge-recuperado { font-size:.65rem; background: linear-gradient(90deg,#ffce54,#ff8c00); color:#1a1a1a; border:1px solid #ffa73a; letter-spacing:.5px; }

/* Flash mensajes */
.alert { border-radius: var(--radius); font-weight:500; border:1px solid var(--color-border); }
.alert-danger { background: linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b; }
.alert-success { background: linear-gradient(135deg,#dcfce7,#bbf7d0); color:#166534; }
.alert-info { background: linear-gradient(135deg,#e0f2fe,#bae6fd); color:#075985; }
.alert-warning { background: linear-gradient(135deg,#fef9c3,#fde68a); color:#92400e; }

/* Dashboard container */
/* Shell con sidebar */
.app-shell { display:flex; align-items:flex-start; gap:28px; }
.sidebar-panel { width:260px; flex:0 0 260px; display:flex; flex-direction:column; gap:18px; position:sticky; top:82px; max-height: calc(100vh - 100px); overflow:auto; scrollbar-width:thin; }
.sidebar-panel .panel-section { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1rem .9rem; box-shadow: var(--shadow-sm); }
.sidebar-panel .panel-section h6 { font-size:.65rem; font-weight:600; letter-spacing:1px; margin:0 0 .65rem; color: var(--color-text-soft); text-transform:uppercase; }
.main-content { flex:1 1 auto; min-width:0; }
.sidebar-divider { height:1px; background:var(--color-border); margin:.75rem 0; }
.quick-badges { display:flex; flex-wrap:wrap; gap:6px; }
.quick-badges .badge { font-size:.6rem; padding:.35rem .55rem; }
.filter-small { font-size:.75rem; color:var(--color-text-soft); margin-top:4px; }
.column-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap:.45rem .6rem; }
.column-grid label { font-size:.62rem; font-weight:500; text-transform:none; letter-spacing:.2px; margin:0; cursor:pointer; }

/* Scrollbar dentro de sidebar */
.sidebar-panel::-webkit-scrollbar { width: 8px; }
.sidebar-panel::-webkit-scrollbar-thumb { background: var(--color-border); border-radius:20px; }
.sidebar-panel::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Responsive layout para sidebar */
@media (max-width: 992px) {
  .app-shell { flex-direction:column; }
  .sidebar-panel { width:100%; position:static; max-height:none; order:2; }
  .main-content { order:1; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Transiciones globales */
a, .btn, input, select, textarea { transition: background var(--trans), color var(--trans), border-color var(--trans); }

/* =============================
  Ajustes específicos modo oscuro
============================= */
body.dark-theme .card-like { background: var(--color-surface); box-shadow: 0 2px 6px -1px rgba(0,0,0,.5); }
body.dark-theme .navbar.glass-nav { background: rgba(20,27,37,0.92)!important; }
body.dark-theme .table { background: var(--color-surface); }
/* Tablas modo oscuro con mayor contraste legible */
body.dark-theme .table-striped tbody tr:nth-of-type(odd){ background: #223140; }
body.dark-theme .table-striped tbody tr:nth-of-type(even){ background: #1d2b36; }
body.dark-theme .table tbody tr:hover { background: #2c3f52; transition: background var(--trans); }
body.dark-theme .table th { background: linear-gradient(90deg,#4d8dff,#8295ff); color:#f5f9fc; }
body.dark-theme .table td { color:#f2f7fb; }
body.dark-theme .table td a { color:#86c0ff; }
body.dark-theme .table td a:hover { color:#b1d6ff; }
/* En celdas, botones outline más visibles */
body.dark-theme .table td .btn-outline-secondary, body.dark-theme .table td .btn-outline-success, body.dark-theme .table td .btn-outline-danger, body.dark-theme .table td .btn-outline-primary { border-color:#4a5f72; color:#e6eef4; }
body.dark-theme .table td .btn-outline-secondary:hover, body.dark-theme .table td .btn-outline-success:hover, body.dark-theme .table td .btn-outline-danger:hover, body.dark-theme .table td .btn-outline-primary:hover { background:#314558; color:#fff; border-color:#5d7b94; }
/* Badges dentro de tabla: ligera elevación */
body.dark-theme .table td .badge { filter:brightness(1.05); box-shadow:0 0 0 1px rgba(255,255,255,0.07); }
body.dark-theme .estado-badge { box-shadow:0 0 0 1px rgba(255,255,255,0.12); }
/* Editable fechas subrayado sutil para distinguir */
body.dark-theme .editable-fecha { color:#f4fbff; border-bottom:1px dashed #4d8dff; padding-bottom:1px; }
body.dark-theme .editable-fecha:hover { background:#2a3d4f; }
body.dark-theme .form-control, body.dark-theme .form-select, body.dark-theme textarea { background: #233040; border-color: var(--color-border); color: var(--color-text); }
body.dark-theme .form-control:focus, body.dark-theme .form-select:focus, body.dark-theme textarea:focus { border-color: var(--color-primary); box-shadow:0 0 0 3px rgba(77,141,255,0.35); }
body.dark-theme ::placeholder { color: var(--color-text-soft); opacity:.7; }
body.dark-theme .dropdown-menu { background: var(--color-surface); border:1px solid var(--color-border); }
body.dark-theme .dropdown-item { color: var(--color-text); }
body.dark-theme .dropdown-item:hover { background: rgba(77,141,255,0.12); }
body.dark-theme .alert-danger { background: linear-gradient(135deg,#422627,#552b2b); color:#f2b6b6; }
body.dark-theme .alert-success { background: linear-gradient(135deg,#1d3d2a,#244a32); color:#b5e7c8; }
body.dark-theme .alert-info { background: linear-gradient(135deg,#1d3a4a,#244a5c); color:#b3dff4; }
body.dark-theme .alert-warning { background: linear-gradient(135deg,#4a4124,#5a4d28); color:#efdbac; }
body.dark-theme .btn-outline-dark { color: var(--color-text); border-color: var(--color-border); }
body.dark-theme .btn-outline-dark:hover { background: var(--color-primary); color:#fff; }
/* Mejor contraste para outline-secondary en oscuro */
body.dark-theme .btn-outline-secondary { color: var(--color-text); border-color: var(--color-border); }
body.dark-theme .btn-outline-secondary:hover { background: var(--color-bg-alt); color: #fff; border-color: var(--color-primary); }
body.dark-theme code { background:#233040; color:#ffdf88; padding:2px 6px; border-radius:4px; }
body.dark-theme .badge.bg-secondary { background: linear-gradient(135deg,#3a4655,#2c3642)!important; }
body.dark-theme .badge.bg-primary { background: linear-gradient(135deg,#4d8dff,#3876e4)!important; }
body.dark-theme .badge.bg-success { background: linear-gradient(135deg,#1f6d3d,#195a32)!important; }
body.dark-theme .badge.bg-warning { background: linear-gradient(135deg,#c28a27,#b17818)!important; }
body.dark-theme .badge.bg-danger { background: linear-gradient(135deg,#c63e3e,#a93333)!important; }
body.dark-theme .badge.bg-firma { background: linear-gradient(135deg,#8f6cff,#6b5bff)!important; color:#fff!important; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
body.dark-theme .theme-toggle { border-color: rgba(255,255,255,0.15); }
body.dark-theme .navbar .dropdown-menu .dropdown-header { color: var(--color-text-soft); }
body.dark-theme .navbar .dropdown-divider { border-color: var(--color-border); }

/* Badge recuperado en dark: texto con buen contraste */
body.dark-theme .badge-recuperado { background: linear-gradient(90deg,#ffce54,#ff8c00); color:#0b1220; border:1px solid #ffa73a; }

/* Suavizar transición al cambiar de tema */
body.app-body, body.app-body * { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; }

/* Corregir contraste de enlaces dentro de cards */
body.dark-theme a.nav-link, body.dark-theme .dropdown-item { color: var(--color-text); }
body.dark-theme a.nav-link:hover { color: #fff; }
body.dark-theme a { color: var(--color-primary); }
body.dark-theme a:hover { color: var(--color-primary-hover); }

/* Texto atenuado más legible en oscuro */
body.dark-theme .text-muted { color: #a8c0d2 !important; }

/* Chips de estado con delineado sutil para resaltar */
.estado-badge { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
body.dark-theme .estado-badge { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* Campos deshabilitados */
body.dark-theme .form-control:disabled { background:#2a394a; color: var(--color-text-soft); }

/* Scrollbar modo oscuro coherente */
body.dark-theme ::-webkit-scrollbar-track { background: var(--color-bg); }
body.dark-theme ::-webkit-scrollbar-thumb { background: #2f3d4d; }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Labels y formularios mejor contraste */
body.dark-theme form label { color: #c4d4e0; }
body.dark-theme input, body.dark-theme select, body.dark-theme textarea { background: #253240; border-color: var(--color-border); }
body.dark-theme input:focus, body.dark-theme select:focus, body.dark-theme textarea:focus { border-color: var(--color-primary); box-shadow:0 0 0 3px rgba(77,141,255,0.3); }
body.dark-theme ::placeholder { color: #879aaa; }

/* Cards alternas y relieve sutil */
body.dark-theme .card-like { background: linear-gradient(145deg,#222e3a,#253444); border-color: #364653; }
body.dark-theme .card-like:hover { box-shadow: 0 4px 14px -2px rgba(0,0,0,.55); }

/* Dropdown mejor separación */
body.dark-theme .dropdown-menu { backdrop-filter: blur(4px); }

/* Botones primarios adaptación */
body.dark-theme .btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
body.dark-theme .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* Estado foco accesible para teclado */
body.dark-theme .btn:focus, body.dark-theme a:focus, body.dark-theme input:focus, body.dark-theme select:focus, body.dark-theme textarea:focus { outline:2px solid rgba(77,141,255,0.55); outline-offset:2px; }

/* Alternar filas con más contraste visible (unificado con bloque superior) */
body.dark-theme .table-striped tbody tr:nth-of-type(odd){ background: #223140; }
body.dark-theme .table-striped tbody tr:nth-of-type(even){ background: #1d2b36; }
body.dark-theme .table tbody tr:hover { background: #2c3f52; }

/* Código y pre texto afinado */
body.dark-theme code { background:#2b3a47; color:#ffd98a; }

/* Alertas contraste texto */
body.dark-theme .alert-danger { color:#f7c5c5; }
body.dark-theme .alert-success { color:#c3f1d6; }
body.dark-theme .alert-info { color:#c0e7fb; }
body.dark-theme .alert-warning { color:#f5e3bd; }

/* Badges texto suavizado */
body.dark-theme .badge { color:#f2f6f9; }

/* Minimizar salto brusco al cambiar tema en grandes tablas */
body.dark-theme table { transition: background-color 250ms ease, color 250ms ease; }

/* Bordes sutiles para separar filas/columnas en oscuro */
body.dark-theme .table,
body.dark-theme .table-bordered,
body.dark-theme .table td,
body.dark-theme .table th { border-color: #3b4e61; }
body.dark-theme .table thead th { border-bottom: 1px solid #3b4e61; }
body.dark-theme .table tbody tr { border-top: 1px solid #324354; }

/* Responsive */
@media (max-width: 768px) {
  .navbar-brand { font-size: 1rem; }
  .login-container { margin: 40px 1rem; padding:34px 24px; }
  .table-responsive { font-size:.82rem; }
}