/*--- contenidor responsive ---*/

.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
/*--- taula ---*/

.table{

    /* width:100%; */
    margin:1rem auto;
    border-collapse:collapse;
    border: 1px solid #000000;
    font-size:0.95rem;
    line-height:1.5;
}

/*--- llegenda ---*/

.table caption{

    text-align:left;
    font-weight:700;
    padding:.75rem;
}

/*--- CELDAS ---*/

.table th,
.table td{

    padding:.75rem 1rem;
    border: 1px solid #000000;
    vertical-align:middle;
}

/*--- capçalera ---*/

.table thead th{

    background:var(--color-verd);
    font-weight:700;
    text-align:left;
}

/*--- files ---*/

.table tbody tr:nth-child(even){
    background:#ffffff;
}

.table tbody tr:nth-child(odd){
    background: #eef3f8;
}

.table tbody tr:hover{
    background:lightblue;
}

/*--- utilitats ---*/
/*--- per alinear columnes especials ---*/

.table .text-center{
    text-align:center !important;
}

.table .text-right{
    text-align:right !important;
    white-space:nowrap;
}

.table .text-left{
    text-align:left !important;
}

/*--- exemple 
    <table class="table table-numeric">

    la primera columna (descripciones) quedará alineada 
    a la izquierda y todas las columnas numéricas se 
    alinearán automáticamente a la derecha, mejorando 
    mucho la legibilidad de importes y porcentajes.
        ---*/

.table.table-numeric th:not(:first-child),
.table.table-numeric td:not(:first-child){
    text-align:right;
    white-space:nowrap;
}

/*--- mòbil ---*/

@media (max-width:768px){

    .table{
        font-size:.90rem;
    }

    .table th,
    .table td{
        padding:.60rem .75rem;
    }
}