:root, :host {
    --breakpoint-xl: 217rem;
    --color-sky-200: #bae6fd;
    --color-sky-600: #0284c7;
    --color-pink-200: #f1c1f7;
    --color-pink-600: oklch(0.79 0.15 322.42);

    /* San Telmo brand (Figma) */
    --st-navy: #24346C;
    --st-navy-dark: #161F3F;
    --st-navy-light: #3B52A4;
    --st-gold: #BF9439;
    --st-gold-light: #FFCE65;

    --primary: var(--st-navy);
    --color-primario-hex: var(--st-navy);
}
h1 {
    color: var(--st-navy);
}

/* Formulario Hazte miembro: estados de validación */
.st-field {
    display: flex;
    flex-direction: column;
}

.st-field-error {
    display: block;
    color: #E2574E;
    font-size: 12px;
    line-height: 1.3;
    margin-top: 6px;
    min-height: 0;
}

.st-field-error:empty {
    margin-top: 0;
}

.st-invalid,
.st-invalid-select {
    border-color: #E2574E !important;
}
.active .kt-menu-item-active {
    background-color: color-mix(in srgb, var(--st-gold) 28%, transparent);
    border-radius: 0;
}
.kt-card-header {
    background-color: #EBEEF3;
    color: var(--st-navy);
    font-size: 20px !important;
    font-weight: 400 !important;
    border-radius: 4px 4px 0 0; /* esquinas superiores poco redondeadas (Figma) */
    border-bottom: 2px solid var(--st-navy-light); /* #3B52A4 */
    min-height: 48px !important; /* KTUI ponía 56px; se limita a un máx de 48px */
    height: 48px;
    max-height: 48px;
}

/* Título del encabezado: siempre en mayúscula y color corporativo (Figma) */
.kt-card-title {
    text-transform: uppercase;
    color: var(--st-navy);
}

.kt-card {
    border-width: 0 !important;
    --tw-shadow: 0 0 0 0 !important;
}

.kt-btn-primary {
    color: #fff !important;
    background-color: var(--st-navy) !important;
    border-radius: 4px;
    padding: 0 39px;
}

.kt-btn-primary:hover {
    background-color: var(--st-navy-dark) !important;
}

/* Botón de acento (dorado) opcional */
.kt-btn-gold {
    color: var(--st-navy) !important;
    background-color: var(--st-gold) !important;
    border-radius: 4px;
    padding: 0 39px;
}

.kt-btn-gold:hover {
    background-color: var(--st-gold-light) !important;
}

/* Banner dorado del logo (motivo diagonal estilo Figma) */
.st-logo-banner {
    display: inline-flex;
    align-items: center;
    background: var(--st-gold);
    padding: 16px 42px 16px 24px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
}

.st-logo-banner img {
    display: block;
}

/* Logo del sidebar sobre franja dorada: pegado a la esquina superior izquierda (sin padding sup/izq) */
.st-sidebar-logo {
    margin-inline-start: 0;
    padding: 14px 40px 14px 24px;
}

.st-sidebar-logo img {
    width: 150px;
}

/* Al colapsar el sidebar se oculta la franja y se muestra solo el escudo (small-logo) */
.kt-sidebar-collapse .kt-sidebar:not(:hover) .st-sidebar-logo {
    display: none;
}

/* Logo del Login sobre franja dorada (misma composición que el sidebar) */
.st-login-logo {
    margin-bottom: 24px;
    padding: 14px 38px 14px 22px;
}

.st-login-logo img {
    width: 165px;
}

/* ============================================================
   Sidebar azul marino — rediseño Plataforma 2026 (Figma)
   ============================================================ */
#sidebar.kt-sidebar {
    background-color: var(--st-navy-dark); /* #161F3F */
    border-inline-end: none;
}

/* Items pegados con divisores (sin gap) */
#sidebar_menu.kt-menu {
    gap: 0;
}

/* El contenedor scrollable del menú (#sidebar_scrollable) es .kt-scrollable-y-hover, que lleva
   overflow-y:scroll con scrollbar-width:thin, así que reserva el ancho de la barra (3,13 px). Como
   además es shrink-0, no podía encogerse y acababa midiendo 283,13 px dentro de un sidebar de 280:
   las opciones del menú sobresalían por la derecha. Se nota sobre todo con el candado de los
   apartados de miembros, porque va pegado al borde derecho con ms-auto. */
#sidebar_scrollable {
    max-width: 100%;
}

/* Enlace de cada item: padding y divisor inferior */
#sidebar_menu > .kt-menu-item > .kt-menu-link {
    border: 0;
    border-bottom: 1px solid var(--st-navy-light); /* #3B52A4 */
    border-radius: 0 !important;
    padding: 18px 16px 18px 28px;
    gap: 10px;
    transition: background-color 0.15s ease;
}

#sidebar_menu > .kt-menu-item > .kt-menu-link:hover {
    background-color: rgba(59, 82, 164, 0.28);
    border-radius: 0 !important;
}

/* Texto e iconos en blanco, 16px */
#sidebar_menu .kt-menu-title {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
}

#sidebar_menu .kt-menu-icon,
#sidebar_menu .kt-menu-icon > i {
    color: #FFFFFF;
}

/* Item activo: banda navy más clara */
#sidebar_menu > .kt-menu-item.active > .kt-menu-link {
    background-color: var(--st-navy); /* #24346C */
}

#sidebar_menu > .kt-menu-item.active .kt-menu-title,
#sidebar_menu > .kt-menu-item.active .kt-menu-icon > i {
    color: #FFFFFF;
}

/* Hover sobre cualquier item del menú: texto e iconos SIEMPRE en blanco.
   El tema KTUI los pone en var(--mono) (oscuro) al pasar el ratón, lo que sobre
   el fondo navy —y especialmente sobre el item activo— hacía que el texto desapareciera. */
#sidebar_menu .kt-menu-item .kt-menu-link:hover .kt-menu-title,
#sidebar_menu .kt-menu-item .kt-menu-link:hover .kt-menu-icon,
#sidebar_menu .kt-menu-item .kt-menu-link:hover .kt-menu-icon > i {
    color: #FFFFFF !important;
}

