/* ==================================================================
   MAR ADENTRO — carta de condiciones de buceo
   Estética: cuaderno de bitácora abisal. Fondo de sonda profunda,
   paneles de instrumento en cristal, lecturas monoespaciadas.
   ================================================================== */

:root{
  /* profundidades */
  --abyss:#031017;
  --deep:#06202b;
  --deep-2:#0a2b38;
  --panel:rgba(7,32,43,.84);
  --panel-2:rgba(10,43,56,.78);
  --line:rgba(120,205,215,.16);
  --line-2:rgba(120,205,215,.28);

  /* tinta */
  --ink:#e9f5f6;
  --dim:#9dbcc4;
  --faint:#628892;

  /* señales */
  --glow:#3ae0c8;
  --glow-soft:rgba(58,224,200,.16);
  --amber:#ffb454;

  --exc:#10b981; --good:#84cc16; --ok:#eab308; --bad:#f97316; --no:#ef4444;

  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --shadow:0 24px 60px -18px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.04) inset;
  --rail-w:332px;
  --sheet-w:426px;

  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'IBM Plex Sans',system-ui,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink);
  background:var(--abyss);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--ff-display);font-weight:500;margin:0;letter-spacing:-.01em}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}

/* grano fino sobre todo el lienzo */
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9000;opacity:.05;mix-blend-mode:overlay}

/* ============================ MAPA ============================ */
#map{position:fixed;inset:0;background:var(--abyss);z-index:0}
.leaflet-container{background:var(--abyss);font-family:var(--ff-body);outline:none}
.leaflet-tile{filter:saturate(.62) brightness(.78) contrast(1.08) hue-rotate(-12deg)}
.leaflet-control-attribution{
  background:rgba(3,16,23,.78)!important;color:var(--faint)!important;
  font-size:10px!important;backdrop-filter:blur(8px);border-radius:6px 0 0 0;
  padding:3px 8px!important;border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.leaflet-control-attribution a{color:var(--dim)!important;text-decoration:none}
.leaflet-control-zoom{border:none!important;margin:0!important;box-shadow:var(--shadow)!important}
.leaflet-control-zoom a{
  background:var(--panel)!important;color:var(--ink)!important;border:1px solid var(--line)!important;
  backdrop-filter:blur(14px);width:34px!important;height:34px!important;line-height:32px!important;
  font-size:17px!important;font-weight:400;transition:.18s;
}
.leaflet-control-zoom a:first-child{border-radius:10px 10px 0 0!important}
.leaflet-control-zoom a:last-child{border-radius:0 0 10px 10px!important;border-top:none!important}
.leaflet-control-zoom a:hover{background:var(--deep-2)!important;color:var(--glow)!important}
.leaflet-bar a.leaflet-disabled{opacity:.35}
.leaflet-control-container .leaflet-bottom.leaflet-right{margin-bottom:0}

/* ======================= BARRA SUPERIOR ======================= */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:600;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 18px 0 20px;
  background:linear-gradient(180deg,rgba(3,16,23,.94) 0%,rgba(3,16,23,.74) 70%,transparent 100%);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  animation:dropIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand__mark{width:30px;height:30px;color:var(--glow);flex:none;filter:drop-shadow(0 0 10px var(--glow-soft))}
.brand__mark svg{width:100%;height:100%}
.brand__text{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand__text b{font-family:var(--ff-display);font-size:19px;font-weight:600;font-variation-settings:'SOFT' 20,'opsz' 40;letter-spacing:-.015em}
.brand__text i{font-style:normal;font-size:10.5px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chrome__tools{display:flex;align-items:center;gap:10px}

.field{position:relative;display:flex;align-items:center}
.field--search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--faint);pointer-events:none}
.field--search input{
  width:236px;height:36px;padding:0 12px 0 32px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);outline:none;
  font-size:13px;transition:.2s;
}
.field--search input::placeholder{color:var(--faint)}
.field--search input:focus{border-color:var(--glow);box-shadow:0 0 0 3px var(--glow-soft);width:280px}
.field--search input::-webkit-search-cancel-button{filter:invert(.6)}

