/* Moved from index.html: header and control-related small styles */
/* Header/nav buttons: align icon + text vertically */
header nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
/* Ensure the emoji/icon inside debug button is baseline-aligned and not taller */
#toggleDebug .debug-ico,
#toggleConfig .config-ico,
#toggleHelp .help-text {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(0);
  font-size: 1em;
}
#toggleDebug .debug-text,
#toggleConfig .config-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Subtítulo visible solo en pantallas grandes */
.subtitle {
  font-size: 0.6em;
  color: #ddd; /* más discreto */
  margin-left: 0.3em;
}

@media (max-width: 700px) {
  .subtitle {
    display: none; /* ocultar en móviles */
  }
}

/* Debug button hide utility class */
#toggleDebug.debug-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Texto largo solo para /accesibilidad */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop: hide the redundant inline gear icon for the config button so only the text remains.
   Keep the span available in DOM for small-screen styling, but hide it on larger viewports. */
@media screen and (min-width: 701px) {
  #toggleConfig .config-ico { display: none !important; }
}

/* Speed input and presets: match the select style (soft grey bg, rounded border, consistent height) */
  /* Apply same alignment to unit-pair labels so their selects start at same column */
  /* Standardized base alignment: labels 120px for >=420px screens */
  #configMenu .unit-pair label { flex:0 0 120px !important; min-width:120px !important; width:120px !important; }
.speed-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.speed-wrap input[type="number"],
.speed-wrap .speed-presets {
  background: var(--input-bg, #f3f4f6);
  border: 1px solid var(--input-border, #cbd5e1);
  border-radius: 6px;
  /* increase horizontal padding by 1px each side to add ~2px to width */
  padding: 6px 9px;
  height: 36px; /* original height */
  box-sizing: border-box;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Reduce number field spinner visual noise on WebKit while keeping functionality */
.speed-wrap input[type="number"]::-webkit-outer-spin-button,
.speed-wrap input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  opacity: 0.6;
  -webkit-appearance: none;
}

/* Ensure small-file-btn / file label aligns with the controls */
.file-btn.small-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--input-border, #cbd5e1);
  background: var(--input-bg, #f3f4f6);
  cursor: pointer;
}

/* On very small screens, slightly reduce paddings to avoid wrapping antes 520
@media (max-width: 420px) {
  header nav button { padding: 6px 8px; gap: 4px; }
  .speed-wrap input[type="number"],
  .speed-wrap .speed-presets,
  .file-btn.small-file-btn {
    height: 34px;
    padding: 5px 7px;
    border-radius: 6px;
  }

  #toggleDebug .debug-ico { font-size: 0.98em; }
}*/

/* App logo used inside the page header (do not use as favicon) */
.app-logo {
  /* Fixed visual size to make srcset selection deterministic */
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  vertical-align: middle;
  margin-right: 10px;
  display: inline-block;
  object-fit: contain;
  /* Show PNG transparency directly: remove background and padding that created a visible light band over the blue header. */
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-sizing: border-box;
}

/* Align provider and interval selects centered and keep widths compact */
#apiSource, #intervalSelect {
  text-align: center;           /* center text in most browsers */
  text-align-last: center;      /* ensure last line centered in Firefox/IE */
  -moz-text-align-last: center; /* Firefox legacy */
  min-width: 64px;
  max-width: 220px;
  width: auto;                  /* allow natural sizing but respect min/max */
  box-sizing: border-box;
}



html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f0f4f8;
  color: #243746;
}

/* Variables de ancho de columnas */
:root {
  --cw-first-col: 224px;   /* widen slightly to avoid truncation in non-collapsed view */
  /* reduced to make generated columns narrower */
  --cw-col-min: 64px;
  --cw-col-ideal: 7.5vw;
  --cw-col-max: 120px;
  /* buttons */
  --btn-bg: #0b6297;
  --btn-bg-hover: #0a5582;
  --btn-text: #fff;
  --btn-muted-bg: #eef2f7;
  --btn-muted-fg: #1f3a56;
}

/* Compare-mode tweaks: narrow provider name column (since icon removed) and
   make the compact summary column larger than a normal step column. */
.compare-mode th.provider-cell, .compare-mode td.provider-cell {
  /* Provider column to 75% of normal first-col width */
  max-width: calc(var(--cw-first-col) * 0.75) !important;
  width: calc(var(--cw-first-col) * 0.75) !important;
  min-width: calc(var(--cw-first-col) * 0.75) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Override the general #weatherTable first-child rules specifically for compare mode */
.compare-mode#weatherTable thead tr:first-child th:first-child,
.compare-mode#weatherTable thead tr:not(.icon-row):not(:first-child) th:first-child,
.compare-mode#weatherTable tbody th:first-child {
  width: calc(var(--cw-first-col) * 0.75) !important;
  min-width: calc(var(--cw-first-col) * 0.75) !important;
  max-width: calc(var(--cw-first-col) * 0.75) !important;
}
.compare-mode td.summary-cell, .compare-mode th.summary-header {
  /* approximate 75% wider than --cw-col-min */
  min-width: calc(var(--cw-col-min) * 1.75);
  max-width: calc(var(--cw-col-min) * 2.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-summary-cell .cs-temp, .compact-summary-cell .cs-wind, .compact-summary-cell .cs-precip {
  display: block; /* stacked behavior like other compare rows */
  font-size: 12px;
  line-height: 1.05;
  color: #274a7a;
  margin: 0;
  padding: 0;
}

.compact-summary-cell i.wi {
  font-size: 20px !important;
  vertical-align: middle;
  margin-right: 8px;
}
.compact-summary-cell .cs-temp strong {
  font-weight: 700;
  font-size: 13px;
}
.compact-summary-cell .combined-top { display:block; font-weight:700; font-size:13px; margin-bottom:2px; }
.compact-summary-cell .combined-bottom { display:block; font-size:11px; margin:0; color:#3a577a }
.compact-summary-cell .cs-sep { display: inline-block; margin: 0 4px; color: #a8c0dd; }
/* On very wide screens, compress a bit more */
@media screen and (min-width: 1200px) {
  :root {
    --cw-col-min: 60px;
    --cw-col-ideal: 6.5vw;
    --cw-col-max: 110px;
  }
}
@media screen and (max-width: 700px) {
  :root {
    --cw-first-col: 180px;
    --cw-col-min: 72px;
    --cw-col-ideal: 12vw;
    --cw-col-max: 100px;
  }
}

/* Styling for the separate app credit control we add to the map */
.map-app-control {
  font-size: 11px;
  color: #333;
  background: rgba(255,255,255,0.65); /* more visible */
  border-radius: 4px;
  /* enforce exact vertical sizing so height matches Leaflet attribution */
  --map-control-h: 16px;
  padding: 0 8px;
  height: var(--map-control-h);
  min-height: var(--map-control-h);
  line-height: var(--map-control-h);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  white-space: nowrap; /* force single-line text */
  display: inline-flex; /* match attribution */
  align-items: center;
  gap: 6px; /* same as attribution */
  max-width: none;
  overflow: visible;
  box-sizing: border-box;
  font-family: inherit;
}
.map-app-control a { color: inherit; text-decoration: underline; }

@media screen and (max-width: 700px) {
  .map-app-control { font-size: 12px; padding: 3px 6px; opacity: 0.95; }
}

/* Ensure map app control sits above panes and is clickable */
.map-app-control.leaflet-control { z-index: 1600 !important; pointer-events: auto; }
.leaflet-control-attribution { z-index: 1500 !important; }

/* Make the app credit sit flush to the bottom-right edge of the map.
   Override Leaflet's default control margin so the box is attached to the
   container border. Keep a tiny inner padding so the link is still tappable. */
.leaflet-bottom .leaflet-right .map-app-control {
  margin: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 4px; /* match attribution's rounding */
  box-shadow: none; /* reduce visual lift so it feels 'glued' */
}

/* Recent routes select: keep compact (approx 17-18 characters) and truncate long names */
.recent-routes-select {
  min-width: 10ch;
  max-width: 18ch; /* approx 17-18 characters */
  width: auto;
  box-sizing: border-box;
  padding: 6px 8px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--input-border, #cbd5e1);
  background: var(--input-bg, #f3f4f6);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep dropdown width independent in browsers: allow the select element to show drop-down normally */
@supports (appearance: none) {
  .recent-routes-select { appearance: menulist-button; }
}

/* Ensure select options are readable on mobile */
@media (max-width: 420px) {
  .recent-routes-select { max-width: 14ch; }
}

/* On very small screens, keep the control minimally padded but still flush */
@media screen and (max-width: 420px) {
  .leaflet-bottom .leaflet-right .map-app-control { padding: 2px 6px !important; font-size: 11px; }
}

/* Force absolute positioning so the control sits exactly at the container's
   bottom-right corner and ignores default control margins. This makes it
   visually identical to the bottom-left attribution but on the right. */
.leaflet-bottom.leaflet-right .leaflet-control.map-app-control {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
}
/* Ensure the control's container doesn't clip the single-line content */
.leaflet-bottom.leaflet-right { overflow: visible !important; }

/* Make Leaflet attribution have the same, slightly translucent background */
.leaflet-control-attribution {
  /* match the app control styles so both look identical */
  background: rgba(255,255,255,0.65);
  font-size: 11px;
  /* use same vertical sizing as app control */
  --map-control-h: 16px;
  padding: 0 8px;
  height: var(--map-control-h);
  min-height: var(--map-control-h);
  line-height: var(--map-control-h);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0; /* prevent forcing wider size */
}

/* Ensure the actual leaflet control elements/wrappers use the exact same
   styling as our app control. Leaflet may add wrapper classes; target the
   common permutations to override defaults and make both boxes identical. */
.leaflet-control.leaflet-control-attribution,
.leaflet-control.map-app-control,
.leaflet-control .leaflet-control-attribution,
.leaflet-control .map-app-control {
  background: rgba(255,255,255,0.65) !important;
  padding: 0 8px !important;
  height: var(--map-control-h) !important;
  min-height: var(--map-control-h) !important;
  line-height: var(--map-control-h) !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  border: none !important;
  white-space: nowrap !important;
}

/* Leaflet link visibility is controlled by responsive rules above */

/* Header */
header {
  background: #0B6297; /* matched to icon background */
  color: white;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Icon-only buttons (used for compare dates toggle and run) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #f3f4f6; /* grey background like file-btn */
  color: #374151;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  transition: background-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.icon-btn:hover { background: #2563eb; color: #fff; transform: translateY(-1px); }
.icon-btn.primary { background: #f3f4f6; color: #374151; border-color: rgba(0,0,0,0.06); }
.icon-btn.primary:hover { background: #2563eb; color: #fff; }
.icon-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(11,98,151,0.18) inset; }

/* Recenter control styling in the map */
.leaflet-control-recenter {
  margin: 6px 6px 0 0; /* align near top-right controls */
}
.leaflet-control-recenter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: #fff !important;
  color: var(--btn-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
}
.leaflet-control-recenter-button svg { 
  width: 16px; 
  height: 16px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.leaflet-control-recenter-button:hover { background: #e5e7eb !important; color: #111 !important; }
.leaflet-control-recenter-button:active { transform: translateY(0); }
.leaflet-control-recenter-button:focus { outline: 2px solid rgba(11,98,151,0.14); outline-offset: 2px; }

/* Override icon-btn classes that cause blue hover */
.leaflet-control-recenter-button.icon-btn:hover,
.leaflet-control-recenter-button.icon-btn.primary:hover {
  background: #e5e7eb !important;
  color: #111 !important;
  transform: none !important;
}

/* Group recenter with zoom controls when present */
.leaflet-control-zoom + .leaflet-control-recenter,
.leaflet-control-recenter + .leaflet-control-zoom {
  margin-top: 6px; /* small gap between zoom and recenter */
}

/* Make map controls more discreet on small screens */
@media screen and (max-width: 700px) {
  /* Make controls smaller and more discreet on small screens */
  .leaflet-control-zoom .leaflet-control-zoom-in,
  .leaflet-control-zoom .leaflet-control-zoom-out,
  .leaflet-control-recenter-button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.9);
    color: #374151; /* neutral text color */
    opacity: 0.95;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  /* Slightly smaller icon inside */
  .leaflet-control-recenter-button svg { width: 14px; height: 14px; }
  .leaflet-control-zoom .leaflet-control-zoom-in span,
  .leaflet-control-zoom .leaflet-control-zoom-out span {
    font-size: 16px;
    line-height: 1;
  }
  /* Hover remains subtle on mobile */
  .leaflet-control-recenter-button:hover,
  .leaflet-control-zoom .leaflet-control-zoom-in:hover,
  .leaflet-control-zoom .leaflet-control-zoom-out:hover {
    transform: none !important;
    background: #e5e7eb !important;
    color: #111 !important;
  }
}

/* Reduce Leaflet Compass size so it doesn't dominate zoom controls */
.leaflet-compass .compass-button {
  display: block !important;
  float: left !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 2px !important;
  padding: 0 !important;
}

.leaflet-compass .compass-icon {
  height: 22px !important;
  width: 22px !important;
  margin: 1px !important;
  background-size: contain !important;
}

/* Make desktop zoom controls visually match the hover of the recenter button */
.leaflet-control-zoom .leaflet-control-zoom-in:hover,
.leaflet-control-zoom .leaflet-control-zoom-out:hover {
  background: #e5e7eb !important;
  color: #111 !important;
  transform: none !important;
}

/* Align icon buttons next to date inputs nicely */
.date-row .icon-btn { margin-left: 6px; }

header h1 {
  font-weight: 800;      /* más contraste frente a los toggles */
  font-size: 1.7rem;     /* claramente mayor que los botones del nav */
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1;
}

nav button {
  background: none;
  border: none;
  color: rgba(255,255,255,0.92); /* atenuación ligera frente al título */
  font-size: 0.95rem;            /* algo más pequeño que el título */
  font-weight: 500;              /* menos peso que el header h1 */
  height: auto;
  cursor: pointer;
  padding: 0.05rem 0.25rem;      /* menos espacio interno */
  line-height: 1.2;      /* Para un mejor ajuste vertical */
  min-width: 28px;
  letter-spacing: 0.02em;        /* mejora legibilidad sin destacar demasiado */
  border-radius: 6px;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

nav button:hover {
  background-color: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

/* Config, debug, menus */
#configMenu {
  position: absolute;
  top: 3.5rem;
  right: 1rem;
  /* Responsive width: grows on large screens but caps to a reasonable size */
  width: min(520px, 92vw);
  min-width: 320px;
  background: #ffffff;
  border: 1px solid #bdd7f6;
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.18);
  padding: 12px 14px 16px;
  border-radius: 10px;
  z-index: 10000;
  /* Prevent manual resize: we adjust size responsively via CSS instead */
  resize: none;
  overflow-y: auto;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* slightly more vertical breathing room */
  box-sizing: border-box;
}
#configMenu .config-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 0; /* give each row some vertical breathing room */
}

/* Compact inline row: place multiple inline checkbox labels on one line */
#configMenu .config-row.compact-inline {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#configMenu .config-row.compact-inline label.inline {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin: 0;
}
#configMenu .config-row.compact-inline label.compact-notice { 
  margin-left: 6px;
  white-space: nowrap;
}
#configMenu .config-row > label {
  /* fixed label column so controls align across rows */
  flex: 0 0 120px;
  min-width: 120px;
  width: 120px;
}
#configMenu .config-row select,
#configMenu .config-row input[type="text"] {
  flex: 1;
}
#configMenu .config-row button {
  flex: 0 0 auto;
}
#configMenu .unit-pair {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
#configMenu .unit-pair label {
  flex: 0 0 120px; /* match single-row labels */
  min-width: 120px;
  width: 120px;
}
#configMenu .unit-pair select {
  flex: 1;
  min-width: 0; /* allow flex children to shrink properly */
}

/* Headings inside the config panel should wrap naturally (allow two lines) */
#configMenu h4 {
  margin: 10px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #203050;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}

/* Slightly lift the Alerts heading so it sits closer to the checkboxes above */
#configMenu h4[data-i18n="alerts_section_title"] {
  margin-top: 6px; /* move up a bit */
  margin-bottom: 6px;
}

