/* ============================================================
   online-layout.css
   Estilos compartidos por todas las páginas que usan
   plantilla-online.blade.php.
   ============================================================ */

/* ---- Fuentes locales: Montserrat ---- */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* ---- Navbar flotante ---- */
.navbar-online {
    box-shadow: 0px 5px 7.5px rgba(0, 0, 0, 0.25);
}

/* ---- Menú móvil desplegable ---- */
.nav-mobile-panel {
    box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.25);
}

/* ---- Logo del navbar ---- */
.nav-logo-img {
    height: 36px;
    width: auto;
}

/* ---- Botones flotantes laterales ---- */
.btn-flotante-inscribete {
    background: linear-gradient(-60.26deg, #FFB95A 0%, #FF980E 16.42%, #DD2B3B 54.86%);
}

.btn-flotante-info {
    background: linear-gradient(153.35deg, #922CEC 25.57%, #771A75 90.65%);
}

/* ---- Botón enviar formulario ---- */
.btn-form-enviar {
    background: linear-gradient(169.29deg, #922CEC 25.57%, #771A75 90.65%);
}

/* ---- Labels del formulario: padding sin que Bootstrap interfiera ---- */
.form-label-input {
    padding: 0 16px !important;
}

/* ============================================================
   Overrides de Bootstrap/style.css para el footer y formulario
   ============================================================ */

/* Íconos de información en footer: alineación lateral */
.foot-light .ili {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.foot-light .ili img {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Banda de logos del footer */
.foot-dark {
    padding: 16px 5% !important;
}

/* height: 100% en .row bloqueaba h-fit de Tailwind */
.foot-dark .row {
    height: auto !important;
}

/* Labels como flex — Bootstrap los fuerza a inline-block */
.formcontacto label {
    display: flex !important;
    margin-bottom: 0 !important;
}

/* Transición base en wrappers de campos */
.formcontacto label,
.formcontacto select,
.formcontacto textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Quita estilos de focus de Bootstrap en los inputs internos */
.formcontacto input:focus,
.formcontacto select:focus,
.formcontacto textarea:focus {
    box-shadow: none;
    outline: none !important;
}

/* Efecto focus: borde morado 2px (border-color + inset shadow evitan layout shift) */
.formcontacto label:focus-within,
.formcontacto select:focus,
.formcontacto textarea:focus {
    border-color: #9534eb !important;
    box-shadow: inset 0 0 0 1px #9534eb !important;
}

/* Inputs sin estilos residuales de Bootstrap */
.formcontacto input,
.formcontacto textarea {
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Campus select: color del placeholder */
.formcontacto select {
    color: #5C5361 !important;
}

.formcontacto select option[disabled] {
    color: #A198A8 !important;
}