:root{
  --pleamar:#0d6efd;
  --bajamar:#fd7e14;
  --card-bg: rgba(100,170,210,0.22);
  --card-bg-strong: rgba(100,170,210,0.30);
  --muted: #5b6b75;
  --accent-dark: #083047;
}

/* --------- Base --------- */
*{box-sizing:border-box}
body {
  background:#fff;
  color:#222;
  font-family:"Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
  padding:0;
}
.container { max-width:1100px; margin:0 auto; padding: 18px; }
.brand-logo { display:block; margin: 0 auto 8px; max-width:220px; }
.station-panel { text-align:center; margin-bottom:16px; }
.station-select select { width:100%; max-width:540px; margin:0 auto; }

/* --------- Layout (principal) ---------
   Se espera un contenedor padre con clase .main-row o .content-row que tenga
   dentro #daysAside (aside) y #detailWrapper (detalle). Si no existe, las reglas
   siguen siendo seguras.
*/
.main-row, .content-row {
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
}

/* Aside (menú de días) */
#daysAside {
  width: 320px;                 /* ancho por defecto en desktop */
  min-width: 240px;
  flex: 0 0 320px;
  display:block;
  align-self:flex-start;
}

/* Wrapper del detalle ocupa el resto */
#detailWrapper { flex: 1 1 0; }

/* MobileStack (legacy) oculto por defecto — usamos detail-card en móvil también */
#mobileStack { display:none !important; }

/* --------- Cards --------- */
.detail-card {
  background: var(--card-bg);
  border-radius:12px;
  padding:16px;
  border:1px solid rgba(0,0,0,0.03);
  overflow:visible;
}
.mobile-card {
  background: var(--card-bg);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
  border:1px solid rgba(0,0,0,0.03);
}
.aside-card {
  background:#fff;
  border-radius:8px;
  padding:12px;
  margin-bottom:12px;
  cursor:pointer;
  border:1px solid rgba(14,40,50,0.05);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.aside-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(11,35,55,0.04); }
.aside-card.active {
  background: var(--card-bg-strong);
  border-color: rgba(11,59,87,0.12);
  box-shadow: none;
}

/* Estructura interna aside: fecha + temp, luego viento */
.aside-card .aside-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.aside-card .aside-date { font-weight:600; color:var(--accent-dark); }
.aside-card .aside-temp { font-weight:700; color:var(--accent-dark); }
.aside-card .aside-wind { margin-top:8px; color: #4a656f; font-size:0.95rem; }

/* --------- Eventos (filas) --------- */
.event-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.04);
  margin-bottom:10px;
}
.event-left { display:flex; align-items:center; gap:12px; }
.event-type {
  font-weight:800;
  color:#fff;
  padding:.35rem .6rem;
  border-radius:.45rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.9rem;
  white-space:nowrap;
}
.event-type.pleamar { background:var(--pleamar); }
.event-type.bajamar { background:var(--bajamar); }
.event-time { font-weight:700; font-size:1.05rem; white-space:nowrap; }
.event-height { color:#495057; font-weight:700; }

/* Center messages / alerts */
.center-message { max-width:900px; margin:18px auto; padding:14px 18px; border-radius:10px; text-align:center; }

/* Loader overlay */
.loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}
.loader-overlay .spinner-border { width: 2.2rem; height: 2.2rem; }

/* --------- Detail header (fecha + clima) --------- */
/* Un único estilo consolidado: fecha centrada y clima debajo, mismo look en mobile/desktop */
.detail-header {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding: 18px;
  box-sizing:border-box;
}
.detail-header .day-title {
  width:100%;
  text-align:center;
  font-size:1.35rem;
  font-weight:800;
  color:var(--accent-dark);
  margin:0;
  padding:6px 0;
  letter-spacing: .1px;
}
.detail-header .day-climate {
  width:100%;
  text-align:center;
  font-size:0.95rem;
  color:var(--muted);
  line-height:1.25;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding-bottom:6px;
}