/* Add extra space before API Key heading to separate it from the show/debug row */
#configMenu h4[data-i18n="api_key_init"] {
  margin-top: 32px; /* more breathing room above API Key */
}

/* Small extra space under the compact inline row so headings below don't sit too close */
#configMenu .config-row.compact-inline {
  margin-bottom: 8px;
}

/* Make the panel usable on small screens: occupy most width and stack controls vertically */
@media screen and (max-width: 700px) {
  #configMenu {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 3.5rem;
    width: calc(100% - 16px);
    min-width: auto;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    border-radius: 8px;
    padding: 12px;
  }
  /* Use a compact, wrapping row layout on narrow screens so the panel
     doesn't become unnecessarily tall — keep label+control on the
     same line when there's room, but allow wrapping when needed. */
  /* Keep the same compact row layout as desktop on small screens. */
  #configMenu .config-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
  }
  /* Use the same fixed label width as desktop so controls align across rows */
  #configMenu .config-row > label,
  #configMenu .unit-pair label {
    flex: 0 0 120px;
    min-width: 120px;
    width: 120px;
  }
  /* Keep unit-pairs identical to desktop: label + select inline with same sizing */
  #configMenu .unit-pair {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #configMenu .unit-pair select {
    flex: 1;
    min-width: 0;
    width: auto;
  }
  /* Ensure units rows behave like normal rows (no grid) */
  #configMenu .units-row {
    display: flex;
    gap: 12px;
    align-items: center;
  }
}

/* FINAL COMPACT OVERRIDES (small screens) */
@media screen and (max-width: 430px) {
  /* Reduce vertical footprint */
  #configMenu .config-row { padding: 2px 0 !important; gap: 6px !important; }
  /* Narrower label column so selects sit closer */
  #configMenu .config-row > label { flex: 0 0 90px !important; min-width:90px !important; width:90px !important; }
  /* Remove extra top/bottom margin from labels */
  #configMenu label { margin: 0 !important; }
  /* Slightly smaller font to fit more horizontally */
  #configMenu .config-row > label, #configMenu .unit-pair label { font-size: 12.5px; line-height:1.15; }
  /* Tighten unit pairs so two fit on one line without wrapping */
  #configMenu .units-row { gap:10px !important; }
  #configMenu .unit-pair { gap:4px !important; }
  /* Keep unit-pair labels aligned with single labels to avoid select drifting on ~400px widths */
  #configMenu .unit-pair label { flex:0 0 90px !important; min-width:90px !important; width:90px !important; white-space:nowrap; }
  #configMenu .unit-pair select { min-width:54px; padding:3px 6px; height:28px; font-size:12px; }
  /* Exception: inline checkbox label ("show no critical...") should not be constrained to 90px */
  #configMenu .config-row > label.inline { flex:1 1 auto !important; width:auto !important; min-width:0 !important; }
  #configMenu .config-row > label.inline span { white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }
  /* General form controls smaller */
  #configMenu select, #configMenu input[type="text"] { height:30px; padding:4px 8px; font-size:13px; }
  /* Buttons align height */
  #configMenu .config-row button { height:30px; padding:4px 10px; font-size:12px; }
  /* Headings slightly denser */
  #configMenu h4 { margin:6px 0 4px; font-size:13px; }

  /* Make the speed number input a bit wider on small screens so two-digit values don't get visually clipped */
  .speed-wrap input[type="number"] {
    min-width: 46px; /* ensure two digits plus padding fit */
    width: 50px;
    padding: 4px 10px;
    height: 34px;
    box-sizing: border-box;
    text-align: center; /* centra el valor numérico */
  }
  .speed-wrap .speed-presets {
    min-width: 32px;
    padding: 4px 10px;
    height: 34px;
    box-sizing: border-box;
    text-align: center;
  }

  /* Compact provider select and center text on small screens */
  #apiSource {
    min-width: 92px;    /* slightly wider than a single digit to preserve labels */
    width: 100px;
    padding: 6px 8px;
    height: 34px;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box;
  }

  /* Interval select is numeric (two digits) — make it narrow and centered */
  #intervalSelect {
    min-width: 32px;
    padding: 4px 10px;
    height: 34px;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box;
  }
  
}

/* Attribution tweaks: responsive behavior for different screen sizes */
.leaflet-control-attribution .map-provider { white-space: nowrap; }
.leaflet-control-attribution .map-app { white-space: nowrap; }
.leaflet-control-attribution .map-sep { display: none !important; }

/* Ensure attribution control is visible and properly styled */
.leaflet-control-attribution {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  gap: 2px;
  text-align: right;
  background: rgba(255,255,255,0.85) !important;
  color: #333 !important;
  z-index: 1500 !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  min-height: 20px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}

