:root{
	--azul:#0B5FD8;
	--azul-oscuro:#08429A;
	--blanco:#FFFFFF;
	--gris-divisor:#E4E7EC;
	--gris-texto:#5B6472;
	--tinta:#1E2126;
	--oro:#B08D57;
	--oro-claro:#E9D9BB;
	--vino:#7A1F2B;
	--salvia:#3E7A5B;
	--aviso-fondo:#FFF4E5;
	--aviso-texto:#8A5A00;
	--negro: #000;
}
*{
	box-sizing:border-box;
	transition: .5s;
}
html,body{margin:0;padding:0;}
body{
	background:#DCE9FB;
	font-family:'Lora', serif;
	color:var(--tinta);
	min-height:100vh;
}
::selection{ background:var(--oro-claro); color:var(--tinta); }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
*:focus-visible{ outline:1px solid var(--azul-oscuro); outline-offset:2px; }

.app{
	max-width:900px;
	margin:0 auto;
	min-height:100vh;
	background:var(--blanco);
	display:flex;
	flex-direction:column;
	box-shadow:0 0 40px rgba(0,0,0,0.15);
}

.oculto{ display:none !important; }

/* ===== ENCABEZADO ===== */
.encabezado{
	color:var(--blanco);
	position:sticky;
	top:0;
	z-index:20;
}
.encabezado section{
	background:var(--azul);
	padding:20px 20px;
}
.fila-superior{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}
.marca h1{
	font-family:Serif;
	font-weight:700;
	font-size:2.1rem;
	margin:0;
	line-height:1;
}
.marca .subtitulo{
	font-family:'Inter', sans-serif;
	font-size:0.68rem;
	letter-spacing:0.04em;
	text-transform:uppercase;
	color:#DCE9FB;
}
.selector-idioma{
	display:flex;
	gap:2px;
	background:rgba(255,255,255,0.15);
	border-radius:100px;
	padding:2px;
	flex-shrink:0;
}
.idioma-btn{
	border:none;
	background:transparent;
	color:var(--blanco);
	font-family:'Inter', sans-serif;
	font-weight:700;
	font-size:0.72rem;
	padding:6px 12px;
	border-radius:100px;
}
.idioma-btn.activo{
	background:var(--blanco);
	color:var(--azul);
}

.buscador{
	position:relative;
	margin-top:14px;
}
.buscador svg{
	position:absolute;
	transform:translate(75%, 75%) scale(1);
	width:16px;
	height:16px;
	color:var(--gris-texto);
}
.buscador:hover svg{
	color: var(--azul);
	stroke-width: 4;
	transform: translate(75%, 75%) scale(1.3);
}
.buscador input{
	width:100%;
	font-size:0.92rem;
	padding:10px 14px 10px 36px;
	border-radius:10px;
	border:1.5px solid #DCE9FB;
	background:var(--blanco);
	color:var(--tinta);
}
.buscador input::placeholder{ 
	color:#9aa4b2;
}

.pestanas{
	display:flex;
	gap:4px;
	margin-top:0;
	position: sticky;
	bottom: 0;
	background: #EBF3F4;
	color: var(--negro);
}
nav.pestanas div{
	flex:1;
	text-align: center;
}
nav.pestanas div svg{
	position:absolute;
	transform:translate(11.2rem, .5rem);
}
nav.pestanas div .svg2{
	position:absolute;
	transform:translate(10.5rem, .5rem);
}
@media (max-width:820px) {
	nav.pestanas div svg{
		position:absolute;
		transform:translate(2.7rem, .5rem);
	}
	nav.pestanas div .svg2{
		position:absolute;
		transform:translate(2rem, .5rem);
	}
}
.pestana-btn{
	border:none;
	background:transparent;
	color:var(--negro);
	font-family:'Inter', sans-serif;
	font-weight:600;
	font-size:0.85rem;
	padding:10px 0;
	border-top:3px solid transparent;
	width:100%;
}
.pestana-btn.activo{
	color:var(--azul);
	border-top-color:var(--oro-claro);
	background: var(--oro-claro);
}

/* ===== AVISO SIN CONEXIÓN ===== */
.aviso-sin-conexion{
	display:flex;
	align-items:center;
	gap:8px;
	background:var(--aviso-fondo);
	color:var(--aviso-texto);
	font-family:'Inter', sans-serif;
	font-size:0.78rem;
	padding:8px 16px;
}
.aviso-sin-conexion svg{ 
	width:15px; 
	height:15px; 
	flex-shrink:0;
}

/* ===== CATEGORÍAS ===== */
.categorias{
	display:flex;
	gap:8px;
	overflow-x:auto;
	padding:12px 16px;
	border-bottom:1px solid var(--gris-divisor);
	position: sticky;
    top: 13.3rem;
	background: var(--blanco);
}
.categoria-chip{
	font-family:'Inter', sans-serif;
	font-size:0.72rem;
	font-weight:500;
	padding:6px 13px;
	border-radius:5px;
	border:1px solid var(--gris-divisor);
	background:var(--blanco);
	color:var(--tinta);
	white-space:nowrap;
	flex-shrink:0;
}
.categoria-chip:hover{
	background:var(--azul);
	border-color:var(--azul);
	color:var(--blanco);
}
.categoria-chip.activo{
	background:var(--azul);
	border-color:var(--azul);
	color:var(--blanco);
}

