/* ── Header — botones icono (hamburguesa, notificaciones) ──
   Solo el COLOR del ícono cambia a primary en hover. Background queda igual. */
.header .btn-light.btn-icon:hover,
.header .btn-light.btn-icon:focus,
.header .btn-light.btn-icon:focus-visible {
    color: var(--bs-primary);
}

.header .btn-light.btn-icon:hover i,
.header .btn-light.btn-icon:focus i {
    color: var(--bs-primary);
}

/* ── nav-lb-tab: usar colores del proyecto en lugar del tema Geeks ── */
.nav-lb-tab .nav-item .nav-link.active,
.nav-lb-tab .nav-item .nav-link:hover {
    border-bottom-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

/* ── nav-tabs-primary: variante de nav-tabs con hover/activo en primary del proyecto ── */
.nav-tabs-primary {
    gap: 0.1rem;
    border-bottom: none;
}

.nav-tabs-primary .nav-link {
    color: var(--bs-body-color);
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-tabs-primary .nav-link:hover:not(.active):not(.disabled) {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: #fff;
    isolation: isolate;
}

.nav-tabs-primary .nav-link.active {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.select2-container {
  /* Estilos para el contenedor principal */

}

.select2-dropdown {
}
.select2-container--open .select2-dropdown {
	z-index: 1070;
}
/* Estilos personalizados para Select2 */
.select2-selection__rendered {
  /* padding: .55rem 1.25rem!important; */
  font-size: 14px; /* Ajusta el tamaño de fuente según tus necesidades */
  border-radius: 0.15rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	font-size: .855rem;
	color: #9b97af!important;
 }
 .select2-container--default .select2-results > .select2-results__options {
    padding-left: 0;
}
 .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: calc((2.555rem - 1rem - 1px* 4) / 2);
    padding-bottom: calc((2.155rem - 1rem) / 2);
    padding-left: 1rem;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1;
    color: #3d3d3d;
    /* border: #e3e3e3 solid 1px; */
    border-radius: 0.275rem;
    padding-right: 1.875rem;
}
.select2-selection__arrow {
  height: 40px; /* Ajusta la altura según tus necesidades */
}

.select2-selection__arrow b {
  margin-top: 14px; /* Ajusta el espaciado vertical según tus necesidades */
}
.select2-container .select2-selection--single .select2-selection__clear {
	padding-top: 7px;
}
.select2-container--default .select2-selection--single {
	height: 100%; 
   	border:1px solid #e8e7ed!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 6px; 
} 



.siglas-xs span{
	width:24px;
	height:24px;
	font-size: 11px;
	color: #ffffff;
	background-color: var(--bs-primary);
	line-height: 24px;
	border-radius: 24px;
	float: left;
	text-align: center;
	font-weight: 600;
}

.siglas-sm span{
	width:32px;
	height:32px;
	font-size: 15px;
	padding-top: 2px;
	color: #ffffff;
	background-color: var(--bs-primary);
	line-height: 30px;
	border-radius: 30px;
	float: left;
	text-align: center;
	font-weight: 600;
	margin-top: 10px;
}

.siglas-md span {
	color: #ffffff;
	font-size: 20px;
	padding-top: 5px;
	width: 40px;
	height: 40px;
	background-color: var(--bs-primary);
	line-height: 30px;
	border-radius: 30px;
	float: left;
	text-align: center;
	font-weight: 600;
	margin-top: 10px;
}

.siglas-md span:hover{
	background-color: var(--bs-primary);
	border:1px solid rgb(255, 255, 255);
}
.siglas-md button{
	background-color:transparent;
	border-color:transparent;
}
.siglas-md button:hover{
	background-color:transparent;
	border-color:transparent;
}

.siglas-xl {
	width: 5rem;
	height: 5rem;
	background-color: var(--bs-primary);
	color: #ffffff;
	font-size: 1.75rem;
	font-weight: 700;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
}

.capitalize {
	text-transform: capitalize;
}

/* Background */
.bg-navy {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-navy-rgb), var(--bs-bg-opacity)) !important
}


/* Label pequeño para formularios de pago */
.lbl-sm { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--bs-secondary); margin-bottom: 2px; }