/* Show Leaflet link on screens > 420px */
@media screen and (min-width: 421px) {
  .leaflet-control-attribution {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  
  .leaflet-control-attribution a[href*="leaflet"] {
    display: inline !important;
  }
  
  /* Show separators on large screens */
  .leaflet-control-attribution .map-sep {
    display: inline !important;
  }
}

/* Small screens: hide Leaflet, stack in two lines, align left for visibility */
@media screen and (max-width: 420px) {
  .leaflet-control-attribution {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    width: auto !important;
    white-space: normal !important;
    left: 5px !important;
    right: auto !important;
    text-align: left !important;
    max-width: calc(100vw - 15px) !important;
  }
  
  /* Hide Leaflet link on small screens */
  .leaflet-control-attribution a[href*="leaflet"] {
    display: none !important;
  }
  
  /* Hide separators on small screens for cleaner vertical layout */
  .leaflet-control-attribution .map-sep {
    display: none !important;
  }
  
  /* Ensure proper stacking order: app credit on top, provider below */
  .leaflet-control-attribution .map-app { order: 1; }
  .leaflet-control-attribution .map-provider { order: 2; }
  .leaflet-control-attribution > *:not(.map-app):not(.map-provider) { order: 3; }
}

/* Simple attribution styles for reliable visibility */
#simple-attribution {
  position: absolute !important;
  bottom: 0px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  color: #333 !important;
  padding: 2px 5px !important;
  font-size: 8px !important;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
  line-height: 1.3 !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  word-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Pantallas pequeñas: dos líneas, Lockevod arriba, OpenStreetMap abajo, alineado a la derecha */
@media screen and (max-width: 420px) {
  #simple-attribution {
    right: 0px !important;
    left: auto !important;
    font-size: 7px !important;
    max-width: calc(100vw - 10px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Cambiado a center para centrar el cuadradito */
    /* text-align: left !important; */ /* Quitado para que no interfiera */
    gap: 1px !important;
  }
  
  #simple-attribution .lockevod-credit {
    order: 1 !important;
    display: block !important;
    text-align: center !important; /* Cambiado a center */
  }
  
  #simple-attribution .osm-credit {
    order: 2 !important;
    display: block !important;
    text-align: center !important; /* Cambiado a center */
  }
  
  #simple-attribution .separator {
    display: none !important;
  }
}

/* Pantallas grandes: una línea a la derecha */
@media screen and (min-width: 421px) {
  #simple-attribution {
    right: 0px !important;
    left: auto !important;
    font-size: 10px !important;
    max-width: none !important;
    display: block !important;
  }
  
  #simple-attribution .lockevod-credit,
  #simple-attribution .osm-credit {
    display: inline !important;
  }
  
  #simple-attribution .separator {
    display: inline !important;
  }
}

/* Emergency positioning for attribution control */
.leaflet-control-attribution {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: 5px !important;
}

/* Force attribution visibility on very small screens with maximum specificity */
@media screen and (max-width: 420px) {
  #map .leaflet-control-attribution,
  .leaflet-control.leaflet-control-attribution,
  .leaflet-control-attribution.leaflet-control {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 5px !important;
    right: auto !important;
    z-index: 99999 !important;
    background: rgba(255,255,255,0.95) !important;
    color: #333 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    margin: 5px !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }
  
  #map .leaflet-control-attribution span,
  #map .leaflet-control-attribution .map-provider,
  #map .leaflet-control-attribution .map-app {
    display: inline-block !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  
  #map .leaflet-control-attribution a {
    color: #0066cc !important;
    text-decoration: underline !important;
  }
}

#configMenu #closeConfig {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 20px;
  color: #555;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  transition: background-color 120ms ease, color 120ms ease;
}
#configMenu #closeConfig:hover {
  background: rgba(30, 64, 175, 0.08);
  color: #1e40af;
}
#configMenu label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  margin: 0.5rem 0;
  color: #203050;
  font-weight: 600;
}
#configMenu label *:last-child {
  flex-grow: 0;
  max-width: none;
  margin-left: 0;
}
#configMenu select, #configMenu input[type="text"] {
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f8fafc;
  padding: 6px 10px;
  height: 32px;
  font-size: 13px;
  color: #1f2a44;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
#configMenu input[type="text"]::placeholder {
  color: #94a3b8;
}
#configMenu select:hover,
#configMenu input[type="text"]:hover {
  border-color: #94b6f6;
  background: #ffffff;
}
#configMenu select:focus,
#configMenu input[type="text"]:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
  background: #ffffff;
}

#debugSection {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: #222;
  color: white;
  font-family: monospace;
  font-size: 12px;
  padding: 1rem 0 0 0; /* espacio arriba para toolbar */
  max-height: 60vh;      /* más alto */
  width: 380px;          /* más ancho por defecto */
  height: 220px;         /* altura inicial fija */
  overflow: hidden;      /* el scroll va dentro de #debugConsole */
  border-radius: 8px;
  display: none;
  z-index: 11000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
#debugConsole p {
  margin: 0 0 0.33rem;
}
#debugConsole p.error {
  color: #ff5555;
}
#debugConsole p.info {
  color: #88ff88;
}
#debugConsole {
  /* iOS Safari ignora resize en DIV; usamos JS resizer */
  overflow: auto;
  height: calc(100% - 34px); /* deja sitio para la toolbar (~34px) */
  padding: 10px 12px;
  box-sizing: border-box;
  user-select: text;
}

/* Main layout */
main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 3rem);
  padding: 0.25rem 0.5rem; 
  gap: 0.5rem;
}

#map {
  flex: 1.8;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgb(100 150 250 / 0.5);
  border: 1px solid #d1d5db;
}

#map {
  min-height: 300px;   /* para que siempre sea visible */
  max-height: 60vh;    /* limita altura en pantallas altas */
}


#controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  font-size: 14px;
}
#controls label {
  width: 180px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}
#controls label input, #controls label select {
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
  font-size: 1rem;
  margin-top: 0.3rem;
  width: 100%;
  max-width: 180px;
  text-align: center;
}
#loadRoute {
  padding: 9px 24px;
  font-weight: 600;
  font-size: 1rem;
  background-color: #2563eb;
  color: white;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.2s;
}
#loadRoute:hover {
  background-color: #1d4ed8;
}

.ruta-name {
  /* reducido para eliminar espacio excesivo */
  margin: 0.12rem 0; 
  padding: 0; 
  color: #264d73;
  font-weight: 600;
  font-size: 15px;   /* ligeramente más pequeño */
  line-height: 1;    /* evita espacio extra vertical */
  /* NEW: prevent text overflow */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rutaName {
  margin: 0;          /* elimina margen sobrante */
  padding: 2px 0;     /* añade un poco de padding vertical */
  font-weight: 700;
  min-height: 26px;   /* aumenta altura mínima para acomodar el indicador */
  display: flex;      /* cambia a flex para mejor control del layout */
  align-items: center; /* centra verticalmente el contenido */
  gap: 6px;           /* espacio entre texto e indicador */
  line-height: 20px;  /* aumenta line-height */
  position: relative;
  top: 0;             /* remove previous 2px offset */
  height: auto;       /* altura automática */
  margin-bottom: 0;
  z-index: 4;        /* render above fades/hint if overlapping */
  /* NEW: prevent text overflow */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ocultar control file nativo y mostrar label-actuando-como-botón */
input[type="file"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Label que actúa como botón para elegir fichero */
.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  padding: 4px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  transition: background 120ms ease, transform 100ms ease;
  user-select: none;
  width: 28px;
  height: 28px;
}
.file-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.file-btn i,
.file-btn {
  font-size: 16px;
}

/* Nombre del fichero seleccionado */
#fileInfo {
  display: inline-block;
  vertical-align: middle;
  color: #264d73;
  font-weight: 600;
  margin-left: 6px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recent routes container */
.recent-routes-container {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

.recent-route-item {
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 500;
  cursor: pointer;
  margin-right: 4px;
  margin-bottom: 2px;
  border: 1px solid #d1d5db;
  transition: background 120ms ease, border-color 120ms ease;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-route-item:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.recent-route-item:active {
  background: #d1d5db;
}

/* Bloque clima/tablas ------------------------------------------------------- */
#weatherContainer {
  background: white;
  box-shadow: 0 5px 15px rgb(30 56 175 / 0.12);
  border-radius: 10px;
  margin-top: 8px;
  /* altura adaptativa y scroll vertical contenido (no empujar el mapa) */
  max-height: clamp(240px, 40vh, 420px);
  overflow-x: auto;
  overflow-y: auto;
}
#weatherTableContainer {
  position: relative; /* needed for overlay hint */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;           /* la barra horizontal queda contenida aquí */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
  padding-top: 0 !important; /* override earlier 26px */
}

/* La tabla se adapta: llena el contenedor cuando hay pocas columnas
   y crece (con scroll interno) cuando hay muchas */
#weatherTable {
  table-layout: fixed;        /* celdas de ancho predecible */
  width: max-content;         /* crece sólo si hay muchas columnas */
  /* sin min-width:100% para que con pocas columnas no se estire ni agrande celdas */
}
#weatherTable th, #weatherTable td {
  padding: 8px 12px;
  font-size: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Primera columna sticky (sin cambios previos) */
#weatherTable thead tr:first-child th:first-child,
#weatherTable thead tr:not(.icon-row):not(:first-child) th:first-child {
  position: sticky;
  left: 0;
  z-index: 4;                 /* por encima de celdas normales */
  background: #e0ebff;
  width: var(--cw-first-col);
  min-width: var(--cw-first-col);
  max-width: var(--cw-first-col);
  box-shadow: 2px 0 0 rgba(0,0,0,0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* Restore robust sticky first column across all rows (thead/tbody) */
/* #weatherTable th:first-child,
#weatherTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: var(--cw-first-col);
  min-width: var(--cw-first-col);
  max-width: var(--cw-first-col);
  box-shadow: 2px 0 0 rgba(0,0,0,0.04);
}
#weatherTable thead th:first-child { z-index: 4; }
#weatherTable tbody th:first-child,
#weatherTable tbody td:first-child { background-color: #f7f7f7; }
#weatherTable thead tr.icon-row th:first-child {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
} */

/* Ensure sticky column visually matches intended backgrounds */
#weatherTable thead th:first-child { background-color: #e0ebff; }
#weatherTable tbody th:first-child,
#weatherTable tbody td:first-child { background-color: #f7f7f7; }

/* Fila 2 (iconos): NO sticky y ancho igual al de columnas de datos */
#weatherTable thead tr.icon-row th:first-child {
  position: static;
  left: auto;
  z-index: auto;
  background: inherit;  /* hereda el mismo fondo que el resto de la fila */
  width: clamp(var(--cw-col-min), var(--cw-col-ideal), var(--cw-col-max));
  min-width: var(--cw-col-min);
  max-width: var(--cw-col-max);
}

/* Misma anchura para TODAS las celdas de la fila de iconos */
#weatherTable thead tr.icon-row th {
  width: clamp(var(--cw-col-min), var(--cw-col-ideal), var(--cw-col-max));
  min-width: var(--cw-col-min);
  max-width: var(--cw-col-max);
}

/* Asegura mismo fondo en toda la fila de iconos */
#weatherTable thead tr.icon-row th {
  background: #e3f0fd;
  border-top: 0 !important;
  border-bottom: 1px solid #bdd7f6;
  text-align: center;
}

/* Limitar regla genérica de primera columna a TBODY únicamente (no toca THEAD) */
#weatherTable tbody th:first-child, #weatherTable tbody th {
  background: #f7f7f7;
  color: #203050;
  font-weight: 700;
  text-align: left;
}

