/* Fuentes: se usan si subes los .woff2 a /wp-content/uploads/oj-fonts/ (ver LEEME). Sin ellas, cae a Helvetica/Arial. */
@font-face{font-family:'Archivo';src:url('/wp-content/uploads/oj-fonts/Archivo-VF.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/wp-content/uploads/oj-fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/wp-content/uploads/oj-fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

/* Ojkita_ · Cuadro de mandos. Todo bajo .ojd y con prefijo ojd-. */
.ojd{
  --ojd-card:#1C1916; --ojd-line:#3A352F; --ojd-fg:#F1ECE1; --ojd-muted:#9B958A; --ojd-ac:#D2371C;
  --ojd-btn:#F1ECE1; --ojd-btnfg:#13110F; --ojd-gap:clamp(20px,3vw,40px); --ojd-pad:clamp(20px,3vw,40px);
  --ojd-num:44px; --ojd-gw:480px; --ojd-dash:#5A544B;
  --ojd-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ojd-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  display:flex;flex-wrap:wrap;gap:var(--ojd-gap);align-items:stretch;width:100%;
  font-family:var(--ojd-mono);color:var(--ojd-fg);text-align:left;
}
.ojd,.ojd *,.ojd *::before,.ojd *::after{box-sizing:border-box}
.ojd p,.ojd ul,.ojd li{margin:0;padding:0;list-style:none}

.ojd .ojd-card{
  min-width:0;background:var(--ojd-card);border:1px solid var(--ojd-line);padding:var(--ojd-pad);
  display:flex;flex-direction:column;
}
.ojd .ojd-gcard{flex:1 1 460px;align-items:center;gap:24px}
.ojd .ojd-dcard{flex:1 1 360px;justify-content:space-between;gap:28px}
.ojd--pil .ojd-pcard{flex:1 1 380px}

/* indicador */
.ojd .ojd-gauge{width:100%;max-width:var(--ojd-gw)}
.ojd .ojd-gauge svg{display:block;width:100%;height:auto}
.ojd .ojd-track{stroke:var(--ojd-line)}
.ojd .ojd-prog{stroke:var(--ojd-ac);stroke-dashoffset:var(--ojd-d,235.62);transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.ojd .ojd-tick{fill:var(--ojd-fg);font-size:15px;font-family:var(--ojd-mono)}
.ojd .ojd-unit{fill:var(--ojd-muted);font-size:13px;font-family:var(--ojd-mono)}
.ojd .ojd-needle{transform-box:view-box;transform-origin:200px 200px;transform:rotate(var(--ojd-a,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ojd .ojd-needle-b{stroke:var(--ojd-fg)}
.ojd .ojd-needle-t{stroke:var(--ojd-ac)}
.ojd .ojd-hub{fill:var(--ojd-fg)}
.ojd .ojd-hub2{fill:var(--ojd-card)}
/* antes de entrar en pantalla: aguja a cero, arco vacío */
.ojd.is-armed:not(.is-on) .ojd-needle{transform:rotate(-90deg)}
.ojd.is-armed:not(.is-on) .ojd-prog{stroke-dashoffset:471.24}

/* botones de horas */
.ojd .ojd-opts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ojd .ojd-opt,.ojd .ojd-period{
  appearance:none;min-width:76px;min-height:48px;padding:10px 16px;margin:0;cursor:pointer;border-radius:0;
  font-family:var(--ojd-mono);font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;
  background:transparent;color:var(--ojd-fg);border:2px solid var(--ojd-dash);
  transition:background-color .2s,color .2s,border-color .2s;
}
.ojd .ojd-opt:hover,.ojd .ojd-period:hover{border-color:var(--ojd-fg)}
.ojd .ojd-opt.is-sel,.ojd .ojd-period.is-sel{background:var(--ojd-fg);color:var(--ojd-card);border-color:var(--ojd-fg)}
.ojd .ojd-opt:focus-visible,.ojd .ojd-period:focus-visible,.ojd .ojd-cta:focus-visible{outline:3px solid var(--ojd-ac);outline-offset:3px}

/* selector de periodo (pilotos) */
.ojd .ojd-dcard .ojd-periods{justify-content:flex-start}
.ojd .ojd-badge{display:inline-block;background:var(--ojd-ac);color:var(--ojd-fg);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;padding:5px 9px}
.ojd [hidden]{display:none!important}

/* filas de datos */
.ojd .ojd-rows{display:flex;flex-direction:column}
.ojd .ojd-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px dashed var(--ojd-dash)}
.ojd .ojd-row:last-child{border-bottom:0}
.ojd .ojd-lab{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ojd-muted)}
.ojd .ojd-num{
  font-family:var(--ojd-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;
  font-size:var(--ojd-num);line-height:1;text-align:right;overflow-wrap:anywhere;
}
.ojd .ojd-num--ac{color:var(--ojd-ac)}
.ojd .ojd-num--big{text-transform:uppercase;text-align:left;overflow-wrap:normal;font-size:calc(var(--ojd-num) * 1.4)}
@media (max-width:480px){.ojd .ojd-num--big{font-size:var(--ojd-num)}}
.ojd .ojd-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.ojd .ojd-per{font-family:var(--ojd-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;font-size:calc(var(--ojd-num) * .5);text-transform:uppercase}

/* botón y nota */
.ojd .ojd-cta{
  display:inline-block;background:var(--ojd-btn);color:var(--ojd-btnfg);text-decoration:none;
  font-family:var(--ojd-mono);font-weight:500;font-size:15px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;
  padding:18px 28px;transition:background-color .2s,color .2s;
}
.ojd a.ojd-cta.ojd-cta,.ojd a.ojd-cta.ojd-cta:link,.ojd a.ojd-cta.ojd-cta:visited{color:var(--ojd-btnfg)!important;background:var(--ojd-btn);text-decoration:none}
.ojd a.ojd-cta.ojd-cta:hover,.ojd a.ojd-cta.ojd-cta:focus-visible{background:var(--ojd-btn-hbg,var(--ojd-ac));color:var(--ojd-btn-hfg,var(--ojd-fg))!important}
.ojd .ojd-cta[aria-disabled="true"]{cursor:default}
.ojd .ojd-note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--ojd-muted)}

/* pilotos */
.ojd .ojd-pilots{display:flex;flex-direction:column}
.ojd .ojd-pilot{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px dashed var(--ojd-dash)}
.ojd .ojd-pilot:last-child{border-bottom:0}
.ojd .ojd-lamp{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--ojd-dash);background:transparent;
  transition:background-color .3s,border-color .3s,box-shadow .3s;transition-delay:calc(var(--i,0) * 140ms);
}
.ojd .ojd-pilot.is-lit .ojd-lamp{background:var(--ojd-ac);border-color:var(--ojd-ac);box-shadow:0 0 14px color-mix(in srgb,var(--ojd-ac) 70%,transparent)}
.ojd .ojd-ptxt{font-size:15px;line-height:1.4;letter-spacing:.03em}
.ojd .ojd-pilot:not(.is-lit) .ojd-ptxt{color:var(--ojd-muted)}
.ojd.is-armed:not(.is-on) .ojd-pilot.is-lit .ojd-lamp{background:transparent;border-color:var(--ojd-dash);box-shadow:none}
.ojd .ojd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .ojd .ojd-prog,.ojd .ojd-needle,.ojd .ojd-lamp,.ojd .ojd-opt,.ojd .ojd-period,.ojd .ojd-cta{transition:none}
}