/* --- ESTILOS RESPONSIVE PARA MÓVIL (Menos de 768px) --- */
@media (max-width: 768px) {

    /* Ajustes generales de Body */
    body {
        padding: 10px;
        display: block; /* Desactiva el flex de la pantalla de login para que fluya mejor */
        height: auto;
    }

    /* --- HEADER --- */
    .header-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    #userNameDisplay {
        border-right: none;
        padding-right: 0;
        display: block;
        margin-bottom: 10px;
    }

    .header-right {
        flex-direction: column;
        width: 100%;
    }

    /* --- TABLA (LISTADO) --- */
    /* Transformamos la tabla en tarjetas verticales */
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 15px;
        border: 1px solid #5D004A;
        border-radius: 8px;
        background: white !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 45% !important; /* Espacio para el título de la columna */
        text-align: left;
        min-height: 40px;
    }

    td::before {
        content: attr(data-label); /* Muestra el nombre de la columna */
        position: absolute;
        left: 10px;
        width: 40%;
        font-weight: bold;
        color: #5D004A;
        white-space: nowrap;
    }

    /* Ajuste para el checkbox en móvil */
    .checkbox-cell {
        text-align: center !important;
        padding-left: 10px !important;
        background-color: #f9f9f9;
    }
    .checkbox-cell::before { content: "Seleccionar"; position: relative; display: block; margin-bottom: 5px; width: 100%; text-align: center;}

    /* Filtros y acciones masivas */
    .filters {
        flex-direction: column;
        gap: 10px;
    }
    .filters select, .filters input { width: 100% !important; }

    .bulk-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    /* --- PANTALLA DETALLE --- */
    .header-detaller {
        flex-direction: column;
        margin: 10px 0;
    }

    .btn-papelera {
        position: static; /* Ya no flota a la derecha */
        margin-top: 10px;
        width: 100%;
    }

    .campo {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .campo label {
        margin-bottom: 2px;
    }

    .campo span, .campo input, .campo select {
        width: 100% !important; /* Ocupan todo el ancho */
        text-align: left;
    }

    .contenedor-botones {
        flex-direction: column;
        margin: 30px 10px;
        gap: 15px;
    }

    .botones-funciones {
        flex-direction: column;
        width: 100%;
    }

    .botones-funciones button, .btn-volver {
        width: 100%;
    }

    /* --- LOGIN --- */
    form {
        width: 100%;
        max-width: 320px;
        margin: 20px auto;
    }

    .logo-login {
        margin-right: 0;
        margin-bottom: 20px;
        max-width: 200px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}