/* Evitar que pinte la 1ª celda de la fila de iconos en THEAD */
#weatherTable thead tr:not(.icon-row) th:first-child, #weatherTable tbody th {
  text-align: left;
  max-width: var(--cw-first-col);
  font-weight: 700;
  background-color: #e0ebff;
}

/* Refuerzo: primera celda de la fila de iconos hereda el fondo de la fila */
#weatherTable thead tr.icon-row th:first-child {
  background: inherit !important;
}

/* Mantener cabecera unificada (sin línea entre fila 1 y 2) */
#weatherTable thead tr:first-child th {
  border-bottom: none !important;
}
#weatherTable thead tr.icon-row th {
  background: #e3f0fd;
  border-top: 0 !important;
  border-bottom: 1px solid #bdd7f6;
  text-align: center;
}

/* Ancho de columnas de datos (cabeceras y celdas) */
#weatherTable th:not(:first-child),
#weatherTable td {
  width: clamp(var(--cw-col-min), var(--cw-col-ideal), var(--cw-col-max));
  min-width: var(--cw-col-min);
  max-width: var(--cw-col-max);
  white-space: nowrap;
}

/* Tighten padding for generated columns to save space */
#weatherTable thead th:not(:first-child),
#weatherTable tbody td {
  padding: 6px 8px; /* was 8px 12px globally */
}

/* Keep icon row the same width rules (already uses the vars) */
/* Asegura mismo fondo en toda la fila de iconos */
#weatherTable thead tr.icon-row th {
  background: #e3f0fd;
  border-top: 0 !important;
  border-bottom: 1px solid #bdd7f6;
  text-align: center;
}

/* Limitar regla genérica de primera columna a TBODY únicamente (no toca THEAD) */
#weatherTable tbody th:first-child, #weatherTable tbody th {
  background: #f7f7f7;
  color: #203050;
  font-weight: 700;
  text-align: left;
}

/* Evitar que pinte la 1ª celda de la fila de iconos en THEAD */
#weatherTable thead tr:not(.icon-row) th:first-child, #weatherTable tbody th {
  text-align: left;
  max-width: var(--cw-first-col);
  font-weight: 700;
  background-color: #e0ebff;
}

/* Refuerzo: primera celda de la fila de iconos hereda el fondo de la fila */
#weatherTable thead tr.icon-row th:first-child {
  background: inherit !important;
}

/* Mantener cabecera unificada (sin línea entre fila 1 y 2) */
#weatherTable thead tr:first-child th {
  border-bottom: none !important;
}
#weatherTable thead tr.icon-row th {
  background: #e3f0fd;
  border-top: 0 !important;
  border-bottom: 1px solid #bdd7f6;
  text-align: center;
}

/* Ancho de columnas de datos (cabeceras y celdas) */
#weatherTable th:not(:first-child),
#weatherTable td {
  width: clamp(var(--cw-col-min), var(--cw-col-ideal), var(--cw-col-max));
  min-width: var(--cw-col-min);
  max-width: var(--cw-col-max);
  white-space: nowrap;
}

/* Anteriormente afectaba también a thead: limitamos a tbody únicamente */
#weatherTable tbody th {
  background: #f7f7f7;
  color: #203050;
  font-weight: 700;
  text-align: left;
}

/* Ajustes internos de las celdas compuestas para no forzar crecimiento */
.cell-row { min-width: 0; }
.time-dist-col { min-width: 0; }

/* Header hour cells: keep icon to the left, center the whole block */
.cell-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center; /* was flex-start */
}
.icon-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* Override generic centering for images inside these cells */
.cell-row .icon-col img {
  display: block;
  margin: 0;                   /* no auto-centering */
  max-height: 22px;            /* compact */
  width: auto;
}

/* Center the first header row cells (except the sticky first column) */
#weatherTable thead tr:first-child th:not(:first-child) {
  text-align: center;
}

/* Sticky first column: allow wrap and reduce font to avoid ellipsis */
#weatherTable thead tr:first-child th:first-child,
#weatherTable thead tr:not(.icon-row):not(:first-child) th:first-child {
  white-space: normal !important;   /* allow wrapping */
  text-overflow: clip !important;   /* no ellipsis */
  font-size: 12px;                  /* slightly smaller to fit */
  line-height: 1.1;
}

/* Upload button label (already uses .small-file-btn in HTML) */
.small-file-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}

/* Responsive: en pantallas pequeñas, permite algo más de densidad */
@media screen and (max-width: 700px) {
  #weatherTable thead tr th:not(:first-child),
  #weatherTable thead tr td {
    width: clamp(72px, 12vw, 100px);
    min-width: 72px;
    max-width: 100px;
  }
  #weatherTable thead tr th:first-child {
    width: var(--cw-first-col);
    min-width: var(--cw-first-col);
    max-width: var(--cw-first-col);
  }
  #map { order: 2; }
  #controlsPanel { order: 1; }
  main { gap: 0.15rem; }
  .wtc-wrap { padding-top: 4px !important; } /* was 8px: reduced by half */
}

#weatherTable thead th {
  background: #e3f0fd;
  color: #284062;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #bdd7f6;
}
#weatherTable tr th:first-child, #weatherTable tbody th {
  background: #f7f7f7;
  color: #203050;
  font-weight: 700;
}
#weatherTable thead tr.icon-row th {
  background: #e3f0fd;           /* igual que thead th */
  border-top: 0 !important;      /* sin línea entre fila 1 y 2 */
  border-bottom: 1px solid #bdd7f6; /* separador hacia el resto de filas */
  text-align: center;            /* centra iconos */
}
#weatherTable .wi {
  color: #29519b !important;
  text-shadow: none;
}
#weatherTable thead th img {
  display: block;
  margin: 0 auto;
  max-width: 26px;
  max-height: 28px;
}
#weatherTable td {
  text-align: center;
  vertical-align: middle;
}

.icon-row i {
  font-size: 26px;
  display: block;
  margin: 0 auto;
  line-height: 1;
}
#weatherTable thead th:first-child, #weatherTable tbody th {
  text-align: left;
  max-width: var(--cw-first-col);
  font-weight: 700;
  background-color: #e0ebff;
}
.selected {
  background-color: #bfdbfe !important;
}
.weather-icon, .weather-icon svg{
  width: 26px;
  height: 26px;
}

/* Sun times box */
.sun-times {
  margin: 6px 0 18px 0;
  color: #29519b;
  font-size: 14px;
  font-weight: 500;
}

/* Leaflet/map --------------------------------------------- */
.leaflet-container {
  cursor: crosshair;
}
.leaflet-control-zoom, .leaflet-control-layers { z-index: 1500 !important; }
.leaflet-control-scale { z-index: 1500 !important; }
.leaflet-marker-pane img { filter: drop-shadow(0 2px 3px rgb(40 67 90 / 0.25)); }
.leaflet-control-zoom { box-shadow: 0 0 30px #3b82f6; }
.leaflet-popup-content img { max-width: 60px !important; }
.leaflet-div-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.leaflet-pane .icon-row i { margin: 0; }

/* Responsive */
@media screen and (max-width: 900px) {
  #weatherTable,
  #weatherTable thead,
  #weatherTable tbody,
  #weatherTable tr,
  #weatherTable th,
  #weatherTable td {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
  #controls {
    flex-direction: column;
    align-items: stretch;
  }
  .sun-times {
    font-size: 12px;
    padding: 4px;
  }
  #weatherContainer {
    margin-top: 0;
    max-height: 260px;
    overflow-x: auto;
  }

  /* Añadido para mejorar el comportamiento del mapa */
  #map {
    min-height: 250px;      /* Evita que desaparezca */
    max-height: 50vh;       /* Limita altura para que no sea excesivo */
    margin-bottom: 1rem;    /* Espacio inferior */
    border-radius: 5px;
  }
}

@media screen and (max-width: 700px) {
    header h1 {
      font-size: 1.3rem;  /* sigue siendo mayor que los toggles en móviles */
    }
    main {
    padding: 0.1rem 0.2rem;
    gap: 0.15rem;
  }
    #weatherContainer, #map {
      border-radius: 5px;
    }
    .ruta-name {
      font-size: 12px;
      margin: 0.08rem 0;
    }

    /* Ajustes para mapa en pantallas muy pequeñas */
    #map {
      min-height: 200px;   /* Permite mapita visible en móviles */
      max-height: 40vh;
    }
  }

  .wind-icon {
    font-size: 28px;          /* tamaño original */
    font-weight: bold;        /* para hacer la flecha más gruesa */
    text-shadow:
      1px 0 currentColor,
      -1px 0 currentColor,
      0 1px currentColor,
      0 -1px currentColor;    /* efecto de grosor adicional sin alargar */
    line-height: 1;
    color: #000;              /* asegúrate que el color sea visible */
    user-select: none;
  }

#sunTimes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: #29519b;
  font-weight: 500;
}

.sunTimes-line {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
}

.sunTimeItem {
  display: flex;
  align-items: center;
  gap: 6px;
}

.civil-mark {
  font-size: 10px;
  font-weight: bold;
  vertical-align: super;
  margin-left: 3px;
  color: #1e40af; /* azul más oscuro para distinción */
}
/* Caja de cabecera solar (dentro del th de la primera fila) */
.sunHeaderBox {
  display: inline-flex;
  gap: 14px;
  align-items: center; /* center both columns so rows align vertically */
  vertical-align: middle;
}
.sunCol {
  display: flex;
  flex-direction: column;
  gap: 4px;              /* separación entre sunrise y sunset (o civil) */
}
.sunRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #29519b;        /* combina con tu paleta */
  font-weight: 600;
}
.sunRow .wi {
  color: #f59e0b;        /* dorado para sol */
  font-size: 18px;
  line-height: 1;
}
.civil-chip {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: #1e40af;
  background: rgba(30,64,175,0.08);
  padding: 2px 6px;
  border-radius: 8px;
}

