/* Fire Horse — Audiolibro 717 */

.fh717 {
	--fh-tinta: #16140f;
	--fh-papel: #f7f4ed;
	--fh-suave: #efe9dd;
	--fh-linea: #ddd4c2;
	--fh-tenue: #8a8172;
	--fh-brasa: #b4451f;
	--fh-oro:   #c9922e;
	max-width: 46rem;
	margin: 0 auto;
	font-family: inherit;
	color: var(--fh-tinta);
	-webkit-tap-highlight-color: transparent;
}

.fh717 *, .fh717 *::before, .fh717 *::after { box-sizing: border-box; }

/* ---------- sin acceso ---------- */

.fh717-cerrado {
	text-align: center;
	padding: 2.75rem 1.5rem;
	background: var(--fh-suave);
	border: 1px solid var(--fh-linea);
	border-radius: 14px;
}
.fh717-cerrado h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.fh717-cerrado p  { margin: 0 auto 1.5rem; max-width: 30rem; color: var(--fh-tenue); line-height: 1.55; }

.fh717-cta {
	display: inline-block;
	padding: .8rem 1.75rem;
	background: var(--fh-brasa);
	color: #fff !important;
	border-radius: 999px;
	text-decoration: none !important;
	font-weight: 600;
}
.fh717-cta:hover { background: #9c3a19; }

/* ---------- continuar ---------- */

.fh717-continuar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .2rem;
	width: 100%;
	padding: 1.05rem 1.35rem;
	margin-bottom: 1.25rem;
	background: var(--fh-tinta);
	color: #f7f4ed;
	border: 0;
	border-radius: 14px;
	cursor: pointer;
	text-align: left;
	transition: transform .12s ease, background .15s ease;
}
.fh717-continuar:hover  { background: #221f18; }
.fh717-continuar:active { transform: scale(.995); }

.fh717-continuar-eti {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fh-oro);
	font-weight: 700;
}
.fh717-continuar-cap { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }

/* ---------- reproductor ---------- */

.fh717-player {
	padding: 1.35rem 1.35rem 1.1rem;
	margin-bottom: 1.75rem;
	background: var(--fh-suave);
	border: 1px solid var(--fh-linea);
	border-radius: 14px;
}

.fh717-ahora { margin-bottom: .9rem; }
.fh717-ahora-eti {
	display: block;
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fh-tenue);
	font-weight: 700;
}
.fh717-ahora-cap { font-size: 1rem; font-weight: 600; }

.fh717-barra {
	position: relative;
	height: 22px;
	cursor: pointer;
	touch-action: none;
	display: flex;
	align-items: center;
}
.fh717-barra::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 5px;
	background: var(--fh-linea);
	border-radius: 999px;
}
.fh717-barra-cargado,
.fh717-barra-avance {
	position: absolute;
	left: 0;
	height: 5px;
	border-radius: 999px;
	width: 0;
}
.fh717-barra-cargado { background: #cfc5b1; }
.fh717-barra-avance  { background: var(--fh-brasa); }
.fh717-barra-punto {
	position: absolute;
	left: 0;
	width: 13px; height: 13px;
	margin-left: -6.5px;
	background: var(--fh-brasa);
	border: 2px solid var(--fh-papel);
	border-radius: 50%;
}
.fh717-barra:focus-visible { outline: 2px solid var(--fh-brasa); outline-offset: 4px; border-radius: 4px; }

.fh717-tiempos {
	display: flex;
	justify-content: space-between;
	font-size: .78rem;
	color: var(--fh-tenue);
	font-variant-numeric: tabular-nums;
	margin: .1rem 0 .8rem;
}

.fh717-controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
}

.fh717-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--fh-tinta);
	flex: 0 0 auto;
}
.fh717-btn:hover { background: rgba(22,20,15,.07); }
.fh717-btn svg   { width: 23px; height: 23px; fill: currentColor; }

.fh717-btn-num {
	position: absolute;
	font-size: .52rem;
	font-weight: 700;
	top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.fh717-btn-play {
	width: 62px; height: 62px;
	background: var(--fh-brasa);
	color: #fff;
	margin: 0 .35rem;
}
.fh717-btn-play:hover { background: #9c3a19; }
.fh717-btn-play svg   { width: 27px; height: 27px; }

.fh717-btn-vel {
	width: auto;
	min-width: 46px;
	padding: 0 .6rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--fh-linea);
}

.fh717-error {
	margin: .9rem 0 0;
	padding: .6rem .8rem;
	background: #fbeae4;
	border-left: 3px solid var(--fh-brasa);
	border-radius: 4px;
	font-size: .85rem;
	color: #7a3014;
}

/* ---------- índice ---------- */

.fh717-acto { border-bottom: 1px solid var(--fh-linea); }
.fh717-acto:first-child { border-top: 1px solid var(--fh-linea); }

.fh717-acto > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .95rem .35rem;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
}
.fh717-acto > summary::-webkit-details-marker { display: none; }
.fh717-acto > summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid var(--fh-tenue);
	border-bottom: 2px solid var(--fh-tenue);
	transform: rotate(45deg);
	margin-left: auto;
	flex: 0 0 auto;
	transition: transform .18s ease;
}
.fh717-acto[open] > summary::after { transform: rotate(-135deg); }

