body{scroll-behavior:smooth}.hero{background:linear-gradient(180deg,#f8f9fa,transparent)}


/* --- Nav visual tweaks --- */
.navbar .nav-link { opacity:.95; }
.navbar .nav-link.active { font-weight:600; text-decoration: underline; text-underline-offset: .25rem; }
.avatar-initial{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:#ffffff22; color:#fff; border:1px solid #ffffff55; font-weight:700;
}


/* --- Docs & Dashboard visual helpers --- */
pre code { white-space: pre-wrap; word-break: break-word; }
pre { overflow:auto; }
.progress { height: .8rem; }
/* ---------- Base ---------- */
:root{
  --card-hover-raise: -4px;
}
.gradient-banner{
  background: linear-gradient(135deg, rgba(13,110,253,.08), rgba(32,201,151,.08));
  padding: 18px 20px;
  border: 1px solid rgba(0,0,0,.05);
}
.avatar-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

/* ---------- Cards & Hover ---------- */
.card-hover{
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
  z-index: 0;
}
.card-hover:hover,
.card-hover:focus-within{
  transform: translateY(var(--card-hover-raise));
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.08);
  z-index: 5; /* eleva visualmente sin romper el layout */
}

/* ---------- Grid tweaks (evita solapamientos) ---------- */
.row.g-4.align-items-start > [class*="col-"]{
  align-self: flex-start; /* no estires columnas en vertical */
}

/* Separación vertical predecible entre cards apiladas en columnas anchas */
@media (min-width: 992px){
  .col-lg-6 > .card + .card{ margin-top: 1rem; }
}

/* ---------- Formularios pequeños / ayudas ---------- */
.form-text{ font-size:.86rem; }
.small, .text-muted{ letter-spacing:.1px; }

/* ---------- Tabla/Lista de actividad ---------- */
.list-group-item{ border-color: rgba(0,0,0,.05); }

/* ---------- Utilidades ---------- */
.bg-light{ background-color: #f8f9fa !important; }