/* Lift civil (civil-chip + its time) slightly to align with sunrise/sunset */
.sunHeaderBox .sunCol:last-child .sunRow {
  transform: translateY(-2px); /* nudge up a couple of pixels for optical alignment */
}
.sunHeaderBox .sunRow .civil-chip,
.sunHeaderBox .sunRow .civil-chip + span {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.rain-icon { font-size: 20px; line-height: 1; }

/* Icono de viento SVG */
.wind-divicon.wind-svg { background: transparent; border: 0; }
.wind-divicon.wind-svg .wind-glyph {
  width: var(--wind-font, 18px);   /* escala por zoom */
  height: var(--wind-font, 18px);
  display: block;
}
.wind-svg-wrap {
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Mejora de legibilidad sobre trazos oscuros/claros */
.wind-divicon .wind-glyph path,
.wind-divicon .wind-glyph polygon {
  paint-order: stroke fill;
}

.wind-speed, .wind-dir-icon {
  font-weight: normal !important;
  color: inherit !important;
  font-size: 14px; /* puedes mantener tamaño igual o ajustar */
}


.wind-dir-icon {
  color: #29519b;
  font-size: 16px;
  vertical-align: middle;
  user-select: none;
}

.leaflet-compass-orientation {
  display: none !important;
}

.compass-alert {
  display: none !important;
}

/* Celdas combinadas (viento / lluvia / temperatura) */
.weather-combined {
  display: inline-block;
  text-align: center;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;      /* ancho mínimo homogéneo */
  max-width: 100%;      /* no exceder la celda */
}
/* Línea superior: número principal - tamaño uniforme */
.weather-combined .combined-top {
  display: block;
  white-space: nowrap;       /* evita que la velocidad y la flecha se partan en varias líneas */
  font-weight: 700;
  font-size: 14px;           /* tamaño uniforme para todos los números principales */
  line-height: 1;            /* mantener compactado */
}
/* Línea inferior: menor tamaño y color atenuado */
.weather-combined .combined-bottom {
  display: block;
  font-size: 11.5px;         /* más pequeño que la línea superior */
  color: #475569;            /* tono menos prominente para el valor entre paréntesis */
  margin-top: 2px;
}

/* Pequeños ajustes para el icono de flecha (wind) */
.wind-arrow {
  display: inline-block;
  transform-origin: 50% 50%;
  line-height: 0.9;
  font-size: 1.05em;
}

/* Nuevo: layout flex para el panel de controles y posicionado del file-area */
#controlsPanel {
  display: flex;
  flex-direction: column; /* apilar: selectores arriba, nombre ruta abajo */
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

/* Agrupa los controles (fecha, velocidad, intervalo) ocupando la parte principal */
#controlsPanel .params {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Keep each label+control together; if the row wraps, prefer keeping them on the same line. */
.param-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  flex-wrap: nowrap; /* try to keep label and control together */
}

/* Ensure the small Compare Dates button next to provider selector is visible and doesn't collapse */
#toggleCompareDates {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  padding: 6px 8px;
  margin-left: 4px;
  cursor: pointer;
}

/* Also target the new class for the moved button next to the datetime input */
.compare-dates-btn {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  padding: 6px 8px;
  margin-left: 6px;
  cursor: pointer;
  background: #0B6297;
  color: #fff;
  border: 1px solid #0B6297;
  border-radius: 4px;
}

/* Keep the first param-row (date A + button) wrapping nicely on small screens */
.param-row > #datetimeRoute + .compare-dates-btn {
  flex: 0 0 auto;
}

/* Allow provider row (provider select + toggle button) to wrap on narrow screens */
.provider-row {
  flex-wrap: wrap;
}
.provider-row > label,
.provider-row > #apiSource,
.provider-row > #toggleCompareDates {
  margin-bottom: 4px;
}

/* Let the first date row wrap so the compare button is never pushed off-screen */
.date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.date-row > label,
.date-row > #datetimeRoute,
.date-row > #toggleCompareDates,
.date-row > .compare-dates-btn {
  flex: 0 0 auto;
  margin-bottom: 4px;
}
/* Ensure inputs do not grow too wide and push the button out */
.date-row > #datetimeRoute {
  max-width: 180px;
}

/* Slightly lower the provider selector so it visually aligns with interval */
.param-row > label[for="apiSource"],
.param-row > #apiSource {
  position: relative;
  top: 2px; /* adjust vertical alignment */
}

@media screen and (max-width: 700px) {
  /* Keep label+control paired horizontally so pairs flow on the same line.
     Reduce the label width so multiple pairs can fit. */
  .param-row {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
  }
  /* Ensure labels inside each pair have a fixed width so the control column
     starts at the same x-position across wrapped lines (aligns selectors). */
  .param-row > label {
    flex: 0 0 110px;
    min-width: 110px;
    text-align: left;
    margin-right: 6px;
  }
  /* But when using .param-row, the label should not stretch to fill the line
     — keep it tight next to its control so the selector doesn't get pushed away. */
  .param-row > label {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    margin-right: 6px;
    text-align: left;
    white-space: nowrap;
  }
  /* Under very small widths, stack the pair vertically for readability 
  @media screen and (max-width: 420px) {
    .param-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: stretch;
    }
    #controlsPanel .params > label,
    #controlsPanel .params > .param-row > label {
      width: 100%;
      flex: none;
      min-width: 0;
    }
  } */
}

/* Utility element to force a wrap in the params flex flow on narrow screens */
@media screen and (max-width: 700px) {
  .wrap-break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* Force the Interval row to appear on a new visual line on small screens
   so it starts aligned under the date selector/control. */
@media screen and (max-width: 700px) {
  /* Keep the interval pair as an inline pair (like other .param-row) so
     after the forced break the interval control can share the same visual
     line with the following controls (provider, file) instead of forcing
     them to a third line. */
  .interval-row {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* same spacing as other .param-row pairs */
    margin-top: 6px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
  }
  /* Use the same label sizing rules as .param-row so spacing is consistent */
  .interval-row > label {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    margin-right: 6px;
    text-align: left;
    white-space: nowrap;
  }
  .interval-row > select {
    flex: 0 0 auto;
    min-width: 60px;
    height: 22px;
  }
}

/* Reduce visual size of the small file button on narrow screens so its border
   doesn't appear larger than other controls and it doesn't wrap to next line. */
@media screen and (max-width: 700px) {
  .file-btn.small-file-btn {
    height: 22px;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 6px;
  }
}

/* Compact alignment for config rows on small screens (improves vertical density & alignment) */
@media screen and (max-width: 700px) {
  #configMenu { padding-top: 10px; }
  #configMenu .config-row { padding: 1px 0; gap: 6px; }
  /* Make label + control sit on same baseline */
  #configMenu .config-row > label,
  #configMenu .unit-pair label {
    flex-direction: row;
    align-items: center;
    gap: 2px; /* tighter label→text gap */
    margin: 0;
    font-size: 12px;
    line-height: 1.15;
  }
  /* Remove larger generic label margins */
  #configMenu label { margin: 0; }
  /* Slightly tighter inputs */
  #configMenu select,
  #configMenu input[type="text"] { height: 28px; padding: 3px 6px; font-size: 12px; }
  /* API key rows: ensure button aligns tight */
  #configMenu .config-row button { height: 28px; padding: 3px 8px; font-size: 11.5px; }
  /* Unit pairs: keep two in one line without wrap */
  #configMenu .units-row { gap: 10px; }
  #configMenu .unit-pair { gap: 4px; }
  #configMenu .unit-pair label { white-space: nowrap; }
  #configMenu .unit-pair select { min-width: 58px; }
  /* Headings tighter */
  #configMenu h4 { margin: 5px 0 3px; font-size: 12.5px; }
}

/* Forzar que el nombre de la ruta quede en la línea siguiente y alineado con la tabla */
#rutaName {
  margin-top: 6px;
  align-self: flex-start;
  width: 100%;
  /* opcional: mantener un poco de separación y evitar que ocupe todo visualmente */
  font-size: 0.95rem;
  color: #264d73;
  font-weight: 600;
  min-height: 26px;   /* aumenta altura mínima para acomodar el indicador */
  display: flex;      /* cambia a flex para mejor control del layout */
  align-items: center; /* centra verticalmente el contenido */
  gap: 6px;           /* espacio entre texto e indicador */
}

/* Área del selector de fichero situada al final de la fila */
#controlsPanel .file-area {
  margin-left: auto;           /* empuja al final de la línea */
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Ajustes móviles: file-area pasa a ocupar toda la línea por debajo si no cabe */
@media screen and (max-width: 700px) {
  #controlsPanel {
    align-items: flex-start;
  }
  #controlsPanel .file-area {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: 6px;
  }
  #controlsPanel .params {
    width: 100%;
    gap: 0.5rem;
  }

  /* Make labels and controls inside the params area match the same
     visual width as the main #controls area so inputs don't appear wider. */
  #controlsPanel .params > label {
    flex: 0 0 180px;
    min-width: 150px;
    display: block;
    font-size: 14px;
    line-height: 16px;
  }
  /* Constrain inputs/selects inside params so they match the visual size
     used elsewhere (centered content and max-width). */
  #controlsPanel .params input[type="text"],
  #controlsPanel .params input[type="number"],
  #controlsPanel .params input[type="datetime-local"],
  #controlsPanel .params select {
  max-width: 140px;
  width: auto;
  text-align: center;
  box-sizing: border-box;
  height: 22px;
/* Compact badge showing short content-hash next to recent routes select */
.recent-routes-hash-badge {
  display: inline-block;
}

@media (max-width: 420px) {
  .recent-routes-select { max-width: 140px; }
  .recent-routes-hash-badge { display: none; }
}

/* Small-screen menu button and popup menu styles */
.recent-routes-button {
  background: transparent;
  border: 1px solid var(--input-border,#cbd5e1);
  border-radius: 6px;
  padding: 6px 8px;
  height: 36px;
  cursor: pointer;
  display: inline-flex; /* show on all screen sizes */
  align-items: center;
  margin-left: 6px;
}
.recent-routes-menu { font-size: 14px; }
.recent-routes-menu-item:hover { background: #f5f7fa; }

/* If you prefer to show only the button and hide the native select,
   you can add: .recent-routes-select { display: none; } */

/* Button visual polish */
.recent-routes-button svg { display: block; color: #2b6cb0; }
.recent-routes-button:hover,
.recent-routes-button:focus { background: rgba(43,108,176,0.06); border-color: #2b6cb0; outline: none; }
.recent-routes-button:active { transform: translateY(1px); }

/* Custom tooltip using data-tooltip attribute */
.recent-routes-button[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  white-space: nowrap;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 160ms ease;
}
.recent-routes-button:hover[data-tooltip]:after,
.recent-routes-button:focus[data-tooltip]:after {
  opacity: 1;
  transform: translateY(-140%);
}

/* Ensure the tooltip sits above other elements */
.recent-routes-button { position: relative; z-index: 1100; }

/* When the container is configured to show button-only, hide native select and badge */
.recent-routes-button-only .recent-routes-select { display: none !important; }
.recent-routes-button-only .recent-routes-hash-badge { display: none !important; }

/* Allow a small short-hash label inside the button */
.recent-routes-button .short-hash { margin-left: 6px; font-size: 12px; color: rgba(0,0,0,0.7); background: #eef6ff; padding: 2px 6px; border-radius: 8px; }
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  }

  /* NEW: keep the scroll wrapper stretched even with align-items:flex-start */
  #controlsPanel .wtc-wrap {
    align-self: stretch;
    width: 100% !important;
    min-width: 0 !important;     /* ensure it can be narrower than content */
  }
  /* Reaffirm inner scroller sizing */
  #weatherTableContainer {
    max-width: 100% !important;
  }
}

/* Apply soft input/select styling (same as .speed-wrap controls) to controls and config panels.
   Do NOT change .file-btn (keeps its blue color). */
#controlsPanel .params input[type="number"],
#controlsPanel .params input[type="text"],
#controlsPanel .params input[type="datetime-local"],
#controlsPanel .params select,
#configMenu select,
#configMenu input[type="text"],
#configMenu input[type="number"] {
  background: var(--input-bg, #f3f4f6);
  border: 1px solid var(--input-border, #cbd5e1);
  border-radius: 6px;
  padding: 6px 8px;
  height: 36px;
  box-sizing: border-box;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Reduce visual noise on WebKit number inputs inside those areas */
#controlsPanel .params input[type="number"]::-webkit-outer-spin-button,
#controlsPanel .params input[type="number"]::-webkit-inner-spin-button,
#configMenu input[type="number"]::-webkit-outer-spin-button,
#configMenu input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  opacity: 0.6;
  -webkit-appearance: none;
}

/* Keep select dropdown arrow native but ensure visuals match */
#controlsPanel .params select,
#configMenu select {
  padding-right: 28px; /* leave space for native arrow */
}

/* Small-screen adjustments: mirror the reduction used for .speed-wrap in index.html */
@media screen and (max-width: 700px) {
  #controlsPanel .params input[type="number"],
  #controlsPanel .params input[type="text"],
  #controlsPanel .params input[type="datetime-local"],
  #controlsPanel .params select,
  #configMenu select,
  #configMenu input[type="text"],
  #configMenu input[type="number"] {
    height: 34px;
    padding: 5px 7px;
    border-radius: 6px;
  }
}