.suggest{
  position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:20;
  background:var(--panel-2);backdrop-filter:blur(20px);border:1px solid var(--line-2);
  border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;max-height:320px;overflow-y:auto;
}
.suggest button{
  display:flex;width:100%;align-items:center;gap:9px;padding:9px 12px;
  background:none;border:none;text-align:left;cursor:pointer;transition:.14s;border-bottom:1px solid rgba(120,205,215,.07)
}
.suggest button:last-child{border-bottom:none}
.suggest button:hover,.suggest button.is-active{background:var(--glow-soft)}
.suggest b{font-size:13px;font-weight:500}
.suggest i{font-style:normal;font-size:11px;color:var(--faint);margin-left:auto;white-space:nowrap}

.seg{display:flex;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:3px 3px 3px 11px;height:36px}
.seg__label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-right:5px}
.seg__btn{
  border:none;background:none;cursor:pointer;padding:0 11px;height:28px;border-radius:99px;
  font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--dim);transition:.2s;font-family:var(--ff-mono)
}
.seg__btn:hover{color:var(--ink)}
.seg__btn.is-on{background:var(--glow);color:#04222b;box-shadow:0 0 16px var(--glow-soft)}

.ghost{
  display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;font-size:12.5px;color:var(--dim);transition:.2s
}
.ghost svg{width:15px;height:15px}
.ghost:hover{color:var(--glow);border-color:var(--line-2);background:var(--panel-2)}

/* ====================== PANEL IZQUIERDO ====================== */
.rail{
  position:fixed;top:74px;left:14px;z-index:500;width:var(--rail-w);
  background:var(--panel);backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  display:flex;flex-direction:column;max-height:calc(100vh - 220px);
  animation:slideL .8s .1s cubic-bezier(.2,.8,.2,1) both;
}
.rail__head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 11px;border-bottom:1px solid var(--line)}
.rail__head h2{font-size:14.5px;font-weight:600;font-variation-settings:'SOFT' 30}
.rail__toggle{
  width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:none;
  cursor:pointer;color:var(--dim);font-size:15px;line-height:1;display:grid;place-items:center;transition:.2s
}
.rail__toggle:hover{color:var(--glow);border-color:var(--line-2)}
.rail__body{overflow-y:auto;padding:12px 14px 14px;display:flex;flex-direction:column;gap:14px}
.rail.is-collapsed .rail__body{display:none}
.rail.is-collapsed .rail__head{border-bottom:none}

/* leyenda */
.legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.legend__row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:7px;cursor:pointer;transition:.16s;font-size:11.5px}
.legend__row:hover{background:rgba(120,205,215,.06)}
.legend__row.is-off{opacity:.32}
.legend__dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 9px currentColor}
.legend__n{margin-left:auto;font-family:var(--ff-mono);font-size:10.5px;color:var(--faint)}

