/* Paleta heredada de las figuras del proyecto (codigo/common.py) */
:root{
  --ink:#0b0b0b; --ink2:#52514e; --mute:#8a8985;
  --surf:#fcfcfb; --surf2:#f4f3ef; --grid:#e3e2dd;
  --p:#2a78d6; --s:#eb6834; --v:#1baf7a; --ev2:#8e44c4;
  --panel:340px; --head:52px;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--sans); font-size:14px; line-height:1.5;
  color:var(--ink); background:var(--surf); overflow:hidden;
}
b,strong{color:var(--ink);font-weight:600}
a{color:var(--p);text-decoration:none}
a:hover{text-decoration:underline}
sub,sup{font-size:.72em}

/* ------------------------------------------------------------- cabecera */
header{
  height:var(--head); display:flex; align-items:center; gap:14px;
  padding:0 14px; border-bottom:1px solid var(--grid); background:var(--surf);
  position:relative; z-index:1200;
}
header h1{font-size:15px;margin:0;font-weight:600;letter-spacing:-.2px;white-space:nowrap}
header .sub{font-size:11.5px;color:var(--mute);white-space:nowrap}
header .cred{font-size:11px;color:var(--ink2);white-space:nowrap;font-weight:600}
header .sep{flex:1}
#reloj{
  font-family:var(--mono); font-size:12.5px; color:var(--ink2);
  background:var(--surf2); border:1px solid var(--grid); border-radius:4px;
  padding:4px 9px; white-space:nowrap;
}
#reloj b{color:var(--p)}
/* Boton para plegar/mostrar el panel lateral (visible tambien en escritorio) */
.btn-menu{background:none;border:1px solid var(--grid);border-radius:4px;
  padding:5px 9px;cursor:pointer;font:inherit;font-size:12px;color:var(--ink2)}
.btn-menu:hover{border-color:var(--p);color:var(--p)}
#cuerpo.sin-panel #panel{display:none}
#cuerpo.sin-panel #escala{left:0}
#cuerpo.sin-panel #grafico{left:14px}

/* --------------------------------------------------------- disposicion */
#cuerpo{display:flex;height:calc(100% - var(--head))}
#panel{
  width:var(--panel); min-width:var(--panel); border-right:1px solid var(--grid);
  display:flex; flex-direction:column; background:var(--surf); z-index:1100;
}
#tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--grid);background:var(--surf2)}
#tabs button{
  flex:1 0 auto; padding:8px 9px; font:inherit; font-size:11.5px; cursor:pointer;
  background:none; border:none; border-bottom:2px solid transparent; color:var(--ink2);
}
#tabs button:hover{background:#ebeae5}
#tabs button.on{color:var(--p);border-bottom-color:var(--p);background:var(--surf);font-weight:600}
#conten{flex:1;overflow-y:auto;padding:14px}
.tab{display:none} .tab.on{display:block}

#mapa{flex:1;height:100%;background:#dfe6ea}

/* ------------------------------------------------------------ controles */
h2{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--mute);
   margin:0 0 8px;font-weight:600}