/* Quitar spinners del input[type=number] para evitar cambios por flechas */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield; /* Firefox */
}

/* Small layout for speed + presets */
.speed-wrap {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  align-items: stretch; /* igual altura entre input y select */
}
.speed-wrap input[type="number"],
.speed-presets {
  height: 22px;
  padding: 3px 8px;
  line-height: normal;
}
.speed-presets {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: white;
  font-weight: 600;
}

/* Igualar altura entre velocidad (input+presets) e intervalo */
#cyclingSpeed,
#speedPresets,
#intervalSelect {
  height: 22px;
  padding: 2px 8px;    /* was 6px 8px */
  font-size: 12px;     /* smaller text to fit */
  line-height: 1.2;
}

/* Equalize sizes for speed and interval controls (include datetime) */
#controlsPanel .params input[type="number"],
#controlsPanel .params input[type="text"],
#controlsPanel .params input[type="datetime-local"],
#controlsPanel .params select {
  box-sizing: border-box;
  height: 22px;        /* keep 22px overall */
  padding: 3px 8px;    /* compact padding */
  font-size: 12px;     /* smaller text to fit */
  line-height: 1.2;
}

/* Increase horizontal space for speed controls on very narrow phones so numbers don't get clipped */
@media screen and (max-width: 420px) {
  .speed-wrap input[type="number"],
  .speed-presets,
  #speedPresets,
  #cyclingSpeed {
    /* add ~2px to left and right padding (total +4px width) */
    padding: 3px 10px;
    /* ensure box-sizing keeps width predictable */
    box-sizing: border-box;
  }
  
  /* On very small screens in compare modes, allow main to grow beyond viewport height
     to accommodate larger table structures without cutting off rows */
  main.compare-dates-mode,
  main.compare-mode {
    height: auto !important;
    min-height: calc(100vh - 3rem);
  }
}

/* Make interval selector match the presets look-and-feel */
#intervalSelect {
  font-weight: 600;
}

/* Unidades en minúsculas dentro de cabecera (el thead está en uppercase) */
#weatherTable thead th .unit-temp,
#weatherTable thead th .unit-lower {
  text-transform: lowercase !important;
  letter-spacing: 0;
}

/* Resumen de ruta en th:first-child de la fila 2 */
.route-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: normal;      /* anula nowrap del th para permitir multilínea */
  /* NEW: prevent container overflow */
  max-width: 100%;
  min-width: 0;            /* allow flex shrinking */
  margin-bottom: 8px;    /* separation from sun-wrap when in combined-header */
}
.route-summary .rs-icon {
  font-size: 26px;
  line-height: 1;
  color: #29519b;
  flex: 0 0 auto;
}
.route-summary .rs-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;            /* allow text truncation */
  flex: 1;                 /* grow to fill available space */
}
.route-summary .rs-line {
  font-size: 12.5px;
  color: #203050;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;     /* NEW: force single line for ellipsis */
}

/* Cabecera unificada: quitar línea entre fila 1 y 2 */
#weatherTable thead tr:first-child th {
  border-bottom: none !important;
}

/* Fila 2 (iconos): mismo fondo que fila 1, sin borde superior y con separador inferior normal */
#weatherTable thead tr.icon-row th {
  background: #e3f0fd;           /* igual que thead th */
  border-top: 0 !important;      /* sin línea entre fila 1 y 2 */
  border-bottom: 1px solid #bdd7f6; /* separador hacia el resto de filas */
  text-align: center;            /* centra iconos */
}

/* Eliminar la regla anterior que afectaba a toda la 2ª fila del thead */
/* #weatherTable thead tr:nth-child(2) th { ... } */
#weatherTable thead tr:nth-child(2) th {
  /* revertir efectos previos: no cambiar fondo/lineas aquí */
  background: unset;
  border-top: unset;
}

/* Unificar estilo visual del bloque solar con el del resumen */
.sunHeaderBox .sunRow {
  font-size: 12.5px;
  line-height: 1.1;
  color: #203050;
}
.sunHeaderBox .sunRow .wi {
  color: #29519b;
}

/* First header row: make distance more discreet than time */
#weatherTable thead tr:first-child .time-dist-col .time-cell {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
}
#weatherTable thead tr:first-child .time-dist-col .m-cell .m-text {
  font-size: 12px;
  color: #475569;     /* muted */
  opacity: 0.95;
  text-transform: none; /* numbers unaffected; units handled via .unit-lower */
}

/* Scroll affordance: side fades (overlay) + prominent arrow hint */
.wtc-wrap {
  position: relative;
  padding-top: 8px;          /* was 16px: reduced by half */
  --fade-left: 0px;
  --fade-right: 0px;
  min-width: 0;              /* NEW: allow shrink inside flex containers */
}
/* Overlay fades on wrapper (don’t move when table scrolls) */
.wtc-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 200ms ease;
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: var(--fade-left) 100%, var(--fade-right) 100%;
  background-image:
    linear-gradient(to right, rgba(227, 240, 253, 0.95), rgba(227, 240, 253, 0)),
    linear-gradient(to left,  rgba(227, 240, 253, 0.95), rgba(227, 240, 253, 0));
}
.wtc-wrap.can-scroll::before { opacity: 1; }

/* Positions for fades depending on scroll state */
.wtc-wrap.at-left { --fade-left: 0px;  --fade-right: 28px; }
.wtc-wrap.mid     { --fade-left: 28px; --fade-right: 28px; }
.wtc-wrap.at-right{ --fade-left: 28px; --fade-right: 0px;  }

/* Always-visible, prominent arrow hint on wrapper (fit into 16px lane) */
.wtc-wrap::after {
  content: "⇆";
  position: absolute;
  top: -4px;                  /* was -2px: nudge a bit higher */
  right: 10px;
  background: rgba(30,64,175,0.96);
  color: #fff;
  font-weight: 800;
  font-size: 12px;        /* smaller text */
  padding: 2px 8px;       /* 12 + 2*2 = 16px total height */
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  opacity: 0;
  animation: none;        /* no blinking/animation */
  pointer-events: none;
  z-index: 3;
}
.wtc-wrap.can-scroll::after { opacity: 1; }

/* Subtle left-right wiggle to draw attention */
@keyframes cw-scroll-hint {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(0); }
  75%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Remove old state-based hiding */
#weatherTableContainer.scrolled::after { opacity: 1; }
#weatherTableContainer.hint-on::after  { opacity: 1; }

/* Labels at 14px inside the params row */
#controlsPanel .params label {
  font-size: 14px;
  line-height: 16px;
}

/* Small inline notice for horizon/fallback messages */
#horizonNotice.notice {
  background: #fff7ed;           /* warm light (orange-50) */
  color: #7c2d12;                /* orange-900 */
  border: 1px solid #fdba74;     /* orange-300 */
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  margin: 6px 0;
}

/* NEW: variants */
#horizonNotice.notice.warn {
  background: #fff7ed;
  color: #7c2d12;
  border-color: #fdba74;
}
#horizonNotice.notice.error {
  background: #fee2e2;  /* red-100 */
  color: #7f1d1d;       /* red-900 */
  border-color: #fca5a5;/* red-300 */
}

/* Larger MeteoBlue API input for readability */
#configMenu #apiKey {
  height: 36px;
  font-size: 14px;
  letter-spacing: 0.02em;
  width: 65%; /* make it span the full panel width */
}

#configMenu #apiKeyOW {
  height: 36px;
  font-size: 14px;
  letter-spacing: 0.02em;
  width: 65%; /* make it span the full panel width */
}

/* Themed “Check API” button */
#configMenu #checkApiKey {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2563eb;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, transform 100ms ease, opacity 120ms ease;
}

#configMenu #checkApiKeyOW {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2563eb;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, transform 100ms ease, opacity 120ms ease;
}

#configMenu #checkApiKey::before { content: "🔍"; }
#configMenu #checkApiKey.testing::before { content: "⏳"; }
#configMenu #checkApiKey:hover { background: #1d4ed8; transform: translateY(-1px); }
#configMenu #checkApiKey:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

#configMenu #checkApiKeyOW::before { content: "🔍"; }
#configMenu #checkApiKeyOW.testing::before { content: "⏳"; }
#configMenu #checkApiKeyOW:hover { background: #1d4ed8; transform: translateY(-1px); }
#configMenu #checkApiKeyOW:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Inline status for API key test */
#configMenu .key-status {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #203050;
}
#configMenu .key-status.ok {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}
#configMenu .key-status.warn {
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fdba74;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}
#configMenu .key-status.error {
  color: #7f1d1d;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}
#configMenu .key-status.testing {
  color: #1f2a44;
  background: #e5e7eb;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* Sun header: subtle downscale so it reads secondary vs summary */
.combined-header .sun-wrap {
  font-size: 0.9em;     /* downscale the whole sun block */
}

/* Tighten spacing and sizes inside the sun block */
.sunHeaderBox { gap: 8px; }                      /* tighter overall spacing */
.sunHeaderBox .sunRow {
  font-size: 11px;                               /* same as civil */
  gap: 5px;
  line-height: 1.05;
}
.sunHeaderBox .sunRow .wi { font-size: 15px; }   /* compact icon */

/* Force compact size specifically for sunrise/sunset icons */
.sunHeaderBox .sunRow .wi.wi-sunrise,
.sunHeaderBox .sunRow .wi.wi-sunset {
  font-size: 15px !important;
  color: #29519b; /* same tone used elsewhere in sun block */
}

