table
  *
    line-height: $heading-line-height
  caption
    margin-top: 5px
    color: $color-tipografia
    font-size: 0.8em
    background-color: $color-sistema-f
    padding: $base-spacing /2 $base-spacing
    font-weight: $base-bold-font-weight
  
.tabla-a
  overflow-x: auto
  table
    min-width: 700px
  thead
    border-top: 5px solid
    color: $table-header-color
    background-color: $table-header-bg-color

  th
    border-color: $table-header-bg-color
    font-weight: $base-bold-font-weight
    text-align: center
    font-size: $h4-font-size

  tbody

  &.color-primario
    thead
      border-color: $color-primario
  &.color-secundario
    thead
      border-color: $color-secundario
  &.color-acento-contenido
    thead
      border-color: $color-acento-contenido
  &.color-acento-botones
    thead
      border-color: $color-acento-botones

  

.tabla-b
  overflow-x: auto
  &__header
    background-color: $color-acento-contenido
    padding: 15px
    text-align: center
    position: sticky
    left: 0
    *
      color: $white
  
  table
    table-layout: auto
    min-width: 700px
  tr
    &:nth-child(even)
      background-color: transparentize($color-sistema-f, 0.6)

  td, th
    border: none
    padding: 20px 40px

  th
    width: 200px
    border-right: $base-border

  &.color-primario
    .tabla-b__header
      background-color: $color-primario
      *
        color: textColor($color-primario)
  &.color-secundario
    .tabla-b__header
      background-color: $color-secundario
      *
        color: textColor($color-secundario)
  &.color-acento-contenido
    .tabla-b__header
      background-color: $color-acento-contenido
      *
        color: textColor($color-acento-contenido)
  &.color-acento-botones
    .tabla-b__header
      background-color: $color-acento-botones
      *
        color: textColor($color-acento-botones)

.tabla-c
  @extend .tabla-b
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25)
  table
    // table-layout: auto
    border-radius: 10px
    border-collapse: collapse;

  caption
    border-radius: 0

  td, th
    border: none
    padding: 20px
    
  th
    width: 16%

    & + td
      width: 36%

  td
    width: 16%

    &:first-child
      width: 36%