/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root { 
  --bg: #f3f4f6; 
  --card: #ffffff; 
  --text: #111827; 
  --muted: #6b7280; 
  --brand: #22c55e; 
  --border: #e5e7eb;
  --hover: #f3f4f6;

  --danger: #dc2626;
  --danger-light: #fee2e2;
  --danger-dark: #b91c1c;

  --primary: #16a34a;
  --primary-dark: #15803d;
}

body.dark {
  --bg: #0f172a;
  --card: #020617;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #1e293b;
  --primary: #3b82f6;
  --sidebar: #020617;
}

/* ============================================================
   RESETEO / BASE
   ============================================================ */
* { box-sizing: border-box; }

body { 
  margin:0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; 
  background: var(--bg); 
  color: var(--text);
}

/* Estado especial login */
body.login { background:#ffffff; }
body.login .app,
body.login .content { background:#ffffff; }

/* ============================================================
   LAYOUT GENERAL
   ============================================================ */
.app { 
  display:flex; 
  min-height:100vh; 
  background: var(--bg); 
}

.content {
  flex: 1;
  padding: 28px;
  background: var(--bg);
  min-width: 0; /* 🔑 CLAVE ABSOLUTA */
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: 280px; 
  background: linear-gradient(
    180deg,
    var(--card),
    var(--bg)
  );
  border-right: 1px solid var(--border); 
  padding: 20px; 
  position: sticky; 
  top:0; 
  height:100vh;
  overflow-y: auto;
}

.brand { 
  font-weight:700; 
  letter-spacing:.3px; 
  margin-bottom:16px; 
  color: var(--text);
}

.user { 
  font-size: .9rem; 
  color: var(--muted); 
  margin-bottom: 24px; 
}

/* ============================================================
   MENÚ PRINCIPAL
   ============================================================ */
.menu a,
.menu button.section-toggle {
  display:block; 
  width:100%;
  text-align:left;
  padding: 10px 12px; 
  margin:6px 0; 
  text-decoration:none; 
  color:var(--text);
  border-radius:10px; 
  border:1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font: inherit;
}

.menu a:hover, 
.menu button.section-toggle:hover { 
  background: var(--hover); 
  border-color: #d1d5db; 
}

/* Submenú */
.menu .submenu {
  margin: 6px 0 15px 15px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  display:none;
}

.menu .submenu a {
  margin:6px 0;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:.95rem;
}

.menu .section[data-open="true"] > .submenu { 
  display:block; 
}

/* ============================================================
   LOGOUT
   ============================================================ */
.logout {
  display:block;
  margin-top: 20px;
  text-align:center;
  border:1px solid var(--danger);
  color:var(--danger);
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
  text-decoration:none;
  transition: all 0.2s ease;
}
.logout:hover {
  background:var(--danger-light);
  color:var(--danger-dark);
  border-color:var(--danger-dark);
}

.btnAccion,
.logout,
.btnAceptar {
  background: var(--card);
  color: var(--text);
}


/* ============================================================
   TARJETAS
   ============================================================ */
.card {
  max-width: 100%;
  overflow: hidden;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display:inline-block;
  border:none;
  cursor:pointer;
  text-decoration:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
}

/* Acciones */
.btnAccion {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.2;
}

/* Botones por tipo */
.btnEditar       { border:1px solid #2563eb; color:#2563eb; }
.btnVer       { border:1px solid #fc9816; color:#fc9816; }
.btnCancelarSolicitud,
.btnEliminar     { border:1px solid var(--danger); color:var(--danger); cursor:pointer;}
.btnPDF          { border:1px solid #374151; color:#374151; }
.btnAceptar      { border:1px solid var(--primary); color:var(--primary); }

.btn-primary     { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }

.btn-ghost {
  color: var(--muted);
  background: var(--bg);
  border:1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--text);
}


/* ============================================================
   FORMULARIOS (Modern Forms)
   ============================================================ */
.form-modern * { box-sizing: border-box; }

.form-modern h2 { 
  margin:0 0 4px 0; 
  font-weight:700; 
  letter-spacing:.2px; 
}

.form-modern .subtitle { 
  color:#64748b; 
  margin:0 0 18px 0; 
  font-size:.95rem; 
}

.form-modern label { 
  display:block; 
  font-size:.88rem; 
  color:#334155; 
  margin: 2px 0 6px; 
}

/* Campos */
.form-modern input[type="text"],
.form-modern input[type="email"],
.form-modern input[type="number"],
.form-modern input[type="date"],
.form-modern select,
.form-modern textarea {
  width:100%;
  appearance:none; 
  border-radius:10px;
  padding:10px 12px; 
  transition: border-color .15s, box-shadow .15s;
  font-size:.95rem;
}

.form-modern input:focus,
.form-modern select:focus,
.form-modern textarea:focus {
  border-color:#84cc16; 
  box-shadow:0 0 0 3px rgba(132,204,22,.15);
}

.form-modern input,
.form-modern select,
.form-modern textarea {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

.form-modern label {
  color: var(--muted);
}

/* Errores */
.form-modern .errorlist { 
  margin:6px 0 0; 
  padding:0; 
  list-style:none; 
  color:var(--danger); 
  font-size:.85rem; 
}

.form-modern .nonfield { 
  color:var(--danger); 
  background:#fef2f2; 
  border:1px solid #fecaca; 
  padding:10px 12px; 
  border-radius:10px; 
  margin-bottom:12px; 
}

/* ============================================================
   GRIDS Y UTILIDADES
   ============================================================ */
.grid-2 { 
  display:grid; 
  grid-template-columns:repeat(2,minmax(0,1fr)); 
  gap:12px; 
}

.submenu {
  display: none;
  padding-left: 15px;
}

.submenu.open {
  display: block;
}


.grid-3b { 
  display:grid; 
  grid-template-columns:1fr 180px 1fr; 
  gap:12px; 
  align-items:end; 
}

.grid-cargos { 
  display:grid; 
  grid-template-columns:1fr 200px 90px; 
  gap:12px; 
  align-items:end; 
}

.section-title { 
  margin:6px 0 10px; 
  font-weight:700; 
}

.divider { 
  border:0; 
  border-top:1px solid var(--border);
  margin:18px 0; 
}

.pill { 
  display:inline-flex; 
  align-items:center; 
  gap:6px; 
  font-size:.85rem; 
  background: var(--bg);
  border:1px solid var(--border); 
  padding:6px 10px; 
  border-radius:999px; 
}

.fila-detalle:hover {
    background: var(--hover) !important;
    transition: background 0.15s ease-in-out;
  }

.muted { color: var(--muted); }

.form-modern h2,
.section-title,
.pill {
  color: var(--text);
}

body.dark {
  --hover: #1e293b;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) { 
  .grid-2, 
  .grid-3b, 
  .grid-cargos { 
    grid-template-columns:1fr; 
  } 
}

#global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* Pantalla opaca */
  backdrop-filter: blur(2px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

#global-loader .spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #fff;
  border-top: 6px solid #3498db; /* color del spin */
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.menu a.active {
    background: var(--brand);
    color: white !important;
    padding-left: 14px;
    border-radius: 8px;
}


#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.35); /* gris con transparencia */
    display: none; /* oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* Spinner */
#loadingOverlay .spinner {
    width: 55px;
    height: 55px;
    border: 6px solid #ffffff88;
    border-top: 6px solid #16a34a; /* color de marca */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}