/* Gateway option para checkout */
.gw-option { border: 2px solid var(--bs-gray-200); border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.gw-option:hover { border-color: var(--bs-primary); }
.gw-option.selected { border-color: var(--bs-primary); background: var(--bs-light-primary); }

.modal-rounded{
	border-radius: 17px !important;
	border: 0px !important;
}

.text-blue-dark {
    color: #344767;
}

.text-blue-phantom{
    color: #293852;
}

.fw-450 {
	font-weight: 450!important;
}

.lh-15{
    line-height: 15px!important;
}

/* Animación campanita - salta al recibir notificación */
@keyframes bellBounce {
    0%, 100% { transform: translateY(0); background-color: #f1f5f9; }
    15% { transform: translateY(-6px); background-color: #dbeafe; }
    30% { transform: translateY(0); background-color: #c7d7fe; }
    45% { transform: translateY(-4px); background-color: #dbeafe; }
    60% { transform: translateY(0); background-color: #e8eefb; }
    75% { transform: translateY(-2px); }
    90% { transform: translateY(0); }
}
.bell-bounce {
    animation: bellBounce 1.2s ease-in-out;
}

/* Dropdown de notificaciones */
.dropdown-menu-lg { width: 380px; max-width: 380px; }
.dropdown-menu-lg #notification-list { overflow-y: auto; overflow-x: hidden; max-height: 265px; display: block; }
.dropdown-menu-lg .list-group-item { overflow: hidden; }
.dropdown-menu-lg .list-group-item a.text-body { overflow: hidden; }

/* Toggle switches - solo aplica a switches, no a radios ni checkboxes normales */
.form-switch .form-check-input { width: 40px; height: 20px; }
.form-check-input:checked { background-color: #5b6abf; border-color: #5b6abf; }
.crud-header { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.module-row:hover { background-color: rgba(91,106,191,0.04); }

/* Botón de acciones (tres puntos) más visible */
.btn-ghost {
    color: #5e72e4;
    background-color: rgba(227, 220, 255, 0.35);
}
.btn-ghost:hover, .btn-ghost.active {
    background-color: rgba(227, 220, 255, 0.6);
    color: #4a5bc5;
}

/* ========================================================================
   ResponsiveDrawer — componente genérico reutilizable
   ======================================================================== */

/* Desktop (>= breakpoint): el drawer es contenido inline normal, el header se oculta */
.responsive-drawer .drawer-header { display: none; }

@media (max-width: 991.98px) {
    /* Mobile: comportamiento drawer según el lado elegido */
    .responsive-drawer {
        position: fixed;
        z-index: 1045;
        margin: 0 !important;
        border-radius: 0 !important;
        transition: transform .3s ease-in-out;
        overflow-y: auto;
        background: #fff;
        outline: none;
    }
    /* Side = end (derecha, default) */
    .responsive-drawer[data-drawer-side="end"],
    .responsive-drawer:not([data-drawer-side]) {
        top: 0; right: 0; bottom: 0;
        width: min(420px, 92vw);
        height: 100vh;
        transform: translateX(100%);
        box-shadow: -8px 0 28px rgba(30,45,64,.18);
    }
    /* Side = start (izquierda) */
    .responsive-drawer[data-drawer-side="start"] {
        top: 0; left: 0; bottom: 0;
        width: min(420px, 92vw);
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: 8px 0 28px rgba(30,45,64,.18);
    }
    /* Side = bottom (abajo) */
    .responsive-drawer[data-drawer-side="bottom"] {
        left: 0; right: 0; bottom: 0;
        width: 100%;
        max-height: 85vh;
        transform: translateY(100%);
        border-radius: 1rem 1rem 0 0 !important;
        box-shadow: 0 -8px 28px rgba(30,45,64,.18);
    }
    .responsive-drawer.is-open { transform: none; }

    .responsive-drawer .drawer-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 1rem 1.2rem .8rem;
        border-bottom: 1px solid #eef2f8;
        background: #fff;
        position: sticky; top: 0; z-index: 2;
    }
    .responsive-drawer .drawer-header h1,
    .responsive-drawer .drawer-header h2,
    .responsive-drawer .drawer-header h3,
    .responsive-drawer .drawer-header h4,
    .responsive-drawer .drawer-header h5 {
        font-size: 1rem; font-weight: 700; color: #1e2d40; margin: 0;
    }
}

.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(30,45,64,.5);
    z-index: 1044;
    opacity: 0;
    transition: opacity .25s ease-in-out;
}
.drawer-backdrop.is-visible { opacity: 1; }
@media (min-width: 992px) {
    .drawer-backdrop { display: none; }
}
/* ── Color palette picker (disciplinas) ──────────────────────────── */
/* Grid adaptativo: columnas FIJAS de 44px (tap target WCAG).
   Tantas columnas como quepan en el contenedor. Sin media queries. */
.color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, 44px);
    gap: .5rem;
    margin-top: .35rem;
    padding: .65rem .75rem;
    background: #f7f9fc;
    border: 1.5px solid #e4ebf5;
    border-radius: .55rem;
    justify-content: center;
}
.color-swatch {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: var(--swatch-color, #6c757d);
    box-shadow: 0 0 0 0 rgba(0,0,0,0), inset 0 0 0 2px rgba(255,255,255,.3);
    transition: transform .12s, box-shadow .15s;
}
.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(30,45,64,.2);
}
.color-swatch i {
    color: #fff;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .15s;
    line-height: 1;
    -webkit-text-stroke: .5px rgba(0,0,0,.15);
}
.color-swatch.is-selected {
    box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px #344767;
    transform: scale(1.05);
}
.color-swatch.is-selected i { opacity: 1; }

/* ===== Tablas responsive con scroll horizontal ===== */

/*
 * Clases de ancho mínimo para tablas: .table-min-{size}
 * Cuando el contenedor es más chico que el min-width, aparece scroll horizontal.
 * Las columnas mantienen su tamaño y no se deforman.
 */
.table.table-min-sm  { min-width: 600px; }
.table.table-min-md  { min-width: 800px; }
.table.table-min-lg  { min-width: 1000px; }
.table.table-min-xl  { min-width: 1200px; }

/* Badges dentro de tablas: wrap y spacing */
.table td .badge {
    display: inline-block;
    margin: 2px 3px 2px 0;
}

/* ===== Indicador y navegación de scroll horizontal en tablas ===== */

.table-scroll-wrapper {
    position: relative;
}

/* Sombras indicadoras */
.table-scroll-wrapper .scroll-fade-right,
.table-scroll-wrapper .scroll-fade-left {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.table-scroll-wrapper .scroll-fade-right {
    right: 0;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.07));
}
.table-scroll-wrapper .scroll-fade-left {
    left: 0;
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.07));
}
.table-scroll-wrapper .scroll-fade-right.visible,
.table-scroll-wrapper .scroll-fade-left.visible {
    opacity: 1;
}

/* Botones de navegación */
.table-scroll-wrapper .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease;
    font-size: 14px;
}
.table-scroll-wrapper .scroll-btn:hover {
    background: #f0f0f0;
    color: #222;
}
.table-scroll-wrapper .scroll-btn.visible {
    opacity: 1;
}
.table-scroll-wrapper .scroll-btn-right {
    right: 8px;
}
.table-scroll-wrapper .scroll-btn-left {
    left: 8px;
}

