.teacher-card {
    transition: all .3s ease;
    cursor: pointer
}

.teacher-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15)
}

.teacher-image {
    transition: all .3s ease
}

.teacher-card:hover .teacher-image {
    transform: scale(1.05)
}

.info-button {
    transition: all .2s ease;
    border: 1px solid transparent
}

.info-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1)
}

/* ===== Modal: ajustes generales ===== */
#teacherModal img {
    max-width: 100%;
    height: auto;
    display: block;
}

.modal-panel {
    width: min(100vw - 1rem, 70rem);
}

/* seguridad extra en móvil */

/* ===== Tablas: wrapper con scroll horizontal suave (fallback) ===== */
.rt-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rt {
    width: 100%;
    border-collapse: collapse;
}

.rt th,
.rt td {
    padding: .75rem;
    vertical-align: top;
}

.rt thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
}

/* Paleta por si no carga Tailwind */
:root {
    --rt-border: #E5E7EB;
    --rt-muted: #6B7280;
}

.rt tr+tr {
    border-top: 1px solid var(--rt-border);
}

/* ===== Modo “stacked” en pantallas pequeñas ===== */
@media (max-width: 640px) {

    .rt-stack thead,
    .rt-stack tfoot {
        display: none;
    }

    .rt-stack tbody tr {
        display: grid;
        gap: .5rem;
        padding: .75rem 0;
    }

    .rt-stack tbody td {
        display: grid;
        grid-template-columns: 9.5rem 1fr;
        /* etiqueta + valor */
        gap: .5rem;
        padding: .25rem 0;
    }

    .rt-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--rt-muted);
    }

    /* Quita márgenes laterales del scroll para que no se corte visualmente */
    .rt-wrapper {
        margin-inline: -0.25rem;
        padding-inline: 0.25rem;
    }
}