* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background: #d4e8f5;
  font-size: 13px;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* ── CAPÇALERA ── */
#header {
  background: #1a5276;
  color: #fff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid #ec2e00;
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 46px;
}
#header .logo { font-size: 18px; font-weight: bold; letter-spacing: 1px; white-space: nowrap; }
#header .subtitle { font-size: 10px; color: #aad4f5; }
#header .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── COMPTADOR ENRERE ── */
#countdown-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 11px;
  color: #f39c12;
  white-space: nowrap;
  flex-shrink: 0;
}
#countdown-wrap .cd-label { color: #aad4f5; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; }
#countdown-val { font-weight: bold; font-size: 13px; letter-spacing: 1px; font-family: 'Courier New', monospace; }

#header select {
  background: #154360; color: #fff; border: 1px solid #2471a3;
  padding: 4px 8px; border-radius: 3px; font-size: 11px; cursor: pointer;
}
#header select:focus { outline: none; }

.btn-pro {
  background: #3a9fff; color: white; padding: 6px 12px; border: none;
  border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 11px;
  white-space: nowrap; transition: background .2s;
}
.btn-pro:hover { background: #2980b9; }

/* ── BARRA VARIABLES ── */
#varbar { background: #1a5276; border-bottom: 3px solid #ec2e00; flex-shrink: 0; }
.var-group { border-bottom: 1px solid #1a6e9a; }
.var-group-header {
  background: linear-gradient(to right, #1a5276, #2471a3);
  color: #fff; padding: 6px 12px; font-size: 11px; font-weight: bold;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  text-transform: uppercase; user-select: none; transition: background .2s;
}
.var-group-header:hover { background: linear-gradient(to right, #154360, #1f618d); }
.var-group-header::after { content: '▼'; font-size: 9px; transition: transform 0.3s; }
.var-group.closed .var-group-header::after { transform: rotate(-90deg); }
.var-group-content { padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; background: #154360; }
.var-group.closed .var-group-content { display: none; }

.var-btn {
  background: #2c3e50; color: #ecf0f1; border: 1px solid #34495e;
  padding: 5px 12px; cursor: pointer; font-size: 11px; border-radius: 4px;
  transition: all 0.2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.var-btn:hover { background: #34495e; border-color: #5d6d7e; transform: translateY(-1px); }
.var-btn.active {
  background: #e67e22; color: #fff; border-color: #d35400; font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ── LAYOUT ── */
#main { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* ── BARRA D'HORES ── */
#hourbar {
  background: #fff; border-right: 1px solid #aab8c2; width: 62px;
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  flex-shrink: 0; scrollbar-width: thin; scrollbar-color: #aab8c2 #fff;
}
#hourbar::-webkit-scrollbar { width: 4px; }
#hourbar::-webkit-scrollbar-thumb { background: #aab8c2; border-radius: 2px; }
.hour-column { display: flex; flex-direction: column; width: 100%; }
.hour-column-title {
  font-size: 9px; font-weight: bold; text-align: center; padding: 5px 0;
  background: #f4f4f4; color: #555; border-bottom: 1px solid #ddd;
  position: sticky; top: 0; z-index: 10; text-transform: uppercase;
}
.hour-link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 30px; font-size: 11px; cursor: pointer; color: #1a5276;
  border-bottom: 1px solid #f9f9f9; border-left: 3px solid transparent;
  font-weight: bold; transition: background 0.1s; user-select: none;
}
.hour-link:hover { background: #d6eaf8; }
.hour-link.active { background: #ebf5fb; color: #2980b9; border-left: 3px solid #e67e22; }
.hour-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); background: #aab8c2; flex-shrink: 0; }
.hour-link.active .hour-dot { background: #e67e22; }

/* ── ZONA MAPA ── */
#mapzone { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }

/* ── BARRA ANIMACIÓ ── */
#animbar {
  padding: 4px 10px; min-height: 35px; display: flex; align-items: center;
  gap: 6px; background: #fff; border-bottom: 1px solid #ddd;
  flex-shrink: 0; flex-wrap: wrap;
}
#animbar a {
  background: #ecf0f1; color: #2c3e50; border: 1px solid #bdc3c7;
  padding: 3px 10px; border-radius: 3px; cursor: pointer; font-size: 11px;
  text-decoration: none; display: inline-block; transition: background .15s; user-select: none;
}
#animbar a:hover { background: #d5dbdb; }
#curTime { font-size: 13px; font-weight: bold; color: #ec2e00; }
#btnToggleWind { background: #d5f5e3 !important; color: #1e8449 !important; border-color: #a9dfbf !important; }
#btnToggleWind.off { background: #f2f3f4 !important; color: #95a5a6 !important; border-color: #d5d8dc !important; }
#btnToggleIso { background: #f2f3f4 !important; color: #95a5a6 !important; }
#btnToggleIso.on { background: #d6eaf8 !important; color: #2471a3 !important; border-color: #a9cce3 !important; }

/* ── CANVAS ── */
#canvas-wrap {
  flex: 1; background: #ffffff; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 0;
}
#mapCanvas { display: block; cursor: crosshair; box-shadow: 0 0 20px rgba(0,0,0,0.1); touch-action: none; }

/* ── LLEGENDA ── */
#legend {
  position: absolute; bottom: 25px; right: 25px;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.1); padding: 12px 15px; border-radius: 10px;
  width: min(340px, 90vw); z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
body.mode-dark-ui #legend { background: rgba(44,47,51,0.9); color: white; border: 1px solid rgba(255,255,255,0.1); }
.leg-title { display: block; font-weight: bold; font-size: 11px; color: #2c3e50; margin-bottom: 8px; text-transform: uppercase; text-align: center; }
body.mode-dark-ui .leg-title { color: #ecf0f1; }
#leg-bar { height: 14px; display: flex; border-radius: 2px; overflow: hidden; border: 1px solid #95a5a6; }
.leg-seg { flex: 1; height: 100%; }
#leg-ticks { display: flex; justify-content: space-between; margin-top: 5px; }
.leg-tk { font-size: 9px; color: #34495e; font-weight: bold; width: 0; display: flex; justify-content: center; white-space: nowrap; }
body.mode-dark-ui .leg-tk { color: #bdc3c7; }

/* ── MENÚ CONTEXTUAL ── */
#contextMenu {
  display: none; position: fixed; z-index: 2000; background: #ffffff;
  border: 1px solid #bdc3c7; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-radius: 4px; padding: 5px 0; min-width: 160px;
}
.context-item { padding: 8px 15px; font-size: 12px; color: #2c3e50; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.2s; }
.context-item:hover { background: #3498db; color: white; }
.context-sep { height: 1px; background: #eee; margin: 5px 0; }

/* ── LOADER ── */
#loader-overlay {
  position: fixed; inset: 0; background: #1a5276; z-index: 999999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  #header .logo { font-size: 14px; }
  .btn-pro { display: none; }
  #hourbar { width: 50px; }
  .hour-link { height: 26px; font-size: 10px; }
  #legend { width: calc(100vw - 58px); bottom: 8px; right: 8px; padding: 8px 10px; }
  .leg-title { font-size: 9px; }
  .leg-tk { font-size: 7px; }
  #animbar a { padding: 2px 7px; font-size: 10px; }
  #curTime { font-size: 11px; }
  .var-btn { font-size: 10px; padding: 4px 8px; }
  .var-group-header { font-size: 10px; padding: 5px 10px; }
  #countdown-val { font-size: 11px; }
}
@media (max-width: 400px) {
  #header select { max-width: 100px; font-size: 10px; }
  #countdown-wrap { padding: 2px 6px; font-size: 10px; }
}




/* --- SKEW-T MINIMALISTA BLANC --- */
#skewtBox {
    background: #ffffff !important;
    border-radius: 0 !important;
    border: 1px solid #d0d7de !important; /* Bord gris clar tipus GitHub */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}

/* Capçalera neta */
#skewtBox > div:first-child {
    background: #ffffff !important;
    color: #24292f !important;
    border-bottom: 1px solid #d0d7de !important;
    padding: 12px 20px !important;
}

#skewtBox h3 {
    color: #24292f !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#skewtSub {
    color: #57606a !important;
    font-size: 11px !important;
}

/* Secció del Slider (Hores) */
#skewtBox > div:nth-child(2) {
    background: #f6f8fa !important; /* Gris gairebé blanc */
    border-bottom: 1px solid #d0d7de !important;
    color: #24292f !important;
    padding: 8px 20px !important;
}

#skewtHourDisplay {
    background: #24292f !important; /* L'únic element negre per contrast */
    color: #ffffff !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
}

/* Botons Minimalistes */
#skewtBox button {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    transition: background 0.2s !important;
    cursor: pointer !important;
}

/* Botó Mode */
#skewtBox button:first-child {
    background: #ffffff !important;
    color: #24292f !important;
    border: 1px solid #d0d7de !important;
}
#skewtBox button:first-child:hover {
    background: #f3f4f6 !important;
}

/* Botó Tancar */
#skewtBox button:last-child {
    background: #cf222e !important; /* Vermell suau d'error */
    color: #ffffff !important;
    border: none !important;
}
#skewtBox button:last-child:hover {
    background: #a40e26 !important;
}

/* Panell lateral d'estadístiques */
#soundingStats {
    background: #ffffff !important;
    border-left: 1px solid #d0d7de !important;
    padding: 15px !important;
}

