/* Reloj · estilos propios */
body { overflow: hidden; }
.scene { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; background: var(--bg); color: var(--text); transition: background-color .4s; }
.scene[data-look="black"] { background: #000; color: #e9e9e9; --border: #1c1c1c; --panel: #0d0d0d; --sunken: #0a0a0a; --text-2: #a3a3a3; --text-3: #6b6b6b; --hover: #1a1a1a; --border-2: #2a2a2a; }
.scene[data-look="paper"] { background: #f4efe4; color: #2b2721; --border: #e2d9c6; --panel: #fbf7ee; --sunken: #ece4d2; --text-2: #6b6253; --text-3: #998f7c; --hover: #ebe3d1; --border-2: #d9cfb8; }
.scene[data-look="aurora"] { color: #fff; background: #0b1026; --border: rgba(255,255,255,.12); --panel: rgba(255,255,255,.08); --sunken: rgba(255,255,255,.06); --text-2: rgba(255,255,255,.75); --text-3: rgba(255,255,255,.5); --hover: rgba(255,255,255,.1); --border-2: rgba(255,255,255,.2); }
.scene[data-look="aurora"]::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 35% at 25% 30%, #22d3ee88, transparent 70%), radial-gradient(35% 40% at 75% 40%, #a855f788, transparent 70%), radial-gradient(45% 35% at 50% 85%, #10b98166, transparent 70%); filter: blur(30px); animation: aurora 24s ease-in-out infinite alternate; pointer-events: none; }
@keyframes aurora { 0% { transform: translate(-4%, -2%) rotate(0deg); } 100% { transform: translate(4%, 3%) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .scene[data-look="aurora"]::before { animation: none; } }
.bar { position: relative; z-index: 2; gap: 14px; border-bottom-color: transparent; background: transparent; transition: opacity .4s; }
.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 auto; }
.opts .input { height: 28px; width: auto; font-size: 12px; }
.topbar .top-actions { margin-left: 0; }
body.idle .bar { opacity: 0; pointer-events: none; }
body.idle { cursor: none; }
.clock { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 0 4vw 6vh; text-align: center; user-select: none; }
.face { display: flex; align-items: baseline; justify-content: center; }
.dg { font-size: clamp(64px, 19vw, 300px); font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.dg i { font-style: normal; opacity: .55; margin: 0 .02em; animation: tick 2s steps(1) infinite; }
@keyframes tick { 50% { opacity: .2; } }
.dg em { font-style: normal; font-size: .32em; margin-left: .25em; opacity: .5; font-weight: 400; }
.ap { font-size: clamp(16px, 2.4vw, 32px); margin-left: .6em; opacity: .6; }
.analog { width: min(70vh, 80vw); height: auto; }
.analog .tk { stroke: currentColor; stroke-width: 1; opacity: .35; }
.analog .tk5 { stroke: currentColor; stroke-width: 2.5; opacity: .85; stroke-linecap: round; }
.hand { stroke: currentColor; stroke-linecap: round; transition: transform .25s cubic-bezier(.4, 2.2, .5, 1); }
.hand.h { stroke-width: 5; } .hand.m { stroke-width: 3.2; } .hand.s { stroke-width: 1.4; stroke: #e5484d; transition: none; }
.pin { fill: #e5484d; }
.wd { margin: 0; max-width: 16ch; font-size: clamp(36px, 7.5vw, 120px); font-weight: 300; line-height: 1.1; letter-spacing: -.03em; }
.wd b { font-weight: 600; }
.wd small { display: block; margin-top: .4em; font-size: .3em; opacity: .55; letter-spacing: 0; }
.bin { display: flex; gap: clamp(18px, 4vw, 60px); }
.bcol { display: grid; gap: clamp(8px, 1.4vw, 18px); justify-items: center; }
.bcol i { width: clamp(22px, 4.5vw, 64px); aspect-ratio: 1; border-radius: 50%; border: 2px solid currentColor; opacity: .25; }
.bcol i.on { background: currentColor; opacity: 1; }
.bcol small { margin-top: 6px; font: 500 clamp(14px, 1.8vw, 22px) var(--mono); opacity: .55; }
.date { font-size: clamp(15px, 2.2vw, 30px); opacity: .7; }
.q { margin: 3vh 0 0; max-width: 46ch; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.55; opacity: .65; font-style: italic; }
.q cite { display: block; margin-top: 6px; font-size: .82em; font-style: normal; opacity: .8; }
.q:empty { display: none; }
@media (max-width: 1100px) { .opts .check.mini:not(:has(#secs)):not(:has(#date)) { display: none; } }
@media (max-width: 760px) { .bar { flex-wrap: wrap; height: auto; padding: 8px 12px; } .opts { order: 3; } }

.anim-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.scene[data-look="mesh"] { color: #fff; background: #0b0d1a; --border: rgba(255,255,255,.12); --panel: rgba(255,255,255,.08); --sunken: rgba(255,255,255,.06); --text-2: rgba(255,255,255,.75); --text-3: rgba(255,255,255,.5); --hover: rgba(255,255,255,.1); --border-2: rgba(255,255,255,.2); }
.scene[data-look="mesh"] .clock { text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.date::first-letter { text-transform: uppercase; }