/* ================================
   HISTORY (tabla de históricos)
   ================================ */

/* Variables seguras para ambos temas */
:root{
  --hist-card-radius: 18px;
  --hist-th-weight: 600;
  --hist-cell-px: 14px;
  --hist-cell-py: 12px;
  --hist-row-gap: 8px;

  /* Valores por defecto (oscuro) basados en transparencias,
     así no dependemos de variables del proyecto y no se “rompe”
     en claro. */
  --hist-border: rgba(255,255,255,.08);
  --hist-th-bg: rgba(255,255,255,.06);
  --hist-row-alt: rgba(255,255,255,.04);
  --hist-row-hover: rgba(255,255,255,.08);
  --hist-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Forzamos override en tema claro (vía data-theme o clase del body/html) */
html[data-theme="light"],
body[data-theme="light"],
.theme-light{
  --hist-border: rgba(0,0,0,.08);
  --hist-th-bg: rgba(0,0,0,.04);
  --hist-row-alt: rgba(0,0,0,.03);
  --hist-row-hover: rgba(0,0,0,.06);
  --hist-shadow: 0 10px 30px rgba(0,0,0,.1);
}

/* Soporte automático si alguien usa prefers-color-scheme */
@media (prefers-color-scheme: light){
  :root:not([data-theme]):not(.theme-dark){
    --hist-border: rgba(0,0,0,.08);
    --hist-th-bg: rgba(0,0,0,.04);
    --hist-row-alt: rgba(0,0,0,.03);
    --hist-row-hover: rgba(0,0,0,.06);
    --hist-shadow: 0 10px 30px rgba(0,0,0,.1);
  }
}

/* Contenedor principal */
#hist-output.card{
  border-radius: var(--hist-card-radius);
  box-shadow: var(--hist-shadow);
  overflow: hidden;
  border: 1px solid var(--hist-border);
  background: transparent;
}

/* Skeleton */
#hist-skel{
  padding: 16px;
  font-size: .95rem;
  opacity: .8;
}

/* Wrapper con scroll horizontal en móvil */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 840px; /* evita colapso en pantallas muy estrechas */
}

.table-wrap thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--hist-th-bg);
  backdrop-filter: saturate(140%) blur(6px);
  font-weight: var(--hist-th-weight);
  text-align: center;
  padding: calc(var(--hist-cell-py) + 2px) var(--hist-cell-px);
  white-space: nowrap;
  border-bottom: 1px solid var(--hist-border);
}

/* Iconos en cabeceras por posición (no dependemos del texto) */
.table-wrap thead th:nth-child(1)::before{content:"📅"; margin-right:.45rem;}
.table-wrap thead th:nth-child(2)::before{content:"🌡️"; margin-right:.35rem;}
.table-wrap thead th:nth-child(3)::before{content:"🌡️"; margin-right:.35rem;}
.table-wrap thead th:nth-child(4)::before{content:"💧"; margin-right:.35rem;}
.table-wrap thead th:nth-child(5)::before{content:"💧"; margin-right:.35rem;}
.table-wrap thead th:nth-child(6)::before{content:"🌬️"; margin-right:.35rem;}
.table-wrap thead th:nth-child(7)::before{content:"🔼"; margin-right:.35rem;}
.table-wrap thead th:nth-child(8)::before{content:"🔽"; margin-right:.35rem;}
.table-wrap thead th:nth-child(9)::before{content:"☀️"; margin-right:.35rem;}
.table-wrap thead th:nth-child(10)::before{content:"🟣"; margin-right:.35rem;}
.table-wrap thead th:nth-child(11)::before{content:"🌧️"; margin-right:.35rem;}

/* Celdas */
.table-wrap td{
  padding: var(--hist-cell-py) var(--hist-cell-px);
  border-bottom: 1px solid var(--hist-border);
  text-align: center;              /* centrado para todos */
  vertical-align: middle;
  white-space: nowrap;
}

/* La primera columna (DÍA) queda alineada a la izquierda para mejor lectura */
.table-wrap td:first-child,
.table-wrap thead th:first-child{
  text-align: left;
}

/* Rayado */
.table-wrap tbody tr:nth-child(even) td{
  background: var(--hist-row-alt);
}

/* Hover */
.table-wrap tbody tr:hover td{
  background: var(--hist-row-hover);
}

/* Redondeos ópticos del primer/último row si no hay scroll */
.table-wrap tbody tr:first-child td:first-child{ border-top-left-radius: calc(var(--hist-card-radius) - 2px); }
.table-wrap tbody tr:first-child td:last-child{ border-top-right-radius: calc(var(--hist-card-radius) - 2px); }
.table-wrap tbody tr:last-child  td:first-child{ border-bottom-left-radius: calc(var(--hist-card-radius) - 2px); }
.table-wrap tbody tr:last-child  td:last-child{ border-bottom-right-radius: calc(var(--hist-card-radius) - 2px); }

/* Ajuste tipográfico para números (quedan más pulcros centrados) */
.table-wrap td{
  font-variant-numeric: tabular-nums;
}

/* Controles y nav */
#hist-nav{
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
}

.controls{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.controls .ctrl{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.controls .lbl{ opacity: .8; font-size: .95rem; }

/* Botones seleccionados */
#hist-nav .btn.active{
  transform: translateY(-1px);
}

/* Responsivo */
@media (max-width: 920px){
  .table-wrap table{
    min-width: 760px;
  }
}

@media (max-width: 600px){
  .table-wrap table{
    min-width: 720px;
  }
  .table-wrap td,
  .table-wrap thead th{
    padding: 10px 12px;
  }
}

/* PDF: cuando abrimos la ventana de impresión */
@media print{
  #site-header, #site-footer, #hist-nav, .controls{ display: none !important; }
  #history{ padding: 0 !important; }
  #hist-output.card{ border: 0; box-shadow: none; }
  .table-wrap thead th{ position: static; backdrop-filter: none; }
}