/* Hanna Signage — estilos del lienzo (editor, vista previa y TVs). Tamaños en calc(var(--s) * px de diseño). */
@import url(fonts.css);

.hs-stage{position:relative;overflow:hidden;background:#111827;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--s:1;-webkit-font-smoothing:antialiased}
.hs-bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;overflow:hidden}
.hs-bg .hs-media,.hs-bg-overlay{position:absolute;top:0;left:0;width:100%;height:100%}
.hs-el{position:absolute;box-sizing:border-box;overflow:hidden;transform-origin:center center}
.hs-media{display:block;width:100%;height:100%}
.hs-muted{opacity:.6;font-weight:500}
.hs-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 calc(var(--s)*14px),rgba(255,255,255,.02) calc(var(--s)*14px) calc(var(--s)*28px)),linear-gradient(135deg,#1e3a8a,#111827);color:rgba(255,255,255,.85);font:600 calc(var(--s)*28px)/1.2 Inter,system-ui,sans-serif;border:calc(var(--s)*2px) dashed rgba(255,255,255,.25);box-sizing:border-box}

/* Texto */
.hs-text,.hs-date,.hs-clock-time,.hs-clock-date{white-space:pre-wrap;word-wrap:break-word;max-width:100%}

/* Playlist */
.hs-pl{background:#000}
.hs-pl-layer{position:absolute;top:0;left:0;width:100%;height:100%;opacity:1;transform:none}
.hs-pl-in-fade{opacity:0}
.hs-pl-in-slide{transform:translateX(100%)}
.hs-pl-in-zoom{opacity:0;transform:scale(1.08)}

/* Reloj analógico */
.hs-analog{width:100%;height:100%;display:block}

/* Clima */
.hs-weather{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:.25em;line-height:1.1}
.hs-w-main{display:flex;align-items:center;gap:.35em}
.hs-wicon{display:inline-block;width:1.6em;height:1.6em;flex:none}
.hs-w-temp{font-size:1.6em;font-weight:800;font-variant-numeric:tabular-nums}
.hs-w-desc{font-size:.5em;font-weight:600;opacity:.85}
.hs-w-city{font-size:.45em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.hs-w-details{font-size:.32em;font-weight:500;opacity:.75}
.hs-weather-compact .hs-wicon{width:1.1em;height:1.1em}
.hs-weather-compact .hs-w-temp{font-size:1em}
.hs-weather-compact .hs-w-city{font-size:.6em;margin-left:.2em}
.hs-w-days{display:flex;gap:.4em;margin-top:.2em}
.hs-w-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1em;background:rgba(255,255,255,.08);border-radius:.25em;padding:.2em}
.hs-w-day .hs-wicon{width:.9em;height:.9em}
.hs-w-dname{font-size:.35em;font-weight:700;text-transform:uppercase}
.hs-w-range{font-size:.35em;font-weight:600}

/* Noticias / cinta */
.hs-news{width:100%;height:100%;display:flex;align-items:stretch;overflow:hidden}
.hs-news-label{flex:none;display:flex;align-items:center;padding:0 .6em;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.8em;z-index:1}
.hs-news-body{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 .5em;overflow:hidden}
.hs-news-ticker .hs-news-body{padding:0}
.hs-marquee{display:inline-flex;white-space:pre;will-change:transform}
.hs-marquee-item{flex:none;padding-right:0}
.hs-marquee-run{animation-name:hs-marquee;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes hs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hs-news-headline{font-weight:800;line-height:1.15}
.hs-news-meta{font-size:.55em;opacity:.75;margin-top:.3em;font-weight:500}
.hs-news-row{padding:.35em 0;border-bottom:1px solid rgba(255,255,255,.15)}
.hs-news-row:last-child{border-bottom:0}
.hs-news-rtitle{font-weight:700;line-height:1.2}
.hs-fade-in{animation:hs-fade .6s ease both}

/* Cuenta regresiva */
.hs-countdown{display:flex;flex-direction:column;align-items:center;gap:.25em}
.hs-cd-row{display:flex;gap:.25em}
.hs-cd-cell{display:flex;flex-direction:column;align-items:center;min-width:1.6em;padding:.15em .25em;border-radius:.15em}
.hs-cd-num{font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.hs-cd-unit{font-size:.28em;text-transform:uppercase;letter-spacing:.08em;opacity:.8;margin-top:.2em}

/* QR */
.hs-qr{display:flex;flex-direction:column;align-items:center;justify-content:center}
.hs-qr-box{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.hs-qr-box canvas{max-width:100%;max-height:100%;height:auto;width:auto;image-rendering:pixelated;border-radius:calc(var(--s)*6px)}
.hs-qr-label{text-align:center;margin-top:.2em}

/* Formas */
.hs-shape{display:flex;align-items:center}
.hs-line{width:100%}

/* Animaciones de entrada */
.hs-anim{animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.hs-in-fade{animation-name:hs-fade}
.hs-in-up{animation-name:hs-up}
.hs-in-down{animation-name:hs-down}
.hs-in-left{animation-name:hs-left}
.hs-in-right{animation-name:hs-right}
.hs-in-zoom{animation-name:hs-zoom}
@keyframes hs-fade{from{opacity:0}to{opacity:1}}
@keyframes hs-up{from{opacity:0;translate:0 12%}to{opacity:1;translate:0 0}}
@keyframes hs-down{from{opacity:0;translate:0 -12%}to{opacity:1;translate:0 0}}
@keyframes hs-left{from{opacity:0;translate:12% 0}to{opacity:1;translate:0 0}}
@keyframes hs-right{from{opacity:0;translate:-12% 0}to{opacity:1;translate:0 0}}
@keyframes hs-zoom{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
/* Animaciones continuas */
.hs-loop-pulse{animation:hs-pulse 2.4s ease-in-out infinite}
.hs-loop-float{animation:hs-float 4s ease-in-out infinite}
@keyframes hs-pulse{0%,100%{scale:1}50%{scale:1.04}}
@keyframes hs-float{0%,100%{translate:0 0}50%{translate:0 -3%}}