/* =========================================================
   MARBUENO 360 · USUARIOS Y ACCESOS V2
   FULL WIDTH + RESPONSIVE
   ========================================================= */

/* ---------- CONTENEDOR GENERAL ---------- */

#view-usuarios{
    width:calc(100vw - 32px) !important;
    max-width:none !important;

    margin-left:calc(50% - 50vw + 16px) !important;
    margin-right:calc(50% - 50vw + 16px) !important;

    padding-left:0 !important;
    padding-right:0 !important;

    box-sizing:border-box !important;
}

#view-usuarios > *,
#view-usuarios .module-head,
#view-usuarios #usuarios-app{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
}


/* ---------- BLOQUES PRINCIPALES ---------- */

/*
 * Internos y comerciales dejan de compartir fila.
 * Cada bloque utiliza todo el ancho disponible.
 */
#usr-users-v2-sections{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;

    width:100% !important;
    max-width:none !important;
}

#usr-users-v2-sections > .usr-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
}


/* ---------- RESTO DE GRIDS DE USUARIOS ---------- */

#usuarios-app > .usr-grid{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

#usuarios-app .usr-card{
    min-width:0 !important;
    box-sizing:border-box !important;
}


/* ---------- CABECERAS ---------- */

#view-usuarios .usr-card-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:18px !important;

    flex-wrap:wrap !important;
}

#view-usuarios .usr-card-head > div{
    min-width:0 !important;
}


/* ---------- TABLAS ---------- */

#view-usuarios .usr-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain;
}

#view-usuarios table{
    width:100% !important;
    max-width:none !important;
    border-collapse:collapse;
}

#usr-users-v2-sections table{
    table-layout:auto !important;
}

#usr-users-v2-sections th,
#usr-users-v2-sections td{
    vertical-align:middle !important;
}

/* Usuario / comercial */
#usr-users-v2-sections td:first-child{
    min-width:210px;
}

/* Agente ERP */
#usr-users-v2-sections > .usr-card:nth-child(2)
table th:nth-child(2),
#usr-users-v2-sections > .usr-card:nth-child(2)
table td:nth-child(2){
    min-width:220px;
}

/* Acceso */
#usr-users-v2-sections > .usr-card:nth-child(2)
table th:nth-child(3),
#usr-users-v2-sections > .usr-card:nth-child(2)
table td:nth-child(3){
    min-width:175px;
}

/* Último acceso */
#usr-users-v2-sections table th:nth-last-child(2),
#usr-users-v2-sections table td:nth-last-child(2){
    min-width:150px;
}

/* Botón editar */
#usr-users-v2-sections table th:last-child,
#usr-users-v2-sections table td:last-child{
    width:95px;
    min-width:95px;
    text-align:right;
}

#usr-users-v2-sections .usr-status{
    white-space:nowrap !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

    #view-usuarios{
        width:calc(100vw - 20px) !important;

        margin-left:calc(50% - 50vw + 10px) !important;
        margin-right:calc(50% - 50vw + 10px) !important;
    }

    #view-usuarios .usr-card{
        padding-left:14px !important;
        padding-right:14px !important;
    }

}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width:760px){

    #view-usuarios{
        width:calc(100vw - 12px) !important;

        margin-left:calc(50% - 50vw + 6px) !important;
        margin-right:calc(50% - 50vw + 6px) !important;
    }

    #view-usuarios .module-head{
        padding-left:6px !important;
        padding-right:6px !important;
    }

    #view-usuarios .usr-card{
        padding:14px !important;
        border-radius:14px !important;
    }

    #view-usuarios .usr-card-head{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    #view-usuarios .usr-card-head .usr-btn{
        width:100% !important;
    }


    /* ----- TABLAS COMO FICHAS ----- */

    #usr-users-v2-sections .usr-table-wrap{
        overflow:visible !important;
    }

    #usr-users-v2-sections table,
    #usr-users-v2-sections tbody{
        display:block !important;
        width:100% !important;
    }

    #usr-users-v2-sections thead{
        display:none !important;
    }

    #usr-users-v2-sections tr{
        display:grid !important;
        grid-template-columns:1fr !important;

        width:100% !important;

        margin:0 0 12px !important;
        padding:12px !important;

        border:1px solid #e5e7eb !important;
        border-radius:12px !important;

        background:#fff !important;
        box-sizing:border-box !important;
    }

    #usr-users-v2-sections td{
        display:grid !important;
        grid-template-columns:105px minmax(0,1fr) !important;
        align-items:center !important;

        width:100% !important;
        min-width:0 !important;

        padding:7px 0 !important;
        border:0 !important;

        text-align:left !important;
        overflow-wrap:anywhere;
    }

    #usr-users-v2-sections td::before{
        color:#667085;
        font-size:11px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.03em;
    }


    /* ----- USUARIOS INTERNOS ----- */

    #usr-users-v2-sections
    > .usr-card:nth-child(1)
    td:nth-child(1)::before{
        content:"Usuario";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(1)
    td:nth-child(2)::before{
        content:"Rol";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(1)
    td:nth-child(3)::before{
        content:"Estado";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(1)
    td:nth-child(4)::before{
        content:"MFA";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(1)
    td:nth-child(5)::before{
        content:"Último acceso";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(1)
    td:nth-child(6)::before{
        content:"";
    }


    /* ----- COMERCIALES CRM ----- */

    #usr-users-v2-sections
    > .usr-card:nth-child(2)
    td:nth-child(1)::before{
        content:"Comercial";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(2)
    td:nth-child(2)::before{
        content:"Agente ERP";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(2)
    td:nth-child(3)::before{
        content:"Acceso";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(2)
    td:nth-child(4)::before{
        content:"Estado";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(2)
    td:nth-child(5)::before{
        content:"Último acceso";
    }

    #usr-users-v2-sections
    > .usr-card:nth-child(2)
    td:nth-child(6)::before{
        content:"";
    }

    #usr-users-v2-sections td:last-child{
        width:100% !important;
    }

    #usr-users-v2-sections td:last-child .usr-btn{
        width:100% !important;
        margin-top:4px;
    }

}


/* =========================================================
   MOVIL PEQUEÑO
   ========================================================= */

@media (max-width:480px){

    #usr-users-v2-sections td{
        grid-template-columns:1fr !important;
        gap:3px !important;
    }

    #usr-users-v2-sections td::before{
        display:block;
    }

}

/* MARBUENO · ELIMINAR COMERCIAL V1 */
#usr-users-v2-sections .usr-btn-danger{
    margin-left:6px;
    border:1px solid #fecaca !important;
    background:#fff !important;
    color:#b42318 !important;
}

#usr-users-v2-sections .usr-btn-danger:hover{
    background:#fef2f2 !important;
    border-color:#fca5a5 !important;
}

@media (max-width:760px){
    #usr-users-v2-sections .usr-btn-danger{
        margin-left:0 !important;
        margin-top:6px !important;
    }
}