/* --- OPTIMIZACIÓN MÓVIL TOTAL --- */

/* Ajustes base para dedos */
body {
    font-size: 16px !important;
    background-color: #f0f2f5 !important;
}

/* 1. Hacer que las tablas sean tarjetas en móvil */
@media (max-width: 767px) {
    /* Ocultar la cabecera de la tabla */
    #changelist table thead {
        display: none !important;
    }

    /* Cada fila se convierte en una tarjeta blanca */
    #changelist table tbody tr {
        display: block !important;
        background: white !important;
        margin-bottom: 15px !important;
        border-radius: 10px !important;
        border: 1px solid #ddd !important;
        padding: 10px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Cada celda se pone una debajo de la otra */
    #changelist table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        padding: 8px 5px !important;
        text-align: right !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* Añadir el nombre de la columna antes del dato */
    #changelist table tbody td:before {
        content: attr(data-label); /* Esto requiere un pequeño cambio en el HTML o lo simulamos con labels */
        font-weight: bold;
        color: #555;
        text-align: left;
    }

    /* Ajustar el buscador para que no se salga */
    #changelist-search input[type="text"] {
        width: 100% !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    /* Botones de acción grandes */
    .submit-row {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        padding: 10px;
        box-sizing: border-box;
        z-index: 1000;
        border-top: 2px solid #ddd;
        display: flex;
        gap: 5px;
    }

    .submit-row input {
        flex: 1;
        margin: 0 !important;
        height: 45px !important;
    }
}

/* Estilo de los niveles (Pills) */
.nivel-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}
.nivel-incipiente { background: #ffebee; color: #c62828; }
.nivel-logrado { background: #e8f5e9; color: #2e7d32; }

/* Dashboard móvil */
.dashboard #content-main, .dashboard #content-related {
    width: 100% !important;
    float: none !important;
}