/* Custom styles for guide registration application */
        .guide-registration {
            font-family: 'Segoe UI', system-ui, sans-serif;
            color: #2b2f33;
            line-height: 1.55;
        }

        .guide-registration main.container {
            padding-top: 2.25rem;
            padding-bottom: 3rem;
        }

        .guide-registration .navbar-brand,
        .guide-registration .guide-section-header h2,
        .guide-registration .guide-card-header,
        .guide-registration h1,
        .guide-registration h4,
        .guide-registration h5 {
            font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
        }

        .guide-registration .guide-section-header h2 {
            font-weight: 600;
            letter-spacing: -0.01em;
        }
        
        /* Navigation styles - oscuro como el header real de urp.edu.pe, con verde solo como acento */
        .guide-nav {
            background: #161616;
            background: linear-gradient(180deg, #1c1c1c 0%, #0f0f0f 100%);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            border-bottom: 3px solid #18613E;
        }

        .guide-nav .navbar-brand {
            letter-spacing: 0.01em;
            font-weight: 600;
        }

        .urp-brand-logo {
            height: 42px;
            width: auto;
        }

        .urp-brand-text {
            font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
            line-height: 1.05;
        }

        .urp-brand-line1 {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: rgba(255, 255, 255, 0.75);
        }

        .urp-brand-line2 {
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: #fff;
        }
        
        .guide-nav .nav-link {
            color: rgba(255, 255, 255, 0.88) !important;
            font-weight: 500;
            font-size: 0.94rem;
            padding: 0.9rem 1.4rem;
            transition: color 0.2s ease, background-color 0.2s ease;
            border-bottom: 3px solid transparent;
        }
        
        .guide-nav .nav-link:hover,
        .guide-nav .nav-link.active {
            color: white !important;
            background-color: rgba(255, 255, 255, 0.06);
            border-bottom-color: #18613E;
        }
 


        /* Botón hamburguesa (móvil): el ícono por defecto de Bootstrap es
           oscuro y se pierde contra el fondo negro del navbar. Lo forzamos
           a blanco y le damos un borde sutil para que sea visible. */
        .guide-nav .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.35);
        }
        .guide-nav .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        .guide-nav .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }
        /* Menú colapsado en móvil: debe mantener el mismo fondo oscuro del
           navbar (si no, hereda un fondo claro y el texto blanco de los
           nav-link se vuelve invisible). */
        @media (max-width: 991.98px) {
            .guide-nav .navbar-collapse {
                background: #161616;
                background: linear-gradient(180deg, #1c1c1c 0%, #0f0f0f 100%);
                margin: 0 -1rem;
                padding: 0.5rem 1rem 1rem;
                border-top: 1px solid rgba(255, 255, 255, 0.08);
            }
        }
       

        /* Content section styles */
        .guide-section {
            display: none;
            animation: fadeIn 0.4s ease;
        }
        
        .guide-section.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .guide-section-header {
            position: relative;
            border-bottom: 1px solid #dfe3e6;
            padding-bottom: 1.1rem;
            padding-left: 1rem;
            margin-bottom: 2.25rem;
        }

        .guide-section-header::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.2rem;
            bottom: 1.3rem;
            width: 4px;
            background: #18613E;
        }
        
        .guide-section-header h2 {
            color: #1f2a25;
            font-weight: 600;
        }
        
        /* Card styles for different sections */
        .guide-card {
            border: 1px solid #e7e9ec;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: box-shadow 0.25s ease, border-color 0.25s ease;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .guide-card:hover {
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
            border-color: #d8dce0;
        }
        
        .guide-card-header {
            background-color: #495057;
            color: white;
            padding: 1.1rem 1.4rem;
            border-bottom: none;
            font-size: 1.02rem;
        }
        
        .guide-card-header.primary {
            background-color: #18613E;
        }
        
        .guide-card-header.success {
            background-color: #33465A;
        }
        
        .guide-card-header.warning {
            background-color: #C9A227;
            color: #2b2200;
        }
        
        .guide-card-body {
            padding: 1.4rem 1.5rem;
        }
        
        /* Schedule table styles */
        .schedule-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        
        .schedule-table th {
            background-color: #f6f7f8;
            color: #40474d;
            font-weight: 600;
            padding: 0.95rem 1rem;
            border-bottom: 2px solid #18613E;
            font-size: 0.88rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        
        .schedule-table td {
            padding: 1rem;
            border-bottom: 1px solid #e9ecef;
            vertical-align: middle;
        }
        
        .schedule-table tr:hover td {
            background-color: #f8f9fa;
        }
        
        /* Form control styles */
        .guide-form-control {
            border: 1px solid #d5d9dc;
            border-radius: 4px;
            padding: 0.7rem 0.9rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        
        .guide-form-control:focus {
            border-color: #18613E;
            box-shadow: 0 0 0 0.15rem rgba(24, 97, 62, 0.18);
        }
        
        .guide-form-label {
            font-weight: 600;
            color: #495057;
            font-size: 0.92rem;
            margin-bottom: 0.4rem;
        }
        
        /* Loading spinner */
        .guide-spinner {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #18613E;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Alert styles */
        .guide-alert {
            border-radius: 6px;
            border: none;
            padding: 1.1rem 1.4rem;
            margin-bottom: 1.5rem;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .guide-nav .nav-link {
                padding: 0.5rem 1rem;
                font-size: 0.9rem;
            }
            
            .guide-card-body {
                padding: 1rem;
            }
            
            .schedule-table th,
            .schedule-table td {
                padding: 0.75rem 0.5rem;
                font-size: 0.9rem;
            }

            .urp-brand-logo {
                height: 32px;
            }

            .urp-brand-line2 {
                font-size: 0.92rem;
            }
        }
        
        /* Student info styles */
        .student-info-badge {
            background-color: #18613E;
            color: white;
            padding: 0.45rem 0.95rem;
            border-radius: 4px;
            font-weight: 600;
            font-size: 0.92rem;
            display: inline-block;
            margin: 0.25rem;
        }
        
        /* Image container for schedule */
        .schedule-img-container {
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #e7e9ec;
        }
        
        .schedule-img-container img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Turn information styles */
        .turn-info-card {
            background-color: #f7f8f8;
            border-left: 4px solid #18613E;
        }
        
        /* Guide table styles */
        .guide-courses-table {
            font-size: 0.9rem;
        }
        
        .guide-courses-table th {
            background-color: #e9ecef;
            position: sticky;
            top: 0;
        }
        
        /* Utility classes */
        .cursor-pointer {
            cursor: pointer;
        }
        
        .text-accent {
            color: #18613E;
        }
        
        .bg-light-accent {
            background-color: rgba(24, 97, 62, 0.1);
        }

        /* ===================================================== */
        /* Simulador de Horario - Weekly schedule builder         */
        /* ===================================================== */

        .horario-select-col {
            width: 50px;
            text-align: center;
        }

        .horario-select-col input[type="checkbox"] {
            width: 1.15rem;
            height: 1.15rem;
            cursor: pointer;
            accent-color: #18613E;
        }

        .guide-courses-table tr.row-selected td {
            background-color: rgba(24, 97, 62, 0.06);
        }

        /* Curso con cruce de horario respecto a otro ya seleccionado */
        .guide-courses-table tr.row-conflict td {
            background-color: rgba(220, 53, 69, 0.08);
        }

        .guide-courses-table tr.row-conflict td:first-child {
            border-left: 3px solid #dc3545;
        }

        /* Mismo curso seleccionado en más de un grupo */
        .guide-courses-table tr.row-duplicate td {
            background-color: rgba(201, 162, 39, 0.12);
        }

        .guide-courses-table tr.row-duplicate td:first-child {
            border-left: 3px solid #C9A227;
        }

        /* ===================================================== */
        /* Toast notifications - avisos no bloqueantes            */
        /* ===================================================== */
        .guide-toast-container {
            position: fixed;
            top: 1.25rem;
            right: 1.25rem;
            z-index: 1080;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            max-width: 340px;
        }

        .guide-toast {
            background-color: #2b2f33;
            color: #fff;
            padding: 0.85rem 1.1rem;
            border-radius: 6px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
            font-size: 0.86rem;
            line-height: 1.4;
            display: flex;
            align-items: flex-start;
            border-left: 4px solid #dc3545;
            opacity: 0;
            transform: translateX(20px);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .guide-toast.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .guide-toast i {
            margin-top: 0.1rem;
        }

        .guide-toast-danger {
            border-left-color: #dc3545;
        }

        .guide-toast-danger i {
            color: #ff8a8a;
        }

        .guide-toast-warning {
            border-left-color: #C9A227;
        }

        .guide-toast-warning i {
            color: #ffd766;
        }

        .guide-toast-success {
            border-left-color: #18613E;
        }

        .guide-toast-success i {
            color: #4CAF7D;
        }

        .guide-toast-body-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 0.75rem;
        }

        .guide-toast-action {
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: #fff;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 0.25rem 0.65rem;
            border-radius: 4px;
            white-space: nowrap;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

        .guide-toast-action:hover {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.8);
        }

        @media (max-width: 576px) {
            .guide-toast-container {
                left: 1rem;
                right: 1rem;
                max-width: none;
            }
        }

        /* Floating summary bar shown while browsing Horarios */
        .mihorario-floatbar {
            position: fixed;
            left: 50%;
            bottom: 1.5rem;
            transform: translate(-50%, 0);
            background-color: #18613E;
            color: white;
            padding: 0.75rem 1.4rem;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 1rem;
            z-index: 1040;
            font-weight: 600;
            font-size: 0.92rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .mihorario-floatbar.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -4px);
        }

        .mihorario-floatbar .badge-count {
            background-color: #C9A227;
            color: #2b2200;
            border-radius: 4px;
            padding: 0.15rem 0.55rem;
            font-size: 0.82rem;
        }

        .mihorario-floatbar button {
            background-color: white;
            color: #18613E;
            border: none;
            border-radius: 4px;
            padding: 0.4rem 1rem;
            font-weight: 600;
            font-size: 0.88rem;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .mihorario-floatbar button:hover {
            background-color: #C9A227;
            color: #2b2200;
        }

        /* Nav badge for selected course count */
        .nav-course-count {
            background-color: #C9A227;
            color: #2b2200;
            border-radius: 3px;
            font-size: 0.68rem;
            font-weight: 700;
            padding: 0.08rem 0.4rem;
            margin-left: 0.35rem;
            vertical-align: middle;
        }

        /* Weekly grid - grilla continua tipo Google Calendar.
           En vez de una <table> con una fila fija por hora (que obligaba a
           cada bloque a "vivir" dentro de una sola celda de 60px), usamos
           un CSS Grid de 7 columnas (hora + 6 días) donde la columna de
           cada día es un contenedor "position: relative" de alto continuo.
           Cada bloque de clase se posiciona con "position: absolute" y su
           "top"/"height" se calculan en JS en base a los minutos exactos
           de inicio/fin, así que puede empezar y terminar en cualquier
           punto de la columna (no solo al inicio de una hora) y dos
           bloques contiguos (fin de uno = inicio del otro) quedan
           pegados exactamente sin espacio ni superposición. */
        .weekly-schedule-wrapper {
            overflow-x: auto;
        }

        .weekly-schedule-grid {
            display: grid;
            grid-template-columns: 90px repeat(6, minmax(112px, 1fr));
            min-width: 780px;
        }

        .wsg-corner,
        .wsg-day-header {
            background-color: #18613E;
            color: white;
            font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
            font-weight: 600;
            padding: 0.7rem 0.5rem;
            text-align: center;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .wsg-corner {
            background-color: #124D33;
        }

        /* Columna de horas: cada etiqueta se posiciona de forma absoluta
           a la altura exacta (en px) que le corresponde, alineada con
           las líneas horizontales de las columnas de días. */
        .wsg-time-col {
            position: relative;
            background-color: #f6f7f8;
            border-right: 1px solid #e7e9ec;
        }

        .wsg-time-label {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            padding: 0.3rem 0.35rem 0 0.35rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #495057;
            text-align: center;
            white-space: nowrap;
        }

        /* Columna de un día: contenedor continuo donde los bloques se
           posicionan de forma absoluta según su horario exacto. Las
           líneas horizontales cada hora se dibujan con un degradado de
           fondo en vez de bordes de celda, para no romper la
           continuidad visual de la columna. */
        .wsg-day-col {
            position: relative;
            border-right: 1px solid #e7e9ec;
            background-image: linear-gradient(to bottom, #e7e9ec 1px, transparent 1px);
            background-size: 100% var(--hour-height, 60px);
            background-repeat: repeat-y;
        }

        .wsg-day-col:last-child {
            border-right: none;
        }

        /* Cada bloque representa una sesión de curso dentro de la grilla
           semanal. El color de fondo se asigna dinámicamente por JS
           (inline style) según el curso, para que cada curso tenga un
           color propio y consistente entre Teo y Lab/Pra. El tipo de
           sesión se distingue mediante el estilo del borde izquierdo.
           "top" y "height" se calculan en JS en px según la hora real de
           inicio/fin, por eso el bloque cubre visualmente todo el rango
           horario de la clase y no solo la hora en que empieza. */
        .schedule-block {
            position: absolute;
            border-radius: 3px;
            border-left: 4px solid rgba(255, 255, 255, 0.65);
            padding: 0.3rem 0.45rem;
            font-size: 0.72rem;
            line-height: 1.22;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            overflow: hidden;
            box-sizing: border-box;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
        }

        /* Teoría: borde izquierdo sólido */
        .schedule-block.tipo-teo {
            border-left-style: solid;
        }

        /* Laboratorio / Práctica: borde izquierdo punteado */
        .schedule-block.tipo-pra {
            border-left-style: dashed;
        }

        .schedule-block.conflicto {
            outline: 2px solid #dc3545;
            outline-offset: -2px;
        }

        .schedule-block strong {
            display: block;
            font-size: 0.75rem;
        }

        /* Leyenda de colores por curso, debajo de la grilla semanal */
        .course-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem 1.1rem;
            margin-top: 1.1rem;
            padding-top: 1rem;
            border-top: 1px solid #e7e9ec;
        }

        .course-legend-item {
            display: inline-flex;
            align-items: center;
            font-size: 0.82rem;
            color: #495057;
        }

        .course-legend-dot {
            display: inline-block;
            width: 11px;
            height: 11px;
            border-radius: 3px;
            margin-right: 0.4rem;
            flex-shrink: 0;
        }

        .course-legend-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            margin-left: 0.4rem;
            border: none;
            border-radius: 50%;
            background-color: #e9ecef;
            color: #6c757d;
            font-size: 0.62rem;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .course-legend-remove:hover {
            background-color: #dc3545;
            color: white;
        }

        .mihorario-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .mihorario-summary-item {
            flex: 1;
            min-width: 140px;
            background-color: #f7f8f8;
            border: 1px solid #e7e9ec;
            border-radius: 4px;
            padding: 1rem 1.25rem;
            border-left: 4px solid #18613E;
        }

        .mihorario-summary-item .value {
            font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: #18613E;
        }

        .mihorario-summary-item .label {
            font-size: 0.78rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .mihorario-empty {
            text-align: center;
            padding: 3rem 1rem;
            color: #6c757d;
        }

        .conflict-warning {
            border-radius: 6px;
            border-left: 4px solid #dc3545;
        }

        /* ===================================================== */
        /* Modal de confirmación (limpiar horario)                */
        /* ===================================================== */
        .guide-confirm-modal {
            border: none;
            border-radius: 8px;
            overflow: hidden;
        }

        .guide-confirm-header {
            background-color: #18613E;
            color: white;
            border-bottom: none;
            padding: 1.1rem 1.4rem;
        }

        .guide-confirm-header .modal-title {
            font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
            font-weight: 600;
            font-size: 1.05rem;
        }

        .guide-confirm-header .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
            opacity: 0.85;
        }

        .guide-confirm-header .btn-close:hover {
            opacity: 1;
        }

        #confirmClearModal .modal-body {
            padding: 1.4rem;
            color: #495057;
        }

        #confirmClearModal .modal-footer {
            border-top: 1px solid #e7e9ec;
            padding: 1rem 1.4rem;
        }
/* ===================================================== */
/* Barra fija inferior                                    */
/* ===================================================== */
.guide-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    background-color: #ffffff;
    border-top: 1px solid #e2e5e8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    font-size: 0.78rem;
    color: #495057;
    z-index: 1035;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.guide-bottombar-left {
    font-weight: 600;
}

.guide-bottombar-right {
    letter-spacing: 0.05em;
    color: #6c757d;
}

/* Deja espacio abajo para que la barra fija no tape el footer/contenido */
.guide-registration {
    padding-bottom: 34px;
}

/* La barra flotante de "Mi Horario" ya existente sube un poco para no chocar */
.mihorario-floatbar {
    bottom: calc(1.5rem + 34px);
}

@media (max-width: 576px) {
    .guide-bottombar {
        font-size: 0.7rem;
        padding: 0 0.75rem;
    }
}

/* ===================================================== */
/* Widget de accesibilidad                                */
/* ===================================================== */
.guide-accessibility {
    position: fixed;
    right: 1.25rem;
    bottom: calc(34px + 1.1rem);
    z-index: 1036;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}

.guide-accessibility-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #18613E;
    color: white;
    border: none;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.guide-accessibility-btn:hover {
    background-color: #124D33;
    transform: scale(1.05);
}

.guide-accessibility-menu {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 190px;
}

.guide-accessibility-option {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-radius: 5px;
    font-size: 0.88rem;
    color: #2b2f33;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.guide-accessibility-option:hover {
    background-color: #f1f3f4;
}

.guide-accessibility-option.active {
    background-color: rgba(24, 97, 62, 0.12);
    color: #18613E;
    font-weight: 600;
}

/* Fuente disléxica: aplica una tipografía más espaciada y legible */
body.a11y-dyslexic .guide-registration {
    font-family: Verdana, Tahoma, sans-serif !important;
    letter-spacing: 0.02em;
    line-height: 1.7;
}

/* ===================================================== */
/* Ajustes de responsividad (solo pantallas pequeñas)      */
/* No modifican colores, tipografías ni el diseño en       */
/* escritorio/tablet - solo el comportamiento en móvil.    */
/* ===================================================== */
@media (max-width: 576px) {
    /* Grilla semanal de "Mi Horario": se desplaza mejor con
       el dedo y deja un pequeño respiro en los bordes al
       hacer scroll horizontal, sin cambiar su apariencia */
    .weekly-schedule-wrapper {
        margin: 0 -0.25rem;
        padding: 0 0.25rem 0.35rem;
        -webkit-overflow-scrolling: touch;
    }

    .weekly-schedule-grid {
        min-width: 620px;
    }

    /* Barra flotante "Ver mi horario": en vez de quedar
       centrada con ancho fijo (lo que en pantallas angostas
       podía salirse del viewport o pisar el botón de
       accesibilidad), se ancla con márgenes laterales */
    .mihorario-floatbar {
        left: 1rem;
        right: 1rem;
        transform: none;
        max-width: none;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.65rem 1rem;
        font-size: 0.82rem;
    }

    .mihorario-floatbar.visible {
        transform: translateY(-4px);
    }

    .mihorario-floatbar button {
        padding: 0.35rem 0.8rem;
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Widget de accesibilidad: sube lo suficiente para no
       superponerse con la barra flotante cuando ambas están
       visibles a la vez en la sección de Horario */
    .guide-accessibility {
        bottom: calc(34px + 4.75rem);
        right: 1rem;
    }
}

@media (max-width: 400px) {
    /* Textos que podrían no caber en una sola línea en los
       celulares más angostos */
    .mihorario-floatbar span {
        font-size: 0.78rem;
    }

    .guide-bottombar-left,
    .guide-bottombar-right {
        font-size: 0.68rem;
    }
}