/* ======================================================
   S.I.E.P - Tema Galaxia / Venus
   Archivo: css/styles.css
   ====================================================== */

:root{
  /* Base */
  --bg-deep:      #0c111f;
  --bg-deeper:    #0b1320;

  /* Acentos */
  --accent-a:     #ed9e6f;  /* peach */
  --accent-b:     #512f5c;  /* plum */
  --accent-c:     #80466e;  /* rose */

  /* Tintas */
  --ink-on-dark:  #f6eaff;  /* lavanda clara */
  --ink-muted:    #e9d2f4;

  /* Paneles */
  --panel-bg:     rgba(255,255,255,.10);
  --panel-bd:     rgba(255,255,255,.18);

  /* Glow */
  --glow:         rgba(128,70,110,.45);
}

/* ===== Fondo base (sin cuadritos) ===== */
html, body{ height:100%; }
body{
  color:#fff;
  background:
    radial-gradient(1000px 600px at 18% 8%,  rgba(128,70,110,.26), transparent 60%),
    radial-gradient(800px 520px  at 82% 14%, rgba(45,31,68,.22),  transparent 55%),
    radial-gradient(1100px 800px at 50% 120%, rgba(11,17,31,.90), rgba(11,17,31,.97));
  background-color: var(--bg-deep);
}

