/* ================================
   FORECAST PAGE (detalle semanal)
   Aislado: no toca forecast.css
   ================================ */

:root{
  --fc-gap: 14px;
  --fc-card-radius: 18px;
  --fc-shadow: 0 10px 30px rgba(0,0,0,.22);

  /* por defecto (oscuro) */
  --fc-border: rgba(255,255,255,.08);
  --fc-row-alt: rgba(255,255,255,.04);
  --fc-chip: rgba(255,255,255,.08);
  --fc-chip-text: #fff;
  --fc-bar-bg: rgba(255,255,255,.06);
  --fc-bar-fill: #60a5fa; /* azul suave */
}

html[data-theme="light"],
body[data-theme="light"],
.theme-light{
  --fc-border: rgba(0,0,0,.08);
  --fc-row-alt: rgba(0,0,0,.03);
  --fc-chip: rgba(0,0,0,.06);
  --fc-chip-text: #111;
  --fc-bar-bg: rgba(0,0,0,.05);
  --fc-bar-fill: #2563eb; /* azul algo más marcado */
}

.fc-topbar.card{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:16px; border:1px solid var(--fc-border);
  backdrop-filter:saturate(140%) blur(6px); box-shadow: var(--fc-shadow);
}

.fc-meta{display:flex; gap:14px; align-items:center; opacity:.9;}
.fc-actions .btn{min-width:44px;}

.fc-days-grid{
  margin-top: var(--fc-gap);
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--fc-gap);
}

.fc-day.card{
  border:1px solid var(--fc-border);
  border-radius: var(--fc-card-radius);
  padding:12px;
  text-align:center;
  box-shadow: var(--fc-shadow);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fc-day.card:hover{ transform: translateY(-2px); }
.fc-day.active{ outline: 2px solid var(--brand-primary, #38bdf8); }

.fc-day .date{ font-weight:600; margin-bottom:6px; }
.fc-day .temps{ display:flex; justify-content:center; gap:8px; margin-bottom:8px; }
.fc-day .tmax{ font-weight:700; }
.fc-day .tmin{ opacity:.8; }
.fc-day .icons{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.fc-chip{
  background: var(--fc-chip);
  color: var(--fc-chip-text);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .85rem;
}

.fc-detail.card{
  margin-top: var(--fc-gap);
  border:1px solid var(--fc-border);
  border-radius: var(--fc-card-radius);
  box-shadow: var(--fc-shadow);
  overflow:hidden;
}

.fc-detail-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--fc-border);
}
.fc-detail-temps{ display:flex; gap:10px; }
.fc-detail-temps .tmax{ font-weight:700; }
.fc-detail-temps .tmin{ opacity:.8; }

.fc-detail-body{
  display:grid; gap:16px; padding:16px;
  grid-template-columns: 1fr 1fr 1fr;
}

.fc-block h4{ margin:0 0 8px 0; font-size:1rem; opacity:.9; }

/* Barras de precipitación */
.fc-bars{ display:flex; flex-direction:column; gap:8px; }
.fc-bar{
  display:flex; align-items:center; gap:10px;
  background: var(--fc-row-alt);
  border-radius:12px; padding:8px 10px;
}
.fc-bar .label{ width:84px; font-variant-numeric: tabular-nums; }
.fc-bar .track{ flex:1; height:10px; background: var(--fc-bar-bg); border-radius:6px; overflow:hidden; }
.fc-bar .fill{ height:100%; width:0%; background: var(--fc-bar-fill); }

/* Listas (cielo / viento) – estilos base */
.fc-list{ display:flex; flex-direction:column; gap:8px; }
.fc-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; background: var(--fc-row-alt);
  border-radius:12px; padding:8px 10px;
}
.fc-item .label{ display:flex; gap:8px; align-items:center; }
.fc-item .desc{ opacity:.9; }

.fc-note{ margin-top:8px; }

/* Responsivo */
@media (max-width: 1200px){
  .fc-days-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 780px){
  .fc-days-grid{ grid-template-columns: repeat(3, 1fr); }
  .fc-detail-body{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .fc-days-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* === Alineado fino de la tarjeta de franjas (detalle diario) ========== */
/* (por si alguna vez se renderiza como tabla) */
#fc-detail table{
  width:100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#fc-detail thead th,
#fc-detail tbody td{
  padding: 8px 10px;
  vertical-align: middle;
  font-size: .95rem;
  line-height: 1.25;
  white-space: nowrap;
}
/* Anchos consistentes por columna: [Periodo] [Descripción] [Valor] */
#fc-detail thead th:nth-child(1),
#fc-detail tbody td:nth-child(1){ width: 84px; }
#fc-detail thead th:nth-child(2),
#fc-detail tbody td:nth-child(2){ width: auto; }
#fc-detail thead th:nth-child(3),
#fc-detail tbody td:nth-child(3){ width: 120px; }
#fc-detail tbody td:nth-child(3){
  font-variant-numeric: tabular-nums;
}
/* Iconos en línea alineados con el texto */
#fc-detail .fc-list .icon,
#fc-detail .fc-list .wind-icon{
  display:inline-block;
  transform: translateY(1px);
  margin-right: 6px;
}
@media (max-width: 860px){
  #fc-detail thead th:nth-child(1),
  #fc-detail tbody td:nth-child(1),
  #fc-detail thead th:nth-child(3),
  #fc-detail tbody td:nth-child(3){
    width:auto;
  }
  #fc-detail thead th,
  #fc-detail tbody td{
    white-space: normal;
  }
}

