.tabla :is(.body td, .head th){ 
        padding: 4px 4px;
  }
.tabla thead th{ 
        background: #003366;
        color:white;
    }
.tabla tbody td{ 
        background: #d3d3d373;
        color:#003366;
    }
.contTabla .navTabla{
        display: none
    }
@media (max-width: 1200 px){
    .contTabla .botUp, .contTabla .botDn{
        display: block;
        height: 0;
        width: 0;
        margin: 0 auto;
        border: 20px solid transparent;
        border-top: 0;
        border-bottom: 0;
        pointer-events:all;
    }
    .contTabla .botUp{
        border-bottom: 20px solid black; 
    }
    .contTabla .botDn{
        border-top: 20px solid black; 
    }
    .contTabla .tabla{
        display: flex;
        gap: 2px;
        justify-content: space-between;
        overflow:hidden;
        background:#f9f2fc;
   }
    .contTabla .tabla .head{
        display: block;
        flex: 1 0;
        height: fit-content;
    }
    .contTabla .tabla .body{
        flex: 2 0 auto;
        overflow-y: hidden;
        scroll-snap-type: y mandatory;
    } 
    .contTabla .tabla  .head tr{
        display: flex;
        flex-direction: column;
        row-gap: 2px;
        flex: 1 0 100%;
    }
    .contTabla .tabla .body tr{
        display: flex;
        flex-direction: column;
        row-gap: 2px;
        flex: 1 0 100%;
       scroll-snap-align: start;
    }
    .contTabla .tabla .body tr:nth-child(odd){
       background:#f4fff5
    }
    .contTabla .tabla :is(th, td){
      display: block;
    }
    }