/* Extra compact on small screens */
@media screen and (max-width: 700px) {
  .sunHeaderBox .sunRow { font-size: 10.5px; }
  .sunHeaderBox .sunRow .wi,
  .sunHeaderBox .sunRow .wi.wi-sunrise,
  .sunHeaderBox .sunRow .wi.wi-sunset { font-size: 14px !important; }
}

/* Slight indent for the whole combined block in the sticky first column */
#weatherTable thead tr:first-child th:first-child .combined-header {
  padding-left: 8px; /* small right shift */
}

/* Keep horizontal scrolling inside the table container on small screens */
html, body { overflow-x: hidden; }                 /* avoid page-wide horizontal scroll */

/* confine overscroll to inner scroller */
.wtc-wrap {
  overscroll-behavior-x: contain;
  /* touch-action removed here to not restrict descendants on some mobiles */
}
#weatherTableContainer {
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y; /* enable horizontal pan within the container */
  -webkit-overflow-scrolling: touch;
}

/* Horizontal scroller UX */
#weatherTableContainer { cursor: grab; }
#weatherTableContainer.dragging {
  cursor: grabbing;
  user-select: none;
  touch-action: none;
}
body.dragging { user-select: none; }

/* Stronger override for very small screens */
@media screen and (max-width: 700px) {
  #controlsPanel { align-items: flex-start; } /* ...existing rule... */

  /* NEW: keep the scroll wrapper stretched even with align-items:flex-start */
  #controlsPanel .wtc-wrap {
    align-self: stretch;
    width: 100% !important;
    min-width: 0 !important;     /* ensure it can be narrower than content */
  }
  /* Reaffirm inner scroller sizing */
  #weatherTableContainer {
    max-width: 100% !important;
  }

  /* Ajustes para mapa en pantallas muy pequeñas */
  #map {
    min-height: 200px;   /* Permite mapita visible en móviles */
    max-height: 40vh;
  }
}

/* NEW: extend the same override to <=900px */
@media screen and (max-width: 900px) {
  .wtc-wrap { touch-action: auto !important; }
  #weatherTableContainer { touch-action: pan-x pan-y !important; }
}

/* Viewport badge (shown when Debug is ON) */
#vpBadge {
  position: fixed;
  bottom: 8px;
  left: 8px;
  z-index: 20010;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font: 11px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 4px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  pointer-events: none;
  display: none; /* shown via Debug toggle */
  white-space: nowrap;
}

/* Make generated columns clickable */
#weatherTable [data-col] { cursor: pointer; }

/* Clickable wind markers */
.wind-divicon {
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
}

/* Remove previous scale-up on selection to avoid mismatch (keep rotation from inline style) */
.wind-divicon.is-selected .wind-svg-wrap {
  position: relative;
  /* removed transform override to preserve arrow+halo rotation */
  filter:
    drop-shadow(0 0 8px rgba(245, 158, 11, 0.6))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
  transition: none;
}

/* Hide ellipse halo by default inside the SVG, show when selected */
.wind-divicon .wm-halo { display: none; }
.wind-divicon.is-selected .wm-halo { display: block; }

/* First-column label icons and text */
#weatherTable th .label-ico {
  color: #29519b;
  font-size: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

/* Abbreviations: hidden by default, shown in small screens */
#weatherTable th .label-abbrev {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: #203050;
}

/* In small screens, hide full label text and show abbrev for provider cells */
@media screen and (max-width: 700px) {
  #weatherTable tbody th .label-text {
    display: none !important;
  }
  #weatherTable tbody th .label-abbrev {
    display: inline !important;
  }
  /* Slightly compact the label icon on small screens */
  #weatherTable th .label-ico {
    margin-right: 0;
    font-size: 16px;
  }
}

/* Compact summary overrides on small screens: keep sun to the right and avoid truncation */
@media screen and (max-width: 700px) {
  /* Force single-row layout: summary (left) + sun (right) */
  #compactSummary.compact-summary .combined-header {
    display: flex;
    flex-direction: row;
    align-items: center; /* center vertically so route-summary and sun block align */
    justify-content: space-between;   /* push sun block to the right */
    gap: 10px;
    flex-wrap: nowrap;                /* prevent sun from going below */
    width: 100%;
  }
  /* Let the summary grow and wrap; remove artificial 60% cap */
  #compactSummary .route-summary {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;       /* override previous 60% cap */
  }
  /* Allow text to wrap; remove ellipsis clipping in compact header */
  #compactSummary .route-summary .rs-line {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* Keep sun block on the right and sized to its content */
  #compactSummary .sun-wrap {
    flex: 0 0 auto;
    min-width: max-content;
    margin-left: 8px;
  }
}

/* Compact summary (hidden by default) */
.compact-summary {
  display: none;              /* CHANGED: hide by default; shown via media query */
  background: #e3f0fd;
  border: 1px solid #bdd7f6;
  color: #203050;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 3px 8px rgba(30,64,175,0.12);
}

/* Horizontal layout on small screens: summary (left) + sun times (right) */
@media screen and (max-width: 700px) {
  #compactSummary.compact-summary { display: flex; }
  #compactSummary.compact-summary .combined-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* NEW: prevent overflow */
    max-width: 100%;
    min-width: 0;
  }
  #compactSummary .route-summary { 
    flex: 1 1 auto; 
    min-width: 0;          /* allow shrinking for text truncation */
    max-width: 60%;        /* leave space for sun times */
  }
  #compactSummary .sun-wrap     { flex: 0 0 auto; min-width: max-content; }
  #compactSummary .sunHeaderBox .sunRow { font-size: 11px; }
  #compactSummary .sunHeaderBox .sunRow .wi { font-size: 14px; }
  
  /* NEW: ensure route name truncation in compact mode */
  #compactSummary .route-summary .rs-line {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Keep the large sticky combined-header hidden on small screens to avoid duplicate info */
@media screen and (max-width: 700px) {
  #weatherTable thead tr:first-child th:first-child .combined-header {
    display: none !important;
  }
}

/* Ensure first header row (hours/km) stays intact (no changes needed here) */

/* Small-screen: collapse first column to icons only (keep hours/km row intact) */
@media screen and (max-width: 700px) {
  :root { --cw-first-col: 65px; } /* narrow sticky first column */

  /* Show the compact summary and hide the large combined header inside the table */
  #compactSummary.compact-summary { display: flex; }
  #weatherTable thead tr:first-child th:first-child .combined-header {
    display: none !important; /* do not remove the cell, just its content */
  }

  /* Hide label text ONLY in metric label rows (exclude 1st header row and the icon-row) */
  #weatherTable thead tr:not(.icon-row):not(:first-child) th:first-child .label-text {
    display: none !important;
  }
  /* If a tbody exists in future, hide label text there too */
  #weatherTable tbody th .label-text {
    display: none !important;
  }

  /* Center the icon within the narrow first column for metric rows */
  #weatherTable thead tr:not(.icon-row):not(:first-child) th:first-child,
  #weatherTable tbody th:first-child {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Keep the first header row (hours/km) left-aligned and unchanged */
  #weatherTable thead tr:first-child th:first-child {
    text-align: left;
  }

  /* Slightly compact the label icon on small screens */
  #weatherTable th .label-ico {
    margin-right: 0;
    font-size: 16px;
  }
}

@media screen and (max-width: 700px) {
  /* Hide help text on small screens, keep only icon */
  #toggleHelp .help-text { display: none; }

  /* Small-screen: hide plain text nodes in help/config buttons and show compact emoji via pseudo-elements
     These rules are intentionally limited to narrow viewports so desktop keeps full labeled buttons. */
  @media screen and (max-width: 700px) {
    /* Robust: if JS writes plain text into the button (no span),
       force button text invisible and show only the help emoji via pseudo-element. */
    #toggleHelp {
      font-size: 0;            /* hide any direct text node */
      line-height: 1;
      position: relative;
    }
    #toggleHelp::before {
      content: "❓";
      display: inline-block;
      font-size: 0.95rem;      /* explicit size so it's visible despite parent font-size:0 */
      line-height: 1;
      vertical-align: middle;
      margin: 0 .12rem 0 0;
    }

    /* Hide config label text on small screens, keep gear icon (in-DOM) */
    #toggleConfig .config-text { display: none !important; }
    /* If config-ico exists, hide it to avoid duplicate when using pseudo */
    #toggleConfig .config-ico { display: none !important; }

    /* Robust: hide any direct text nodes by zeroing button font-size,
       but render the gear via a pseudo-element with its own font-size. */
    #toggleConfig {
      font-size: 0;               /* hide any plain text nodes */
      line-height: 1;             /* keep button height sane */
      position: relative;
    }
    #toggleConfig::before {
      content: "⚙️";
      display: inline-block;
      font-size: 0.95rem;         /* explicit size so it's visible despite parent font-size:0 */
      line-height: 1;
      vertical-align: middle;
      margin: 0 .12rem 0 0;
    }

    /* Improve help button visibility on small screens */
    #toggleHelp {
      background-color: rgba(255,255,255,0.15) !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,0.3) !important;
    }
  }
  
  /* Make nav buttons more compact on mobile */
  nav button {
    padding: 0.25rem 0.5rem;
    min-width: 32px;
    font-size: 0.9rem;
  }
}

/* Fine-tune vertical alignment in compact summary (small screens) */
@media screen and (max-width: 700px) {
  #compactSummary.compact-summary .combined-header {
    align-items: center; /* ensure centered alignment */
  }
  /* Nudge the left summary up for optical alignment with sun times (raised a couple of pixels) */
  /* Optical nudge: lower the route-summary slightly so it visually centers with the sun block */
  #compactSummary .route-summary { transform: translateY(4px); }
  /* Slightly lower the icon as well to keep its baseline aligned with the text */
  #compactSummary .route-summary .rs-icon { transform: translateY(4px); }
}

#configMenu .config-row label.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Allow the inline label (checkbox + text) to occupy the full width of the row
   so the text doesn't wrap into two lines on wide screens. On small screens
   the span is allowed to wrap. */
#configMenu .config-row > label.inline {
  flex: 1 1 auto; /* grow to fill available space */
  width: auto;
  min-width: 0;
}
#configMenu .config-row > label.inline span {
  flex: 1 1 auto; /* let text take remaining space */
  white-space: nowrap; /* prefer single line */
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 700px) {
  #configMenu .config-row > label.inline span {
    white-space: normal; /* allow wrap on small screens */
  }
}

/* Compare mode: provider first-column sticky + styled (match header bg) */
#weatherTable.compare-mode tbody th.provider-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  width: var(--cw-first-col);
  min-width: var(--cw-first-col);
  max-width: var(--cw-first-col);
  background-color: #e0ebff !important;  /* match header's background */
  color: #203050 !important;
  font-weight: 700 !important;
  text-align: left;
  box-shadow: 2px 0 0 rgba(0,0,0,0.04);
}

