/* Contenedor y tipografía */
#igarawind-app, .igw-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:#111827; }

/* Cabeceras y secciones */
.igw-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.igw-title { font-size:1.25rem; margin:0; }
.igw-subtitle { font-size:1rem; margin:.5rem 0 .25rem; color:#374151; }
.igw-section { margin: 1rem 0; }

/* Botones */
.igw-btn { border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:.35rem .6rem; cursor:pointer; }

/* Tarjetas y grids */
.igw-card { border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:12px; }
.igw-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.igw-chart { min-height: 340px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }

@media (max-width: 960px) {
  .igw-grid-2 { grid-template-columns: 1fr; }
}

/* Tipos de dato */
.igw-k { font-size:.8rem; color:#6b7280; }
.igw-v { font-weight:600; font-size:1.1rem; }

/* Estado */
.igw-muted { opacity:.7; font-size:.9rem; }

/* grid 1/3 – 2/3 */
.igw-grid-13-23 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: stretch;
}
.igw-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  min-height: 720px; /* 2 charts de 360px */
}
.igw-chart { min-height: 360px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }

/* misma separación izquierda para ambos charts (eje Y alineado): */
.igw-chart .highcharts-container { margin-left: 0 !important; }

/* responsive */
@media (max-width: 960px) {
  .igw-grid-13-23 { grid-template-columns: 1fr; }
  .igw-stack { grid-template-rows: auto; }
}

/* Grid header: mapa + widgets */
.igw-header {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 2fr; /* 1/3 – 2/3 */
  align-items: stretch;
}
@media (max-width: 900px) {
  .igw-header { grid-template-columns: 1fr; }
}

/* Rejilla de 4 columnas: 3 estrechas + 1 ancha (Viento) */
.igw-latest-grid{
  display:grid;
  grid-template-columns: .8fr .8fr .8fr 1.6fr; /* ← más sitio para Viento */
  gap: 12px;
  align-items: start;
}

/* En pantallas medianas, 2 columnas */
@media (max-width: 1100px){
  .igw-latest-grid{ grid-template-columns: 1fr 1fr; }
  .igw-latest-wind{ grid-column: 1 / -1; } /* viento ocupa el ancho completo */
}

/* En móvil, 1 columna */
@media (max-width: 640px){
  .igw-latest-grid{ grid-template-columns: 1fr; }
}

/* Opcional: compactar texto de las 3 primeras celdas */
.igw-latest-grid .igw-k{ font-size: 12px; margin-bottom: 2px; }
.igw-latest-grid .igw-v{ line-height: 1.2; }

.igw-map { min-height: 320px; border-radius: 12px; overflow: hidden; }
.igw-widgets { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .igw-widgets { grid-template-columns: 1fr; } }

/* Tarjeta de widget */
.igw-card {
  background: #fff; border-radius: 12px; padding: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Tipografía simple para widgets */
.igw-widget-title { margin: 0 0 6px; font-weight: 600; }
.igw-widget-sub { color:#666; margin:0; font-size: 12px; }
.igw-kpi { font-size: 22px; font-weight: 600; }
.igw-kpi small { font-weight: 500; color:#444; }

/* Widget de viento: flecha direccional */

/* Fila interna del widget de viento */
.igw-wind-row{
  display:flex;
  align-items:center;      /* centra verticalmente texto + flecha */
  gap:12px;
  min-height:80px;         /* igual a la altura de .igw-windbarb */
}

/* Texto del viento: que pueda encoger sin tirar del contenedor */
.igw-wind-text{ min-width:0; }

/* Flecha: ancho fijo y a la derecha */
.igw-windbarb{
  flex:0 0 80px;           /* mismo alto que min-height arriba */
  width:80px; height:80px;
  margin-left:auto;        /* pegada a la derecha */
  position:relative;
  transition: transform .2s ease-out, opacity .2s ease-out;
}

/* mástil, punta y plumas (lo que ya tenías) */
.igw-windbarb .shaft{
  position:absolute; left:50%; top:50%;
  width:3px; height:56px; background:#000;
  transform:translate(-50%,-50%);
}
.igw-windbarb .tip{
  position:absolute; left:50%; top:8%;
  width:0; height:0; transform:translateX(-50%);
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:18px solid #000;
  z-index: 2;
}
.igw-windbarb .feather{
  position:absolute; left:calc(50% + 2px);
  height:0; border-top:3px solid #000;
  transform-origin:left center; transform:rotate(0deg);
  z-index: 1;
}
.igw-windbarb .feather.long{ width:14px; }
.igw-windbarb .feather.half{ width:7px; }

/* (opcional) en móviles reducir un poco */
@media (max-width: 640px){
  .igw-wind-row{ min-height:64px; }
  .igw-windbarb{ flex-basis:64px; width:64px; height:64px; }
}

/* --- Layout ACTUAL (últ. 12h) --- */
.igw-current-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 2fr; /* 1/3 rosa | 2/3 gráficos */
  grid-template-rows: auto auto;
}

.igw-current-grid .igw-rose {
  grid-row: 1 / span 2;   /* rosa ocupa toda la columna izquierda */
}

.igw-current-grid .igw-wind {
  grid-column: 2;
  grid-row: 1;
}

.igw-current-grid .igw-thermo {
  grid-column: 2;
  grid-row: 2;
}

/* --- Layout HISTÓRICO --- */
.igw-history-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr; /* 2 columnas */
  grid-auto-rows: auto;
}

.igw-history-grid .igw-rose-h,
.igw-history-grid .igw-wind-h,
.igw-history-grid .igw-thermo-h,
.igw-history-grid .igw-weibull {
  min-height: 300px; /* da aire a los charts */
}

/* Responsive: en móvil una sola columna */
@media (max-width: 900px) {
  .igw-current-grid { grid-template-columns: 1fr; }
  .igw-current-grid .igw-rose { grid-row:auto; grid-column:auto; }
  .igw-history-grid { grid-template-columns: 1fr; }
}

/* Aumentamos especificidad para ganar a estilos del tema */
.igw-root .igw-panel { display: none; }
.igw-root .igw-panel.is-active { display: block; }

.igw-root .igw-tabs { display:flex; gap:2px; border-bottom:2px solid #ddd; margin:12px 0; }
.igw-root .igw-tab { background:transparent; border:none; padding:8px 16px; font-weight:600; cursor:pointer; border-bottom:3px solid transparent; }
.igw-root .igw-tab.is-active { border-color:#0073aa; color:#0073aa; }

.igw-history-top.is-loading { opacity:.6; pointer-events:none; }
.igw-history-controls .igw-range{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Overlay de carga para la tarjeta superior del histórico */
.igw-history-top { position: relative; }
.igw-spinner{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  gap:10px; background:rgba(255,255,255,0.6);
  z-index: 10;
}
.igw-spin{
  width:20px; height:20px; border-radius:50%;
  border:3px solid rgba(0,115,170,.25);
  border-top-color:#0073aa;              /* azul WP */
  animation: igw-rot 0.9s linear infinite;
}
.igw-spin-text{ color:#0073aa; font-weight:600; }
@keyframes igw-rot { to { transform: rotate(360deg); } }