/* ===== Nebulosa animada suave (sin puntitos ni grilla) ===== */
body::after{
  content:"";
  position:fixed; inset:-18% -22%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 15% 15%, rgba(128,70,110,.28), transparent 60%),
    radial-gradient(700px 420px at 85% 20%, rgba(237,158,111,.20), transparent 60%),
    radial-gradient(1000px 700px at 60% 110%, rgba(81,47,92,.25), transparent 65%);
  filter: blur(58px) saturate(115%);
  mix-blend-mode: screen;
  opacity:.40;
  animation: nebulaFlow 38s ease-in-out infinite alternate;
}
@keyframes nebulaFlow{
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  50%  { transform: translateY(-12px) rotate(5deg) scale(1.03); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Asegurar que el contenido esté por encima */
.topbar, #sidebar, .flex-grow-1, #contenido-principal { position:relative; z-index:1; }

/* ===== Topbar (logo + título/subtítulo) ===== */
.topbar{
  position: sticky; top:0; z-index:1030;
  background: rgba(13,19,31,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.brand-logo-sm{
  height: 36px; max-width: 120px; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(128,70,110,.35));
}
.brand-block strong{ color:#fff; }
.brand-block small{ color:#d7cff7; opacity:.95; }

/* Chip de institución (logo + nombre + CUE) */
.inst-chip{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
}
.inst-chip img{
  height:28px; width:auto; border-radius:6px;
  background: rgba(0,0,0,.15); padding:2px;
}
.inst-chip strong{ color:#fff; }
.inst-chip small{ color:#ddd3ff; }

/* ===== Sidebar ===== */
#sidebar{
  width: 260px;
  min-height: calc(100vh - 56px);
  background: linear-gradient(180deg, rgba(45,31,68,.94), rgba(12,17,31,.92));
  border-right: 1px solid rgba(255,255,255,.08);
  color: var(--ink-on-dark);
}
#sidebar h4{ color:#fff; text-shadow:0 0 6px var(--glow); }
#sidebar .nav-link{ color: var(--ink-muted); border-radius: 8px; }
#sidebar .nav-link:hover{
  color:#fff; background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 16px rgba(128,70,110,.25);
}
#sidebar .btn-danger{
  background: linear-gradient(90deg, #da3e52, #b22b3d);
  border:0; color:#fff;
}
#sidebar .btn-danger:hover{ box-shadow: 0 10px 24px rgba(218,62,82,.35); }

/* ===== Contenido / Cards ===== */
#contenido-principal{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; backdrop-filter: blur(3px);
}
.card{
  background: linear-gradient(180deg, rgba(13,19,31,.62), rgba(13,19,31,.52));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
#contenido-principal h3, #contenido-principal h4, #contenido-principal h5{
  color: var(--ink-on-dark); text-shadow: 0 0 6px var(--glow);
}

/* ===== Formularios / Etiquetas ===== */
#contenido-principal .form-label,
#contenido-principal label,
.card .form-label,
.card label{
  color: var(--ink-on-dark) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  letter-spacing: .2px;
}
#contenido-principal .tab-content,
#contenido-principal .card form,
#contenido-principal .form-wrap{
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: 10px;
}
.form-control, .form-select{
  color: #21172f; background-color:#fff; border-color: rgba(81,47,92,.35);
}
.form-control::placeholder{ color:#6b7280; opacity:1; }
.form-control:focus, .form-select:focus{
  border-color: var(--accent-c);
  box-shadow: 0 0 0 .28rem rgba(128,70,110,.35);
}

/* ===== Tabs Manual / Importar ===== */
.nav-tabs{ border-bottom: 1px solid rgba(255,255,255,.15); }
.nav-tabs .nav-link{
  color: var(--ink-muted); background:transparent;
  border: 1px solid transparent; border-bottom:none;
}
.nav-tabs .nav-link:hover{ color:#fff; }
.nav-tabs .nav-link.active{
  color:#1a132b;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent-a) 88%, #ffffff 12%),
    color-mix(in oklab, var(--accent-b) 90%, #000000 10%));
  border: 1px solid rgba(255,255,255,.22);
  border-bottom:0;
  box-shadow: 0 6px 20px rgba(237,158,111,.25), 0 0 0 1px rgba(81,47,92,.25) inset;
  filter: drop-shadow(0 6px 14px rgba(237,158,111,.22));
}
.nav-tabs + .tab-content{ border-top-left-radius: 0; }

/* ===== Botones / Hover “cosmic” ===== */
.btn, .nav-link, .btn-custom, .btn-danger, .btn-outline-light{
  position:relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .25s ease, background-position .5s ease, filter .25s ease;
}
.btn::after, .nav-link::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: radial-gradient(220px 140px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%);
  opacity:0; transition: opacity .2s ease;
}
.btn:hover::after, .nav-link:hover::after{ opacity:1; }

.btn-custom{
  background: linear-gradient(90deg, var(--accent-c), var(--accent-b));
  background-size: 200% 100%;
  border:0; color:#fff !important;
  box-shadow: 0 2px 8px rgba(128,70,110,.25);
}
.btn-custom:hover{
  transform: translateY(-1px) scale(1.02);
  background-position: 100% 0;
  box-shadow: 0 10px 26px rgba(128,70,110,.35), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.btn-outline-light{ color:#fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover{ filter: brightness(1.06); box-shadow: 0 8px 20px rgba(255,255,255,.18); }

/* ===== Tablas ===== */
.table-dark{
  --bs-table-bg: rgba(13,19,31,.65);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-striped-color: #fff;
  --bs-table-border-color: rgba(255,255,255,.08);
}
.table-dark thead th{
  color:#fff;
  background: linear-gradient(90deg, rgba(81,47,92,.55), rgba(237,158,111,.35));
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* ===== Input búsqueda superior ===== */
input[placeholder="Buscar por DNI"]{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(81,47,92,.35);
  color:#1d1630;
}

/* ===== Utilidades ===== */
.border{ border-color: rgba(255,255,255,.18) !important; }
.rounded{ border-radius: 12px !important; }

@media (max-width: 992px){
  #sidebar{ width: 230px; }
  .inst-chip{ display:none; }
}

/* ====== Login: tarjetas con más color (pero legibles) ====== */
.auth-card{
  background: linear-gradient(180deg, rgba(13,19,31,.78), rgba(13,19,31,.64));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.auth-card h1, .auth-card h4, .auth-card label{ color: var(--ink-on-dark); }
.auth-card .btn-custom{ font-weight:600; }
.brand-logo{ height:64px; max-width:100%; object-fit:contain; filter: drop-shadow(0 0 8px rgba(128,70,110,.35)); }
/* ===========================
   LOGIN — color paleta + glow
   =========================== */

/* más color en el fondo de las tarjetas del login */
.auth-card{
  background: linear-gradient(
    180deg,
    rgba(128,70,110,.22) 0%,
    rgba(81,47,92,.18) 35%,
    rgba(13,19,31,.70) 100%
  );
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  isolation: isolate;
  box-shadow:
    0 16px 40px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* barrita superior con degradé */
.auth-card::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:5px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-c), var(--accent-b));
  box-shadow: 0 6px 22px rgba(237,158,111,.25);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
}

/* borde animado (conic gradient) */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.auth-card::before{
  content:"";
  position:absolute; inset:-1px; border-radius:18px; z-index:-1;
  background:
    conic-gradient(from var(--angle),
      rgba(128,70,110,.55),
      rgba(237,158,111,.55),
      rgba(81,47,92,.65),
      rgba(128,70,110,.55));
  animation: siep-spin 8s linear infinite;
  /* truco de máscara para que parezca borde */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 2px;
  filter: blur(.4px);
}
@keyframes siep-spin{ to { --angle: 360deg; } }

/* títulos del login con glow suave */
.auth-card h1, .auth-card h4{
  color: var(--ink-on-dark);
  text-shadow: 0 0 10px rgba(128,70,110,.35);
}

/* inputs y labels ya eran legibles; reforzamos foco y bordes con la paleta */
.auth-card .form-control, .auth-card .form-select{
  border-color: rgba(81,47,92,.45);
}
.auth-card .form-control:focus, .auth-card .form-select:focus{
  border-color: var(--accent-c);
  box-shadow: 0 0 0 .28rem rgba(128,70,110,.35);
}

/* botón principal con más punch */
.auth-card .btn-custom{
  background: linear-gradient(90deg, var(--accent-c), var(--accent-b));
  background-size: 220% 100%;
  color:#fff !important; border:0;
  box-shadow: 0 6px 18px rgba(128,70,110,.35);
}
.auth-card .btn-custom:hover{
  transform: translateY(-1px) scale(1.02);
  background-position: 100% 0;
  box-shadow: 0 14px 30px rgba(128,70,110,.40), 0 0 0 1px rgba(255,255,255,.18) inset;
}

/* link de “Olvidaste tu contraseña?” más claro al pasar */
.auth-card .btn-outline-light:hover{
  filter: brightness(1.07);
  box-shadow: 0 10px 22px rgba(255,255,255,.18);
}

/* ===== Nebulosa de fondo un toque más viva (login y paneles) ===== */
body::after{
  opacity:.45;                       /* un poquito más fuerte */
  filter: blur(58px) saturate(118%); /* más vibrante */
  animation: nebulaFlow 34s ease-in-out infinite alternate; /* un pelín más rápida */
}
/* ====== Ajustes finos del LOGIN (más sutil y legible) ====== */

/* Fondo de la tarjeta (menos cargado arriba, mismo look cósmico) */
.auth-card{
  background: linear-gradient(
    180deg,
    rgba(128,70,110,.16) 0%,
    rgba(81,47,92,.12) 28%,
    rgba(13,19,31,.70) 100%
  );
}

/* Franja superior: más baja y suave, con desvanecido lateral */
.auth-card::after{
  height: 3px;                               /* antes 5px */
  opacity: .55;                              /* menos marcada */
  box-shadow: 0 4px 14px rgba(237,158,111,.18);
  background: linear-gradient(90deg,
    rgba(237,158,111,.90),
    rgba(128,70,110,.75),
    rgba(81,47,92,.85)
  );
  /* desvanecer en los bordes para que no “corte” tanto */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Borde animado: mucho más sutil y lento */
.auth-card::before{
  opacity: .28;          /* menos visible */
  padding: 1px;          /* borde más finito */
  filter: blur(1px);     /* suavizado */
  animation-duration: 16s; /* más lento (antes 8s) */
}

/* Inputs blancos, bordes discretos (como antes), texto bien oscuro */
.auth-card .form-control,
.auth-card .form-select{
  background-color: #fff;
  color: #21172f;
  border: 1px solid rgba(13,19,31,.15);       /* borde más neutral */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);/* leve relieve */
}
.auth-card .form-control::placeholder{ color:#6b6f80; opacity:1; }

/* Foco con halo violeta suave (se mantiene el efecto) */
.auth-card .form-control:focus,
.auth-card .form-select:focus{
  border-color: var(--accent-c);
  box-shadow: 0 0 0 .22rem rgba(128,70,110,.28);
}

/* Labels claras y legibles sobre fondo oscuro */
.auth-card .form-label{
  color: var(--ink-on-dark);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Botón principal: asegurar contraste del texto */
.auth-card .btn-custom{ color:#fff !important; }

/* Ajuste de botones en barras de filtros (admin e institución) */
.btn, button { white-space: nowrap; }
.btn.btn-sm { padding: .35rem .6rem; }

/* === Cards y cabeceras con look "nebulosa" === */
.card-astro {
  background: rgba(17,19,27,.78);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.header-gradient {
  background:
    linear-gradient(90deg, rgba(130,77,105,.28), rgba(82,41,89,.18) 40%, transparent 70%),
    linear-gradient(180deg, rgba(250,229,216,.06), rgba(223,182,178,.04));
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #f4f4fa;
}

/* Pills y badges */
.pill {
  display:inline-block; padding:.2rem .5rem; border-radius:999px;
  font-size:.8rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#f7f7fb;
}
.step {
  display:flex; align-items:flex-start; gap:.6rem; margin:.4rem 0;
}
.step .n {
  min-width:1.55rem; height:1.55rem; border-radius:999px; text-align:center;
  font-weight:700; font-size:.9rem; line-height:1.55rem;
  background: linear-gradient(135deg, #824D69, #522959); color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.08) inset;
}

/* Inputs suaves */
.soft-input, .soft-select {
  background: rgba(255,255,255,.06)!important;
  border-color: rgba(255,255,255,.22)!important;
  color:#f7f7fb!important;
}
.soft-input::placeholder { color: rgba(255,255,255,.55); }

/* Botones en barras de filtros (no se cortan) */
.filter-bar .btn { white-space: nowrap; }
.filter-bar .btn.btn-sm { padding:.35rem .6rem; }

/* Tab Importar más visible */
.nav-tabs .nav-link {
  color:#eaeaf3;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.nav-tabs .nav-link.active {
  color:#fff; border-color: rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(130,77,105,.35), rgba(82,41,89,.28));
}

/* Tablas oscuras legibles */
.table-dark th, .table-dark td { color:#eaeaf3; }
.table-dark thead th { color:#fff; border-bottom-color: rgba(255,255,255,.15); }

/* ==== Helpers visibles pero discretos (no alteran tu tema) ==== */

/* Pasos del tutorial */
.step { display:flex; align-items:flex-start; gap:.6rem; margin:.35rem 0; color:#eaeaf3; }
.step .n{
  min-width:1.45rem; height:1.45rem; border-radius:999px; text-align:center;
  font-weight:700; font-size:.85rem; line-height:1.45rem;
  background: linear-gradient(135deg, #824D69, #522959);
  color:#fff;
}

/* Chips/Pills */
.pill{
  display:inline-block; padding:.15rem .45rem; border-radius:999px;
  font-size:.78rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#f7f7fb;
}

/* Inputs suaves solo donde los usemos (no global) */
.soft-input, .soft-select{
  background: rgba(255,255,255,.06)!important;
  border-color: rgba(255,255,255,.22)!important;
  color:#f7f7fb!important;
}
.soft-input::placeholder{ color: rgba(255,255,255,.55); }

/* Botones de filtros sin cortarse */
.filter-bar .btn{ white-space:nowrap; }
.filter-bar .btn.btn-sm{ padding:.35rem .6rem; }

/* Tabs con leve realce (conserva tu tema) */
.nav-tabs .nav-link{ color:#eaeaf3; }
.nav-tabs .nav-link.active{
  color:#fff;
  background: linear-gradient(135deg, rgba(130,77,105,.25), rgba(82,41,89,.18));
  border-color: rgba(255,255,255,.18);
}

/* Tabla oscura legible */
.table-dark th, .table-dark td{ color:#eaeaf3; }
.table-dark thead th{ color:#fff; }

/* ===============================================
   RESTAURAR LOOK "DE ANTES" (degradé + halo suave)
   No toca tu layout ni la lógica. Solo visual.
   =============================================== */

/* Tarjeta con leve halo y fondo con nebulosa sutil */
.card{
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(237,158,111,.08), transparent 60%),
    radial-gradient(120% 120% at 90% 10%, rgba(128,70,110,.07), transparent 60%),
    rgba(12,17,31,.78);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

/* Cabecera con degradé (p3 → p4 → toque p1) */
.card > .card-header{
  background:
    linear-gradient(90deg,
      rgba(130,77,105,.35) 0%,
      rgba(82,41,89,.22) 55%,
      rgba(250,229,216,.10) 100%);
  border-bottom: 1px solid rgba(255,255,255,.14);
  color:#fff;
}

/* Tabs con el mismo realce */
.nav-tabs .nav-link{
  color:#ececf6;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.nav-tabs .nav-link.active{
  color:#fff;
  background: linear-gradient(135deg, rgba(130,77,105,.32), rgba(82,41,89,.24));
  border-color: rgba(255,255,255,.18);
}

/* Inputs suaves y legibles sobre el fondo */
.soft-input, .soft-select{
  background: rgba(255,255,255,.06)!important;
  border-color: rgba(255,255,255,.22)!important;
  color:#f7f7fb!important;
}
.soft-input::placeholder{ color: rgba(255,255,255,.55); }

/* Botón primario con la paleta anterior (p3 → p4) */
.btn-primary{
  background-image: linear-gradient(135deg, #824D69, #522959);
  background-color: #824D69; /* fallback */
  border: 1px solid rgba(255,255,255,.18);
}
.btn-primary:hover{ filter: brightness(1.08); }

/* Botones outline legibles */
.btn-outline-light{
  color:#f3f3fb;
  border-color: rgba(255,255,255,.28);
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.08);
  color:#fff;
  border-color: rgba(255,255,255,.35);
}

/* Chips/Pills y pasos del tutorial (igual que antes) */
.pill{
  display:inline-block; padding:.15rem .45rem; border-radius:999px;
  font-size:.78rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); color:#f7f7fb;
}
.step{ display:flex; align-items:flex-start; gap:.6rem; margin:.35rem 0; color:#eaeaf3; }
.step .n{
  min-width:1.45rem; height:1.45rem; border-radius:999px; text-align:center;
  font-weight:700; font-size:.85rem; line-height:1.45rem;
  background: linear-gradient(135deg, #824D69, #522959); color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.08) inset;
}

/* Tabla oscura más nítida (sin cambiar tu tema) */
.table-dark th, .table-dark td{ color:#eaeaf3; }
.table-dark thead th{ color:#fff; border-bottom-color: rgba(255,255,255,.15); }

/* Barra de filtros: que los botones no se corten */
.filter-bar .btn{ white-space: nowrap; }
.filter-bar .btn.btn-sm{ padding:.35rem .6rem; }

/* Tabs y botones con look anterior */
.card { background: rgba(12,17,31,.78); border:1px solid rgba(255,255,255,.10); }
.card > .card-header{
  background: linear-gradient(90deg, rgba(130,77,105,.28), rgba(82,41,89,.18) 55%, rgba(250,229,216,.08));
  border-bottom:1px solid rgba(255,255,255,.14); color:#fff;
}

.nav-tabs{ border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-tabs .nav-link{
  color:#eaeaf3; padding:.35rem .7rem; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); margin-right:.35rem; border-bottom-color:transparent;
}
.nav-tabs .nav-link.active{
  color:#fff; background: linear-gradient(135deg, rgba(130,77,105,.30), rgba(82,41,89,.24));
  border-color: rgba(255,255,255,.18);
}

.btn-primary{
  background-image: linear-gradient(135deg, #824D69, #522959);
  background-color:#824D69; border:1px solid rgba(255,255,255,.18);
}
.btn-primary:hover{ filter:brightness(1.08); }

/* ====== LOOK COMO ANTES (cards + headers) ====== */
.card{
  background:
    radial-gradient(120% 120% at 8% 0%, rgba(237,158,111,.08), transparent 60%),
    radial-gradient(120% 120% at 92% 7%, rgba(128,70,110,.07), transparent 60%),
    rgba(12,17,31,.78);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.card > .card-header{
  background: linear-gradient(90deg,
    rgba(130,77,105,.35) 0%,
    rgba(82,41,89,.22) 55%,
    rgba(250,229,216,.10) 100%);
  border-bottom: 1px solid rgba(255,255,255,.14);
  color:#fff;
}

/* ====== NAV LATERAL (activo/hover) ====== */
.sidebar .nav-link{
  color:#eaeaf3;
  padding:.45rem .75rem;
  border-radius:.5rem;
  transition:all .15s ease;
}
.sidebar .nav-link:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}
.sidebar .nav-link.active{
  color:#fff;
  background: linear-gradient(135deg, rgba(130,77,105,.28), rgba(82,41,89,.22));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ====== TABS ====== */
.nav-tabs{ border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-tabs .nav-link{
  color:#eaeaf3; padding:.35rem .7rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  margin-right:.35rem; border-bottom-color:transparent;
}
.nav-tabs .nav-link.active{
  color:#fff; background: linear-gradient(135deg, rgba(130,77,105,.30), rgba(82,41,89,.24));
  border-color: rgba(255,255,255,.18);
}

/* ====== Inputs/botones suaves ====== */
.soft-input, .soft-select{
  background: rgba(255,255,255,.06)!important;
  border-color: rgba(255,255,255,.22)!important;
  color:#f7f7fb!important;
}
.soft-input::placeholder{ color: rgba(255,255,255,.55); }

.btn-primary{
  background-image: linear-gradient(135deg, #824D69, #522959);
  background-color:#824D69; border:1px solid rgba(255,255,255,.18);
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-outline-light{ color:#f3f3fb; border-color: rgba(255,255,255,.28); }
.btn-outline-light:hover{ background: rgba(255,255,255,.08); color:#fff; }

/* ====== Buscador superior ====== */
.topbar-search .form-control{
  width: 260px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color:#f7f7fb;
}
.topbar-search .form-control::placeholder{ color: rgba(255,255,255,.55); }

/* Tutorial chips */
.pill{ display:inline-block; padding:.15rem .45rem; border-radius:999px;
  font-size:.78rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#f7f7fb;}
.step{ display:flex; gap:.6rem; margin:.35rem 0; color:#eaeaf3;}
.step .n{ min-width:1.45rem; height:1.45rem; border-radius:999px; text-align:center; line-height:1.45rem;
  font-weight:700; font-size:.85rem; background: linear-gradient(135deg, #824D69, #522959); color:#fff;}
/* Tabla nítida */
.table-dark th, .table-dark td{ color:#eaeaf3; }
.table-dark thead th{ color:#fff; border-bottom-color: rgba(255,255,255,.15); }
/* Evitar cortes en barra de filtros */
.filter-bar .btn{ white-space:nowrap; }
/* === Fix inputs/selects con tema oscuro === */
:root {
  --surface-1: #12151d;
  --surface-2: #161a25;
  --surface-3: #1d2230;
  --text: #e9ecf1;
  --muted: #aeb3bd;
  --primary-400: #9a6bb3;
  --primary-500: #80466e; /* tu paleta Venus */
}
input[type="text"],
input[type="password"],
input[type="search"],
input[type="file"]::file-selector-button,
textarea,
select {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--primary-400);
  box-shadow: 0 0 0 2px rgba(154,107,179,.25);
}
/* Forzar el menú de opciones de select en claro/oscuro */
select option {
  background: var(--surface-3);
  color: var(--text);
}

/* Botones compactos y legibles en las barras de filtros */
.btn, button {
  color: #fff;
}

/* ——— SIEP institucional: look original ——— */
body{background:#0f1220;color:#f1f1f8;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.sidebar{min-height:100vh;background:linear-gradient(180deg,rgba(128,70,110,.15),rgba(12,17,31,.6))}
.sidebar .nav-link{color:#d8d9e6}
.sidebar .nav-link.active{background:#2a2f47;color:#fff;border-radius:.4rem}
.card{background:#151a2c;border:1px solid rgba(255,255,255,.06)}
.topbar-search input{background:#20253b;border-color:#2a2f47;color:#e9e9f1}
.table-dark{--bs-table-bg:#111527;--bs-table-border-color:#20253b}
.btn-primary{background:#7d46c2;border-color:#7d46c2}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline-light{border-color:#6d7396;color:#cfd2ea}
.btn-outline-light:hover{background:#2a2f47;border-color:#7d83ad;color:#fff}
.pill{padding:.15rem .45rem;background:#242a41;border-radius:.4rem}
.text-light-50{color:#a6a8c7}
.soft-input,.soft-select{background:#20253b;border-color:#31395c;color:#e9e9f1}
.soft-input::placeholder{color:#9aa0bf}
.form-label{color:#cfd2ea}

/* Altura completa del layout */
html, body { height: 100%; }
.container-fluid > .row { min-height: 100dvh; } /* usa viewport moderno, evita barras del SO */

/* Sidebar fija y en columna */
.sidebar{
  position: sticky;
  top: 0;
  height: 100dvh;                /* ocupa todo el alto visible */
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* evita que el botón “se salga” */
}

/* La navegación puede desplazarse si hay muchas opciones */
.sidebar .nav{
  overflow: auto;
  padding-bottom: .5rem;         /* deja un respiro antes del footer */
}

/* Footer del botón */
.sidebar-footer{
  flex: 0 0 auto;                /* no se estira */
  background: transparent;
}

/* Opcional: en móviles reduce un poco el padding del botón */
@media (max-width: 576px){
  .sidebar-footer .btn{ padding:.5rem .75rem; }
}

/* =========================
   Contraste alto para tema oscuro S.I.E.P
   ========================= */

/* Paleta base (ajustá tonos si querés) */
:root{
  --fg-main:       #E9EBFF;  /* texto principal */
  --fg-muted:      #C8CCE6;  /* textos secundarios / ayudas */
  --fg-muted-2:    #B3B8DA;  /* place­holders, caption */
  --fg-heading:    #F5F6FF;  /* títulos en tarjetas */
  --fg-link:       #BBA7FF;  /* links claros en oscuro */

  /* sobrescribo variables de Bootstrap para modo oscuro */
  --bs-body-color:          var(--fg-main);
  --bs-secondary-color:     var(--fg-muted);
  --bs-heading-color:       var(--fg-heading);
}

/* Texto general en oscuro */
body, .card, .modal-content {
  color: var(--fg-main);
}

/* Títulos y encabezados */
h1,h2,h3,h4,h5,h6,
.card h5, .card h6,
.modal-title {
  color: var(--fg-heading);
}

/* Textos “apagados”: .text-muted, ayudas, pequeños */
.text-muted,
.small, small,
.form-text,
.card .text-light-50 {      /* tu utilidad existente */
  color: var(--fg-muted) !important;
}

/* Placeholders en inputs/selects */
::placeholder { color: var(--fg-muted-2); opacity: 1; }
.form-control::placeholder { color: var(--fg-muted-2); opacity: 1; }

/* Labels de formularios */
label.form-label { color: var(--fg-main); }

/* Inputs/Selects oscuros del panel */
.soft-input, .soft-select,
.form-control, .form-select, .form-control:focus, .form-select:focus {
  color: var(--fg-main);
}

/* Tablas en tarjetas oscuras */
.table-dark thead th {
  color: var(--fg-heading);
  border-color: rgba(255,255,255,.12);
}
.table-dark tbody td {
  color: var(--fg-main);
  border-color: rgba(255,255,255,.06);
}

/* Navegación lateral */
.sidebar .nav-link { color: var(--fg-main); }
.sidebar .nav-link .small,
.sidebar .text-light-50 { color: var(--fg-muted); }

/* Botones outline claros más legibles */
.btn-outline-light,
.btn-outline-light:hover,
.btn-outline-light:focus {
  color: var(--fg-main);
  border-color: rgba(255,255,255,.45);
}

/* Links en contenido oscuro */
a { color: var(--fg-link); }
a:hover { color: #D6CBFF; }

/* Badges/píldoras informativas */
.pill {
  color: var(--fg-main);
}

/* Encabezados de secciones como “Tutorial / Agregar Personal” */
.card > h5, .card > .h5,
.card .section-title { color: var(--fg-heading); }

/* Pequeño realce para los tabs activos */
.nav-tabs .nav-link.active {
  color: var(--fg-heading);
}

/* Tabla vacía o mensajes de estado */
.text-warning, .text-info { color: var(--fg-heading) !important; }

/* Botón cerrar sesión fijo en el sidebar (por si vuelve a moverse) */
.sidebar .btn-logout {
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-top: 1rem;
}
/* --- Bloque de contacto del admin (destacado) --- */
.contact-admin{
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 400px at -10% -30%, rgba(125,70,194,.18), transparent 60%),
    radial-gradient(900px 300px at 110% 130%, rgba(130,77,105,.25), transparent 60%),
    #14182a;
  color:#f1f1f8;
  padding:1rem 1.25rem;
  border-radius:.75rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.contact-admin .icon{
  width:42px; height:42px; display:grid; place-items:center;
  background:#2a2f47; border-radius:12px; font-size:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.contact-admin .title{
  font-weight:700; letter-spacing:.2px; margin:0;
}
.contact-admin .links a{
  display:inline-block; padding:.35rem .65rem; border-radius:.5rem;
  text-decoration:none; font-weight:600;
  border:1px solid rgba(255,255,255,.12);
  background:#20253b; color:#e9e9f1;
}
.contact-admin .links a:hover{ filter:brightness(1.12); }
.contact-admin .links a.whatsapp{ background:#1f4a2a; border-color:#2f6f42; }
.contact-admin .links a.mail{ background:#2a2f47; border-color:#3a4470; }
.contact-admin small{ color:#a8aec9; display:block; margin-top:.25rem; }
@media (max-width: 576px){
  .contact-admin{ padding:.85rem; }
  .contact-admin .icon{ width:36px; height:36px; font-size:18px; }
}

/* ====== Estética réplica F2 ====== */
.f2-a4{background:#0f1220}
.f2-page{
  width: 210mm; height: 297mm; margin: 0 auto 16px auto;
  background: #fff; color:#000; padding: 12mm; position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.f2-header{display:grid; gap:8px}
.f2-minedu{display:flex; align-items:center; gap:8px; font-weight:700}
.f2-logo{width:32px; height:32px; border:2px solid #000}
.f2-title{text-align:center; font-weight:800}
.f2-headgrid{
  display:grid; grid-template-columns: 160px 1fr 180px 1fr 200px 1fr; gap:6px; align-items:center; font-size:12px;
}
.f2-boxes label{margin-right:8px}
.f2-boxline{border:1px solid #000; min-height:24px}
.f2-name-row{display:flex; gap:8px; align-items:center}
.f2-underline{border-bottom:1px solid #000; flex:1; min-height:20px}

.f2-grid{margin-top:8px; border:1px solid #000}
.f2-grid-header, .f2-row{
  display:grid; grid-template-columns: 22px 180px 80px 70px 30px 30px 40px 210px 22px 22px 22px 22px 22px 60px 60px 60px 60px 60px 120px;
  border-bottom:1px solid #000; font-size:11px; text-align:center;
}
.f2-grid-header > div{border-right:1px solid #000; padding:4px 2px; font-weight:600}
.f2-row > div{border-right:1px solid #000; padding:2px}
.f2-row input{width:100%; border:0; outline:0; font-size:11px}
.f2-row .f2-sig{height:24px}

.f2-footer{display:flex; justify-content:space-between; margin-top:8px; font-size:12px}
.f2-check{margin-left:6px}
.f2-boxmini{display:inline-block; border:1px solid #000; width:16px; height:16px; vertical-align:middle}
.f2-foot-left,.f2-foot-right{display:flex; gap:18px; align-items:center}
.f2-foot-right .small{min-height:20px; display:inline-block}
.f2-foot-note{position:absolute; right:18mm; bottom:12mm; font-weight:800}
.f2-foot-tip{position:absolute; right:12mm; bottom:8mm; font-size:11px}

.f2-instructivo{font-size:12px}
.f2-firma{margin-bottom:16px}
.f2-signline{margin-top:22px; border-top:1px solid #000; width:220px; text-align:center; padding-top:6px; margin-left:auto}
.f2-ol{columns:2; column-gap:24px}

.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* si no existe, sumamos naranja */
.bg-orange {
  background-color: #ff9800 !important;
}