/* =====================================================================
   SQUADFLOW · Overrides propios del codebase
   ---------------------------------------------------------------------
   Ajustes específicos de NUESTRA app que el export del design system no
   puede conocer (markup de Dason, páginas con estilos propios, etc.).
   Se carga DESPUÉS de squadflow-theme/typography/components.css.
   Mantener el export intacto para poder re-exportarlo sin perder esto.
   ===================================================================== */

/* ---------- Topbar · caja de marca ----------
   Dason le pone fondo blanco propio a .navbar-brand-box (pensado para el
   tema claro). En dark-only queda como un bloque blanco. La transparentamos
   y alineamos el logo + wordmark. */
.navbar-brand-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Se estira a la altura del topbar (flex item) y centra la marca dentro.
       Antes traía height:100% inline, que colapsaba la caja a la altura del
       contenido y dejaba el logo pegado arriba. */
    display: flex;
    align-items: center;
    align-self: stretch;
    height: auto !important;
    /* Dason le fija width:250px (ancho del sidebar). En el layout launchpad no hay
       sidebar, así que ese ancho fijo descuadra y el buscador tapa el wordmark. */
    width: auto !important;
    /* min-width:max-content evita que la caja colapse (quedaba en 70px) y la marca
       se desbordara por debajo del link "Inicio". */
    min-width: max-content !important;
    padding: 0 !important;
    margin-right: 16px;
    flex: 0 0 auto;
}
/* Marca única (.sf-brand). OJO: no tocar `.logo` de Dason con display:flex —
   des-oculta las variantes .logo-dark/.logo-light y se enciman las dos. */
.sf-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 0 12px;
    white-space: nowrap;
}
.sf-brand img {
    height: 26px;
    width: auto;
    display: block;
}
/* El wordmark ya trae Audiowide + la "w" neón desde squadflow-typography.css */
.sf-brand .sk-wordmark {
    font-size: 18px;
    line-height: 1;
}

/* ---------- .list-group-item (Bootstrap) ----------
   Bootstrap pinta `.list-group-item` con `--bs-list-group-bg`/`--bs-list-group-color`,
   que el export del design system no tocó (solo cubrió componentes propios como
   .sk-badge/.sk-kpi). Por eso cualquier `<li class="list-group-item">` -listas de
   convocatoria, invitaciones, plantel, etc.- se ve con un fondo claro/gris que no
   calza con las cards oscuras. Override global: una sola vez, para todos los usos. */
.list-group-item {
    background-color: var(--sk-surface, #131740) !important;
    color: var(--sk-text, #fff) !important;
    border-color: var(--sk-border, rgba(184,87,255,.20)) !important;
}
.list-group-item.bg-light {
    background-color: var(--sk-tint, #0a0e27) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--sk-tint, #0a0e27) !important;
    color: var(--sk-text, #fff) !important;
}
.list-group-flush > .list-group-item {
    border-width: 0 0 1px;
}

/* ---------- SweetAlert2 (toasts y modales de confirmación) ----------
   Dason estiliza .swal2-popup con `background:var(--bs-secondary-bg)` (queda
   claro, Bootstrap nunca fue tocado) y el texto con `color:var(--bs-body-color)`,
   que SÍ redefinimos arriba a blanco (--sk-text) para el tema oscuro. Resultado:
   texto blanco sobre fondo blanco -> el mensaje del toast se veía "vacío"
   (solo el ícono, que tiene su propio color fijo, era visible). */
.swal2-popup {
    background: var(--sk-surface, #131740) !important;
    color: var(--sk-text, #fff) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.4) !important;
}
.swal2-title,
.swal2-html-container,
.swal2-container .swal2-title {
    color: var(--sk-text, #fff) !important;
}
.swal2-timer-progress-bar {
    background: var(--sk-primary, #9d4edd) !important;
}
.swal2-toast .swal2-close {
    color: var(--sk-text, #fff) !important;
}
/* Inputs dentro de swal2 (ej. prompts) */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    background: var(--sk-tint, #0a0e27) !important;
    color: var(--sk-text, #fff) !important;
    border-color: var(--sk-border, rgba(184,87,255,.20)) !important;
}