/*=================================================
=            TABLAS ESRI
==================================================*/

/* Contenedor */
.tabla-responsive-esri{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border:1px solid #dee2e6;
    border-radius:12px;
    background:#fff;
}

/* Tabla */
.tabla-esri{
    width:100%;
    border-collapse:collapse;
    font-size:.95rem;
}

/*=========================================
=          ENCABEZADOS
=========================================*/

.tabla-esri thead th{
    background:#0A5C7D;
    color:#fff;
    font-weight:700;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    padding:16px 18px;
}

/*=========================================
=          CELDAS
=========================================*/

.tabla-esri td,
.tabla-esri th{
    padding:14px 18px;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
}

/*=========================================
=      PRIMERA COLUMNA (STICKY)
=========================================*/

.tabla-esri td:first-child,
.tabla-esri th:first-child{
    position:sticky;
    left:0;
    z-index:2;

    min-width:260px;

    background:#fff;
    text-align:left;
    font-weight:600;
    white-space:normal;

    box-shadow:2px 0 6px rgba(0,0,0,.08);
}

/* Encabezado de la primera columna */

.tabla-esri thead th:first-child{
    background:#0A5C7D;
    color:#fff;
    z-index:5;
}

/*=========================================
=          EFECTOS
=========================================*/

/* Zebra */

.tabla-esri tbody tr:nth-child(even){
    background:#F8FAFC;
}

/* Hover */

.tabla-esri tbody tr:hover td{
    background:#EAF6FB;
}

/*=========================================
=          ICONOS
=========================================*/

.tabla-esri i{
    font-size:1.3rem;
}

/*=========================================
=          BADGES
=========================================*/

.esri-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:25px;
    color:#fff;
    font-size:.85rem;
    font-weight:600;
    line-height:1;
}

.viewer{
    background:#6c757d;
}

.contributor{
    background:#00b4d8;
}

.mobile{
    background:#198754;
}

.creator{
    background:#0d6efd;
}

.professional{
    background:#ffc107;
    color:#212529;
}

.professional-plus{
    background:#dc3545;
}

/*=========================================
=    MENSAJE DESPLAZAMIENTO MÓVIL
=========================================*/

.tabla-scroll-info{
    display:none;
}

/*=================================================
=               RESPONSIVE
==================================================*/

@media (max-width:768px){

    /* Mensaje */

    .tabla-scroll-info{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;

        margin-bottom:12px;
        padding:10px 14px;

        border-radius:8px;

        background:#EAF6FB;
        color:#0A5C7D;

        font-size:.85rem;
        font-weight:600;
    }

    .tabla-scroll-info i{
        font-size:1rem;
    }

    /* Tabla */

    .tabla-esri{
        width:max-content;
        min-width:1100px;
        font-size:13px;
    }

    .tabla-esri th,
    .tabla-esri td{
        padding:10px;
    }

    /* Primera columna */

    .tabla-esri td:first-child,
    .tabla-esri th:first-child{

        min-width:160px;
        max-width:160px;

        padding:10px 8px;

        font-size:12px;
        line-height:1.35;

        white-space:normal;
        word-break:break-word;
        hyphens:auto;
    }

    /* Iconos */

    .tabla-esri i{
        font-size:1.1rem;
    }

    /* Badges */

    .esri-badge{
        font-size:.72rem;
        padding:4px 8px;
    }

}