h2:not(:first-child){margin-top:20px;padding-top:14px;border-top:1px solid var(--grid)}
p{margin:0 0 9px}
.nota{font-size:12px;color:var(--ink2);line-height:1.45}
.nota-min{font-size:11.5px;color:var(--mute);line-height:1.4}
label.fila{
  display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:13px;
}
label.fila:hover{color:var(--p)}
input[type=checkbox],input[type=radio]{accent-color:var(--p);margin:0;cursor:pointer}
.swatch{width:11px;height:11px;border-radius:2px;flex:0 0 auto}
.swatch.linea{height:3px;border-radius:1px;width:16px}
select,input[type=text]{
  width:100%;padding:6px 7px;font:inherit;font-size:12.5px;color:var(--ink);
  border:1px solid var(--grid);border-radius:4px;background:var(--surf)
}
input[type=range]{width:100%;accent-color:var(--p);margin:5px 0}
button.accion{
  padding:6px 11px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink2);
  background:var(--surf);border:1px solid var(--grid);border-radius:4px;
}
button.accion:hover{border-color:var(--p);color:var(--p)}
button.accion.on{background:var(--p);border-color:var(--p);color:#fff}
.botonera{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}

table.mini{width:100%;border-collapse:collapse;font-size:11.5px;margin:6px 0 12px}
table.mini th{
  text-align:left;font-weight:600;color:var(--ink2);padding:4px 5px;
  border-bottom:1px solid var(--p);background:#eef4fb;white-space:nowrap
}
table.mini td{padding:4px 5px;border-bottom:1px solid var(--grid);vertical-align:top}
table.mini tr:hover td{background:var(--surf2)}
table.mini td.num{text-align:right;font-family:var(--mono);font-size:11px}

.dato{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px}
.dato span:last-child{font-family:var(--mono);color:var(--ink)}
.dato span:first-child{color:var(--ink2)}

.caja{background:var(--surf2);border-left:2.5px solid var(--p);padding:9px 11px;
      margin:10px 0;font-size:12px;line-height:1.5;color:var(--ink2)}
.caja.alerta{border-left-color:var(--s);background:#fdf6f2}
.caja.ok{border-left-color:var(--v);background:#f1faf6}
.caja b{color:var(--ink)}

.eq{font-family:Georgia,serif;text-align:center;background:var(--surf2);
    border-left:2.5px solid var(--p);padding:8px;margin:9px 0;font-size:13.5px}
.vec{font-weight:700}

/* ------------------------------------------------------------- graficas
   La ventana es flotante, arrastrable y redimensionable. El lienzo va en
   posicion absoluta dentro de un marco: si tuviera altura de flujo, fijar
   canvas.height = alto x dpr agrandaria el elemento, el ResizeObserver
   volveria a dispararse y la grafica creceria sin fin. */
#grafico{
  position:absolute;left:calc(var(--panel) + 14px);bottom:40px;
  width:min(760px, calc(100vw - var(--panel) - 34px));height:360px;
  min-width:320px;min-height:190px;
  max-width:calc(100vw - var(--panel) - 28px);max-height:calc(100vh - var(--head) - 28px);
  background:rgba(252,252,251,.98);border:1px solid var(--grid);
  border-radius:7px;box-shadow:0 6px 28px rgba(0,0,0,.16);z-index:900;display:none;
  flex-direction:column;overflow:hidden;resize:both;
}
#grafico.on{display:flex}
#grafico.max{left:calc(var(--panel) + 14px) !important;top:14px !important;
  right:14px;bottom:40px;width:auto !important;height:auto !important}
#grafico .cab{display:flex;align-items:center;gap:8px;padding:7px 11px;
  border-bottom:1px solid var(--grid);cursor:move;user-select:none;
  background:var(--surf2);flex:0 0 auto}
#grafico .cab b{font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
#grafico .cab .sep{flex:1}
#grafico .cab button{background:none;border:none;cursor:pointer;color:var(--mute);
  font-size:15px;line-height:1;padding:1px 5px;border-radius:3px}
#grafico .cab button:hover{color:var(--ink);background:#e3e2dd}
#marco{flex:1 1 auto;position:relative;min-height:0}
#lienzo{position:absolute;inset:0;display:block}
#leyG{padding:5px 11px 8px;font-size:11px;color:var(--ink2);
  border-top:1px solid var(--grid);flex:0 0 auto;max-height:56px;overflow-y:auto}

/* --------------------------------------------------------------- mapa */
.leaflet-container{font-family:var(--sans);background:#dfe6ea}
.leaflet-popup-content{margin:11px 13px;font-size:12.5px;line-height:1.45}
.leaflet-popup-content h3{margin:0 0 5px;font-size:13px}
.leaflet-popup-content .ag{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--mute);margin-bottom:4px}
.leaflet-popup-content table{border-collapse:collapse;font-size:11.5px;margin-top:5px}
.leaflet-popup-content td{padding:2px 8px 2px 0}
.leaflet-popup-content td:last-child{font-family:var(--mono)}
.leaflet-tooltip.eti{background:rgba(252,252,251,.9);border:none;box-shadow:none;
  color:var(--ink);font-size:11px;font-weight:600;padding:1px 4px}
