/* ==========================================================================
   El Reloj de Consecuencia — radar de compromisos
   ========================================================================== */

.reloj-head{align-items:start;margin-bottom:clamp(34px,5vw,60px);}

.reloj{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,382px);
  gap:clamp(20px,3vw,44px);
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(22,48,63,.5) 0%,rgba(10,20,29,.7) 60%);
  padding:clamp(16px,2.4vw,30px);
  position:relative;
  overflow:hidden;
}
.reloj::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 58% at 34% 44%,rgba(70,130,180,.15) 0%,rgba(70,130,180,0) 70%);
}
@media(max-width:1000px){.reloj{grid-template-columns:1fr;}}

/* ---------- Escenario SVG ---------- */
.reloj-stage{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
#reloj-svg{width:100%;height:auto;max-width:620px;overflow:visible;}
.reloj-hint{margin-top:.4rem;opacity:.5;}

#reloj-svg > g[aria-hidden='true'],#rj-sweep{pointer-events:none;}
.rj-leader{pointer-events:none;}
.rj-ring{fill:none;stroke:rgba(255,255,255,.085);stroke-width:1;}
.rj-ring-major{stroke:rgba(255,255,255,.16);}
.rj-spoke{stroke:rgba(255,255,255,.07);stroke-width:1;}
.rj-late-arc{fill:rgba(212,80,94,.14);stroke:rgba(242,139,147,.4);stroke-width:1;}
.rj-axis-label{fill:var(--fg-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;}
.rj-ring-label{fill:rgba(255,255,255,.3);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;}
.rj-core{fill:rgba(70,130,180,.16);stroke:rgba(106,155,195,.55);stroke-width:1;}
.rj-core-txt{fill:#fff;font-family:var(--font-heading);font-size:13px;font-weight:700;letter-spacing:.02em;text-anchor:middle;}
.rj-core-sub{fill:var(--fg-dim);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-anchor:middle;}

/* aguja de barrido */
#rj-sweep{transform-origin:320px 320px;animation:sweep 14s linear infinite;}
@keyframes sweep{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.rj-sweep-line{stroke:url(#sweepGrad);stroke-width:1.5;}
.rj-sweep-wedge{fill:url(#wedgeGrad);}

/* puntos */
.rj-node{cursor:pointer;transition:opacity .45s var(--ease);outline:none;}
.rj-node .rj-halo{fill:currentColor;opacity:.14;transition:opacity .3s var(--ease),r .3s var(--ease);}
.rj-node .rj-dot{fill:currentColor;transition:r .3s var(--ease);}
.rj-node .rj-leader{stroke:currentColor;stroke-width:1;opacity:0;transition:opacity .3s;}
.rj-node:hover .rj-halo,.rj-node:focus-visible .rj-halo,.rj-node.is-active .rj-halo{opacity:.34;}
.rj-node:hover .rj-leader,.rj-node:focus-visible .rj-leader,.rj-node.is-active .rj-leader{opacity:.55;}
.rj-node:focus-visible .rj-dot{stroke:#fff;stroke-width:2;}
.rj-node.is-off{opacity:.07;pointer-events:none;}
.rj-node.is-hidden{opacity:0;pointer-events:none;}
.rj-node.is-active .rj-dot{stroke:#fff;stroke-width:1.6;}

.c-late{color:#f28b93;} .c-warn{color:#f2c84e;} .c-open{color:#6ab4f0;}
.c-doing{color:#a88ef0;} .c-done{color:#5ccea0;}

/* ---------- Panel lateral ---------- */
.reloj-side{display:flex;flex-direction:column;gap:14px;min-width:0;position:relative;}

.reloj-controls{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:rgba(6,13,20,.45);}
.ctl{display:block;}
.ctl-label{display:block;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);}
.ctl-value{display:block;font-size:1.32rem;color:#fff;margin:.2rem 0 .55rem;letter-spacing:-.01em;}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;margin-top:-7px;box-shadow:0 0 0 4px rgba(70,130,180,.28);}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(70,130,180,.28);}

.ctl-filters{border:0;padding:0;margin:1.15rem 0 0;}
.ctl-filters legend{padding:0;margin-bottom:.55rem;}
.ctl-filters label{display:flex;align-items:center;gap:.6rem;font-size:.83rem;color:var(--fg-mid);padding:.45rem 0;cursor:pointer;min-height:32px;}
.ctl-filters input{accent-color:var(--primary);width:20px;height:20px;cursor:pointer;flex:none;}
.ctl-filters label:hover{color:#fff;}

/* ---------- Detalle ---------- */
.reloj-detail{
  flex:1;min-height:210px;border:1px solid var(--line);border-radius:var(--r);
  padding:18px;background:rgba(6,13,20,.45);display:flex;flex-direction:column;justify-content:center;
}
.reloj-detail.has-data{justify-content:flex-start;}
.rd-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap;}
.rd-state{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:999px;
}
.rd-when{font-family:var(--font-mono);font-size:.7rem;color:var(--fg-dim);margin-left:auto;}
.rd-title{font-family:var(--font-heading);font-weight:600;font-size:1.03rem;line-height:1.32;color:#fff;letter-spacing:-.015em;}
.rd-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin-top:.95rem;font-size:.82rem;}
.rd-meta dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);padding-top:.22em;}
.rd-meta dd{margin:0;color:var(--fg-mid);}
.rd-src{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line-2);}
.rd-src-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);display:block;margin-bottom:.4rem;}
.rd-quote{font-size:.86rem;line-height:1.5;color:var(--fg);border-left:2px solid var(--secondary);padding-left:.75rem;font-style:italic;}
.rd-eur{font-family:var(--font-mono);font-size:1.02rem;color:#fff;}

/* ---------- Total ---------- */
.reloj-total{border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;background:rgba(6,13,20,.45);display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .8rem;}
.reloj-total .mono{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);width:100%;}
.reloj-total strong{font-family:var(--font-heading);font-size:clamp(1.5rem,2.4vw,1.95rem);color:#fff;letter-spacing:-.02em;line-height:1;}
.reloj-total #reloj-count{width:auto;margin-left:auto;color:var(--fg-mid);letter-spacing:.06em;text-transform:none;font-size:.72rem;}

@media(prefers-reduced-motion:reduce){#rj-sweep{animation:none;opacity:.25;}}