/* ===== CONTENIDO ===== */
.contenido{
	flex:1;
}

.estado-centro{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:12px;
	padding:60px 30px;
	text-align:center;
	color:var(--gris-texto);
	font-family:'Inter', sans-serif;
	font-size:0.9rem;
}
.spinner{
	width:30px; height:30px;
	border:3px solid var(--gris-divisor);
	border-top-color:var(--azul);
	border-radius:50%;
	animation:girar 0.8s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
.estado-centro button{
	margin-top:8px;
	background:var(--azul);
	color:var(--blanco);
	border:none;
	padding:9px 20px;
	border-radius:8px;
	font-family:'Inter', sans-serif;
	font-weight:600;
	font-size:0.85rem;
}

/* ===== LISTA DE HIMNOS ===== */
.lista-himnos{ display:flex; flex-direction:column; }
.item-himno{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 18px;
	border:none;
	border-bottom:1px solid var(--gris-divisor);
	background:var(--blanco);
	text-align:left;
	width:100%;
}
.item-himno:hover{ background:#F7FAFF; }
.item-numero{
	font-family:Serif;
	font-weight:700;
	font-size:1.5rem;
	color:var(--azul);
	min-width:34px;
}
.item-texto{ flex:1; min-width:0; }
.item-titulo{ font-size:0.98rem; }
.item-categoria{
	font-family:'Inter', sans-serif;
	font-size:0.68rem;
	color:var(--salvia);
	text-transform:uppercase;
	letter-spacing:0.03em;
	margin-top:2px;
	font-weight:bold;
}
.item-favorito{ color:var(--oro); flex-shrink:0; }
.item-favorito svg{ width:16px; height:16px; }

/* ===== DETALLE DE HIMNO ===== */
.vista-detalle{ display:flex; flex-direction:column; height:100%; }
.barra-detalle{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:12px 16px;
	border-bottom:1px solid var(--azul);
	position:sticky;
	top:0;
	background:var(--blanco);
	z-index:10;
}
.btn-volver{
	display:flex; align-items:center; gap:6px;
	border:none; background:none; color:var(--azul);
	font-family:'Inter', sans-serif; font-weight:600; font-size:1rem;
}
.btn-volver svg{
	width:16px;
	height:16px;
	transform: scale(1.5);
}
.btn-favorito-toggle{
	border:none; background:none; color:var(--gris-texto);
	display:flex; align-items:center;
}
.btn-favorito-toggle svg{ width:22px; height:22px; }
.btn-favorito-toggle.activo{ color:var(--oro); }

.encabezado-himno{
	padding:20px 22px 0;
}
.fila-placa{
	display:flex;
	align-items:center;
	gap:16px;
}
.placa-numero{
	min-width:64px;
	height:64px;
	padding:0 8px;
	border:2px solid var(--oro);
	border-radius:4px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:Serif;
	font-weight:700;
	font-size:1.5rem;
	color:var(--azul);
	flex-shrink:0;
}
.titulo-himno{
	font-family:Serif;
	font-weight:700;
	font-size:1.7rem;
	color:var(--azul-oscuro);
	margin:0;
	line-height:1;
}
.categoria-himno{
	font-family:'Inter', sans-serif;
	font-size:1rem;
	font-weight: 600;
	color:var(--salvia);
	text-transform:uppercase;
	letter-spacing:0.03em;
	margin-top:4px;
}
.detalles-himno{
	font-family:'Inter', sans-serif;
	font-size:0.82rem;
	color:var(--gris-texto);
	margin-top:2px;
}
.encabezado-himno .separador{
	border:none;
	border-top:1px solid var(--gris-divisor);
	margin:18px 0 0;
}

.cuerpo-himno{
	flex:1;
	overflow-y:auto;
	padding:16px 22px;
}
.control-tamano{
	display:flex;
	align-items:center;
	gap:8px;
	font-family:'Inter', sans-serif;
	font-size:0.78rem;
	color:var(--gris-texto);
	margin-bottom:18px;
}
.control-tamano button{
	width:28px; height:28px;
	border-radius:50%;
	border:1px solid var(--gris-divisor);
	background:var(--blanco);
	color:var(--azul);
	font-family:'Inter', sans-serif;
	font-weight:700;
	font-size:0.78rem;
}

.bloque-estrofa{
	display:flex;
	gap:14px;
	margin-bottom:5px;
}
.estrofa-num{
	font-family:Serif;
	font-style:italic;
	font-weight:600;
	color:var(--azul);
	min-width:20px;
}
.estrofa-lineas p{
	margin:0 0 2px;
	line-height:1.1;
}

.bloque-coro{
	margin:0 0 30px 34px;
	padding:12px 16px;
	background:rgba(122,31,43,0.06);
	border-left:3px solid var(--vino);
	border-radius:0 6px 6px 0;
}
.coro-etiqueta{
	font-family:'Inter', sans-serif;
	font-size:0.7rem;
	letter-spacing:0.04em;
	text-transform:uppercase;
	color:var(--vino);
	margin-bottom:6px;
	font-weight: bold;
}
.bloque-coro p{
	margin:0 0 2px;
	font-style:italic;
	line-height:1.1;
}

@media (max-width:520px){
	.marca h1{ font-size:1.8rem; }
	.titulo-himno{ font-size:1.45rem; }
}