.leaflet-tooltip.eti::before{display:none}
.leaflet-control-attribution{font-size:9.5px}

/* Barra apaisada al pie del mapa: posicion del cursor, control de fases del
   reproductor y leyenda, todo en una sola linea de 30 px. */
#escala{position:absolute;left:var(--panel);right:0;bottom:0;z-index:800;height:30px;
  display:none;align-items:center;gap:0 12px;padding:0 10px;
  background:rgba(252,252,251,.96);border-top:1px solid var(--grid);
  font-size:10.5px;color:var(--ink2);white-space:nowrap;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#escala.on{display:flex}
#escala .it{display:flex;align-items:center;gap:5px;flex:0 0 auto}
#escala .tit{font-weight:600;color:var(--ink);letter-spacing:.4px;flex:0 0 auto;
  text-transform:uppercase;font-size:9.5px}
#escala .bar{width:1px;height:15px;background:var(--grid);flex:0 0 auto}
#escala .sep{flex:1 0 6px}
#fases{display:flex;flex:0 0 auto}
#fases button{padding:2px 9px;font:inherit;font-size:10.5px;cursor:pointer;
  background:var(--surf);border:1px solid var(--grid);color:var(--ink2);line-height:1.4}
#fases button:first-child{border-radius:3px 0 0 3px}
#fases button:last-child{border-radius:0 3px 3px 0}
#fases button+button{border-left:none}
#fases button:hover{color:var(--p)}
#fases button.on{background:var(--p);border-color:var(--p);color:#fff;font-weight:600}
#radios{font-family:var(--mono);font-size:10px;color:var(--ink2);flex:0 0 auto}
#radios b{color:var(--ink)}
#cursor{font-family:var(--mono);font-size:10px;color:var(--ink2);flex:0 0 auto}

.videos{display:grid;gap:10px}
.vcard{border:1px solid var(--grid);border-radius:5px;overflow:hidden;background:var(--surf)}
.vcard .th{aspect-ratio:16/9;width:100%;display:block;border:none;background:#111}
.vcard .tx{padding:7px 9px;font-size:12px}
.vcard .tx b{display:block;margin-bottom:2px}
.vcard .tx span{color:var(--mute);font-size:11px}

kbd{font-family:var(--mono);font-size:11px;background:var(--surf2);
    border:1px solid var(--grid);border-radius:3px;padding:1px 4px}

/* -------------------------------------------- ventana de lectura larga */
#modal{position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(11,11,11,.42);align-items:center;justify-content:center;padding:24px}
#modal.on{display:flex}
#modal .caja-modal{background:var(--surf);border-radius:8px;width:min(820px,100%);
  max-height:100%;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 44px rgba(0,0,0,.3)}
#modal .cab{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--grid);background:var(--surf2);flex:0 0 auto}
#modal .cab b{font-size:14px}
#modal .cab .sep{flex:1}
#modal .cab .pdf{font-size:11.5px;color:var(--p);border:1px solid var(--grid);
  border-radius:4px;padding:3px 9px;white-space:nowrap}
#modal .cab .pdf:hover{border-color:var(--p);text-decoration:none;background:#eef4fb}
#modal .cab button{background:none;border:none;cursor:pointer;color:var(--mute);
  font-size:22px;line-height:1;padding:0 4px}
#modal .cab button:hover{color:var(--ink)}
#modCuerpo{overflow-y:auto;padding:20px 26px 28px;font-size:13.5px;line-height:1.62;
  color:#1a1a19;text-align:justify}
#modCuerpo h2{font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink);
  margin:22px 0 8px;padding:0 0 4px;border-top:none;border-bottom:1.5px solid var(--p)}
#modCuerpo h2:first-child{margin-top:0}
#modCuerpo h3{font-size:13.5px;color:var(--ink2);margin:16px 0 6px}
#modCuerpo p{margin:0 0 10px}
#modCuerpo .sub{font-size:15px;color:var(--ink2);text-align:left;margin-bottom:4px}
#modCuerpo .meta{font-size:11.5px;color:var(--mute);text-align:left;margin-bottom:14px}
#modCuerpo .eq{font-family:Georgia,serif;text-align:center;font-size:15px;
  background:var(--surf2);border-left:2.5px solid var(--p);padding:10px;margin:12px 0}
