/* Estilos responsive - Dispositivos móviles */

@media (max-width: 767px) {

    /*
     * ================================================================
     * 	Body
     * ================================================================
     */
    /* Banner: solo patrón central (980px→100%), sin laterales */
    .header-banner {
        --banner-height: 80px;
        --banner-row1: 56px;
        --banner-row2: 24px;
        height: var(--banner-height);
        background:
            linear-gradient(to right,
                var(--color-banner-gray) 45.51%,
                var(--color-primary) 45.51% 57.14%,
                var(--color-banner-gray) 57.14% 64.18%,
                var(--color-primary) 64.18%
            ) left top / 100% var(--banner-row1) no-repeat,
            linear-gradient(to right,
                var(--color-primary) 45.51%,
                var(--color-banner-gray) 45.51% 57.14%,
                var(--color-primary) 57.14%
            ) left var(--banner-row1) / 100% var(--banner-row2) no-repeat;
    }

    /*
     * ================================================================
     * 	Grid: columna única
     * ================================================================
     */
    /* Bootstrap 2 spans a ancho completo para apilar en mobile */
    .row-fluid [class*="span"] {
        width: 100% !important;
        float: none;
        margin-left: 0;
    }

    /*
     * ================================================================
     * 	Fila de logos
     * ================================================================
     */
    /* Hereda el flex de desktop; en móvil ocupa todo el banner y se pega
       al borde izquierdo para que la caja EHU no deje hueco gris
       (.container-fluid para ganar al padding-left genérico de 15px) */
    .banner-logos.container-fluid {
        height: 100%;
        padding-left: 0;
    }

    /* Quitar ancho fijo de los spans de Bootstrap y la separación de desktop */
    #zn_logo_ehu,
    #zn_logo_ehualumni {
        width: auto !important;
        float: none;
        min-width: 0;
    }

    #zn_logo_ehualumni {
        margin-right: 0;
    }

    /* Alturas equilibradas (proporción ~ desktop) */
    #zn_logo_ehu img {
        height: 56px;
        width: auto;
    }

    #zn_logo_ehualumni img {
        height: 24px;
        width: auto;
    }

    /*
     * ================================================================
     * 	Container
     * ================================================================
     */
    /* Eliminar max-width de desktop y añadir padding lateral */
    .container-fluid {
        max-width: none;
        padding-left: 15px;
        padding-right: 15px;
    }

    /*
     * ================================================================
     * 	Form: labels apilados
     * ================================================================
     */
    /* Labels encima del input en vez de a la izquierda */
    .form-horizontal .control-label {
        float: none;
        width: auto;
        text-align: left;
        padding-bottom: 4px;
    }

    /* Quitar margen izquierdo que deja hueco del label flotante */
    .form-horizontal .controls {
        margin-left: 0;
    }

    /*
     * ================================================================
     * 	Inputs y controles full-width
     * ================================================================
     */
    /* Todos los campos ocupan el 100% con tamaño táctil adecuado */
    /* font-size 16px: mínimo para evitar auto-zoom en iOS al hacer focus */
    .form-horizontal input[type="text"],
    .form-horizontal select,
    .form-horizontal textarea,
    .form-horizontal input[type="file"] {
        width: 100%;
        box-sizing: border-box;
        height: 40px;
        padding: 6px 10px;
        font-size: 16px;
    }

    /*
     * ================================================================
     * 	Botones
     * ================================================================
     */
    /* Full-width con altura mínima de 44px (touch target) */
    .btn {
        width: 100%;
        min-height: 44px;
        line-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    /*
     * ================================================================
     * 	Checkbox términos y condiciones
     * ================================================================
     */
    /* Flex para checkbox a la izquierda y texto multilínea a la derecha */
    .control-group.condiciones {
        display: flex !important;
        align-items: flex-start;
        min-height: 44px;
    }

    /* Checkbox sin encogerse para que el texto no se monte encima */
    .condiciones .controls {
        margin-left: 0;
        float: none;
        flex-shrink: 0;
        padding-top: 3px;
    }

    /* Checkbox más grande para mejor visibilidad y área táctil */
    .condiciones .controls input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* Texto del checkbox ocupa el espacio restante sin montar debajo del check */
    .condiciones label.control-label {
        width: auto !important;
        flex: 1;
        padding-left: 14px;
        line-height: 1.4;
    }

    /*
     * ================================================================
     * 	Indicador de pasos
     * ================================================================
     */
    /* Contenedor del breadcrumb de pasos */
    #pasos_form {
        padding: 10px 0;
        margin-bottom: 20px;
        font-size: 12px;
        overflow: hidden;
    }

    /* Lista de pasos en flex para repartir espacio equitativamente */
    #pasos_form ul {
        display: flex;
        gap: 4px;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
        box-sizing: border-box;
    }

    /* Cada paso como celda flex con flechas CSS */
    #pasos_form ul li {
        flex: 1 1 0;
        min-width: 0;
        position: relative;
        background: #d8d8d8;
        height: 50px;
        padding: 0 14px 0 20px;
        margin: 0;
        border-radius: 0;
        font-size: 11px;
        color: #666;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Primer paso: borde redondeado izquierdo */
    #pasos_form ul li:first-child {
        padding-left: 14px;
        border-radius: 25px 0 0 25px;
    }

    /* Último paso: borde redondeado derecho */
    #pasos_form ul li:last-child {
        border-radius: 0 25px 25px 0;
    }

    /* Flecha derecha de cada paso (triángulo CSS) */
    #pasos_form ul li::after {
        content: '';
        position: absolute;
        right: -10px;
        top: 0;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 10px solid #d8d8d8;
        z-index: 2;
    }

    /* Separador izquierdo (hueco blanco entre flechas) */
    #pasos_form ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 10px solid #fff;
        z-index: 1;
    }

    /* Primer paso sin separador izquierdo */
    #pasos_form ul li:first-child::before {
        display: none;
    }

    /* Último paso sin flecha derecha */
    #pasos_form ul li:last-child::after {
        display: none;
    }

    /* Paso activo: color corporativo */
    #pasos_form ul li.current {
        background: var(--color-primary);
    }

    /* Flecha del paso activo en color corporativo */
    #pasos_form ul li.current::after {
        border-left-color: var(--color-primary);
    }

    /* Número del paso: tamaño destacado */
    #pasos_form ul li span.numero {
        display: block;
        font-weight: bold;
        font-size: 16px;
        padding: 0;
        margin: 0;
        background: none;
        width: auto;
        height: auto;
        border-radius: 0;
        color: inherit;
        line-height: 1.2;
    }

    /* Texto del paso: truncar con ellipsis si no cabe */
    #pasos_form ul li span.texto {
        display: block;
        font-size: 11px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * ================================================================
     * 	Barra superior
     * ================================================================
     */
    /* Menú idiomas reducido y alineado al borde izquierdo */
    #zn_menu_basico {
        font-size: 10px;
    }

    #menu_idiomas ul {
        margin: 0;
        padding-left: 0;
    }

    /* Botón acceso intranet alineado al borde derecho */
    #acceso_intranet {
        font-size: 10px;
        margin-right: 0;
    }

    /* Padding compacto en enlace intranet */
    #acceso_intranet a {
        padding: 2px 6px;
        margin-left: 5px;
    }

    /*
     * ================================================================
     * 	Footer
     * ================================================================
     */
    /* Footer a ancho completo compensando padding del container */
    #footer {
        padding: 10px 0;
        margin-left: -15px;
        margin-right: -15px;
        width: auto;
    }

    /* Quitar padding del container dentro del footer */
    #footer .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    /* Contenido del footer en flex: versión (izq.) y UPV/EHU (der.), centrados.
       Hereda el orden del DOM (igual que desktop), sin invertir. */
    #footer .row-fluid {
        position: static !important;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Texto del footer sin posición absoluta ni floats, logo compacto */
    #footer p {
        position: static !important;
        float: none;
        margin: 0 !important;
        font-size: 10px;
        line-height: 18px;
        background-size: 18px auto;
        padding-left: 22px;
    }

    /*
     * ================================================================
     * 	Modales
     * ================================================================
     */
    /* Modales Bootstrap 2 adaptados a ancho de pantalla con margen */
    .modal {
        width: auto !important;
        margin: 10px !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Modal visible pegado arriba con margen */
    .modal.fade.in {
        top: 10px !important;
    }

    /* Cuerpo del modal con scroll si el contenido es largo */
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Botones del modal a ancho completo y apilados */
    .modal-footer .btn,
    .modal-footer input[type="submit"].btn {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 5px;
    }

    /* Quitar margin-left de Bootstrap en segundo botón del modal */
    .modal-footer .btn + .btn {
        margin-left: 0;
    }

    /* Alinear contenido del modal: mismo padding en body y footer */
    .modal-footer {
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
    }

    .modal-body {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Quitar padding-left extra del párrafo dentro del modal */
    .modal-body > p {
        padding-left: 0;
    }

    /* Modal grande (confirmación paso 1) a ancho de pantalla */
    #myModal.modal-lg {
        width: auto !important;
        margin-left: 10px !important;
    }

    /*
     * ================================================================
     * 	Datepicker jQuery UI (mobile)
     * ================================================================
     */
    /* Bottom sheet: fijado abajo a pantalla completa */
    .ui-datepicker {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        z-index: 9999 !important;
        padding: 15px 15px 20px;
        margin-top: 0;
    }

    /* Cabecera: más espacio para navegación táctil */
    .ui-datepicker .ui-datepicker-header {
        padding: 4px 0 8px;
        margin-bottom: 4px;
    }

    /* Flechas prev/next: área táctil mínima 44px */
    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        width: 44px !important;
        height: 44px;
        line-height: 44px;
        padding-top: 0 !important;
    }

    /* Selects mes/año: inline lado a lado, 16px para evitar zoom iOS */
    .ui-datepicker-title select {
        font-size: 16px !important;
        height: 36px;
        padding: 4px;
        display: inline !important;
        width: auto !important;
    }

    /* Backdrop semitransparente detrás del datepicker */
    .ui-datepicker-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9998;
    }

    /* Cabeceras de día */
    .ui-datepicker .ui-datepicker-calendar th {
        font-size: 13px;
        padding: 6px 0;
        color: #000;
    }

    /* Celdas de día: área táctil amplia */
    .ui-datepicker .ui-datepicker-calendar td {
        padding: 2px;
    }

    .ui-datepicker .ui-datepicker-calendar td a,
    .ui-datepicker .ui-datepicker-calendar td span {
        display: block;
        min-height: 40px;
        line-height: 40px;
        font-size: 15px;
        text-align: center;
        border-radius: 50%;
        -webkit-tap-highlight-color: transparent;
    }
    .ui-datepicker .ui-datepicker-calendar td a:focus,
    .ui-datepicker .ui-datepicker-calendar td a:focus-visible {
        outline-color: var(--color-primary-dark);
    }

    /* Día seleccionado */
    .ui-datepicker .ui-datepicker-current-day {
        border-radius: 50%;
    }

    /*
     * ================================================================
     * 	Formulario
     * ================================================================
     */
    /* Quitar caja/borde del formulario en mobile */
    form {
        background: none;
        border: none;
        padding: 0;
        border-radius: 0;
        margin-top: 20px;
    }

    /*
     * ================================================================
     * 	Cuerpo
     * ================================================================
     */
    /* Margen superior para separar del header */
    #cuerpo {
        margin-top: 50px;
        padding: 0 5px;
    }

    /* Título principal: tamaño reducido */
    #cuerpo h1 {
        font-size: 19px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /*
     * ================================================================
     * 	Enviar pass (no-GAUR paso 2)
     * ================================================================
     */
    /* Bloque para que label y select se apilen */
    #enviarpass_div {
        display: block;
    }

    /* Label full-width para que el select no quede comprimido */
    #enviarpass_div label {
        width: 100% !important;
        display: block;
    }

    /* Controls a ancho completo */
    #enviarpass_div .controls {
        margin-left: 0;
        width: 100%;
    }

    /* Select LDAP a ancho completo */
    #enviarpass {
        width: 100%;
    }

    /*
     * ================================================================
     * 	RGPD table
     * ================================================================
     */
    /* Tabla RGPD con scroll horizontal si desborda */
    .rgpd-table {
        display: block;
        overflow-x: auto;
        margin: 10px 0;
    }

    /*
     * ================================================================
     * 	Paneles datos personales/académicos (paso 2 GAUR)
     * ================================================================
     */
    /* Sin padding en paneles para alinear con el resto */
    .panel.panel-info {
        padding: 0;
        margin-bottom: 10px;
    }

    /* Títulos de sección alineados a la izquierda con los campos */
    #cuerpo .panel.panel-info h2 {
        padding-left: 0;
    }

    /* Separación entre panel de datos personales y académicos */
    .row-fluid > .panel.panel-info + .panel.panel-info {
        margin-top: 30px;
    }

    /* Separación del alert de email (Hotmail/Outlook) respecto a los paneles */
    #cuerpo > .row-fluid + .alert {
        margin-top: 15px;
        margin-bottom: 25px;
    }

    /*
     * ================================================================
     * 	Definition lists (datos personales/académicos)
     * ================================================================
     */
    /* Sin padding izquierdo para alinear con títulos */
    #cuerpo dl {
        padding-left: 0;
    }

    /* Etiquetas apiladas (no float) con separación vertical */
    #cuerpo dl dt {
        float: none;
        padding-right: 0;
        margin-top: 10px;
    }

    /* Primera etiqueta sin margen superior extra */
    #cuerpo dl dt:first-child {
        margin-top: 0;
    }

    /* Valores alineados a la izquierda */
    #cuerpo dl dd {
        margin-left: 0;
    }

}

/*
 * Rango intermedio (tablet / desktop estrecho, 768-1019px): el patrón central
 * es más ancho que el viewport y su frontera verde/gris se sale por la izquierda,
 * dejando gris a la izquierda de la caja EHU. Por debajo de 1020px el padding de
 * 20px del contenedor ya no coincide con esa frontera, así que pegamos EHU al
 * borde para eliminar el hueco gris (el layout flex se mantiene intacto).
 */
@media (min-width: 768px) and (max-width: 1019px) {
    .banner-logos.container-fluid {
        padding-left: 0;
    }
}