/* Candado "solo miembros": más visible sobre navy */
#sidebar_menu .st-menu-lock i {
    color: #E2574E;
    opacity: 0.85;
}

#sidebar_menu .st-menu-lock:hover i {
    opacity: 1;
}

/* Icono de candado (SVG #FF7474) de los apartados bloqueados */
#sidebar_menu .st-menu-lock .st-menu-lock-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Apartados bloqueados (con candado): el texto va en gris #b3b3b3 en vez de blanco,
   también al pasar el ratón (gana a la regla genérica de hover en blanco). */
#sidebar_menu .kt-menu-item:has(.st-menu-lock) .kt-menu-title,
#sidebar_menu .kt-menu-item:has(.st-menu-lock) .kt-menu-link:hover .kt-menu-title {
    color: #b3b3b3 !important;
}

/* Contenedor del botón: alineado con los iconos del menú (28px) y 40px sobre el menú */
#sidebar .st-hazte-miembro-wrap {
    padding: 40px 24px 0 28px;
}

/* Botón "Hazte miembro" → píldora dorada clara, texto negro (Figma) */
#sidebar .st-hazte-miembro {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--st-gold-light); /* #FFCE65 */
    color: #000000;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 16px;
    transition: filter 0.15s ease;
}

#sidebar .st-hazte-miembro:hover {
    filter: brightness(0.97);
    color: #000000;
}

#sidebar .st-hazte-miembro__icon {
    color: #000000;
    flex-shrink: 0;
}

/* ============================================================
   Sidebar CONTRAÍDO (kt-sidebar-collapse, y sin hover que lo expanda)
   - Botón "Hazte miembro" → círculo con solo el icono, centrado
   - Logo → wordmark blanco compacto (mismo ancho que el botón), centrado
   ============================================================ */

/* Ancho compartido del botón circular y del logo compacto */
#sidebar {
    --st-collapsed-cta: 48px;
}

/* Botón Hazte miembro: círculo centrado, sin texto */
.kt-sidebar-collapse .kt-sidebar:not(:hover) .st-hazte-miembro-wrap {
    width: 80px; /* ancho del sidebar contraído */
    padding: 40px 0 0 0;
    display: flex;
    justify-content: center;
}

.kt-sidebar-collapse .kt-sidebar:not(:hover) .st-hazte-miembro {
    width: var(--st-collapsed-cta);
    height: var(--st-collapsed-cta);
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
}

.kt-sidebar-collapse .kt-sidebar:not(:hover) .st-hazte-miembro span {
    display: none;
}

/* Logo compacto: se oculta el escudo y se muestra el wordmark centrado */
.st-sidebar-logo-mini {
    display: none;
}

.st-sidebar-logo-mini svg {
    display: block;
    width: 100%;
    height: auto;
}

.kt-sidebar-collapse .kt-sidebar:not(:hover) #sidebar_header {
    justify-content: center;
    padding-inline: 0;
    padding-top: 40px;
}

.kt-sidebar-collapse .kt-sidebar:not(:hover) #sidebar_header > a {
    justify-content: center;
    width: 100%;
}

.kt-sidebar-collapse .kt-sidebar:not(:hover) .small-logo {
    display: none;
}

.kt-sidebar-collapse .kt-sidebar:not(:hover) .st-sidebar-logo-mini {
    display: block;
    width: var(--st-collapsed-cta);
}

/* Cerrar sesión: anclado al margen inferior izquierdo del sidebar, en blanco */
#sidebar .st-sidebar-logout {
    position: absolute;
    left: 26px;
    bottom: 24px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}

#sidebar .st-sidebar-logout:hover {
    color: #FFFFFF;
    opacity: 1;
}

#sidebar .st-sidebar-logout svg {
    display: block;
}


table.dataTable thead th, table.dataTable thead td {
    background-color: #E6ECF1;
}


html {
    font-size: 14px;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.kt-menu-title {
    color: var(--st-navy);
}

/* Candado de "solo miembros" en el menú lateral (discreto) */
.st-menu-lock i {
    color: #C0392B;
    font-size: 0.8rem;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.st-menu-lock:hover i {
    opacity: 0.85;
}

/* Se oculta al colapsar el sidebar (igual que los títulos), salvo en hover. */
.kt-sidebar-collapse .kt-sidebar:not(:hover) .st-menu-lock {
    display: none;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}
.avisoLegal {
    color: var(--foreground);
    line-height: 1.6;
}

.avisoLegal p {
    margin-bottom: 20px;
}

.avisoLegal strong {
    color: var(--st-navy);
}

.avisoLegal a {
    color: var(--st-navy);
    text-decoration: underline;
}

.avisoLegal ul {
    list-style: disc;
    padding-inline-start: 1.25rem;
    margin-bottom: 20px;
}

.avisoLegal li {
    margin-bottom: 6px;
}

.avisoLegal table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 24px;
}

.avisoLegal table td,
.avisoLegal table th {
    border: 1px solid var(--border);
    padding: 10px 12px;
    vertical-align: top;
}

.avisoLegal table td:first-child {
    background: #E6ECF1;
    color: var(--st-navy);
    font-weight: 600;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* El contenido del área principal debe quedar alineado ARRIBA (no centrado verticalmente) y el
   footer pegado abajo. El div #contentContainer (heredado del breadcrumb, siempre vacío) crecía
   dentro del <main> flex y empujaba el contenido hacia el centro en resoluciones grandes. */
#content > #contentContainer {
    display: none !important;
}
#content > .kt-container-fixed:not(#contentContainer) {
    flex: 1 0 auto;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* CSS Calendario */
:root {
    --clr-bg: #f6f7fb;
    --clr-surface: #ffffff;
    --clr-text: #111827;
    --clr-muted: #6b7280;
    --clr-border: #e5e7eb;
    --clr-accent: var(--color-primario-hex);
    --dot-programa: #BF9439; /* Programa (dorado) — Figma */
    --dot-otro: #39567D; /* Actividad */
    --dot-reserva: #3B52A4; /* Reserva (navy claro) — Figma */
    --dot-guardia: #79AA72; /* Guardia */
    --dot-evento: #FF9228; /* Evento (naranja) — Figma */
    --radius: 14px;
}

* {
    box-sizing: border-box;
}

.calendar {
    width: min(100%, 980px);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 14px;
    gap: 8px;
}

.cal-title h1 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: var(--st-navy); /* #24346C */
}