/* filtros */
.filters{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid var(--line)}
.switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;color:var(--dim);user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch__track{width:32px;height:18px;border-radius:99px;background:rgba(120,205,215,.13);border:1px solid var(--line);position:relative;flex:none;transition:.22s}
.switch__knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--faint);transition:.22s cubic-bezier(.3,1.4,.5,1)}
.switch input:checked + .switch__track{background:var(--glow);border-color:var(--glow)}
.switch input:checked + .switch__track .switch__knob{transform:translateX(14px);background:#04222b}
.switch:hover{color:var(--ink)}
.field--sel select{
  width:100%;height:34px;padding:0 30px 0 11px;border-radius:9px;background:var(--deep);
  border:1px solid var(--line);outline:none;font-size:12px;cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat;
}
.field--sel select:focus{border-color:var(--glow)}
.field--sel{display:block}

/* ranking */
.rank{border-top:1px solid var(--line);padding-top:12px;min-height:0;display:flex;flex-direction:column}
.rank__head{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.rank__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.rank__item{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;cursor:pointer;transition:.16s;
  border:1px solid transparent
}
.rank__item:hover{background:rgba(120,205,215,.07);border-color:var(--line)}
.rank__item.is-sel{background:var(--glow-soft);border-color:var(--glow)}
.rank__score{
  width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:12.5px;font-weight:600;color:#04222b
}
.rank__txt{min-width:0;flex:1}
.rank__txt b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank__txt span{font-size:10.5px;color:var(--faint)}
.rank__meta{font-family:var(--ff-mono);font-size:10px;color:var(--dim);text-align:right;white-space:nowrap;line-height:1.5}
.rank__empty{padding:18px 6px;text-align:center;font-size:12px;color:var(--faint)}

/* ====================== LÍNEA TEMPORAL ====================== */
.timeline{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:520;
  width:min(720px,calc(100vw - 28px));
  background:var(--panel);backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:11px 15px 13px;
  animation:slideU .8s .2s cubic-bezier(.2,.8,.2,1) both;
}
.timeline__days{display:flex;gap:5px;margin-bottom:11px;overflow-x:auto;scrollbar-width:none}
.timeline__days::-webkit-scrollbar{display:none}
.day{
  flex:1;min-width:74px;border:1px solid var(--line);background:transparent;border-radius:10px;
  padding:6px 4px 7px;cursor:pointer;transition:.2s;text-align:center;position:relative;overflow:hidden
}
.day b{display:block;font-size:11.5px;font-weight:600;text-transform:capitalize;letter-spacing:.01em}
.day i{display:block;font-style:normal;font-size:9.5px;color:var(--faint);font-family:var(--ff-mono);margin-top:1px}
.day__bar{display:flex;gap:1px;height:3px;margin-top:5px;border-radius:2px;overflow:hidden}
.day__bar span{flex:1}
.day:hover{border-color:var(--line-2);background:rgba(120,205,215,.05)}
.day.is-on{border-color:var(--glow);background:var(--glow-soft);box-shadow:0 0 20px -6px var(--glow)}
.day.is-on b{color:var(--glow)}

.timeline__scrub{display:flex;align-items:center;gap:13px}
.now{
  height:30px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:var(--deep);
  cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--dim);transition:.2s;flex:none;text-transform:uppercase
}
.now:hover{color:var(--glow);border-color:var(--glow)}
.scrub{position:relative;flex:1}
.scrub input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;cursor:pointer;display:block;margin:0
}
.scrub input::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:linear-gradient(90deg,rgba(120,205,215,.14),rgba(120,205,215,.24))}
.scrub input::-moz-range-track{height:5px;border-radius:99px;background:rgba(120,205,215,.18)}
.scrub input::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--glow);
  margin-top:-6px;border:3px solid #041b23;box-shadow:0 0 0 1px var(--glow),0 0 16px var(--glow);transition:transform .16s
}
.scrub input::-moz-range-thumb{width:14px;height:14px;border:3px solid #041b23;border-radius:50%;background:var(--glow);box-shadow:0 0 0 1px var(--glow),0 0 16px var(--glow)}
.scrub input:active::-webkit-slider-thumb{transform:scale(1.22)}
.scrub__ticks{position:absolute;top:16px;left:8px;right:8px;height:9px;display:flex;justify-content:space-between;pointer-events:none}
.scrub__ticks span{width:1px;background:var(--line-2);height:4px}
.scrub__ticks span.maj{height:8px;background:var(--faint)}
.timeline__read{
  font-size:12px;color:var(--ink);white-space:nowrap;flex:none;text-align:right;min-width:170px;
  background:var(--deep);border:1px solid var(--line);border-radius:8px;padding:6px 10px;letter-spacing:.01em
}
.timeline__read em{font-style:normal;color:var(--glow)}

/* ==================== MARCADORES DEL MAPA ==================== */
.pin{position:relative;display:grid;place-items:center}
.pin__core{
  width:15px;height:15px;border-radius:50%;border:2px solid rgba(2,14,20,.85);
  transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s;
}
.pin:hover .pin__core{transform:scale(1.5)}
.pin.is-sel .pin__core{transform:scale(1.6)}
.pin.is-sel::after{
  content:'';position:absolute;width:15px;height:15px;border-radius:50%;
  border:1.5px solid currentColor;animation:sonar 2.1s cubic-bezier(.2,.6,.3,1) infinite
}
.pin.is-sel::before{
  content:'';position:absolute;width:15px;height:15px;border-radius:50%;
  border:1.5px solid currentColor;animation:sonar 2.1s .7s cubic-bezier(.2,.6,.3,1) infinite
}
@keyframes sonar{0%{transform:scale(1);opacity:.85}100%{transform:scale(4.2);opacity:0}}
.pin--dim .pin__core{opacity:.28;transform:scale(.7)}
.pin--pending .pin__core{background:#33505c;border-color:rgba(2,14,20,.6);animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.75}}

/* ================= SALTO GEOGRÁFICO ================= */
.jump{
  position:fixed;left:14px;bottom:16px;z-index:520;display:flex;gap:3px;padding:3px;
  background:var(--panel);backdrop-filter:blur(20px);border:1px solid var(--line);
  border-radius:99px;box-shadow:var(--shadow);
  animation:slideL .8s .3s cubic-bezier(.2,.8,.2,1) both;
}
.jump__btn{
  border:none;background:none;cursor:pointer;padding:7px 14px;border-radius:99px;
  font-size:11.5px;font-weight:500;color:var(--dim);transition:.2s;white-space:nowrap
}
.jump__btn:hover{color:var(--ink);background:rgba(120,205,215,.08)}
.jump__btn.is-on{background:var(--glow);color:#04222b;font-weight:600;box-shadow:0 0 16px var(--glow-soft)}

/* ======================== TOOLTIP ======================== */
.leaflet-tooltip.tip{
  background:rgba(6,28,38,.95);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow);
  color:var(--ink);padding:0;width:290px;white-space:normal;font-family:var(--ff-body)
}
.leaflet-tooltip.tip::before{display:none}
.tip__top{display:flex;align-items:flex-start;gap:10px;padding:11px 12px 9px;border-bottom:1px solid var(--line)}
.tip__score{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;line-height:1;color:#04222b}
.tip__score b{font-family:var(--ff-mono);font-size:16px;font-weight:700}
.tip__score i{font-style:normal;font-size:7.5px;letter-spacing:.08em;opacity:.72;font-weight:600}
.tip__id{min-width:0;flex:1}
.tip__id b{display:block;font-family:var(--ff-display);font-size:14px;font-weight:600;line-height:1.25;font-variation-settings:'SOFT' 30}
.tip__id span{font-size:10.5px;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
.tip__verdict{display:block;font-size:11px;margin-top:3px;font-weight:500}
.tip__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.tip__cell{background:rgba(6,28,38,.96);padding:7px 10px 8px}
.tip__cell u{display:block;text-decoration:none;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.tip__cell b{font-family:var(--ff-mono);font-size:13.5px;font-weight:500;display:block;margin:1px 0 4px}
.tip__bar{height:3px;border-radius:2px;background:rgba(120,205,215,.14);overflow:hidden}
.tip__bar i{display:block;height:100%;border-radius:2px;transition:width .3s}
.tip__why{padding:9px 12px 10px;display:flex;flex-direction:column;gap:6px}
.tip__why-item{display:flex;gap:7px;font-size:11px;line-height:1.4;color:var(--dim)}
.tip__why-item svg{width:12px;height:12px;flex:none;margin-top:2px}
.tip__why-item.blk{color:#ffc3c3}
.tip__why-item.warn{color:#ffdfb0}
.tip__foot{padding:7px 12px 9px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--faint)}
.tip__foot b{font-family:var(--ff-mono);color:var(--dim);font-weight:500}
.tip__cta{color:var(--glow);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:9px}

/* ==================== PANEL DE DETALLE ==================== */
.sheet{
  position:fixed;top:74px;right:14px;bottom:16px;z-index:540;width:var(--sheet-w);
  background:var(--panel);backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
.sheet[hidden]{display:none}
.sheet.is-in{animation:slideR .46s cubic-bezier(.2,.85,.25,1) both}
.sheet__close{
  position:absolute;top:12px;right:12px;z-index:5;width:28px;height:28px;border-radius:9px;
  background:rgba(3,16,23,.7);border:1px solid var(--line);cursor:pointer;color:var(--dim);
  font-size:19px;line-height:1;display:grid;place-items:center;transition:.2s;backdrop-filter:blur(8px)
}
.sheet__close:hover{color:var(--no);border-color:var(--no)}
.sheet__scroll{overflow-y:auto;padding:0 0 18px}

.sh-hero{padding:18px 18px 15px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.sh-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 100% at 100% 0%,var(--hero-glow) 0%,transparent 62%);pointer-events:none;opacity:.5}
.sh-hero__eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:flex;gap:7px;align-items:center}
.sh-hero__eyebrow em{font-style:normal;color:var(--glow)}
.sh-hero h2{font-size:23px;font-weight:600;margin:5px 0 3px;line-height:1.15;font-variation-settings:'SOFT' 40,'opsz' 60;padding-right:34px}
.sh-hero p{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--dim)}
.sh-verdict{display:flex;align-items:center;gap:13px;margin-top:14px;position:relative;z-index:1}
.sh-gauge{width:64px;height:64px;flex:none;position:relative}
.sh-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.sh-gauge__val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-mono);font-size:19px;font-weight:600;letter-spacing:-.03em}
.sh-verdict__txt b{display:block;font-family:var(--ff-display);font-size:17px;font-weight:600}
.sh-verdict__txt span{font-size:11.5px;color:var(--dim);line-height:1.45;display:block;margin-top:2px}
.sh-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;position:relative;z-index:1}
.tag{font-size:10px;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--dim);letter-spacing:.03em;background:rgba(3,16,23,.4)}
.tag--acc{border-color:var(--glow);color:var(--glow)}

