:root{
    --ink:#f4f7fb;--ink-dim:rgba(244,247,251,.74);--ink-soft:rgba(244,247,251,.56);
    --gold:#f5b942;--hot:#ff7a52;--cool:#63c2ff;--warn:#ffb44d;--ok:#54d29a;
    --stroke:rgba(255,255,255,.16);
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --shadow:0 14px 46px rgba(0,0,0,.28);--blur:20px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;background:#0a1524}
  body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
  #gl{position:fixed;inset:0;width:100vw;height:100vh;display:block}
  .exp{position:fixed;inset:0;pointer-events:none;text-shadow:0 1px 16px rgba(4,10,20,.5)}
  .glass{
    background:linear-gradient(180deg, rgba(13,19,31,.52) 0%, rgba(21,29,44,.22) 100%);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(122%);
    backdrop-filter:blur(var(--blur)) saturate(122%);
    border:1px solid var(--stroke);box-shadow:var(--shadow);
  }

  .date{position:absolute;top:30px;right:40px;display:flex;flex-direction:column;align-items:flex-end;line-height:1}
  .date .dow{color:var(--gold);font-size:14px;font-weight:600;letter-spacing:.16em}
  .date .num{font-size:60px;font-weight:250;letter-spacing:-.02em;margin:2px 0}
  .date .my{font-size:14px;font-weight:500;letter-spacing:.16em;color:var(--ink-dim)}

  .rail{position:absolute;left:24px;top:26px;bottom:104px;width:360px;display:flex;flex-direction:column;gap:15px}
  .brand{display:flex;flex-direction:row;align-items:center;gap:14px;padding:0 4px;line-height:1}
  .brand-id{display:flex;flex-direction:column;line-height:1}
  .brand b{font-size:21px;font-weight:800}.brand b i{color:var(--cool);font-style:normal}
  .brand span{font-size:11px;letter-spacing:.32em;color:var(--ink-soft);margin-top:6px}
  .panel{border-radius:20px;padding:15px 17px}
  .panel h2{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--gold);margin-bottom:11px}
  .rows{list-style:none;display:flex;flex-direction:column;gap:12px}
  .rows li{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
  .rows .l{color:var(--ink-dim)}.rows .v{font-weight:650;font-size:15px}
  .rows .v small{color:var(--ink-soft);font-weight:500;font-size:11px;margin-left:4px}
  .hr{display:flex;justify-content:space-between}
  .hr div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px}
  .hr .h{color:var(--ink-soft);font-size:11px}.hr .g{font-size:18px}.hr .t{font-weight:650;font-size:13px}

  .ev{width:100%;border-radius:20px;padding:15px 17px;text-align:left;flex:1 1 auto;min-height:200px;overflow:auto}
  .ev h3{font-size:11px;letter-spacing:.18em;color:var(--gold);font-weight:700;margin-bottom:8px}
  .ev p{font-size:16px;font-weight:500;margin-bottom:13px}
  .ev .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .ev .grid.two{grid-template-columns:1fr 1fr;margin-top:11px}
  .ev .k{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:3px}
  .ev .vv{display:block;font-size:13.5px;font-weight:500}.ev .vv.gold{color:var(--gold)}

  .center{position:absolute;left:50%;top:8%;transform:translateX(-42%);width:min(560px,46vw);
    display:flex;flex-direction:column;align-items:center;text-align:center}
  .temp{font-size:clamp(92px,12.5vw,172px);font-weight:200;line-height:.92;letter-spacing:-.04em}
  .cond{font-size:clamp(22px,2.3vw,32px);font-weight:350;margin-top:2px}
  .hilo{font-size:16px;color:var(--ink-dim);margin-top:11px}
  .divider{width:min(400px,70%);height:1px;background:linear-gradient(90deg,transparent,var(--stroke),transparent);margin:22px 0 20px}
  .loc{font-size:25px;font-weight:500}.loc .sub{display:block;font-size:12px;letter-spacing:.22em;color:var(--ink-soft);margin-top:4px;font-weight:400}
  /* Floating transparent Roman clock — numerals + two hands, in 3D.
     Contraste adaptativo día/noche (PO 2026-08-25, TICKET-WEATHER-01): variables por
     modo + transición 1.5s. La clase .is-day la pone hero.js cuando sunElevNorm>0.15. */
  .clock{position:relative;width:250px;height:250px;margin-top:28px;animation:floatC 7s ease-in-out infinite alternate;
    /* NOCHE / atardecer (default): blanco marfil luminiscente + glow dorado */
    --clk-num:rgba(255,255,255,.58); --clk-num-q:rgba(248,250,252,.88);
    --clk-num-shadow:0 1px 11px rgba(4,10,20,.55),0 0 18px rgba(255,255,255,.32);
    --clk-hand:rgba(255,255,255,.62); --clk-glow:0 0 13px rgba(245,185,66,.42);
    --clk-cap:rgba(255,255,255,.72); --clk-cap-glow:0 0 13px rgba(245,185,66,.62);}
  /* DÍA (sunElevNorm>0.15): negro pizarra + halo claro para máximo contraste con cielo/sol */
  .clock.is-day{
    --clk-num:rgba(15,23,42,.82); --clk-num-q:rgba(17,24,39,.96);
    --clk-num-shadow:0 1px 2px rgba(255,255,255,.8),0 0 13px rgba(255,255,255,.55);
    --clk-hand:rgba(15,23,42,.92); --clk-glow:0 1px 6px rgba(255,255,255,.6);
    --clk-cap:rgba(17,24,39,.95); --clk-cap-glow:0 1px 6px rgba(255,255,255,.7);}
  .clock .dial{position:absolute;inset:0;transform:perspective(860px) rotateX(17deg);transform-style:preserve-3d}
  .clock .num{position:absolute;font-size:19px;font-weight:300;letter-spacing:.03em;
    color:var(--clk-num);text-shadow:var(--clk-num-shadow);transform:translate(-50%,-50%);
    transition:color 1.5s ease,text-shadow 1.5s ease}
  .clock .num.q{color:var(--clk-num-q);font-weight:400}
  .clock .hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:4px;
    background:var(--clk-hand);box-shadow:var(--clk-glow);
    transition:background 1.5s ease,box-shadow 1.5s ease}
  .clock .hand.h{width:3.5px;height:62px;margin-left:-1.75px}
  .clock .hand.m{width:2.5px;height:92px;margin-left:-1.25px}
  .clock .cap{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
    background:var(--clk-cap);box-shadow:var(--clk-cap-glow);
    transition:background 1.5s ease,box-shadow 1.5s ease}
  @keyframes floatC{from{transform:translateY(-5px) rotateZ(-1.1deg)}to{transform:translateY(6px) rotateZ(1.1deg)}}

  .badge{position:absolute;left:24px;bottom:24px;font-size:11px;letter-spacing:.14em;color:var(--ink-soft);
    background:rgba(8,14,24,.42);border:1px solid var(--stroke);border-radius:999px;padding:7px 14px;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .badge b{color:var(--gold)}
  .scenes{position:absolute;right:24px;bottom:22px;display:flex;gap:6px;pointer-events:auto}
  .weather{position:absolute;right:24px;bottom:62px;display:flex;flex-wrap:wrap;justify-content:flex-end;
    gap:6px;max-width:min(720px,72vw);pointer-events:auto}
  .timeofday{position:absolute;right:24px;bottom:102px;display:flex;flex-wrap:wrap;justify-content:flex-end;
    gap:6px;max-width:min(560px,60vw);pointer-events:auto}
  .scenes button,.weather button,.timeofday button{background:rgba(10,16,26,.5);border:1px solid var(--stroke);color:var(--ink-dim);
    border-radius:999px;padding:7px 13px;font:inherit;font-size:12px;cursor:pointer;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .scenes button.on,.weather button.on,.timeofday button.on{background:var(--gold);color:#1a1206;border-color:transparent;font-weight:650}
  .weather button.on{background:var(--cool);color:#06131f}
  .timeofday button.on{background:#b9a3ff;color:#140a2e}
  .datectl{position:absolute;right:24px;bottom:142px;display:flex;align-items:center;gap:11px;pointer-events:auto;
    background:rgba(10,16,26,.5);border:1px solid var(--stroke);border-radius:999px;padding:7px 15px;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .datectl .dlbl{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold);min-width:58px;text-align:center}
  .datectl input[type=range]{width:190px;accent-color:var(--gold);cursor:pointer;background:transparent}
  .livebtn{position:static;pointer-events:auto;font:inherit;font-size:11px;font-weight:700;
    letter-spacing:.04em;cursor:pointer;border-radius:999px;padding:6px 12px;white-space:nowrap;flex:none;
    background:rgba(10,16,26,.55);border:1px solid var(--stroke);color:var(--ink-dim);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .livebtn.on{background:var(--ok);color:#04140c;border-color:transparent}
  .livebtn.warn{background:var(--warn);color:#2a1c04;border-color:transparent}
  .livebtn.degraded{background:rgba(61,139,255,.16);border-color:rgba(61,139,255,.55);color:#9cc4ff}
  /* mobile metrics strip — replaces the (hidden) side rail on phones/tablets */
  .mstrip{display:none}
  .mstrip .chip{display:flex;flex-direction:column;align-items:center;gap:2px;
    background:linear-gradient(180deg,rgba(13,19,31,.52),rgba(21,29,44,.28));
    border:1px solid var(--stroke);border-radius:15px;padding:9px 15px;min-width:74px;
    -webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
  .mstrip .chip .k{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft)}
  .mstrip .chip .v{font-size:17px;font-weight:650;line-height:1}
  .mstrip .chip .v small{font-size:9px;color:var(--ink-soft);margin-left:3px;font-weight:500}

  @media (max-width:900px){
    .rail{display:none}
    .center{transform:translateX(-50%);left:50%;width:92vw;top:7%}
    .date{top:14px;right:16px}.date .num{font-size:46px}
    .mstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:22px;width:100%}
    /* keep every control group inside the viewport (no horizontal overflow) */
    .weather,.timeofday,.datectl,.scenes{right:14px;max-width:calc(100vw - 28px)}
    .livebtn{left:14px}
  }
  @media (max-width:640px){
    .center{top:5%;width:94vw;transform:translateX(-50%)}
    .temp{font-size:clamp(66px,21vw,104px)}
    .cond{font-size:clamp(17px,5vw,22px)} .hilo{font-size:14px}
    .loc{font-size:20px} .loc .sub{font-size:11px}
    .clock{width:168px;height:168px;margin-top:16px}
    .clock .hand.h{height:42px}.clock .hand.m{height:62px}.clock .num{font-size:14px}
    .date .num{font-size:38px}.date .dow,.date .my{font-size:12px}
    .mstrip{margin-top:16px;gap:7px}
    .mstrip .chip{min-width:66px;padding:8px 12px}.mstrip .chip .v{font-size:15px}
    /* debug controls: smaller, wrap, tighter stack (hidden entirely when PREVIEW=false) */
    .scenes button,.weather button,.timeofday button{font-size:11px;padding:6px 10px}
    .datectl{padding:6px 12px} .datectl input[type=range]{width:120px} .datectl .dlbl{min-width:46px;font-size:11px}
    .livebtn{font-size:11.5px;padding:8px 13px}
    .badge{font-size:10px;padding:6px 11px;max-width:calc(100vw - 28px)}
    .scenes{bottom:12px} .weather{bottom:50px;justify-content:center} .timeofday{bottom:126px;justify-content:center}
    .datectl{bottom:166px} .livebtn{bottom:88px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}