.cal-title .sub {
    color: #5e5e5e;
    font-size: 13px;
}

/* Flechas de navegación: círculos outline con chevron (Figma) */
#calendar .cal-nav {
    display: flex;
    align-items: center;
    gap: 7px;
}

#calendar .cal-nav .btn#prevBtn,
#calendar .cal-nav .btn#nextBtn {
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--st-navy-light);
    color: var(--st-navy);
    font-size: 12px;
    line-height: 1;
}

/* Botón "Hoy" oculto (petición): solo se muestran las flechas */
#calendar .cal-nav .btn#todayBtn {
    display: none;
}

#calendar .cal-nav .btn:hover {
    background: color-mix(in srgb, var(--st-navy-light) 12%, #fff);
}

.btn {
    background: #fff;
    color: var(--clr-text);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.cal-nav {
    text-align: right;
}

.btn:hover {
    background: #f1f1f1;
}

.legend {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #5e5e5e;
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px;
}

    .legend .legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .legend .dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        display: inline-block;
    }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 2px;
    padding: 0 8px 4px;
}

.cal-weekday {
    text-align: center;
    padding: 6px 2px 10px;
    font-weight: 400;
    font-size: 14px;
    color: #5e5e5e;
    text-transform: capitalize;
}

.day {
    min-height: 32px;
    padding: 1px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .day .num {
        font-weight: 500;
        font-size: 14px;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #0F2552;
    }

    .day.today .num {
        background: var(--st-navy); /* círculo relleno navy */
        color: #fff;
    }

    .day.outside .num {
        color: #b9bec9;
    }

.dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 3px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

/* Puntos de evento del calendario: 6px (Figma) */
#calendar .dots .dot {
    width: 6px;
    height: 6px;
}

    .dot.programa {
        background: var(--dot-programa);
    }

    .dot.reserva {
        background: var(--dot-reserva);
    }

    .dot.guardia {
        background: var(--dot-guardia);
    }

    .dot.otro {
        background: var(--dot-otro);
    }

    .dot.evento {
        background: var(--dot-evento);
    }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chip {
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--clr-border);
    color: var(--clr-muted);
}

.day button.full {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.day:hover .num {
    background: color-mix(in srgb, var(--st-navy-light) 14%, #fff);
}

.day.today:hover .num {
    background: var(--st-navy);
}

/* Fuerza la visibilidad del <dialog> cuando está abierto,
   aunque un framework ponga display:none en .modal o similares */
dialog.cal-modal[open] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999; /* por si acaso */
}

dialog.cal-modal {
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    background: var(--clr-surface);
    color: var(--clr-text);
    width: min(92vw, 640px);
    padding: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,.15);
}

    /* backdrop del dialog */
    dialog.cal-modal::backdrop {
        background: rgba(0,0,0,.3);
    }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--clr-border);
}

.modal-body {
    padding: 12px 16px 18px;
    display: grid;
    gap: 12px;
}

.close {
    all: unset;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--clr-border);
}

.event-card {
    border: 1px solid var(--clr-border);
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
}

.badge {
    color: var(--clr-text);
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--clr-border);
    background: #f9fafb;
    justify-self: start; /* tamaño al contenido, no full width */
}

    .badge .dots {
        margin-top: 3px;
    }

.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* Slider */
.st-slider {
    position: relative;
    display: flex;
    flex-direction: column;
}

.st-slider-viewport {
    position: relative;
}

.st-slider-track {
    display: flex;
    width: 100%;
    transition: transform 300ms ease-in-out;
}

.st-slide {
    min-width: 100%;
}

.st-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.st-slider-dots {
    position: static;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.st-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #d9d9d9;
    opacity: 0.6;
    border: 0;
    padding: 0;
}

    .st-slider-dot[aria-current="true"] {
        background: var(--color-primario-hex, #8c8c8c);
        opacity: 1;
    }


/* Slider de texto con indicadores en líneas */
.st-text-slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
}

.st-text-slider-viewport {
    overflow: hidden;
}

.st-text-slider-track {
    display: flex;
    transition: transform 300ms ease-in-out;
}

.st-text-slide {
    min-width: 100%;
}

.st-text-slider {
    padding: 6px 18px 0;
}

.st-text-slide {
    min-width: 100%;
    border-left: 3px solid var(--st-gold);
    padding-left: 14px;
}

.st-text-date {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--st-gold);
    margin-bottom: 6px;
}

.st-text-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--st-navy);
    font-weight: 500;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Indicadores en líneas */
.st-text-slider-lines {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

    .st-text-slider-lines .st-slider-dot {
        width: 36px;
        height: 3px;
        border-radius: 999px;
        background: #e5e7eb;
        opacity: 1;
        border: 0;
        padding: 0;
    }

        .st-text-slider-lines .st-slider-dot[aria-current="true"] {
            background: var(--st-navy);
        }
.dt-length{
    display:inline-flex;
}
.dt-length label {
    font-size: 0.875rem;
    margin-left: 10px;
}


/* Estilo Select2 */
.select2-container .select2-selection--single {
    height: 36px;
    border: 1px solid var(--input) !important;
    border-radius: calc(var(--radius) - 2px) !important;
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    padding: 0 10px !important;
    display: flex;
    align-items: center;
}

.select2-container .select2-selection__rendered {
    color: var(--foreground);
    line-height: 34px;
}

.select2-container .select2-selection__arrow {
    height: 100%;
}

.select2-container--default .select2-dropdown {
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    padding: 6px 8px;
}

.st-banner-slide {
    position: relative;
}

.st-banner-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Banner principal (Dashboard) — línea visual San Telmo */
.st-home-banner .st-slider-viewport {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.st-home-banner .st-banner-link {
    position: relative;
    display: block;
    height: 340px;
}

/* Velo navy en degradado para legibilidad del texto sobre cualquier foto */
.st-home-banner .st-banner-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(22, 31, 63, 0.92) 0%, rgba(22, 31, 63, 0.55) 38%, rgba(22, 31, 63, 0) 72%);
    pointer-events: none;
}