.sh-sect{padding:16px 18px;border-bottom:1px solid var(--line)}
.sh-sect__h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.sh-sect__h h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-family:var(--ff-body);font-weight:600}
.sh-sect__h span{font-size:10.5px;color:var(--faint);font-family:var(--ff-mono)}

/* tarjetas de parámetro */
.p-card{display:flex;gap:11px;padding:11px 0;border-bottom:1px dashed rgba(120,205,215,.13)}
.p-card:last-child{border-bottom:none;padding-bottom:0}
.p-card:first-child{padding-top:0}
.p-icon{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(120,205,215,.07);border:1px solid var(--line)}
.p-icon svg{width:16px;height:16px;color:var(--dim)}
.p-main{flex:1;min-width:0}
.p-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.p-top b{font-size:12.5px;font-weight:600}
.p-val{font-family:var(--ff-mono);font-size:15px;font-weight:600;letter-spacing:-.02em}
.p-sub{font-size:11px;color:var(--faint);margin-top:1px}
.p-meter{height:5px;border-radius:3px;background:rgba(120,205,215,.12);margin-top:7px;overflow:hidden;position:relative}
.p-meter i{display:block;height:100%;border-radius:3px;transition:width .45s cubic-bezier(.3,1,.4,1)}
.p-conf{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10px;color:var(--faint)}
.p-conf__bar{flex:1;height:2px;background:rgba(120,205,215,.12);border-radius:2px;overflow:hidden;max-width:70px}
.p-conf__bar i{display:block;height:100%;background:var(--dim)}

