/* =====================================================================
 * Folclorísima · header del sitio (contextual) + hamburguesa
 * Usa las variables de paleta definidas por la página (inicio/provincia/...).
 * ===================================================================== */

.fl-site-header {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	padding: 1rem 2rem;
	background: var(--pergamino, #F5F0E8);
	border-bottom: 1px solid var(--ocre-claro, #E8D5A3);
	position: sticky; top: 0; z-index: 200;
}
.fl-site-header .logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.fl-site-header .logo-nombre { font-family: 'Lora', serif; font-weight: 700; font-size: 1.4rem; color: var(--celeste, #1A6FA8); }
.fl-site-header .logo-tagline { font-family: 'Lora', serif; font-style: italic; font-size: 0.68rem; color: var(--marron, #8B5E3C); margin-top: 2px; }

/* Link "← Inicio" (visitante en páginas internas). */
.fl-volver { font-size: 0.85rem; font-weight: 500; color: var(--casi-negro, #1C1C1C); text-decoration: none; opacity: 0.7; transition: opacity 0.2s; }
.fl-volver:hover { opacity: 1; }

/* Toast de confirmación (p. ej. "Sesión iniciada"). Aparece, se sostiene y se
   desvanece solo con la animación; el JS lo saca del DOM después. */
.fl-toast {
	position: fixed; top: 1rem; left: 50%;
	transform: translateX(-50%) translateY(-12px);
	background: #2E7D32; color: #fff;
	padding: 0.7rem 1.3rem; border-radius: 999px;
	font-family: 'Lora', serif; font-size: 0.92rem; font-weight: 600;
	box-shadow: 0 10px 28px rgba(0,0,0,0.2);
	z-index: 9999; opacity: 0; pointer-events: none;
	animation: fl-toast-anim 4s ease forwards;
}
@keyframes fl-toast-anim {
	0%   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
	10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
	85%  { opacity: 1; transform: translateX(-50%) translateY(0); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Nav (solo logueado). */
.fl-site-nav { display: flex; align-items: center; gap: 1.6rem; }
.fl-site-nav > a { font-size: 0.82rem; font-weight: 500; color: var(--casi-negro, #1C1C1C); text-decoration: none; opacity: 0.7; transition: opacity 0.2s; }
.fl-site-nav > a:hover { opacity: 1; }

/* Dropdown "Mi perfil". */
.fl-dropdown { position: relative; }
.fl-dropdown-toggle {
	background: none; border: none; font: inherit; cursor: pointer;
	color: var(--casi-negro, #1C1C1C); opacity: 0.7; padding: 0;
	font-size: 0.82rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.3rem;
}
.fl-dropdown-toggle:hover { opacity: 1; }
.fl-caret { transition: transform 0.2s; font-size: 0.7rem; }
.fl-dropdown.abierto .fl-caret { transform: rotate(180deg); }
.fl-dropdown-menu {
	display: none; position: absolute; right: 0; top: calc(100% + 0.6rem);
	background: #fff; border: 1px solid var(--ocre-claro, #E8D5A3); border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12); min-width: 170px; overflow: hidden; z-index: 60;
}
.fl-dropdown-menu a {
	display: block; padding: 0.7rem 1rem; font-size: 0.85rem;
	color: var(--casi-negro, #1C1C1C); text-decoration: none; opacity: 1;
	border-top: 1px solid var(--ocre-claro, #E8D5A3);
}
.fl-dropdown-menu a:first-child { border-top: none; }
.fl-dropdown-menu a:hover { background: var(--celeste-pale, #E8F4FD); }
.fl-dropdown.abierto .fl-dropdown-menu { display: block; }

/* Hamburguesa. */
.fl-nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.fl-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--casi-negro, #1C1C1C); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.fl-nav-toggle.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fl-nav-toggle.abierto span:nth-child(2) { opacity: 0; }
.fl-nav-toggle.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 700px) {
	.fl-nav-toggle { display: flex; }
	.fl-site-nav {
		display: none; flex-direction: column; align-items: stretch;
		width: 100%; gap: 0; margin-top: 0.6rem; order: 3;
	}
	.fl-site-nav.abierto { display: flex; }
	.fl-site-nav > a { padding: 0.85rem 0.2rem; border-top: 1px solid var(--ocre-claro, #E8D5A3); opacity: 0.9; font-size: 0.95rem; }
	.fl-dropdown { width: 100%; }
	.fl-dropdown-toggle { width: 100%; justify-content: space-between; padding: 0.85rem 0.2rem; border-top: 1px solid var(--ocre-claro, #E8D5A3); font-size: 0.95rem; opacity: 0.9; }
	.fl-dropdown-menu { position: static; box-shadow: none; border: none; border-radius: 0; min-width: 0; background: transparent; }
	.fl-dropdown-menu a { padding-left: 1.4rem; opacity: 0.85; }
}