.st-banner-caption {
    position: absolute;
    left: 0;
    bottom: 28px;
    z-index: 2;
    max-width: min(560px, 82%);
    margin-left: 32px;
    padding-left: 18px;
    border-left: 4px solid var(--st-gold);
    background: transparent;
}

.st-banner-title {
    margin: 0 0 8px 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 30px;
    line-height: 1.15;
    color: #fff;
    font-weight: 700;
}

.st-banner-subtitle {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: var(--st-gold-light);
    font-weight: 500;
}

.st-banner-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    background: var(--st-gold);
    color: var(--st-navy);
    border-radius: 45px;
    padding: 10px 26px;
    font-size: 14px;
    font-weight: 600;
}

/* ===== Footer San Telmo (estilo Figma) ===== */
/* Sticky footer: #content (main) llena el alto del viewport (grow). Se convierte en
   columna flex y se hace crecer el contenedor del contenido para empujar el footer
   —que es el último hijo de #content— al margen inferior cuando hay poco contenido. */
#content {
    display: flex;
    flex-direction: column;
}

#content > #contentContainer + .kt-container-fixed {
    flex: 1 0 auto;
}

.st-footer {
    background: var(--st-navy-dark); /* mismo color que el sidebar (#161F3F) */
    color: #fff;
    overflow: hidden;
    margin-top: 40px;
}

/* Full-width: el footer sangra bajo el sidebar y ocupa todo el ancho */
@media (min-width: 1024px) {
    .st-footer {
        position: relative;
        z-index: 25; /* por encima del sidebar fijo (z-20) para cubrir su zona inferior */
        margin-inline-start: calc(-1 * var(--sidebar-width, 280px));
        width: calc(100% + var(--sidebar-width, 280px));
    }
}

.st-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 36px 40px 28px;
}

.st-footer-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 56px;
}

.st-footer .st-logo-banner {
    margin-left: -40px; /* sangra el banner hasta el borde del footer */
}

.st-footer-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 56px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.st-footer-city {
    color: var(--st-gold-light);
    font-weight: 600;
    margin-bottom: 4px;
}

.st-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.st-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.st-footer-links a {
    color: #fff !important;
    font-size: 14px;
    transition: color .2s ease;
}

.st-footer-links a:hover {
    color: var(--st-gold-light) !important;
}

.st-footer-hexer,
.st-footer-hexer:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: max-content;
}

.st-footer-hexer img {
    flex-shrink: 0;
    height: 22px;
    width: auto;
    max-width: none;
    filter: brightness(0) invert(1); /* logo Hexer en blanco sobre navy */
}

@media (max-width: 767.98px) {
    .st-footer-inner {
        padding: 28px 22px 22px;
    }

    .st-footer .st-logo-banner {
        margin-left: -22px;
    }

    .st-footer-social {
        margin-left: 0;
    }
}

#networking-contacts tbody tr:hover{
    cursor:pointer;
}

/* La fila "vacía" (sin resultados o antes de buscar) no es clicable: no debe mostrar la manita. */
#networking-contacts tbody tr:has(td.dt-empty):hover,
#networking-contacts td.dt-empty{
    cursor:default;
}

.st-home-banner .st-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767.98px) {
   
    .st-home-banner .st-banner-slide img {
        height: 300px;
    }
  

    .st-home-banner .st-slider-viewport {
        height: 300px;
    }

    .st-home-banner .st-banner-slide,
    .st-home-banner .st-banner-link {
        height: 300px;
    }

    .st-home-banner .st-banner-link {
        display: block;
    }

    

    .st-home-list-card .kt-card-header {
        background: #EBEEF3;
        padding: 10px 14px;
        border-bottom: 2px solid var(--st-navy-light);
    }

    .st-home-list-card .kt-card-title {
        font-size: 16px;
        color: var(--st-navy);
    }

    .st-home-list-table tbody tr {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid #e5e7eb;
    }

        .st-home-list-table tbody tr:last-child {
            border-bottom: 0;
        }

    .st-home-list-table td {
        padding: 0;
        border: 0;
    }

    .st-home-list-icon {
        flex: 0 0 auto;
    }

    .st-home-list-title {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 14px;
        color: #4b5563;
    }

    .st-home-list-meta {
        font-size: 12px;
        color: #9aa0a6;
    }
}

/* Modal eventos calendario */
dialog.st-event-modal[open] {
    display: flex !important;
    flex-direction: column;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999;
}

dialog.st-event-modal {
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    background: var(--clr-surface);
    color: var(--clr-text);
    width: min(94vw, 760px);
    max-height: 90vh;
    padding: 0;
    overflow: hidden; /* el diálogo nunca scrollea; lo hace el cuerpo */
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

dialog.st-event-modal::backdrop {
    background: rgba(0,0,0,.35);
}

.st-event-modal__card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

/* Header fijo: título, fecha y botón de cerrar siempre visibles */
.st-event-modal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface);
}

.st-event-modal__titles {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.st-event-modal__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--st-navy);
    overflow-wrap: anywhere;
}

.st-event-modal__sub {
    font-size: 12px;
    color: var(--clr-muted);
}

.st-event-modal__close {
    all: unset;
    cursor: pointer;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--clr-border);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    color: var(--st-navy);
    background: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}

.st-event-modal__close:hover {
    background: color-mix(in srgb, var(--st-navy) 6%, #fff);
    border-color: var(--st-navy);
}

/* Cuerpo: único scroll (vertical). Nunca scroll horizontal. */
.st-event-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 26px;
    display: grid;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--st-navy) 45%, transparent) transparent;
}

.st-event-modal__body::-webkit-scrollbar {
    width: 8px;
}

.st-event-modal__body::-webkit-scrollbar-track {
    background: transparent;
    margin: 6px 0;
}

.st-event-modal__body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--st-navy) 35%, transparent);
    border-radius: 999px;
}

.st-event-modal__body::-webkit-scrollbar-thumb:hover {
    background: var(--st-navy);
}

/* El contenido nunca debe forzar scroll horizontal */
.st-event-modal__body :where(img, iframe, video, table) {
    max-width: 100%;
}

/* Footer fijo de la modal (p. ej. botón "Inscribirme") */
.st-event-modal__footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px 26px;
    background: var(--st-navy-dark); /* mismo color que el sidebar (#161F3F) */
}

