table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
}

thead {
  background: #dbe6ed;
}

th,
td {
  padding: 13px 16px;
  text-align: right;
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}

th {
  color: var(--color-azul);
  font-size: 0.86rem;
  font-weight: 700;
}

td {
  font-size: 0.95rem;
}

th:first-child,
td:first-child {
  text-align: left;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: #f8fafb;
}

@media (max-width: 700px) {
  .pagina {
    overflow-x: hidden;
  }

  table {
    font-size: 0.9rem;
  }

  th,
  td {
    padding: 11px 12px;
  }
}

.tabla-contenedor {
  width: 100%;
}

.tabla-orden {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  cursor: pointer;
}

.tabla-orden:hover {
  color: var(--color-turquesa);
}

.tabla-ver-mas {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--color-borde);
  border-radius: 0 0 7px 7px;
  background: #f8fafb;
  color: var(--color-azul);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.tabla-ver-mas:hover {
  background: #eef3f6;
  color: var(--color-azul);
}

table {
  table-layout: fixed;
}

.tabla-orden {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

th:first-child .tabla-orden {
  justify-content: flex-start;
}

.tabla-indicador {
  display: inline-block;
  width: 14px;
  flex: 0 0 14px;
  text-align: center;
  color: var(--color-texto-suave);
  font-size: 0.75rem;
}

.tabla-titulo-movil { display: none; }

@media (max-width: 700px) {
  .tabla-titulo-escritorio { display: none; }
  .tabla-titulo-movil { display: inline; }
  th:first-child, td:first-child { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 700px) {
  th, td { padding: 10px 4px; }
  th { font-size: 0.72rem; }
  td { font-size: 0.82rem; }
  th:first-child, td:first-child { width: 28%; padding-left: 8px; padding-right: 4px; }
  .tabla-indicador { width: 9px; flex-basis: 9px; font-size: 0.62rem; }
  .tabla-orden { gap: 2px; }
}

@media (max-width: 700px) {
  th { white-space: normal; }
  .tabla-orden { white-space: normal; line-height: 1.15; }
  .tabla-titulo-movil { white-space: normal; overflow-wrap: normal; }
}

/* Estilo común de todas las tablas */
th:not(:last-child),
td:not(:last-child) {
  border-right: 1px solid var(--color-borde);
}

tbody tr:nth-child(odd) {
  background: var(--color-superficie);
}

tbody tr:nth-child(even) {
  background: #f4f7f9;
}

tbody tr:hover {
  background: #dbe6ed;
}

@media (min-width: 701px) {
  th:not(:first-child),
  td:not(:first-child) {
    text-align: center;
  }

  th:not(:first-child) .tabla-orden {
    justify-content: center;
  }
}

/* Unidades y valores específicos para móvil */
.tabla-valor-movil { display: none; }
.tabla-unidad-movil { display: none; }

@media (max-width: 700px) {
  .tabla-valor-escritorio { display: none; }
  .tabla-valor-movil { display: inline; }
  .tabla-titulo-movil { display: flex; flex-direction: column; align-items: inherit; }
  .tabla-unidad-movil { display: block; margin-top: 2px; font-size: 0.78em; font-weight: 500; line-height: 1; }
}

/* Jerarquía visual común de tablas */
thead th:not(:last-child) { border-right-color: #b7c7d1; }
tbody td:first-child { font-weight: 600; color: var(--color-azul); }

/* Datos de tabla: texto neutro */
tbody td { color: var(--color-texto); }
tbody td:first-child { font-weight: 600; }

/* Color definitivo de los datos de tabla */
tbody td, tbody td:first-child { color: #1f2933; }

/* ============================================================
   Familias visuales de variables meteorológicas
   ============================================================ */

/* Tª actual — ocre */
thead th.tabla-familia-temperatura-actual {
  background: #eadfbd;
}

tbody tr:nth-child(even) td.tabla-familia-temperatura-actual {
  background: #faf7ee;
}

/* Tª máxima — rojo */
thead th.tabla-familia-temperatura-maxima {
  background: #efd2d2;
}

tbody tr:nth-child(even) td.tabla-familia-temperatura-maxima {
  background: #fcf5f5;
}

/* Tª mínima — azul */
thead th.tabla-familia-temperatura-minima {
  background: #d5e3ef;
}

tbody tr:nth-child(even) td.tabla-familia-temperatura-minima {
  background: #f4f8fb;
}

/* Precipitación — verde */
thead th.tabla-familia-precipitacion {
  background: #d6e7d8;
}

tbody tr:nth-child(even) td.tabla-familia-precipitacion {
  background: #f4f9f4;
}

/* El color identifica el fondo, nunca el texto */
th[class*="tabla-familia-"],
td[class*="tabla-familia-"] {
  color: #1f2933;
}

th[class*="tabla-familia-"] .tabla-orden {
  color: #1f2933;
  font-weight: 700;
}

/* Localidad — neutro */
thead th.tabla-familia-localidad {
  background: #dbe6ed;
}

tbody tr:nth-child(even) td.tabla-familia-localidad {
  background: #f4f7f9;
}

tbody td.tabla-familia-localidad {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Pie integrado para desplegar el listado completo */
table:has(+ .tabla-ver-mas) {
  border-radius: var(--radio) var(--radio) 0 0;
}

table + .tabla-ver-mas {
  margin-top: -1px;
  border: 1px solid var(--color-borde);
  border-top: 1px solid var(--color-borde);
  border-radius: 0 0 var(--radio) var(--radio);
}

/* Viento / rachas — violeta */
thead th.tabla-familia-viento {
  background: #e2dced;
}

tbody tr:nth-child(even) td.tabla-familia-viento {
  background: #f7f4fa;
}

/* Episodio de precipitación — azul oscuro */
thead th.tabla-familia-episodio {
  background: #cbd9e6;
}

tbody tr:nth-child(even) td.tabla-familia-episodio {
  background: #f1f5f8;
}

/* Dato secundario dentro de una celda */
.tabla-secundario {
  display: inline-block;
  margin-top: 3px;
  color: #6b7785;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}