/* Bloque de clima: temperatura grande, descripción, viento */
.climate-block { display:flex; flex-direction:column; align-items:center; gap:6px; }
.climate-temp { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:var(--accent-dark); }
.climate-emoji { font-size:1.2rem; }
.climate-temp-val { font-size:1.25rem; font-weight:800; color:var(--accent-dark); }
.climate-desc { color:#37545a; font-size:0.95rem; text-align:center; }
.climate-wind { color:#4a656f; font-size:0.95rem; }

/* Margin between header and events */
#detailEvents { margin-top:14px; }

/* --------- Footer --------- */
footer {
  margin-top: 26px;
  text-align: center;
  color: #6c757d;
  font-size: 0.95rem;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
footer img, footer strong { vertical-align: middle; }

/* --------- Responsive: mobile behavior --------- */
/* Mobile breakpoint: apilamos aside encima del detalle, aside visible y full-width */
@media (max-width: 991.98px) {
  .main-row, .content-row, .layout-row {
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    align-items:stretch !important;
  }

  /* Aside: visible y full width */
  #daysAside {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    position:relative !important;
    z-index:5 !important;
    flex: 0 0 auto;
  }

  /* Detail below aside */
  #detailWrapper, .detail-card {
    width:100% !important;
    order:1;
  }

  /* force mobileStack hidden */
  #mobileStack { display:none !important; }

  /* adjust aside-card spacing for small screens */
  .aside-card { margin-bottom:10px; }
  .detail-card { width:100%; padding-left:14px; padding-right:14px; }

  /* reduce gaps for very small widths */
  @media (max-width: 420px) {
    .container { padding-left: 10px; padding-right: 10px; }
    .event-row { padding:8px; gap:8px; }
  }
}

/* Desktop refinements */
@media (min-width: 992px) {
  .main-row { align-items:flex-start; }
  .detail-header { padding: 20px; }
  .detail-header .day-title { font-size:1.5rem; }
}

/* small tidy for event rows (ensures spacing consistent) */
.event-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border-bottom:none; }
.event-type { white-space:nowrap; padding:6px 10px; border-radius:8px; color:#fff; font-weight:700; }
.event-type.pleamar { background:var(--pleamar); }
.event-type.bajamar { background:var(--bajamar); }
.event-time { font-weight:700; font-size:1.05rem; white-space:nowrap; }
.event-height { font-weight:700; color:var(--accent-dark); }

/* --- OVERRIDE: asegurar que #daysAside y ancestros no se recorten en mobile --- */
#daysAside,
#daysAside * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  transform: none !important;
  position: relative !important;
}

/* Si algún ancestor aplica overflow:hidden o height fijo lo anulamos con mayor especificidad */
.main-row, .content-row, .layout-row, #daysAside, #detailWrapper, body, html {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Mantener las cards visibles */
#daysAside .aside-card { display:block !important; opacity:1 !important; visibility:visible !important; }

/* Ensure aside is first in mobile and visible */
#daysAside { order: 0 !important; z-index: 9999 !important; }
#detailWrapper { order: 1 !important; }

/* Small spacing to ensure aside cards are visible and separated */
@media (max-width: 991.98px) {
  #daysAside { margin-bottom: 12px !important; }
  #daysAside .aside-card { margin-bottom: 10px !important; }
}

/* --- Sidebar: día arriba (negrita) + viento abajo + temp a la derecha --- */
.aside-card .aside-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aside-card .aside-date { font-weight: 700; color: var(--accent-dark); font-size: 0.95rem; }
.aside-card .aside-temp { font-weight: 700; color: var(--accent-dark); font-size: 0.95rem; text-align: right; }
.aside-card .aside-wind { margin-top: 6px; color: var(--muted); font-size: 0.92rem; }

/* highlight active aside */
.aside-card.active { background: var(--card-bg-strong); border-color: rgba(11,59,87,0.12); }

/* small spacing */
#daysAside { display: block; }
#daysAside .aside-card { margin-bottom: 10px; padding: 12px; box-sizing: border-box; }