.st-event-modal__footer:empty {
    display: none;
}

.st-event-modal__footer .kt-btn-primary {
    text-decoration: none;
}

/* Mini tarjetas del modal */
.st-event-modal .event-card {
    border: 1px solid var(--clr-border);
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}

.st-event-modal .event-card a {
    color: #7a2f3a;
    text-decoration: none;
    font-weight: 600;
}

.st-event-modal .event-card a:hover {
    text-decoration: underline;
}

.st-event-modal .badge {
    color: #1f2937;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--clr-border);
    background: #f9fafb;
    justify-self: start;
}
/* ===== Detalle de evento (modal corporativa) ===== */
.st-evento-detalle {
    display: grid;
    gap: 16px;
}

.st-evento-img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Detalle del evento — Figma "pop up": imagen a ancho completo + resumen debajo */
.st-evento-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-evento-img-wrap {
    /* A sangre: ocupa el 100% del ancho de la modal (cancela el padding lateral del cuerpo) */
    width: auto;
    margin-inline: -26px;
    margin-top: -20px;
}

.st-evento-img-wrap .st-evento-img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.st-evento-resumen {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-evento-resumen__titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--st-navy);
    overflow-wrap: anywhere;
}

.st-evento-destacados {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-evento-destacado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--st-gold);
    font-weight: 600;
    font-size: 14px;
}

.st-evento-destacado i {
    font-size: 16px;
    color: var(--st-gold);
}

/* Botón "Inscribirme" → píldora dorada con texto negro (Figma) */
.st-btn-inscribirme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--st-gold);
    color: #000;
    font-weight: 600;
    border: 1px solid var(--st-gold);
    border-radius: 999px;
    padding: 12px 40px;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.st-btn-inscribirme:hover {
    filter: brightness(0.95);
    color: #000;
}

.st-evento-meta {
    display: grid;
    gap: 8px;
}

.st-evento-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #2e3a59;
}

.st-evento-meta-item i {
    color: var(--st-gold);
    font-size: 16px;
    margin-top: 2px;
}

.st-evento-bloque__titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-navy);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--clr-border);
}

.st-evento-profes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.st-evento-profes li {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    color: #2e3a59;
}

.st-evento-profes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--st-gold);
}

.st-evento-body {
    font-size: 14px;
    line-height: 1.6;
    color: #3f4a5a;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.st-evento-body :where(img, iframe, video, table) {
    max-width: 100%;
    height: auto;
}

.st-evento-body img {
    max-width: 100%;
    height: auto;
}

.st-evento-mapa {
    border-radius: 12px;
    overflow: hidden;
}

.st-evento-mapa iframe {
    width: 100% !important;
    min-height: 260px;
    border: 0;
    display: block;
}

.st-evento-acciones {
    display: flex;
    justify-content: flex-end;
}

.st-evento-acciones .kt-btn-primary {
    text-decoration: none;
}

/* Lista de eventos del día (cuando hay varios) */
.st-evento-listitem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.st-evento-listitem + .st-evento-listitem {
    margin-top: 10px;
}

.st-evento-listitem:hover {
    border-color: var(--st-navy);
    background: color-mix(in srgb, var(--st-navy) 4%, #fff);
}

.st-evento-listitem__title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-navy);
}

.st-evento-listitem__time {
    font-size: 12px;
    color: var(--clr-muted);
    white-space: nowrap;
}

/* Tabla "Próximos eventos" (bajo el calendario) */
.st-eventos-table tbody tr.st-evento-row {
    cursor: pointer;
    transition: background-color .15s ease;
}

.st-eventos-table tbody tr.st-evento-row:hover {
    background: color-mix(in srgb, var(--st-navy) 5%, transparent);
}

.st-eventos-table tbody tr.st-evento-row > td {
    padding: 8px 12px;
}

.st-evento-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Caja de fecha (Figma): cuadro con día grande + mes pequeño.
   Ancho FIJO para que todas las cajas sean iguales sea cual sea el mes. */
.st-evento-datebox {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f3ff;
    border: 1px solid #4831d7;
    color: #4831d7;
    border-radius: 8px;
    padding: 8px 4px;
    line-height: 1;
}

.st-evento-dia {
    font-size: 22px;
    font-weight: 600;
}

.st-evento-mes {
    font-size: 11px;
    margin-top: 3px;
    white-space: nowrap;
}

.st-evento-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.st-evento-titulo {
    font-size: 14px;
    font-weight: 500;
    color: var(--st-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-evento-hora {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-navy-light);
}

/* Hero banner de los apartados (Orientación, Consulta claustro, Hazte miembro…) */
.st-hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1108 / 249;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 clamp(24px, 4%, 56px);
}

.st-hero-title {
    color: #fff;
    font-weight: 500; /* Plus Jakarta Medium (Figma), no tan negrita */
    font-size: clamp(22px, 2.8vw, 36px); /* algo más pequeño que antes */
    line-height: 1.25;
    max-width: 52%;
    margin: 0;
}

/* Banner de Bienvenida: mismo enfoque (imagen de fondo + texto/CTA superpuestos) con varias líneas + botón */
/* Antes esta caja llevaba "aspect-ratio: 1108 / 249", con lo que su altura salía ÚNICAMENTE del
   ancho disponible: al estrecharse la ventana se quedaba demasiado baja (a 414px daba 93px de alto
   para 209px de contenido) y el overflow:hidden recortaba el texto y el botón. Además, sin padding
   vertical, en anchos intermedios el contenido quedaba pegado al borde superior e inferior.
   Con min-height la proporción de diseño pasa a ser solo un suelo: la caja nunca baja de ahí y
   crece cuando el contenido lo necesita. */
.st-home-banner-cta {
    position: relative;
    width: 100%;
    min-height: 249px;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 32px clamp(24px, 5%, 56px);
}

.st-home-banner-cta__content {
    display: flex;
    flex-direction: column;
    gap: 23px;
    align-items: flex-start;
    max-width: 52%;
}

.st-home-banner-cta__texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-home-banner-cta__eyebrow {
    color: #ffce65;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 1.44px;
    line-height: 1.2;
}

.st-home-banner-cta__subtitle {
    color: #fff;
    font-weight: 500;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.4;
    margin: 0;
    max-width: 340px;
}