#modCuerpo table{border-collapse:collapse;width:100%;margin:10px 0 16px;font-size:12px;
  font-family:var(--sans)}
#modCuerpo th{background:#eef4fb;text-align:left;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--p);padding:5px 7px}
#modCuerpo td{border-bottom:1px solid var(--grid);padding:5px 7px;vertical-align:top}
#modCuerpo tr:nth-child(even) td{background:#fbfaf7}
#modCuerpo blockquote{border-left:2.5px solid var(--s);background:#fdf6f2;
  margin:14px 0;padding:10px 14px;color:var(--ink2)}
#modCuerpo blockquote p{margin:0}
#modCuerpo figure{margin:16px 0;text-align:center}
#modCuerpo figure img{max-width:100%;border:1px solid var(--grid);border-radius:4px}
#modCuerpo figcaption{font-size:11.5px;color:var(--ink2);text-align:justify;
  margin-top:7px;line-height:1.45}
#modCuerpo ol,#modCuerpo ul{padding-left:20px;margin:0 0 12px}
#modCuerpo li{margin-bottom:6px}
#modCuerpo hr{border:none;border-top:1px solid var(--grid);margin:16px 0}
#modCuerpo code{font-family:var(--mono);font-size:11.5px;background:var(--surf2);
  padding:1px 4px;border-radius:3px}

/* ------------------------------------------------------------- moviles */
@media (max-width:820px){
  :root{--panel:100%}
  .btn-menu{display:block;background:none;border:1px solid var(--grid);border-radius:4px;
    padding:5px 9px;cursor:pointer;font:inherit;font-size:12px;color:var(--ink2)}
  header h1{font-size:13px;white-space:normal}
  header .sub,header .cred{display:none}
  #cuerpo{position:relative}
  #panel{position:absolute;inset:0;display:none}
  #panel.on{display:flex}
  #mapa{position:absolute;inset:0}
  #escala{left:0}
  #grafico{left:8px !important;top:auto !important;bottom:38px;
    width:calc(100vw - 16px);max-width:calc(100vw - 16px);height:250px;resize:none}
  #grafico.max{left:8px !important;top:8px !important;right:8px;bottom:38px}
  #gCab{cursor:default}
  #reloj{font-size:11px;padding:3px 6px}
  #reloj #rBar{display:none}
  #reloj #rUTC{display:none}
}

/* Pulso de ciudad ya alcanzada por la onda S.
   Color unico (carmesi). FUERTE = S del 1er evento; suave/ligero = S del 2o.
   Pulseo lento en ambos. */
.golpe{border-radius:50%;transform:translate(-50%,-50%);
  background:#e11d48;pointer-events:none}
.golpe-s{width:10px;height:10px;opacity:.28;
  animation:golpe-suave 3s ease-out infinite}
.golpe-f{width:17px;height:17px;opacity:.9;
  animation:golpe-fuerte 2s ease-out infinite}
@keyframes golpe-suave{
  0%  {box-shadow:0 0 0 0  rgba(225,29,72,.28)}
  70% {box-shadow:0 0 0 7px rgba(225,29,72,0)}
  100%{box-shadow:0 0 0 0  rgba(225,29,72,0)}
}
@keyframes golpe-fuerte{
  0%  {box-shadow:0 0 0 0   rgba(225,29,72,.8);
       transform:translate(-50%,-50%) scale(1)}
  55% {box-shadow:0 0 0 17px rgba(225,29,72,0);
       transform:translate(-50%,-50%) scale(1.16)}
  100%{box-shadow:0 0 0 0   rgba(225,29,72,0);
       transform:translate(-50%,-50%) scale(1)}
}

/* Tooltip del vector Δt entre frentes S: texto que envuelve, legible */
.tt-vec{max-width:270px;white-space:normal;line-height:1.35;font-size:11px}