/* App de streaming de Puerto Libertador Stereo — diseño propio con la paleta institucional (docs/wordpress/marca.md). */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* marca */
	--night: #021e1d;
	--night-2: #06302a;
	--selva: #047335;
	--libertador: #3a9827;
	--lima: #78b11b;
	--sun: #fdbe02;
	--orange: #fa6b08;
	--white: #fff;

	/* interfaz */
	--bg: var(--night);
	--text: #f4f8f3;
	--muted: rgb(226 240 228 / 0.66);
	--faint: rgb(226 240 228 / 0.42);
	--line: rgb(255 255 255 / 0.09);
	--glass: rgb(255 255 255 / 0.055);
	--glass-2: rgb(255 255 255 / 0.09);
	--radius: 22px;
	--art: min(78vw, 340px);
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
.sprite { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* ---------- fondo: carátula difuminada sobre el verde noche ---------- */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background:
		radial-gradient(120% 70% at 10% -10%, rgb(4 115 53 / 0.55), transparent 60%),
		radial-gradient(90% 60% at 110% 110%, rgb(120 177 27 / 0.22), transparent 60%),
		var(--night);
}
.backdrop img {
	position: absolute;
	inset: -15%;
	width: 130%;
	height: 130%;
	max-width: none;
	object-fit: cover;
	filter: blur(70px) saturate(1.4);
	opacity: 0.28;
	transition: opacity 0.8s ease;
}
.backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(2 30 29 / 0.2) 0%, rgb(2 30 29 / 0.75) 55%, var(--night) 100%);
}

.shell {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	max-width: 1120px;
	margin: 0 auto;
	padding: calc(12px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));
}

/* ---------- cabecera ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-card {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--white);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.25);
	flex: none;
}
.brand-card img { width: 30px; height: auto; }
.brand-text { display: grid; min-width: 0; line-height: 1.2; }
.brand-text strong { font-size: 0.95rem; font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freq {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--orange);
	color: var(--white);
	font-weight: 800;
	font-size: 0.68rem;
	letter-spacing: 0.02em;
}
.top-actions { display: flex; gap: 8px; }
.icon-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	min-width: 40px;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--glass);
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 650;
	backdrop-filter: blur(10px);
}
.icon-btn svg { font-size: 1.15rem; }
.icon-btn:hover { background: var(--glass-2); }
#btn-install { background: var(--sun); color: var(--night); border-color: transparent; }

/* ---------- reproductor ---------- */
.layout { flex: 1; display: grid; gap: 22px; padding-top: 18px; }
.player { display: flex; flex-direction: column; align-items: center; text-align: center; }

.art-wrap { position: relative; width: var(--art); aspect-ratio: 1; margin-top: 6px; }
.art-wrap::before {
	/* halo con el amarillo del sol y el lima de las ondas del logo */
	content: '';
	position: absolute;
	inset: -14px;
	border-radius: 40px;
	background: conic-gradient(from 200deg, rgb(253 190 2 / 0), rgb(253 190 2 / 0.55), rgb(120 177 27 / 0.6), rgb(4 115 53 / 0), rgb(253 190 2 / 0));
	filter: blur(18px);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.is-playing .art-wrap::before { opacity: 1; animation: halo 9s linear infinite; }
@keyframes halo { to { transform: rotate(360deg); } }
.art {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	object-fit: cover;
	background: var(--night-2);
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08);
}
.art.is-logo { background: var(--white); object-fit: contain; padding: 13%; }

.status {
	position: absolute;
	left: 14px;
	top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: calc(100% - 28px);
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgb(0 0 0 / 0.25);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status-live { background: var(--sun); color: var(--night); }
.status-live i { animation: pulse 1.4s ease-in-out infinite; }
.status-auto { background: var(--libertador); color: var(--white); }
.status-off { background: rgb(2 30 29 / 0.82); color: var(--muted); backdrop-filter: blur(8px); }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }

.now { margin-top: 26px; width: 100%; max-width: 520px; min-height: 92px; }
.program {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 4px 10px;
	border-radius: 8px;
	background: rgb(120 177 27 / 0.16);
	color: #b9e07a;
	font-size: 0.78rem;
	font-weight: 650;
	text-decoration: none;
}
.program b { color: var(--white); font-weight: 750; }
a.program[href]:hover { background: rgb(120 177 27 / 0.26); }
.title {
	margin: 0;
	font-size: clamp(1.45rem, 5.6vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.artist { margin: 6px 0 0; color: var(--muted); font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }

/* ecualizador decorativo: las barras del logo */
.eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 30px; margin: 18px 0 6px; }
.eq i {
	width: 4px;
	height: 6px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--lima), var(--libertador));
	opacity: 0.45;
	transition: height 0.3s ease, opacity 0.3s ease;
}
.is-playing .eq i { opacity: 1; animation: bar 1.1s ease-in-out infinite alternate; }
.is-playing .eq i:nth-child(3n) { animation-duration: 0.8s; }
.is-playing .eq i:nth-child(3n + 1) { animation-duration: 1.35s; }
.is-playing .eq i:nth-child(4n) { animation-delay: -0.4s; }
.is-playing .eq i:nth-child(5n + 2) { animation-delay: -0.7s; background: linear-gradient(180deg, var(--sun), var(--lima)); }
@keyframes bar { from { height: 5px; } to { height: 30px; } }

.controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 8px; }
.ctl {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--glass);
	cursor: pointer;
}
.ctl svg { font-size: 1.3rem; }
.ctl:hover { background: var(--glass-2); }
.ctl.is-on { background: rgb(253 190 2 / 0.16); border-color: rgb(253 190 2 / 0.5); color: var(--sun); }
.ctl-label {
	position: absolute;
	bottom: -20px;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--sun);
	white-space: nowrap;
}
#btn-mute .ic-mute, #btn-mute[aria-pressed='true'] .ic-vol { display: none; }
#btn-mute[aria-pressed='true'] .ic-mute { display: block; }

.play {
	position: relative;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--lima) 0%, var(--libertador) 45%, var(--selva) 100%);
	color: var(--white);
	cursor: pointer;
	box-shadow: 0 14px 34px rgb(4 115 53 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.25);
	transition: transform 0.15s ease, box-shadow 0.3s ease;
}
.play:active { transform: scale(0.95); }
.play svg { font-size: 2.1rem; grid-area: 1 / 1; }
.play .ic-play { margin-left: 4px; }
.play .ic-stop, .is-playing .play .ic-play, .is-loading .play .ic-play, .is-loading .play .ic-stop { display: none; }
.is-playing .play .ic-stop { display: block; }
.is-playing .play { box-shadow: 0 14px 34px rgb(4 115 53 / 0.55), 0 0 0 7px rgb(253 190 2 / 0.22); }
.spinner {
	grid-area: 1 / 1;
	display: none;
	width: 34px;
	height: 34px;
	border: 3px solid rgb(255 255 255 / 0.35);
	border-top-color: var(--white);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
.is-loading .play .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.volume { display: none; width: 220px; margin-top: 22px; }
.volume input { width: 100%; accent-color: var(--lima); }
@media (hover: hover) and (pointer: fine) { .volume { display: block; } }

.notice { min-height: 1.4em; margin: 14px 0 0; color: var(--sun); font-size: 0.85rem; font-weight: 600; }
.notice:empty { visibility: hidden; }
.listeners { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--faint); font-size: 0.8rem; }

/* ---------- paneles ---------- */
.side { display: grid; gap: 16px; align-content: start; }
.panel {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--glass);
	backdrop-filter: blur(14px);
	padding: 16px 16px 8px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel h2 { margin: 0; font-size: 1rem; font-weight: 750; letter-spacing: -0.01em; }
.panel-tag { font-size: 0.72rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }

.slots, .tracks { list-style: none; margin: 0; padding: 0; }
.slot {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
}
.slot:first-child { border-top: 0; }
.slot time { color: var(--faint); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 2px; }
.slot-name { display: block; font-weight: 650; font-size: 0.93rem; line-height: 1.3; text-decoration: none; }
a.slot-name:hover { text-decoration: underline; }
.slot-host { display: block; color: var(--muted); font-size: 0.8rem; }
.slot.is-past { opacity: 0.45; }
.slot.is-now {
	margin: 0 -10px;
	padding: 10px;
	border-radius: 14px;
	border-top-color: transparent;
	background: linear-gradient(90deg, rgb(120 177 27 / 0.2), rgb(120 177 27 / 0.04));
	box-shadow: inset 3px 0 0 var(--lima);
}
.slot.is-now + .slot { border-top-color: transparent; }
.slot.is-now time { color: #b9e07a; }
.tag-now {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--sun);
	color: var(--night);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	vertical-align: 2px;
}

.track { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.track:first-child { border-top: 0; }
.track img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--night-2); }
.track img.is-logo { background: var(--white); object-fit: contain; padding: 5px; }
.track-text { min-width: 0; }
.track-title, .track-artist { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-title { font-weight: 650; font-size: 0.9rem; }
.track-artist { color: var(--muted); font-size: 0.8rem; }
.track time { color: var(--faint); font-size: 0.75rem; white-space: nowrap; }

/* ---------- pie ---------- */
.foot { display: grid; justify-items: center; gap: 10px; margin-top: 26px; color: var(--faint); font-size: 0.78rem; text-align: center; }
.portal-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--white);
	color: var(--selva);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
}
.portal-link:hover { background: #eaf5e3; }

/* ---------- aviso flotante ---------- */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(18px + var(--safe-bottom));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--white);
	color: var(--night);
	font-size: 0.88rem;
	font-weight: 600;
	box-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
	z-index: 10;
}
.toast button {
	border: 0;
	border-radius: 8px;
	padding: 6px 10px;
	background: var(--selva);
	color: var(--white);
	font-weight: 700;
	cursor: pointer;
}

/* ---------- escritorio: reproductor a la izquierda, paneles a la derecha ---------- */
@media (min-width: 900px) {
	:root { --art: 360px; }
	.shell { padding-left: 32px; padding-right: 32px; }
	.layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; padding-top: 34px; }
	.player { position: sticky; top: 24px; padding: 30px 24px 26px; border-radius: 30px; background: rgb(255 255 255 / 0.03); border: 1px solid var(--line); }
	.foot { margin-top: 40px; }
}
@media (max-width: 479px) {
	#btn-install span { display: none; }
	#btn-install { padding: 0; }
}
@media (max-width: 380px) {
	.brand-sub { display: none; }
	.controls { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.is-playing .eq i { height: 18px; }
}