.fh717-acto-titulo { font-size: 1.02rem; }
.fh717-acto-cuenta {
	margin-left: auto;
	font-size: .72rem;
	font-weight: 600;
	color: var(--fh-tenue);
	font-variant-numeric: tabular-nums;
}
.fh717-acto-cuenta.es-lleno { color: var(--fh-oro); }

.fh717-lista { list-style: none; margin: 0 0 .5rem; padding: 0; }

.fh717-pista {
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
	padding: .62rem .35rem;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	color: inherit;
	font-size: .95rem;
	line-height: 1.35;
}
.fh717-pista:hover { background: rgba(22,20,15,.05); }

.fh717-pista-marca {
	width: 7px; height: 7px;
	border-radius: 50%;
	border: 1.5px solid var(--fh-linea);
	flex: 0 0 auto;
}
.fh717-pista.es-completo .fh717-pista-marca { background: var(--fh-oro); border-color: var(--fh-oro); }
.fh717-pista.es-empezado .fh717-pista-marca { border-color: var(--fh-brasa); }
.fh717-pista.es-actual   .fh717-pista-marca { background: var(--fh-brasa); border-color: var(--fh-brasa); }

.fh717-pista-num {
	min-width: 1.6rem;
	font-size: .78rem;
	color: var(--fh-tenue);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}
.fh717-pista-tit { flex: 1 1 auto; }

.fh717-pista.es-actual { background: rgba(180,69,31,.08); }
.fh717-pista.es-actual .fh717-pista-tit,
.fh717-pista.es-actual .fh717-pista-num { font-weight: 700; color: var(--fh-brasa); }

.fh717-pista.es-completo .fh717-pista-tit { color: var(--fh-tenue); }

/* ---------- teléfono ---------- */

@media (max-width: 480px) {
	.fh717-controles  { gap: .15rem; }
	.fh717-btn        { width: 42px; height: 42px; }
	.fh717-btn-play   { width: 56px; height: 56px; }
	.fh717-player     { padding: 1.1rem 1rem .9rem; }
	.fh717-continuar  { padding: .95rem 1.1rem; }
	.fh717-pista      { font-size: .92rem; }
}

/* ---------- modo oscuro ---------- */

@media (prefers-color-scheme: dark) {
	.fh717 {
		--fh-tinta: #ece7dc;
		--fh-papel: #14130f;
		--fh-suave: #1d1b16;
		--fh-linea: #3a362d;
		--fh-tenue: #938b7c;
	}
	.fh717-continuar       { background: #2a2721; }
	.fh717-continuar:hover { background: #332f27; }
	.fh717-btn:hover       { background: rgba(236,231,220,.09); }
	.fh717-pista:hover     { background: rgba(236,231,220,.06); }
	.fh717-barra-cargado   { background: #4b4639; }
	.fh717-barra-punto     { border-color: var(--fh-suave); }
	.fh717-error           { background: #2e1a12; color: #e8a88c; }
}

/* ---------- cambiar de libro ---------- */

.fh717-cambiar {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: 1rem;
}
.fh717-cambiar a {
	padding: .35rem .85rem;
	border: 1px solid var(--fh-linea);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none !important;
	color: var(--fh-tenue) !important;
}
.fh717-cambiar a.es-actual {
	background: var(--fh-tinta);
	border-color: var(--fh-tinta);
	color: var(--fh-papel) !important;
}

/* ---------- biblioteca ---------- */

.fh717-biblioteca { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.fh717-biblio-item a {
	display: block;
	padding: 1.1rem 1.25rem;
	background: var(--fh-suave);
	border: 1px solid var(--fh-linea);
	border-radius: 14px;
	text-decoration: none !important;
	color: inherit !important;
	transition: border-color .15s ease;
}
.fh717-biblio-item a:hover { border-color: var(--fh-brasa); }

.fh717-biblio-titulo { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.fh717-biblio-autor  { display: block; font-size: .82rem; color: var(--fh-tenue); margin-bottom: .7rem; }
.fh717-biblio-estado { display: block; font-size: .88rem; margin-bottom: .45rem; }

.fh717-biblio-barra {
	display: block;
	height: 5px;
	background: var(--fh-linea);
	border-radius: 999px;
	overflow: hidden;
}
.fh717-biblio-barra > span { display: block; height: 100%; background: var(--fh-oro); border-radius: 999px; }

.fh717-biblio-pc {
	display: block;
	margin-top: .35rem;
	font-size: .74rem;
	color: var(--fh-tenue);
	font-variant-numeric: tabular-nums;
}

/* ---------- muestra gratuita ---------- */

.fh717-muestra {
	padding: 1.1rem 1.25rem;
	background: var(--fh-suave);
	border: 1px solid var(--fh-linea);
	border-radius: 14px;
}
.fh717-muestra-cab { margin-bottom: .7rem; }
.fh717-muestra-eti {
	display: block;
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fh-brasa);
	font-weight: 700;
}
.fh717-muestra-cap { font-size: 1rem; font-weight: 600; }
.fh717-muestra-audio { width: 100%; display: block; }
.fh717-muestra-pie {
	margin: .7rem 0 0;
	font-size: .76rem;
	color: var(--fh-tenue);
	line-height: 1.5;
}