/* =============================================================================
   Escuela PIB 2 — Responsive
   ============================================================================= */

/* Tablet y abajo */
@media (max-width: 1024px) {
    .panel { grid-template-columns: 220px 1fr; }
    .panel__usuario-nombre { display: none; }
}

/* Tablet pequeña y celular */
@media (max-width: 768px) {
    :root {
        --espacio-16: 3rem;
        --espacio-12: 2.25rem;
    }

    .contenedor { padding: 0 var(--espacio-4); }

    /* Header público: colapsar navegación en menú móvil */
    .encabezado__menu-boton {
        display: inline-flex;
    }
    .encabezado__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-superficie);
        flex-direction: column;
        align-items: stretch;
        padding: var(--espacio-4);
        border-bottom: 1px solid var(--color-borde);
        box-shadow: var(--sombra-md);
        display: none;
    }
    .encabezado__nav[data-abierto="true"] {
        display: flex;
    }
    .menu {
        flex-direction: column;
        gap: 0;
    }
    .menu a {
        display: block;
        padding: var(--espacio-3);
    }
    .encabezado__acciones {
        margin-top: var(--espacio-3);
        justify-content: flex-end;
    }

    /* Panel: lateral colapsable */
    .panel { grid-template-columns: 1fr; }
    .panel__lateral {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform var(--transicion-base);
        box-shadow: var(--sombra-lg);
    }
    .panel__lateral[data-abierto="true"] {
        transform: translateX(0);
    }
    .panel__menu-boton { display: inline-flex; }
    .panel__principal { padding: var(--espacio-4) var(--espacio-3); }

    /* Tarjetas y tablas: scroll horizontal */
    .tarjetas { grid-template-columns: 1fr; }
    .tabla-contenedor { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Formularios */
    .formulario { max-width: 100%; }
    .formulario__fila { flex-direction: column; gap: 0; }
    .formulario__fila--opciones { flex-direction: row; flex-wrap: wrap; }

    /* Hero */
    .hero { padding: var(--espacio-12) 0; }
    .hero__titulo { font-size: var(--tamano-texto-3xl); }

    /* Auth */
    .auth-tarjeta { padding: var(--espacio-5); }
    .auth-encabezado__logo .logo-texto { display: none; }
}

/* Celular pequeño (320px) */
@media (max-width: 360px) {
    .hero__titulo { font-size: var(--tamano-texto-2xl); }
    .boton--grande { font-size: var(--tamano-texto-base); }
    .tarjeta__cuerpo { padding: var(--espacio-3); }
}

/* Pantallas grandes */
@media (min-width: 1440px) {
    :root {
        --tamano-texto-base: 1.0625rem;
    }
}

/* Orientación horizontal en móvil */
@media (max-width: 900px) and (orientation: landscape) {
    .hero { padding: var(--espacio-10) 0; }
}