/* ====== Alineado columnas detalle diario (escritorio – listas) ====== */
/* Importante: NO tocar :root aquí. Limitamos variables al scope de #fc-detail */
@media (min-width: 980px){
  #fc-detail{
    --fc-col1: 84px;   /* Periodo: 00-24, 06-12... */
    --fc-col3: 132px;  /* Valor: 15%, "SO · 10 km/h"... */
    --fc-grid-gap : 10px;
  }

  /* Forzamos misma rejilla a las filas que pinta el JS */
  #fc-detail .fc-list .row,
  #fc-detail .fc-list .fc-item,
  #fc-detail .fc-list li,
  #fc-detail .fc-list div[data-row]{
    display: grid;
    grid-template-columns: var(--fc-col1) 1fr var(--fc-col3);
    align-items: center;
    gap: var(--fc-grid-gap);
    padding: 6px 8px;
  }

  /* Columna 1: periodo */
  #fc-detail .fc-list .row > *:nth-child(1),
  #fc-detail .fc-list .fc-item > *:nth-child(1),
  #fc-detail .fc-list li   > *:nth-child(1),
  #fc-detail .fc-list div[data-row] > *:nth-child(1){
    white-space: nowrap;
    opacity: .85;
    font-variant-numeric: tabular-nums;
  }

  /* Columna 3: valor */
  #fc-detail .fc-list .row > *:nth-child(3),
  #fc-detail .fc-list .fc-item > *:nth-child(3),
  #fc-detail .fc-list li   > *:nth-child(3),
  #fc-detail .fc-list div[data-row] > *:nth-child(3){
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: left; /* cambia a right/center si lo prefieres */
  }

  /* Separador “·” delante de la descripción (columna 2) */
  #fc-detail .fc-list .row > *:nth-child(2)::before,
  #fc-detail .fc-list .fc-item > *:nth-child(2)::before,
  #fc-detail .fc-list li   > *:nth-child(2)::before,
  #fc-detail .fc-list div[data-row] > *:nth-child(2)::before{
    content:"·";
    opacity:.45;
    margin-right: .45rem;
  }
}

/* En móvil, las filas vuelven a flujo flexible */
@media (max-width: 979px){
  #fc-detail .fc-list .row,
  #fc-detail .fc-list .fc-item,
  #fc-detail .fc-list li,
  #fc-detail .fc-list div[data-row]{
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
  }
}