/* ===== Select nativo (sin Select2) ===== */
select.form-control,
select.form-select {
    color: #3d3d3d;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23636e72' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    padding-right: 2rem;
}
select.form-control option,
select.form-select option {
    color: #3d3d3d;
}
select.form-control option:disabled,
select.form-select option:disabled,
select.form-control option[value=""],
select.form-select option[value=""] {
    color: #9b97af;
}

/* ===== Imágenes de avatar (previene stretch en rounded-circle) ===== */
img.avatar,
img.avatar-sm,
img.avatar-xs {
    object-fit: cover;
}

/* ===== Avatar Upload Circle ===== */
.avatar-upload-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    cursor: pointer;
}
.avatar-upload-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #dee2e6;
    display: block;
    transition: border-color 0.2s ease;
}
.avatar-upload-empty {
    background-color: #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-upload-overlay {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.avatar-upload-wrap:hover .avatar-upload-circle {
    border-color: #6c757d;
}
.avatar-upload-wrap:hover .avatar-upload-overlay {
    opacity: 1;
}

/* ===== Dropzone Image Upload ===== */
.dropzone-upload-wrap {
    position: relative;
    width: 100%;
    max-width: 250px;
    height: 140px;
    cursor: pointer;
    margin: 0 auto;
}
.dropzone-upload-square {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 2px dashed #dee2e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    color: #6c757d;
}
.dropzone-upload-wrap:hover .dropzone-upload-square,
.dropzone-upload-wrap.drag-active .dropzone-upload-square {
    border-color: #0d6efd;
    background-color: #e9ecef;
}
.dropzone-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dropzone-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.dropzone-upload-wrap:hover .dropzone-upload-overlay {
    opacity: 1;
}