#soundingStats > div {
    background: #f6f8fa !important; /* Caixes gris clar subtils */
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
}

#soundingStats .row { /* Si fas servir files */
    border-bottom: 1px solid #eee !important;
}

/* Slider d'hores */
#skewtHourSlider {
    accent-color: #777777;
}

#skewtHourDisplay {
    background: #000 !important;
    color: #0f0 !important;
    border-radius: 0 !important;
}



/* --- BOTONS SKEW-T OLD SCHOOL --- */

/* Botó MODE (🌓 Mode) */
#skewtBox button:first-child {
    background: #000 !important;      /* Fons negre */
    color: #0f0 !important;           /* Text verd terminal */
    border: 2px solid #0f0 !important; /* Bord verd */
    border-radius: 0 !important;      /* Cantonades rectes */
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    padding: 6px 15px !important;
    transition: all 0.2s !important;
}

#skewtBox button:first-child:hover {
    background: #0f0 !important;      /* Inverteix colors al passar el ratolí */
    color: #000 !important;
}

/* Botó TANCAR (X) */
#skewtBox button:last-child {
    background: #000 !important;      /* Fons negre */
    color: #f00 !important;           /* Text vermell "alerta" */
    border: 2px solid #f00 !important; /* Bord vermell */
    border-radius: 0 !important;      /* Cantonades rectes */
    font-family: 'Courier New', monospace !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    padding: 6px 15px !important;
}