/* franjas de visibilidad */
.bands{display:flex;flex-direction:column;gap:7px}
.band{display:grid;grid-template-columns:78px 1fr 58px;align-items:center;gap:10px}
.band__lbl{font-family:var(--ff-mono);font-size:11px;color:var(--dim)}
.band__lbl i{display:block;font-style:normal;font-size:9px;color:var(--faint);font-family:var(--ff-body);letter-spacing:.04em}
.band__track{height:20px;border-radius:6px;background:rgba(120,205,215,.08);position:relative;overflow:hidden;border:1px solid var(--line)}
.band__fill{position:absolute;inset:0 auto 0 0;border-radius:5px;transition:width .5s cubic-bezier(.3,1,.4,1);opacity:.85}
.band__val{font-family:var(--ff-mono);font-size:12.5px;text-align:right;font-weight:500}
.band__scale{display:grid;grid-template-columns:78px 1fr 58px;gap:10px;font-size:9px;color:var(--faint);font-family:var(--ff-mono);margin-top:2px}
.band__scale div:nth-child(2){display:flex;justify-content:space-between}

/* motivos */
.reasons{display:flex;flex-direction:column;gap:8px}
.reason{display:flex;gap:9px;padding:10px 11px;border-radius:10px;font-size:12px;line-height:1.5;border:1px solid}
.reason svg{width:14px;height:14px;flex:none;margin-top:2px}
.reason--blk{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.32);color:#ffcfcf}
.reason--warn{background:rgba(234,179,8,.08);border-color:rgba(234,179,8,.28);color:#ffe6ae}
.reason--ok{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.28);color:#b6f0dc}
.reason b{font-weight:600;text-transform:capitalize}

/* tabla meteo */
.meteo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.meteo__c{background:rgba(4,22,30,.62);padding:9px 11px}
.meteo__c u{display:block;text-decoration:none;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.meteo__c b{font-family:var(--ff-mono);font-size:13.5px;font-weight:500;display:block}
.meteo__c i{font-style:normal;font-size:10px;color:var(--faint);display:block;margin-top:1px}

/* ventanas */
.win{display:flex;flex-direction:column;gap:6px}
.win__row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:rgba(120,205,215,.04);cursor:pointer;transition:.18s}
.win__row:hover{border-color:var(--glow);background:var(--glow-soft)}
.win__badge{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;font-family:var(--ff-mono);font-size:12.5px;font-weight:600;color:#04222b}
.win__txt{flex:1;min-width:0}
.win__txt b{display:block;font-size:12.5px;font-weight:500;text-transform:capitalize}
.win__txt span{font-size:10.5px;color:var(--faint)}
.win__go{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--glow);font-weight:600}

/* gráfico de evolución */
.spark{width:100%;height:96px;display:block;overflow:visible}
.spark__lbl{font-size:9px;fill:var(--faint);font-family:var(--ff-mono)}

/* nota al pie del panel */
.sh-note{padding:13px 18px 0;font-size:10.5px;line-height:1.6;color:var(--faint)}
.sh-note b{color:var(--dim)}

/* ========================= MODAL ========================= */
.modal{
  border:none;padding:0;max-width:min(680px,92vw);max-height:86vh;width:100%;
  background:var(--deep);border:1px solid var(--line-2);border-radius:var(--r-lg);
  color:var(--ink);box-shadow:0 40px 100px -20px rgba(0,0,0,.9);overflow:hidden
}
.modal::backdrop{background:rgba(2,10,15,.76);backdrop-filter:blur(6px)}
.modal[open]{animation:pop .34s cubic-bezier(.2,.9,.3,1) both}
.modal__scroll{overflow-y:auto;max-height:86vh;padding:30px 34px 34px}
.modal__close{
  position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:9px;background:rgba(3,16,23,.6);
  border:1px solid var(--line);cursor:pointer;color:var(--dim);font-size:20px;line-height:1;display:grid;place-items:center;z-index:2
}
.modal__close:hover{color:var(--no);border-color:var(--no)}
.eyebrow{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--glow);margin:0 0 8px}
.modal h2{font-size:27px;font-weight:600;font-variation-settings:'SOFT' 40,'opsz' 80;margin-bottom:14px;letter-spacing:-.02em}
.modal h3{font-size:14.5px;font-weight:600;margin:26px 0 7px;color:var(--glow);font-variation-settings:'SOFT' 20}
.modal p{font-size:13.5px;line-height:1.72;color:var(--dim);margin:0 0 10px}
.modal .lede{font-size:15px;line-height:1.7;color:var(--ink);border-left:2px solid var(--glow);padding-left:15px;margin-bottom:6px}
.modal b{color:var(--ink);font-weight:600}
.bullets{margin:8px 0 0;padding-left:17px;display:flex;flex-direction:column;gap:7px}
.bullets li{font-size:13px;line-height:1.62;color:var(--dim)}
.bullets li::marker{color:var(--glow)}
.callout{margin-top:26px;padding:15px 17px;border-radius:12px;background:rgba(255,180,84,.08);border:1px solid rgba(255,180,84,.28);font-size:12.5px;line-height:1.65;color:#ffe3bd}
.callout b{color:var(--amber)}
.src{margin-top:16px!important;font-size:11px!important;color:var(--faint)!important;line-height:1.6!important}

/* ========================= CARGA ========================= */
.boot{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:radial-gradient(80% 60% at 50% 45%,#062330 0%,var(--abyss) 70%);transition:opacity .6s,visibility .6s}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{text-align:center;width:min(340px,80vw)}
.sonar{position:relative;width:74px;height:74px;margin:0 auto 22px}
.sonar span{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--glow);animation:sonar2 2.4s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.sonar span:nth-child(2){animation-delay:.8s}
.sonar span:nth-child(3){animation-delay:1.6s}
@keyframes sonar2{0%{transform:scale(.24);opacity:1}100%{transform:scale(1);opacity:0}}
.sonar::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--glow);box-shadow:0 0 18px var(--glow)}
.boot__title{font-family:var(--ff-display);font-size:20px;font-weight:500;margin:0 0 5px;font-variation-settings:'SOFT' 40}
.boot__sub{font-size:11px;color:var(--faint);margin:0 0 18px;min-height:16px}
.boot__bar{height:2px;background:rgba(120,205,215,.14);border-radius:2px;overflow:hidden}
.boot__bar i{display:block;height:100%;width:0;background:var(--glow);box-shadow:0 0 12px var(--glow);transition:width .4s}

.toast{
  position:fixed;bottom:120px;left:50%;transform:translateX(-50%);z-index:1500;
  background:var(--panel-2);backdrop-filter:blur(18px);border:1px solid var(--line-2);
  border-radius:99px;padding:9px 18px;font-size:12px;color:var(--dim);box-shadow:var(--shadow);
  animation:slideU .4s both
}
.toast[hidden]{display:none}

/* ======================= ANIMACIONES ======================= */
@keyframes dropIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideU{from{opacity:0;transform:translate(-50%,22px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}

/* barras de scroll */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(120,205,215,.18);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(120,205,215,.34);background-clip:content-box}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1180px){
  :root{--rail-w:296px;--sheet-w:386px}
  .field--search input{width:180px}
  .field--search input:focus{width:210px}
}
@media (max-width:940px){
  .chrome{height:auto;flex-wrap:wrap;padding:9px 12px;gap:9px}
  .chrome__tools{width:100%;gap:7px}
  .field--search{flex:1}
  .field--search input,.field--search input:focus{width:100%}
  .ghost span{display:none}
  .ghost{padding:0 11px}
  /* El panel se ancla justo encima de la línea temporal y arranca plegado:
     en un móvil el mapa tiene que ser lo primero que se ve. */
  .rail{top:auto;bottom:126px;left:10px;right:10px;width:auto;max-height:44vh}
  .rail__body{padding:10px 12px 12px}
  .sheet{top:auto;left:10px;right:10px;bottom:10px;width:auto;height:78vh;z-index:560}
  .rank__list{max-height:30vh}
  .timeline{width:calc(100vw - 20px);bottom:10px;padding:8px 10px 10px}
  /* los controles del mapa quedarían debajo de la línea temporal */
  .leaflet-control-zoom{display:none!important}
  .leaflet-control-container .leaflet-bottom.leaflet-right{bottom:112px}
  .leaflet-control-attribution{font-size:9px!important;border-radius:6px 0 0 6px}
  .timeline__days{margin-bottom:8px}
  .jump{display:none}   /* en móvil el salto se hace con el selector de región */
  .timeline__read{min-width:0;font-size:11px;padding:5px 8px}
  .day{min-width:60px}
  .now{padding:0 10px;font-size:10px}
  .legend{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rail{max-height:38vh}
  .brand__text i{display:none}
  .chrome{height:auto}
  .leaflet-tooltip.tip{width:248px}
  .modal__scroll{padding:24px 20px 28px}
  .modal h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}