/* =====================================================================
 * Folclorísima · estilos compartidos del frontend
 * Paleta: celeste / blanco / marrón-ocre · tipografía Lora · SVG línea fina
 * Construido para Día 1 (registro, login, perfil público). El resto de los
 * plugins (eventos, marquesina, pagos) reutilizan estas variables.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
	/* Paleta alineada al prototipo (inicio/provincia/registro). */
	--fl-celeste:        #1a6fa8;
	--fl-celeste-claro:  #e8f4fd;
	--fl-celeste-oscuro: #155d90;
	--fl-ocre:           #c49a5a;
	--fl-ocre-claro:     #e8d5a3;
	--fl-marron:         #8b5e3c;
	--fl-blanco:         #ffffff;
	--fl-crema:          #f5f0e8;
	--fl-gris:           #777777;
	--fl-gris-claro:     #e8d5a3;
	--fl-error:          #c0392b;
	--fl-ok:             #2e7d4f;
	--fl-radio:          12px;
	--fl-sombra:         0 4px 18px rgba(94, 70, 48, 0.10);
}

.fl-wrap {
	font-family: 'Lora', Georgia, serif;
	color: var(--fl-marron);
	max-width: 640px;
	margin: 0 auto;
	padding: 1.5rem;
	line-height: 1.55;
}

.fl-wrap--ancho { max-width: 920px; }

.fl-card {
	background: var(--fl-blanco);
	border: 1px solid var(--fl-gris-claro);
	border-radius: var(--fl-radio);
	box-shadow: var(--fl-sombra);
	padding: 2rem;
}

.fl-titulo {
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--fl-celeste-oscuro);
	margin: 0 0 0.35rem;
}

.fl-subtitulo {
	color: var(--fl-gris);
	margin: 0 0 1.5rem;
	font-style: italic;
}

.fl-campo { margin-bottom: 1.1rem; }

.fl-campo label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.35rem;
	color: var(--fl-marron);
}

.fl-campo input,
.fl-campo select,
.fl-campo textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--fl-gris-claro);
	border-radius: 8px;
	background: var(--fl-crema);
	color: var(--fl-marron);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.fl-campo input:focus,
.fl-campo select:focus,
.fl-campo textarea:focus {
	outline: none;
	border-color: var(--fl-celeste);
	box-shadow: 0 0 0 3px var(--fl-celeste-claro);
}

.fl-campo--usuario { position: relative; }
.fl-campo--usuario .fl-arroba {
	position: absolute;
	left: 0.85rem;
	top: 2.35rem;
	color: var(--fl-ocre);
	font-weight: 600;
}
.fl-campo--usuario input { padding-left: 1.9rem; }

.fl-ayuda {
	display: block;
	font-size: 0.82rem;
	color: var(--fl-gris);
	margin-top: 0.3rem;
}

.fl-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	border-radius: 9px;
	padding: 0.8rem 1.6rem;
	background: var(--fl-celeste);
	color: var(--fl-blanco);
	transition: background 0.15s, transform 0.05s;
}
.fl-boton:hover { background: var(--fl-celeste-oscuro); }
.fl-boton:active { transform: translateY(1px); }
.fl-boton--ocre { background: var(--fl-ocre); }
.fl-boton--ocre:hover { background: var(--fl-marron); }
.fl-boton--bloque { width: 100%; justify-content: center; }
.fl-boton--fantasma {
	background: transparent;
	color: var(--fl-celeste-oscuro);
	border: 1px solid var(--fl-celeste);
}
.fl-boton--fantasma:hover { background: var(--fl-celeste-claro); }

.fl-aviso {
	border-radius: 9px;
	padding: 0.85rem 1.1rem;
	margin-bottom: 1.25rem;
	font-size: 0.95rem;
}
.fl-aviso--error { background: #f7e3df; color: var(--fl-error); border: 1px solid #e3b6ad; }
.fl-aviso--ok    { background: #e3f0e7; color: var(--fl-ok);    border: 1px solid #b4d6bf; }
.fl-aviso--info  { background: var(--fl-celeste-claro); color: var(--fl-celeste-oscuro); border: 1px solid #bcdded; }
.fl-aviso--alias { background: #f7e3df; color: var(--fl-error); border: 1px solid #e3b6ad; font-weight: 600; }

.fl-radios { display: grid; gap: 0.6rem; }
.fl-radio-tarjeta {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	border: 1px solid var(--fl-gris-claro);
	border-radius: 9px;
	padding: 0.85rem 1rem;
	cursor: pointer;
	background: var(--fl-crema);
	transition: border-color 0.15s, background 0.15s;
}
.fl-radio-tarjeta:hover { border-color: var(--fl-celeste); }
.fl-radio-tarjeta input { width: auto; margin-top: 0.25rem; }
.fl-radio-tarjeta .fl-rt-titulo { font-weight: 600; display: block; }
.fl-radio-tarjeta .fl-rt-ayuda { font-size: 0.82rem; color: var(--fl-gris); }

.fl-icono { width: 22px; height: 22px; stroke: var(--fl-celeste-oscuro); stroke-width: 1.5; fill: none; vertical-align: middle; }
.fl-icono--ocre { stroke: var(--fl-ocre); }

.fl-link { color: var(--fl-celeste-oscuro); text-decoration: none; border-bottom: 1px solid transparent; }
.fl-link:hover { border-bottom-color: var(--fl-celeste); }

.fl-sep { display: flex; align-items: center; gap: 0.75rem; color: var(--fl-gris); margin: 1.4rem 0; font-size: 0.85rem; }
.fl-sep::before, .fl-sep::after { content: ""; flex: 1; height: 1px; background: var(--fl-gris-claro); }

/* Oculto hasta que el JS lo muestre (campos de dirección según tipo). */
.fl-oculto { display: none; }

/* Mapa del sitio (Leaflet). */
.fl-mapa {
	width: 100%;
	height: 460px;
	border-radius: var(--fl-radio);
	overflow: hidden;
	box-shadow: var(--fl-sombra);
	z-index: 0;
}
.fl-dir-item:hover { border-color: var(--fl-celeste) !important; }

/* Lista de sugerencias del autocompletado de Google Places. */
.fl-sugerencias {
	list-style: none;
	margin: 0.2rem 0 0;
	padding: 0;
	border: 1px solid var(--fl-gris-claro);
	border-radius: 8px;
	overflow: hidden;
	background: var(--fl-blanco);
}
.fl-sugerencias li { padding: 0.6rem 0.85rem; cursor: pointer; }
.fl-sugerencias li:hover { background: var(--fl-celeste-claro); }