#skewtBox button:last-child:hover {
    background: #f00 !important;      /* Inverteix colors al passar el ratolí */
    color: #000 !important;
}

/* El subtítol (Coordenades) estil retro */
#skewtSub {
    color: #0f0 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    opacity: 0.8;
}

/* El contenidor de la barra d'hores */
#skewtBox > div:nth-child(2) {
    background: #111 !important;      /* Fons gris molt fosc */
    border-bottom: 2px solid #000 !important;
    color: #0f0 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
}

/* Estil per a l'input range (el slider) estil retro */
#skewtHourSlider {
   
    background: #333;
    height: 4px;
    border: 1px solid #0f0;
}

#skewtHourSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: #0f0;
    border-radius: 0;
    cursor: pointer;
}



/* Millora visual del buscador de pobles */
#searchSuggestions {
    background: #111 !important;
    border: 1px solid #444;
    border-top: none;
    max-height: 250px;
    overflow-y: auto;
}

.suggestion-item {
    transition: background 0.2s;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.suggestion-item:hover {
    background: #f39c12 !important; /* Taronja de Tempestes.cat */
    color: #000 !important;
}


/* Punt de referència per a la cerca de localitats */
.search-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #f39c12;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.9);
    pointer-events: none;
    z-index: 1000;
    transition: all 0.05s linear;
    transform: translate(-50%, -50%);
}



.search-marker, .search-marker-label {
    transition: left 0.05s linear, top 0.05s linear, opacity 0.2s ease;
}

.search-marker-fade {
    animation: markerFadeOutLong 0.3s forwards !important;
}

@keyframes markerFadeOutLong {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

.search-marker-label {
    position: absolute;
    background: rgba(0,0,0,0.85);
    color: #f39c12;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    border: 1px solid #f39c12;
    backdrop-filter: blur(4px);
    transition: all 0.05s linear;
    transform: translate(-50%, -50%);
}

.search-marker-fade {
    animation: markerFadeOutLong 0.5s forwards;
}

@keyframes markerFadeOutLong {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

.ripple-effect {
    position: absolute;
    border: 2px solid rgba(243, 156, 18, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 999;
}

@keyframes markerPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.search-marker-fade {
    animation: markerFadeOut 2s forwards;
}

@keyframes markerFadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
        display: none;
    }
}

/* Animació més lenta per al punt principal */
.search-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #f39c12;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.9);
    pointer-events: none;
    z-index: 1000;
    animation: markerPulseLong 0.8s ease-out;
    transform: translate(-50%, -50%);
}

@keyframes markerPulseLong {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.search-marker-fade {
    animation: markerFadeOutLong 1s forwards;
}

@keyframes markerFadeOutLong {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
        display: none;
    }
}

/* Animació de l'ona expansiva més lenta */
@keyframes rippleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
        border-width: 3px;
    }
    50% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0.4;
        border-width: 2px;
    }
    100% {
        transform: translate(-50%, -50%) scale(6);
        opacity: 0;
        border-width: 1px;
    }
}



@keyframes rippleExpandDynamic {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
        width: 20px;
        height: 20px;
        border-width: 3px;
    }
    50% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0.4;
        width: 60px;
        height: 60px;
        border-width: 2px;
    }
    100% {
        transform: translate(-50%, -50%) scale(6);
        opacity: 0;
        width: 120px;
        height: 120px;
        border-width: 1px;
    }
}