/* ==========================================================================
   Panel de Backups AfiConta - estilos propios sobre Bootstrap 5
   ========================================================================== */
:root {
  --bk-sidebar-bg: #0f172a;
  --bk-sidebar-bg2: #1e293b;
  --bk-accent: #38bdf8;
  --bk-accent-2: #818cf8;
  --bk-body-bg: #f1f5f9;
}

html, body { height: 100%; }
body {
  background: var(--bk-body-bg);
  font-size: .95rem;
}

.app-wrap { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 250px;
  min-width: 250px;
  background: linear-gradient(180deg, var(--bk-sidebar-bg) 0%, var(--bk-sidebar-bg2) 100%);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 0;
}
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; }
}
.offcanvas-lg.offcanvas-start { background: linear-gradient(180deg, var(--bk-sidebar-bg) 0%, var(--bk-sidebar-bg2) 100%); }

.sidebar-brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .bi { font-size: 1.9rem; color: var(--bk-accent); }
.brand-title { font-weight: 700; font-size: 1.15rem; color: #f8fafc; line-height: 1.1; }
.brand-sub { font-size: .75rem; color: #94a3b8; letter-spacing: .06em; text-transform: uppercase; }

.sidebar-nav { flex: 1; padding: .9rem .75rem; display: flex; flex-direction: column; gap: .15rem; overflow-y: auto; }
.nav-item-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .8rem;
  border-radius: .55rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: background .15s, color .15s;
  font-weight: 500;
}
.nav-item-link .bi { font-size: 1.05rem; width: 1.35rem; text-align: center; }
.nav-item-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item-link.active {
  background: linear-gradient(90deg, rgba(56,189,248,.18), rgba(129,140,248,.14));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--bk-accent);
}

.sidebar-foot { padding: 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
.user-chip { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.user-chip .bi { font-size: 1.6rem; color: var(--bk-accent-2); }
.user-txt { min-width: 0; }
.user-nombre { font-weight: 600; color: #f1f5f9; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: .74rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Zona principal ---------- */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: .8rem;
  background: #fff; padding: .6rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.content { padding: 1.5rem 1.75rem 3rem; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.45rem; font-weight: 700; margin: 0; color: #0f172a; }
.page-head .sub { color: #64748b; font-size: .88rem; }

/* ---------- Tarjetas y tablas ---------- */
.card { border: 0; border-radius: .9rem; box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 8px 24px -12px rgba(15,23,42,.12); }
.card-header { background: transparent; border-bottom: 1px solid #eef2f7; font-weight: 600; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; border-bottom-width: 1px; }
.table tbody tr:hover { background: #f8fafc; }

/* Campos con autoguardado */
.autosave-ok { border-color: #22c55e !important; box-shadow: 0 0 0 .15rem rgba(34,197,94,.18) !important; transition: box-shadow .2s; }
.autosave-err { border-color: #ef4444 !important; box-shadow: 0 0 0 .15rem rgba(239,68,68,.18) !important; }

/* Login */
.login-hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1000px 600px at 20% 0%, #1e293b 0%, #0f172a 60%);
}
.login-card { width: 100%; max-width: 420px; border-radius: 1.1rem; overflow: hidden; }
.login-card .top { background: linear-gradient(120deg, #0ea5e9, #6366f1); color: #fff; padding: 2rem 2rem 1.6rem; }
.login-card .top .bi { font-size: 2.4rem; }
.login-card .body { background: #fff; padding: 1.8rem 2rem 2rem; }

/* ---------- Modales con scroll ----------
   Bootstrap da scroll al cuerpo del modal encadenando alturas flexibles:
   .modal-content (flex column, max-height 100%, overflow hidden) → .modal-body
   (flex 1 1 auto, overflow-y auto). Si entre medias hay un envoltorio -un
   <form> que rodea cabecera+cuerpo+pie, o una pantalla alternativa-, ese
   envoltorio corta la cadena: al no tener altura limitada, el cuerpo crece sin
   scroll y .modal-content recorta lo que sobresale, dejando media pantalla
   invisible e inalcanzable. Convertimos el envoltorio en columna flexible para
   restaurar la cadena. */
.modal-dialog-scrollable .modal-content > form,
.modal-dialog-scrollable .modal-content > .modal-pantalla {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* permite encoger por debajo del alto del contenido */
  overflow: hidden;
}

.badge-estado { font-size: .72rem; letter-spacing: .03em; }

/* Barras de progreso de ejecucion */
.progress { height: .55rem; border-radius: 1rem; }