/* Estilos base */
.mra-table-referidos {
  width: 100%;
  border-collapse: collapse;
}
.mra-table-referidos th {
  background-color: rgb(152, 214, 44);
  font-weight: bold;
}
.mra-table-referidos td {
  border: 1px solid #ddd;
  padding: 0.75em;
  text-align: left;
}

/* Solo en pantallas pequeñas, sin scroll: */
@media (max-width: 600px) {
  .mra-table-referidos thead {
    display: none; /* Oculta la cabecera */
  }
  .mra-table-referidos,
  .mra-table-referidos tbody,
  .mra-table-referidos tr,
  .mra-table-referidos td {
    display: block;
    width: 100%;
  }
  .mra-table-referidos tr {
    margin-bottom: 1em;
    border: 1px solid #ccc;
    padding: 0.5em;
  }
  .mra-table-referidos td {
    /* Cada celda es una línea con etiqueta y valor */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align: right;
  }
  .mra-table-referidos td:last-child {
    border-bottom: none;
  }
  .mra-table-referidos td::before {
    /* Muestra la etiqueta tomada de data-label */
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 0.75em;
    font-weight: bold;
    text-align: left;
  }
}