/* Keep same style for any first th in tbody (fallback if class missing) */
#weatherTable.compare-mode tbody th:first-child {
  background-color: #e0ebff !important;  /* match header's background */
  color: #203050 !important;
  font-weight: 700 !important;
}

/* Additional override for all tbody th in compare mode to ensure consistency */
#weatherTable.compare-mode tbody th {
  background-color: #e0ebff !important;  /* match header's background */
  color: #203050 !important;
  font-weight: 700 !important;
  text-align: left;
}

/* Compare-dates mode: mimic normal look and keep sticky first column */
#weatherTable.compare-dates-mode {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: auto; /* allow table to be wider than container for scrolling */
}
#weatherTable.compare-dates-mode tbody tr th:first-child,
#weatherTable.compare-dates-mode thead tr th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #e0ebff; /* match provider compare first column */
  width: 170px; /* increased width for better fit with units and larger numbers */
  min-width: 170px;
  max-width: 170px;
}
#weatherTable.compare-dates-mode tbody tr th {
  text-align: left;
  padding: 18px 8px;
  font-weight: 700; /* match provider weight */
  color: #203050;  /* match provider color */
  border-right: 1px solid #e5edf6;
  white-space: nowrap;
}
#weatherTable.compare-dates-mode tbody tr td {
  padding: 16px 6px;
  text-align: center;
  border-right: 1px solid #eef3f9;
}
#weatherTable.compare-dates-mode .cell-row { display:flex; gap:6px; align-items:center; justify-content:center; min-width:0; }
#weatherTable.compare-dates-mode .cell-row.no-icon .time-dist-col { margin-left: 0; }
#weatherTable.compare-dates-mode .cell-row .icon-col img { width:16px; height:26px; object-fit:contain; display:block; }
#weatherTable.compare-dates-mode .time-dist-col { display:flex; flex-direction:column; gap:2px; min-width:0; }
#weatherTable.compare-dates-mode .m-cell .m-text { font-size: 11px; color:#577; }
#weatherTable.compare-dates-mode tbody tr:nth-child(odd) td { background: transparent; }
#weatherTable.compare-dates-mode tbody tr:nth-child(even) td { background: transparent; }
#weatherTable.compare-dates-mode tbody tr.interval-row td { background: #e3f0fd; }
#weatherTable.compare-dates-mode .time-cell { font-variant-numeric: tabular-nums; font-weight: 600; color: #0b6297; }
#weatherTable.compare-dates-mode .date { color: #5a7a9a; margin-left: 6px; font-weight: 500; }
/* Make the combined summary inside the sticky first column wrap and be extra compact */
#weatherTable.compare-dates-mode tbody tr th:first-child .combined-header {
  white-space: normal !important;
  line-height: 1.1;
}
#weatherTable.compare-dates-mode tbody tr th:first-child .route-summary {
  font-size: 12px;
}
#weatherTable.compare-dates-mode tbody tr th:first-child .route-summary .rs-line {
  white-space: normal;
}

/* Responsive styles for compare-dates mode on small screens */
@media screen and (max-width: 700px) {
  #weatherTable.compare-dates-mode {
    font-size: 12px; /* Reduce font size for better fit */
    width: auto; /* Allow table to size based on content but respect min-width from JS */
  }

  #weatherTable.compare-dates-mode tbody tr th:first-child {
    width: 140px; /* Increased first column width on small screens for units and larger numbers */
    min-width: 140px;
    max-width: 140px;
    padding: 12px 6px; /* Reduce padding */
  }

  #weatherTable.compare-dates-mode tbody tr th {
    padding: 12px 4px; /* Reduce padding for all header cells */
    font-size: 11px; /* Smaller font for headers */
  }

  #weatherTable.compare-dates-mode tbody tr td {
    padding: 10px 3px; /* Reduce padding for data cells */
    min-width: 60px; /* Increased minimum width for data cells */
    width: 60px; /* Fixed width to ensure consistency */
  }

  #weatherTable.compare-dates-mode .cell-row .icon-col img {
    width: 14px; /* Smaller icons */
    height: 20px;
  }

  #weatherTable.compare-dates-mode .time-dist-col {
    gap: 1px; /* Reduce gap */
  }

  #weatherTable.compare-dates-mode .time-cell {
    font-size: 10px; /* Smaller time text */
  }

  #weatherTable.compare-dates-mode .m-cell .m-text {
    font-size: 9px; /* Smaller distance text */
  }

  /* Optimize weather data display in compare-dates mode on small screens */
  #weatherTable.compare-dates-mode .weather-combined {
    min-width: 0 !important;
    flex-shrink: 1;
  }
  
  #weatherTable.compare-dates-mode .weather-combined .combined-top {
    font-size: 12px;
    font-weight: 600;
  }
  
  #weatherTable.compare-dates-mode .weather-combined .combined-bottom {
    font-size: 9px;
    line-height: 1.1;
  }

  /* Ensure container allows proper scrolling on small screens */
  #weatherTableContainer {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* In compare-dates mode on small screens, hide the large combined header
     inside the sticky first column to avoid duplicating the compact summary */
  #weatherTable.compare-dates-mode tbody tr th:first-child .combined-header { display: none !important; }
  
  /* Ensure summary rows are visible and have proper height */
  #weatherTable.compare-dates-mode tbody tr {
    display: table-row !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 40px;
  }
  
  #weatherTable.compare-dates-mode tbody tr:not(.interval-row) {
    background-color: #f8fafc !important; /* Light background for summary rows */
  }
  
  #weatherTable.compare-dates-mode tbody tr.summary-row {
    display: table-row !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 45px;
  }
  
  #weatherTable.compare-dates-mode tbody tr.summary-row td {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Resizer grips (left & right) */
#debugResizerLeft, #debugResizerRight {
  position: absolute;
  bottom: 6px;
  width: 14px;
  height: 14px;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.35) 0 2px,
    rgba(255,255,255,0.1) 2px 4px
  );
  border-radius: 3px;
  opacity: 0.8;
}
#debugResizerLeft { left: 6px;  cursor: nesw-resize; }
#debugResizerRight{ right: 6px; cursor: nwse-resize; }
#debugResizerLeft:active, #debugResizerRight:active { opacity: 1; }

/* Toolbar de la consola */
#debugToolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #111;
  color: #eee;
  padding: 6px 8px;
  border-bottom: 1px solid #333;
  position: sticky;
  top: 0;
  z-index: 1;
}
#debugToolbar button {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #222;
  color: #eee;
}
#debugToolbar button:hover { background: #2a2a2a; }
#debugToolbar label { font: 12px -apple-system, system-ui; display:inline-flex; gap:6px; align-items:center; }

/* Alinear y escalar el botón de debug como los otros del nav */
#toggleDebug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;     /* coherente con nav button */
  height: 28px;        /* misma altura visual que .small-file-btn */
  padding: 0.05rem 0.35rem;
  line-height: 1;
}
#toggleDebug .debug-ico {
  font-size: 1.05rem;  /* el emoji rinde algo más pequeño: ligero boost */
  line-height: 1;
  display: inline-block;
}
#toggleDebug .debug-text {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* En móviles: igualar a los otros (solo icono) */
@media screen and (max-width: 700px) {
  #toggleDebug {
    height: 28px;
    padding: 0.25rem 0.5rem;
  }
  #toggleDebug .debug-text { display: none !important; }
  #toggleDebug .debug-ico   { font-size: 0.95rem; }
}

/* Compare mode row selection styles */
tr.selected-row {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-left: 3px solid #3b82f6;
}

tr.selected-row td {
  background-color: rgba(59, 130, 246, 0.05) !important;
}

tr.selected-row:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Compare mode column selection styles */
.selected-col {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-top: 2px solid #22c55e !important;
}

.selected-col:hover {
  background-color: rgba(34, 197, 94, 0.15) !important;
}

/* Weather table: icon + luminance styling */
.icon-with-lum { display: inline-flex; align-items: center; gap: 8px; }
.icon-with-lum .luminance-vert { display: inline-flex; flex-direction: column; align-items: center; min-width: 36px; }
.icon-with-lum { gap: 10px; }
/* vertical lum bar outer container */
.lum-vert-outer { width: 8px; height: 28px; background: #e5e7eb; border-radius: 4px; overflow: hidden; display: inline-block; margin-left: 6px; }
.lum-vert-inner { width: 100%; background: linear-gradient(180deg, #f59e0b 0%, #f97316 100%); display: block; transform-origin: bottom center; }
.luminance-vert .lum-value { font-size: 11px; color: #374151; margin-top: 4px; }

/* Cloud / UV combined cell */
.cloud-uv-cell { display: inline-flex; align-items: center; gap: 6px; }
.cloud-uv-cell .cloud-part, .cloud-uv-cell .uv-part { display: inline-flex; align-items: center; gap: 4px; }
.cloud-uv-cell .cloud-text, .cloud-uv-cell .uv-text { font-size: 13px; color: #263238; }
.cloud-uv-cell .sep { color: #9aa4ad; }

/* Label spacing: ensure header label shows icon - text - icon with clear spacing */
.label-ico { vertical-align: middle; }
.label-text { display: inline-block; margin: 0 8px; white-space: nowrap; }

/* Ensure the first-column label keeps icons separated even on medium-small widths (>420px) */
@media screen and (min-width: 421px) {
  #weatherTable thead th:first-child .label-ico { margin: 0 4px; }
}

/* Toggle parts for compact vs desktop label rendering */
.desktop-only { display: inline; }
.compact-only { display: none; }

@media screen and (max-width: 700px) {
  .desktop-only { display: none; }
  .compact-only { display: inline-block; margin-left: 6px; }
  .compact-only .sep { padding: 0 4px; color: #9aa4ad; }
}

/* Tooltip styling for luminance and cloud/UV explanations */
.cw-tooltip {
  position: absolute;
  z-index: 12000;
  background: rgba(20,20,30,0.95);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 260px;
  display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.36);
}

/* Compact breakpoint: reduce spacing between cloud% / slash / UV number and hide icons inside data cells */
@media screen and (max-width: 700px) {
  .cloud-uv-cell .cloud-part i, .cloud-uv-cell .uv-part i { display: none; }
  .cloud-uv-cell .cloud-text, .cloud-uv-cell .uv-text { display: inline-block; }
  /* tighten gaps so the row is less wide */
  .cloud-uv-cell { gap: 2px; }
  .cloud-uv-cell .cloud-part, .cloud-uv-cell .uv-part { gap: 1px; }
  .cloud-uv-cell .sep { display: inline-block; padding: 0 2px; }
  /* Make luminance compact next to icon */
  .icon-with-lum { gap: 6px; }
  .luminance-vert { min-width: 28px; }
  .luminance-vert .lum-value { font-size: 10px; }
}