/* ADPOSTER · gestor de playlists · estilo RACK DIGITAL de la familia AVHUB · GPL-3.0 · mediaservi.com */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800 900; font-display: swap; src: url(assets/fonts/inter-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/share-tech-mono-latin-400-normal.woff2) format('woff2'); }
:root { --bg: #121213; --chasis: #1c1c1f; --panel: #27272b; --hundido: #131315; --linea: #0a0a0b; --txt: #e9ebee; --gris: #9aa0aa; --ambar: #ffb000; --f: clamp(11px, 1.55vh, 15px); --alto: clamp(24px, 3.7vh, 40px); --sep: clamp(4px, .7vh, 10px); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font: 400 var(--f)/1.3 Inter, system-ui, Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
button, input { font: inherit; color: inherit; }
img { display: block; }

/* cabecera: chapa con el logo, AVHUB en el centro y el resto de la familia */
.cab { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: clamp(6px, 1.1vh, 12px) clamp(10px, 1.4vw, 22px); background: linear-gradient(180deg, #303034, #1d1d20); border-bottom: 1px solid var(--linea); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }
.cab .marca { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.cab .marca img { height: clamp(30px, 5.4vh, 52px); width: auto; }
.cab .centro img { height: clamp(20px, 3.4vh, 32px); width: auto; opacity: .9; }
.cab .der { display: flex; align-items: center; justify-content: flex-end; gap: clamp(8px, 1vw, 16px); min-width: 0; }
.cab .fam { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); }
.cab .fam img { height: clamp(15px, 2.5vh, 24px); width: auto; filter: saturate(.5); opacity: .7; transition: filter .2s, opacity .2s; }
.cab .fam a:hover img, .cab .fam a:focus-visible img { filter: none; opacity: 1; }
.tecla { min-height: var(--alto); padding: 0 clamp(8px, .9vw, 14px); border: 1px solid var(--linea); border-radius: 7px; background: linear-gradient(180deg, #4b4b51, #2d2d31); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 3px rgba(0, 0, 0, .5); font-weight: 700; letter-spacing: .03em; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; color: var(--txt); }
.tecla:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.tecla:focus-visible, input:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.tecla i.led { flex: none; width: .72em; height: .72em; border-radius: 50%; background: #1d1407; box-shadow: inset 0 1px 2px #000; }
.tecla.on { color: #fff; background: linear-gradient(180deg, #3a3a3f, #232326); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65); }
.tecla.on i.led { background: var(--ambar); box-shadow: 0 0 8px rgba(255, 176, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .5); }
.tecla.pri { background: linear-gradient(180deg, #ffc23d, #e69a00); color: #1a1205; border-color: #5a3d00; text-transform: uppercase; }
.tecla.reset { color: #ffb4a8; }
.tecla small { font: 400 .82em 'Share Tech Mono', monospace; color: var(--gris); margin-left: auto; padding-left: .6em; }

/* consola de tres zonas */
.consola { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(270px, 1fr); gap: clamp(8px, 1vw, 16px); padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.4vw, 22px); }
.consola > * { min-width: 0; }
.zona { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sep); padding: clamp(8px, 1.3vh, 14px); border: 1px solid var(--linea); border-radius: 12px; background: linear-gradient(180deg, #2b2b2f, #202023); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 14px rgba(0, 0, 0, .4); }
.zona h2 { margin: 0; font: 400 clamp(10px, 1.35vh, 13px) 'Share Tech Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255, 255, 255, .06); }
.zona h2:not(:first-child) { margin-top: clamp(1px, .5vh, 6px); }
.fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fila > .tecla { flex: 1; min-width: 0; }
.fila > .rd { flex: none; width: var(--alto); padding: 0; font-size: 1.25em; }
.rej { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.rej .tecla { justify-content: flex-start; overflow: hidden; }
.rej .tecla span { overflow: hidden; text-overflow: ellipsis; }
.lcd { flex: 1; min-width: 0; min-height: var(--alto); display: flex; align-items: center; justify-content: center; gap: .5em; padding: 0 10px; border-radius: 7px; background: #0b0a06; box-shadow: inset 0 2px 8px #000, 0 1px 0 rgba(255, 255, 255, .08); color: var(--ambar); font: 400 1.25em 'Share Tech Mono', monospace; text-shadow: 0 0 8px rgba(255, 176, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd small { font-size: .7em; color: #b98a2a; letter-spacing: .1em; text-transform: uppercase; }
.lcd.url { flex: none; justify-content: flex-start; font-size: 1em; }
.rej.ancha { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.rej.media { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
input.campo { flex: 1; min-width: 0; min-height: var(--alto); padding: 0 10px; border: 1px solid var(--linea); border-radius: 7px; background: #0b0a06; box-shadow: inset 0 2px 8px #000; color: var(--ambar); font: 400 1.05em 'Share Tech Mono', monospace; }
input.campo::placeholder { color: #6d5a2c; }
input[type=time].campo { flex: none; width: 6.4em; padding: 0 4px; text-align: center; color-scheme: dark; }
.dias .tecla { flex: 1; padding: 0; min-width: 0; }
.pie-zona { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: var(--sep); }
.pie-zona .pri { grid-column: 1 / -1; }
.nota { color: var(--gris); font-size: .84em; line-height: 1.3; }
.nota b { color: var(--ambar); font-weight: 700; }

/* el display, en vertical, con la vista previa en vivo */
.centro-zona { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sep); }
.display { flex: 1; min-height: 0; aspect-ratio: 9 / 16; max-width: 100%; padding: clamp(5px, .9vh, 10px); border-radius: clamp(8px, 1.4vh, 16px); background: linear-gradient(160deg, #3a3a3e, #101012 60%); box-shadow: 0 0 0 1px #000, 0 12px 30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15); }
.display iframe { width: 100%; height: 100%; border: 0; border-radius: 4px; background: #000; display: block; }
.estado { font: 400 clamp(10px, 1.35vh, 13px) 'Share Tech Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); display: flex; align-items: center; gap: .6em; }
.estado i { width: .7em; height: .7em; border-radius: 50%; background: #00ff04; box-shadow: 0 0 8px rgba(0, 255, 4, .8); }
.estado.sucio i { background: var(--ambar); box-shadow: 0 0 8px rgba(255, 176, 0, .9); }

.pie { flex: none; padding: clamp(4px, .8vh, 9px) 12px; text-align: center; color: #8d929c; font-size: .86em; background: #19191b; border-top: 1px solid var(--linea); }
.pie a { color: inherit; }

/* tablet y móvil: una columna, con el display arriba; aquí sí hay desplazamiento */
@media (max-width: 900px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  .cab { grid-template-columns: 1fr auto; } .cab .centro, .cab .fam { display: none; }
  .consola { grid-template-columns: 1fr; }
  .centro-zona { order: -1; } .display { flex: none; height: min(64vh, 150vw); }
  :root { --f: 14px; --alto: 40px; --sep: 9px; }
}
@media (min-width: 901px) and (max-width: 1180px) { .cab .fam { display: none; } }