.st-home-banner-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 45px;
    padding: 12px 24px;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.st-home-banner-cta__btn:hover {
    background: #fff;
    color: var(--st-navy);
}

/* En pantallas medianas el 52% del bloque de texto obliga a partir demasiado las líneas. */
@media (max-width: 991.98px) {
    .st-home-banner-cta__content {
        max-width: 72%;
    }
}

/* En móvil el texto ocupa todo el ancho y la caja se ajusta a su contenido. */
@media (max-width: 767.98px) {
    .st-home-banner-cta {
        min-height: 0;
        padding: 28px 24px;
    }

    .st-home-banner-cta__content {
        max-width: 100%;
        gap: 18px;
    }

    .st-home-banner-cta__subtitle {
        max-width: none;
    }
}

/* Hero con icono + título (Hazte miembro) */
.st-hero-titulo-grupo {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 58%;
}

.st-hero-titulo-grupo .st-hero-title {
    max-width: none;
}

.st-hero-icono {
    color: #ffc365; /* insignia del banner Hazte miembro */
    flex-shrink: 0;
}

/* Columnas de ventajas (Hazte miembro) */
.st-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 8px;
}

.st-benefit {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #ebeef3;
    border-radius: 12px;
    padding: 20px;
}

.st-benefit-check {
    flex-shrink: 0;
    display: inline-flex;
    line-height: 1;
}

.st-benefit-check svg {
    display: block;
    width: 26px;
    height: 26px;
}

.st-benefit-titulo {
    display: block;
    font-weight: 600;
    color: var(--st-navy);
    margin-bottom: 4px;
}

.st-benefit-texto p {
    font-size: 14px;
    color: #5e5e5e;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px) {
    .st-benefits {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Acceso al perfil (cabecera superior derecha) */
.st-user-access {
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-user-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-shrink: 0;
}

.st-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Distintivo de miembro sobre la foto (esquina sup. dcha.) */
.st-user-avatar-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    pointer-events: none;
}

.st-user-avatar-badge svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Flecha desplegable del acceso al perfil */
.st-user-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    flex-shrink: 0;
}

/* Campana de notificaciones */
.st-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 2px;
    transition: background-color 0.15s ease;
}

/* Botón de acceso al menú en móvil: corporativo (navy) y con área táctil accesible */
.st-menu-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    color: var(--st-navy); /* #24346C */
    transition: background-color 0.15s ease, color 0.15s ease;
}

.st-menu-btn:hover,
.st-menu-btn:focus-visible {
    background: color-mix(in srgb, var(--st-navy) 10%, transparent);
    color: var(--st-navy-dark); /* #161F3F */
}

.st-menu-btn__icon {
    width: 28px;
    height: 28px;
}

.st-bell-btn:hover {
    background: rgba(94, 94, 94, 0.1);
}

.st-bell-badge {
    position: absolute;
    top: 10px;
    right: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FF2608;
    display: none;
}

.st-bell-btn.tiene-notificaciones .st-bell-badge {
    display: block;
}

.st-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.st-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-navy);
    white-space: nowrap;
}

.st-user-role {
    font-size: 12px;
    color: #5e5e5e;
    white-space: nowrap;
}

/* ===== Estilo de formularios (según formulario MBA en Figma) ===== */
.st-form-field {
    width: 100%;
    background: #fff;
    border: 1px solid var(--st-navy-light); /* #3B52A4 */
    border-radius: 6px;
    padding: 12px 16px;
    min-height: 49px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: var(--st-navy-dark); /* #161F3F */
    transition: border-color .15s ease, box-shadow .15s ease;
}

.st-form-field::placeholder {
    color: var(--st-navy-dark);
    opacity: 1;
}

.st-form-field:focus,
.st-form-field:focus-visible {
    outline: none;
    border-color: var(--st-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-navy) 12%, transparent);
}

textarea.st-form-field {
    min-height: 140px;
    resize: vertical;
}

/* Botón de envío (píldora navy) */
.st-btn-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--st-navy);
    color: #fff;
    border: 1px solid var(--st-navy);
    border-radius: 45px;
    padding: 14px 54px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.st-btn-enviar:hover {
    background: var(--st-navy-dark);
}

/* ===== Estilo de campos en formularios Metronic dentro de .st-form (patrón Figma) ===== */
.st-form input.kt-input,
.st-form textarea.kt-textarea,
.st-form div.kt-input,
.st-form .kt-select-display {
    width: 100%;
    background: #fff;
    border: 1px solid var(--st-navy-light); /* #3B52A4 */
    border-radius: 6px;
    min-height: 49px;
    height: auto;
    padding: 12px 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    color: var(--st-navy-dark); /* #161F3F */
}

.st-form div.kt-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-form div.kt-input > input,
.st-form div.kt-input .grow {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--st-navy-dark);
    font-size: 16px;
    padding: 0;
}

.st-form div.kt-input > i {
    color: var(--st-navy-light);
    font-size: 18px;
}

.st-form .kt-select-display {
    display: flex;
    align-items: center;
    padding-right: 40px;
}

.st-form textarea.kt-textarea {
    min-height: 140px;
    resize: vertical;
}

.st-form ::placeholder {
    color: var(--st-navy-dark);
    opacity: 1;
}

.st-form input.kt-input:focus,
.st-form textarea.kt-textarea:focus,
.st-form div.kt-input:focus-within,
.st-form .kt-select-display:focus {
    border-color: var(--st-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-navy) 12%, transparent);
    outline: none;
}

/* Selects nativos dentro de .st-form */
.st-form select.kt-select {
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--st-navy-light);
    border-radius: 6px;
    min-height: 49px;
    padding: 12px 40px 12px 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    color: var(--st-navy-dark);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233B52A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.st-form select.kt-select:focus {
    border-color: var(--st-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-navy) 12%, transparent);
    outline: none;
}

/* ===== DataTables — estilo de marca (Networking y similares) ===== */
.dt-container {
    font-family: "Plus Jakarta Sans", sans-serif;
}

/* Selector de "registros por página" */
.dt-container .dt-length select.dt-input {
    width: auto;
    min-width: 72px;
    height: 38px;
    border: 1px solid var(--st-navy-light);
    border-radius: 6px;
    padding: 6px 34px 6px 12px;
    font-size: 14px;
    color: var(--st-navy-dark);
    background-color: #fff;
    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='%233B52A4' 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-size: 14px 11px;
    background-position: right 12px center;
}