/* ============================================================
   Botones "soft" — genéricos, reutilizables
   Estilo sutil, rounded pill, con hover activado
   ============================================================ */

/* Soft primary — borde azul suave, activo al hover.
   Útil para acciones de confirmación no agresivas (Volver, Finalizar, etc). */
.btn-soft-primary,
.btn-soft-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.btn-soft-primary {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border: 1.5px solid rgba(var(--bs-primary-rgb), 0.35);
    color: var(--bs-primary);
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
}
.btn-soft-primary:hover {
    background: rgba(var(--bs-primary-rgb), 0.14);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.btn-soft-primary.disabled,
.btn-soft-primary:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Soft danger — rojo suave desde el inicio, un poco más intenso al hover.
   Útil para acciones destructivas secundarias (Cancelar orden, Cancelar clase, etc). */
.btn-soft-danger {
    background: rgba(var(--bs-danger-rgb), 0.06);
    border: 1.5px solid rgba(var(--bs-danger-rgb), 0.35);
    color: var(--bs-danger);
    font-size: 0.84rem;
    padding: 0.45rem 1rem;
    cursor: pointer;
}
.btn-soft-danger:hover {
    background: rgba(var(--bs-danger-rgb), 0.14);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}
.btn-soft-danger.disabled,
.btn-soft-danger:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.btn-soft-primary.btn-sm,
.btn-soft-danger.btn-sm {
    padding: 0.28rem 0.8rem;
    font-size: 0.8rem;
}

.btn-soft-primary.btn-xs,
.btn-soft-danger.btn-xs {
    padding: 0.22rem 0.75rem;
    font-size: 0.75rem;
}

/* Soft buttons dentro de grupos: replican el comportamiento de Bootstrap sin exigir .btn */
.btn-group > .btn-soft-primary,
.btn-group > .btn-soft-danger,
.btn-group-vertical > .btn-soft-primary,
.btn-group-vertical > .btn-soft-danger {
    position: relative;
    flex: 1 1 auto;
}

.btn-group > .btn-soft-primary:hover,
.btn-group > .btn-soft-danger:hover,
.btn-group > .btn-soft-primary:focus,
.btn-group > .btn-soft-danger:focus,
.btn-group > .btn-soft-primary:active,
.btn-group > .btn-soft-danger:active,
.btn-group > .btn-soft-primary.active,
.btn-group > .btn-soft-danger.active,
.btn-group-vertical > .btn-soft-primary:hover,
.btn-group-vertical > .btn-soft-danger:hover,
.btn-group-vertical > .btn-soft-primary:focus,
.btn-group-vertical > .btn-soft-danger:focus,
.btn-group-vertical > .btn-soft-primary:active,
.btn-group-vertical > .btn-soft-danger:active,
.btn-group-vertical > .btn-soft-primary.active,
.btn-group-vertical > .btn-soft-danger.active {
    z-index: 1;
}

.btn-group > .btn-soft-primary:not(:first-child),
.btn-group > .btn-soft-danger:not(:first-child) {
    margin-left: -1px;
}

.btn-group > .btn-soft-primary:not(:last-child),
.btn-group > .btn-soft-danger:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn-soft-primary:not(:first-child),
.btn-group > .btn-soft-danger:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn-soft-primary:not(:first-child),
.btn-group-vertical > .btn-soft-danger:not(:first-child) {
    margin-top: -1px;
}

.btn-group-vertical > .btn-soft-primary,
.btn-group-vertical > .btn-soft-danger {
    width: 100%;
}

.btn-group-vertical > .btn-soft-primary:not(:last-child),
.btn-group-vertical > .btn-soft-danger:not(:last-child) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn-soft-primary:not(:first-child),
.btn-group-vertical > .btn-soft-danger:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Acciones del detalle de clase: en fila si entra, en columna si no */
.class-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.class-detail-actions > .btn-soft-primary,
.class-detail-actions > .btn-soft-danger {
    flex: 1 1 11rem;
}
/* ─────────────────────────────────────────────────────────────────────────
   Modal title accent bar — pill-shaped marker on the left of the modal
   header. Replaces the old `border-start border-3 border-light-primary`
   which had square corners. Used in templates/ajaxform_modal.html.
   ──────────────────────────────────────────────────────────────────────── */
.modal-title-accent {
    position: relative;
    padding-left: 16px;
}
.modal-title-accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 999px;
    /* Color por defecto. Se puede sobreescribir con un modificador
       .accent-<color> definido más abajo. */
    background: var(--bs-light-danger, #ff9494);
}

/* Variantes de color para la barrita.
   Uso: <div class="modal-title-accent accent-success">…</div> */
.modal-title-accent.accent-primary::before        { background: var(--bs-primary); }
.modal-title-accent.accent-light-primary::before  { background: var(--bs-light-primary, #5e72e4 ); }
.modal-title-accent.accent-success::before        { background: var(--bs-success); }
.modal-title-accent.accent-light-success::before  { background: var(--bs-light-success, #b7f5cc); }
.modal-title-accent.accent-danger::before         { background: var(--bs-danger); }
.modal-title-accent.accent-light-danger::before   { background: var(--bs-light-danger, #ff9494); }
.modal-title-accent.accent-warning::before        { background: var(--bs-warning); }
.modal-title-accent.accent-info::before           { background: var(--bs-info); }
.modal-title-accent.accent-secondary::before      { background: var(--bs-secondary); }
.modal-title-accent.accent-navy::before           { background: #344767; }
.modal-title-accent.accent-violet::before         { background: #6E5BFF; }
.modal-title-accent.accent-rose::before           { background: #fd5577; }

/* ── Fix: #db-wrapper overflow-x: hidden rompe position: sticky ────────────
   El tema pone overflow-x: hidden en #db-wrapper. El CSS spec convierte
   overflow-y: visible → auto automáticamente, creando un scroll context
   que impide que position: sticky funcione en los descendientes.
   overflow-x: clip corta visualmente igual que hidden pero NO crea
   un scroll context, así el sticky del navbar funciona correctamente.
──────────────────────────────────────────────────────────────────────────── */
#db-wrapper {
  overflow-x: clip;
}

/* ── Topbar sticky ──────────────────────────────────────────────────────────
   Sticky aplicado a .header (el wrapper del navbar, hijo directo de #page-content)
   y NO a .navbar-default (su hijo de 60px). Si sticky se aplica al hijo con la
   misma altura que su padre, el rango de sticking es 0 y nunca funciona.
   .header vive dentro de #page-content (~100vh+), por lo que tiene rango completo.
   z-index 1030 = por encima de dropdowns Bootstrap, debajo de modals (1050+).
   El banner de suscripción usa top: 68px para arrancar justo debajo.
──────────────────────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ── Navbar · submenús del dropdown de perfil en modo inline ─────────────────
   En < lg (max-width: 992px) los submenús (Perfiles, Empresas, Sucursales)
   dejan de volar al costado y se EXPANDEN dentro del propio menú ("se incrustan
   en el nav").

   Causa del hueco gigante: la regla del tema Geeks
   `.navbar .nav-top-wrap .dropdown-menu { margin: 2.25rem .75rem !important }`
   está pensada para el menú RAÍZ (absolute, colgando del navbar), pero su
   selector alcanza también al ul.dropdown-menu ANIDADO del submenú → 36px de
   margen arriba y abajo dentro del menú. El propio tema intenta resetearlo
   (`.navbar .navbar-nav ... .dropdown-submenu .dropdown-menu { margin: 0 }`)
   pero pierde contra el !important — bug del tema. Este override necesita
   !important para restaurar el diseño previsto. Solo afecta el modo inline;
   el flyout de escritorio (>= lg) no se toca.
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  /* El selector replica el del tema (5 clases) a propósito: su regla de
     padding es `... .dropdown-menu .dropdown-submenu .dropdown-menu
     { padding: 0 !important }` — con menos especificidad, nuestro
     !important PIERDE aunque cargue después. */
  .navbar .nav-top-wrap .dropdown-menu .dropdown-submenu .dropdown-menu {
    /* margin-top = respiro entre el título del acordeón (Perfiles/Empresas/
       Sucursales) y su primer item; resto en 0 para matar los 36px del tema.
       El padding queda en 0 vía la regla propia del tema. */
    margin: .5rem 0 0 !important;
  }
  .navbar .nav-top-wrap .dropdown-submenu .dropdown-menu .dropdown-divider {
    margin-top: .25rem;
    margin-bottom: .25rem;
  }
}