.dt-container .dt-length select.dt-input:focus {
    border-color: var(--st-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-navy) 12%, transparent);
    outline: none;
}

.dt-container .dt-length label {
    color: var(--clr-muted);
    font-size: 14px;
}

/* Tabla */
.dt-container table.dataTable {
    border: 1px solid var(--clr-border) !important;
    border-radius: 12px;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

.dt-container table.dataTable thead th,
.dt-container table.dataTable thead td {
    background-color: #E6ECF1;
    color: var(--st-navy);
    font-weight: 600;
    font-size: 13px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--clr-border);
}

.dt-container table.dataTable thead tr:first-child th:first-child {
    border-top-left-radius: 11px;
}

.dt-container table.dataTable thead tr:first-child th:last-child {
    border-top-right-radius: 11px;
}

.dt-container table.dataTable tbody td {
    padding: 14px 16px;
    font-size: 14px;
    color: #3f4a5a;
    border-bottom: 1px solid var(--clr-border);
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

.dt-container table.dataTable tbody tr:last-child td {
    border-bottom: 0;
}

.dt-container table.dataTable tbody tr:hover td {
    background-color: color-mix(in srgb, var(--st-navy) 5%, transparent);
}

/* Paginación */
.dt-container .dt-paging {
    padding-top: 6px;
}

.dt-container .dt-paging nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dt-container .dt-paging .dt-paging-button {
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: #fff;
    color: var(--st-navy);
    font-size: 14px;
    font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.dt-container .dt-paging .dt-paging-button:not(.disabled):not(.current):hover {
    border-color: var(--st-navy);
    background: color-mix(in srgb, var(--st-navy) 6%, #fff);
    color: var(--st-navy);
}

.dt-container .dt-paging .dt-paging-button.current {
    background: var(--st-navy);
    border-color: var(--st-navy);
    color: #fff;
}

.dt-container .dt-paging .dt-paging-button.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Badge "Programa" en el modal de planificación */
.st-prog-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-navy);
    background: color-mix(in srgb, var(--dot-programa) 16%, #fff);
    border: 1px solid color-mix(in srgb, var(--dot-programa) 45%, #fff);
    border-radius: 999px;
    padding: 6px 14px;
}

.st-prog-badge .dot.programa {
    width: 9px;
    height: 9px;
}

/* Filas de evento clicables (Mi agenda / listados) */
tr.st-evento-row {
    cursor: pointer;
}

.st-home-list-table tr.st-evento-row:hover {
    background-color: color-mix(in srgb, var(--st-navy) 4%, transparent);
}

/* ===== Ficha de perfil (Área personal) ===== */
.st-perfil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    padding: 8px 4px;
}

.st-perfil__avatar {
    flex: 0 0 auto;
}

.st-perfil-img,
.st-perfil-img .kt-image-input-placeholder,
.st-perfil-img .kt-image-input-preview {
    width: 120px;
    height: 120px;
}

.st-perfil-img .kt-image-input-placeholder {
    border: 0;
    border-radius: 999px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--st-gold);
}

.st-perfil-img .kt-image-input-preview {
    border-radius: 999px;
    background-size: cover;
    background-position: center;
}

/* Avatar SIN foto: mismo círculo pero con fondo del sidebar (#161F3F)
   y el wordmark "santelmo" blanco centrado. */
.st-perfil-img--sin-foto .kt-image-input-placeholder,
.st-perfil-img--sin-foto .kt-image-input-preview {
    background-color: var(--st-navy-dark); /* #161F3F */
    background-image: url('../images/santelmo-avatar.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 68px auto;
}

/* Avatar de solo lectura (Área personal y modal de contacto): .kt-image-input viene con cursor de
   mano porque en Metronic es un control de subida; aquí solo se enseña la foto. */
.st-perfil-img--solo-lectura,
.st-perfil-img--solo-lectura .kt-image-input-placeholder {
    cursor: default;
}

.st-perfil__body {
    flex: 1 1 320px;
    min-width: 0;
}

.st-perfil__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-border);
}

.st-perfil__name {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--st-navy);
    overflow-wrap: anywhere;
}

.st-perfil__role {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--st-gold) 18%, #fff);
    color: var(--st-navy);
    border: 1px solid color-mix(in srgb, var(--st-gold) 45%, #fff);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* La utilidad .hidden de Tailwind (display:none) no llegaba a aplicarse aquí: site.css se carga
   después de styles.css y, a igualdad de especificidad, gana el display:inline-flex de arriba.
   Con las dos clases juntas la especificidad es mayor y el ocultado del cargo sí surte efecto. */
.st-perfil__role.hidden {
    display: none;
}

.st-perfil__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
}

.st-perfil__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.st-perfil__item i {
    color: var(--st-gold);
    font-size: 18px;
    margin-top: 2px;
}

.st-perfil__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.st-perfil__label {
    font-size: 12px;
    color: var(--clr-muted);
}

.st-perfil__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--st-navy);
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .st-perfil__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Modal de contacto (Networking) ===== */
/* Centrado en pantalla (KTUI fija display:block inline al abrir → !important) y ancho máx. 1200px.
   El centrado se engancha a ese display inline y NO a la clase .open: al cerrar, KTUI quita .open
   nada más empezar y solo pone display:'' cuando acaba la transición, así que durante ese rato el
   modal volvía a display:block y la ficha saltaba a la esquina superior izquierda antes de
   desaparecer. Con este selector sigue centrada durante todo el cierre. */
#networking-contact-modal.kt-modal[style*="display: block"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

#networking-contact-modal .kt-modal-content {
    max-width: 1200px;
    width: 100%;
    margin: 0;
    top: 0;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

.st-contacto {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
    padding: 4px;
}

.st-contacto__side {
    flex: 0 0 auto;
    width: 170px;
    max-width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.st-contacto__main {
    flex: 1 1 360px;
    min-width: 0;
}

.st-contacto__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-border);
}

.st-qr {
    display: inline-flex;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 12px;
}

.st-qr img,
.st-qr canvas {
    display: block;
}

.st-qr__legend {
    display: block;
    max-width: 160px;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
    color: var(--clr-muted);
}

.st-contacto__empresa {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--clr-border);
}

.st-perfil__link {
    font-size: 12px;
    color: var(--st-navy);
    text-decoration: underline;
    margin-top: 2px;
}

.st-perfil__value a {
    color: var(--st-navy);
}

.st-perfil__value a:hover {
    text-decoration: underline;
}

/* Enlaces (email/teléfono) clicables en la tabla de Networking */
#networking-contacts td a.st-tabla-link {
    color: var(--st-navy);
}

#networking-contacts td a.st-tabla-link:hover {
    text-decoration: underline;
}

/* Columna de foto en la tabla de Networking */
#networking-contacts td.st-tabla-foto-col {
    padding-top: 6px;
    padding-bottom: 6px;
}

img.st-tabla-foto {
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* Distintivo de la columna "Cargo" de la tabla de Networking. Los cargos vienen de Odoo como texto
   libre y los hay muy largos ("Principal Chief Executive Officer"); .kt-badge trae white-space:nowrap
   y un alto fijo, así que el distintivo se desbordaba por encima de la columna de email. Aquí se le
   permite partir en varias líneas y crecer de alto, quedándose dentro de su celda. */
#networking-contacts td .st-tabla-cargo {
    max-width: 100%;
    height: auto;
    min-height: calc(var(--spacing) * 5);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.2;
    padding-block: 3px;
}

/* ===== Placeholders ===== */
/* Metronic los pinta con --muted-foreground, que queda casi tan oscuro como un valor escrito. Se
   aclaran para que se distinga de un vistazo lo que el usuario ha rellenado de lo que es una pista.
   El !important es necesario porque las reglas de Metronic van con la especificidad de .kt-input. */
input::placeholder,
textarea::placeholder,
.kt-input::placeholder,
.kt-textarea::placeholder,
.kt-select::placeholder,
.kt-input:not(input) input::placeholder {
    color: #a8adb9 !important;
    opacity: 1; /* Firefox los atenúa por su cuenta */
}

/* Placeholder de los desplegables de KTUI (cuando no hay ninguna opción elegida). */
.kt-select-placeholder {
    color: #a8adb9;
}

/* Capa "Procesando..." superpuesta a la tabla mientras se cargan los datos (paginación, filtros).
   Se controla con la clase is-visible y no con la utilidad .hidden de Tailwind, que no llega a
   aplicarse porque site.css se carga después que styles.css. */
.st-tabla-cargando {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #fff 65%, transparent);
    border-radius: inherit;
}

.st-tabla-cargando.is-visible {
    display: flex;
}

.st-tabla-cargando__texto {
    background: var(--st-navy);
    color: #fff;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}

/* Programas cursados en la ficha de contacto (Networking). */
.st-contacto-programas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.st-contacto-programas__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    font-size: 13px;
    color: #3f4a5a;
}

.st-contacto-programas__programa {
    font-weight: 600;
    color: var(--st-navy);
}

.st-contacto-programas__periodo {
    color: #8a93a3;
    font-size: 12px;
}

.st-contacto-programas__vacio {
    font-size: 13px;
    color: #a8adb9;
}

/* ===== Búsqueda inteligente (Networking) ===== */
/* Campo de consulta y botón en una fila; en pantallas estrechas, uno bajo otro. */
.st-ia-consulta {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.st-ia-consulta .kt-input {
    flex: 1 1 auto;
    min-width: 0;
}

.st-ia-consulta .kt-btn {
    flex: 0 0 auto;
}

@media (max-width: 639px) {
    .st-ia-consulta {
        flex-direction: column;
    }
}

/* Resumen de los filtros que ha aplicado la IA, bajo el campo de consulta. Se oculta con .hidden,
   que aquí sí aplica porque display:flex se declara en esta misma hoja. */
.st-ia-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--st-navy);
}

.st-ia-resumen.hidden {
    display: none;
}

.st-ia-resumen__titulo {
    font-weight: 600;
}

.st-ia-resumen__lista {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.st-ia-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--st-gold) 18%, #fff);
    color: var(--st-navy);
    font-size: 12px;
    line-height: 1.4;
}

/* Valor que la IA ha propuesto pero que no existe en el desplegable: se avisa en vez de callarlo. */
.st-ia-chip--no-encontrado {
    background: #fbe9e7;
    color: #8a2f25;
}

/* ===== Control de foto con máscara de recorte (modal Reportar actualización) ===== */
.ra-foto {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Máscara vertical 2:3, mostrada a 120x180 px */
.ra-foto__mask {
    position: relative;
    width: 120px;
    height: 180px;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f3f7;
    border: 1px solid #e6e8f0;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.ra-foto__mask--empty {
    cursor: default;
}

.ra-foto__mask.is-dragging {
    cursor: grabbing;
}

.ra-foto__mask img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;   /* evita que reglas globales img{max-width:100%} reduzcan la imagen */
    height: auto;
    display: none;
    -webkit-user-drag: none;
    user-select: none;
}

.ra-foto__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    font-size: 12px;
    color: #9aa0b4;
    pointer-events: none;
}

.ra-foto__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
    flex: 1 1 200px;
    padding-top: 4px;
}

.ra-foto__zoom {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ra-foto__zoom input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--st-navy);
}

.ra-foto__ayuda {
    font-size: 12px;
    color: #9aa0b4;
    line-height: 1.4;
}

/* ===== flatpickr (Reserva de salas): acento San Telmo + usable en pantallas pequeñas ===== */
.flatpickr-calendar {
    max-width: calc(100vw - 24px);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--st-navy);
    border-color: var(--st-navy);
}
.flatpickr-day.today {
    border-color: var(--st-gold);
}
.flatpickr-day:hover {
    background: #eef1fb;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-weekday {
    color: var(--st-navy);
}
/* La hora (parte inferior) siempre visible dentro del calendario */
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: #eef1fb;
}

/* Modal de contacto (Networking): valores "No disponible" atenuados en gris claro */
#networking-contact-modal .st-perfil__value.st-valor-no-disponible,
#networking-contact-modal .st-perfil__value.st-valor-no-disponible a {
    color: #b4b8c5;
}