/* ============================================================
   Eventario · Navegación por Ciudad — estilos del front
   Alineado con el selector de ciudad del Search Form de Voxel:
   panel claro, texto oscuro, acento azul. Radio 8px por defecto en
   TODO (botones, chips, campos, panels). Prefijo .evc-.
   El widget NO impone fondo de página: el fondo lo pone el usuario.
   ============================================================ */

.evc-selector {
	/* ---- Tokens (tema claro por defecto) ---- */
	--evc-radio: 8px;            /* radio por defecto en todo */
	--evc-gap: 8px;

	--evc-field-bg: #ffffff;
	--evc-field-text: #1f2430;
	--evc-field-border: rgba(20, 24, 40, 0.10);

	--evc-panel-bg: #ffffff;
	--evc-panel-text: #1f2430;
	--evc-panel-muted: #6b7280;
	--evc-panel-border: #ececf1;
	--evc-hover: #f3f4f8;

	--evc-acento: #3b5bdb;       /* azul; ajústelo a su marca */
	--evc-acento-text: #ffffff;

	--evc-conteo-bg: #eef0f6;
	--evc-conteo-text: #5b6472;

	--evc-sombra: 0 18px 48px rgba(16, 18, 40, 0.18);

	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	color: var(--evc-panel-text);
	font-size: 15px;
	line-height: 1.35;
	box-sizing: border-box;
	background: transparent;     /* sin fondo propio */
	-webkit-font-smoothing: antialiased;
}
.evc-selector *,
.evc-selector *::before,
.evc-selector *::after { box-sizing: border-box; }

/* Tema oscuro opcional */
.evc-selector.evc-tema-oscuro {
	--evc-field-bg: rgba(255, 255, 255, 0.12);
	--evc-field-text: #ffffff;
	--evc-field-border: rgba(255, 255, 255, 0.20);
	--evc-panel-bg: #1b1b26;
	--evc-panel-text: #ffffff;
	--evc-panel-muted: rgba(255, 255, 255, 0.65);
	--evc-panel-border: rgba(255, 255, 255, 0.14);
	--evc-hover: rgba(255, 255, 255, 0.10);
	--evc-conteo-bg: rgba(255, 255, 255, 0.16);
	--evc-conteo-text: rgba(255, 255, 255, 0.85);
}

.evc-titulo {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: var(--evc-field-text);
}

/* ---------- Chip de conteo (unificado) ---------- */
.evc-num,
.evc-chip-conteo,
.evc-fila-conteo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--evc-radio);
	background: var(--evc-conteo-bg);
	color: var(--evc-conteo-text);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- Buscador ---------- */
.evc-buscador {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	background: var(--evc-field-bg);
	border: 1px solid var(--evc-field-border);
	border-radius: var(--evc-radio);
	padding: 0 14px;
	box-shadow: 0 6px 18px rgba(16, 18, 40, 0.10);
}
.evc-buscador-icono { display: flex; color: var(--evc-panel-muted); }
.evc-input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--evc-field-text);
	font-size: 15px;
	height: 46px;
	padding: 0;
}
.evc-input::placeholder { color: var(--evc-panel-muted); opacity: 1; }

.evc-sugerencias {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--evc-panel-bg);
	color: var(--evc-panel-text);
	border: 1px solid var(--evc-panel-border);
	border-radius: var(--evc-radio);
	box-shadow: var(--evc-sombra);
	max-height: min(360px, 60vh);
	overflow-y: auto;
	z-index: 80;
	-webkit-overflow-scrolling: touch;
}
.evc-sugerencias[hidden] { display: none; }
.evc-sugerencia {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 46px;
	padding: 8px 12px;
	border-radius: var(--evc-radio);
	color: var(--evc-panel-text);
	text-decoration: none;
	cursor: pointer;
}
.evc-sugerencia:hover,
.evc-sugerencia.evc-activa { background: var(--evc-hover); }
.evc-sugerencia-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evc-sugerencia-nombre { font-weight: 600; }
.evc-sugerencia-depto { color: var(--evc-panel-muted); font-size: 12px; }
.evc-sugerencia-vacia { padding: 14px; text-align: center; color: var(--evc-panel-muted); font-size: 13px; }

/* ---------- Destacadas (chips) ---------- */
.evc-destacadas { margin-top: 14px; text-align: center; }
.evc-etiqueta {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--evc-field-text);
	opacity: 0.9;
	margin-bottom: 9px;
}
.evc-tema-claro .evc-etiqueta { color: #ffffff; }
.evc-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--evc-gap);
}
.evc-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	background: var(--evc-field-bg);
	border: 1px solid var(--evc-field-border);
	border-radius: var(--evc-radio);
	color: var(--evc-field-text);
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(16, 18, 40, 0.08);
	transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.evc-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16, 18, 40, 0.14); }
.evc-chip-icono { display: flex; color: var(--evc-acento); }

/* ---------- Ver todas (drill-down) ---------- */
.evc-todas { margin-top: 14px; }
.evc-todas-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	background: var(--evc-field-bg);
	border: 1px solid var(--evc-field-border);
	border-radius: var(--evc-radio);
	color: var(--evc-field-text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(16, 18, 40, 0.10);
}
.evc-todas-total {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: var(--evc-radio);
	background: var(--evc-acento);
	color: var(--evc-acento-text);
	font-size: 12px;
	font-weight: 700;
}
.evc-todas-flecha { display: flex; color: var(--evc-panel-muted); transition: transform 0.2s ease; }
.evc-todas-toggle[aria-expanded="true"] .evc-todas-flecha { transform: rotate(180deg); }

.evc-browse {
	margin-top: 10px;
	background: var(--evc-panel-bg);
	color: var(--evc-panel-text);
	border: 1px solid var(--evc-panel-border);
	border-radius: var(--evc-radio);
	box-shadow: var(--evc-sombra);
	overflow: hidden;
}
.evc-browse[hidden] { display: none; }

.evc-nivel { display: none; padding: 8px; max-height: min(420px, 62vh); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.evc-nivel.evc-visible { display: block; }
.evc-nivel-titulo {
	display: block;
	padding: 8px 10px 6px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--evc-panel-muted);
}

.evc-lista { list-style: none; margin: 0; padding: 0; }

.evc-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 0;
	background: transparent;
	border-radius: var(--evc-radio);
	color: var(--evc-panel-text);
	text-decoration: none;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.evc-fila:hover { background: var(--evc-hover); }
.evc-fila-nombre { font-weight: 600; }
.evc-fila-meta { display: inline-flex; align-items: center; gap: 8px; }
.evc-fila-chevron { display: flex; color: var(--evc-panel-muted); }

.evc-fila-todo {
	margin: 2px 0 4px;
	color: var(--evc-acento);
	font-weight: 700;
	border-bottom: 1px solid var(--evc-panel-border);
	border-radius: var(--evc-radio) var(--evc-radio) 0 0;
}
.evc-fila-todo .evc-fila-chevron { color: var(--evc-acento); }

.evc-volver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	margin-bottom: 2px;
	border: 0;
	background: transparent;
	color: var(--evc-panel-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--evc-radio);
	font-family: inherit;
}
.evc-volver:hover { background: var(--evc-hover); color: var(--evc-panel-text); }
.evc-volver-icono { display: flex; }

.evc-aviso { color: var(--evc-panel-muted); text-align: center; margin: 0; }

/* Fila activa (ciudad/departamento actual) */
.evc-fila-activa { background: color-mix(in srgb, var(--evc-acento) 12%, transparent); }
.evc-fila-activa .evc-fila-nombre { color: var(--evc-acento); }

/* ---------------- MODO HEADER (trigger + popover solo-buscador) ---------------- */
.evc-selector.evc-header { display: inline-block; width: auto; max-width: none; margin: 0; position: relative; }

.evc-header-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 12px;
	background: var(--evc-field-bg);
	border: 1px solid var(--evc-field-border);
	border-radius: var(--evc-radio);
	color: var(--evc-field-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	max-width: 220px;
	box-shadow: 0 3px 10px rgba(16, 18, 40, 0.10);
}
.evc-header-pin { display: flex; color: var(--evc-acento); flex: 0 0 auto; }
/* En modo oscuro el pin va blanco (el acento azul se pierde sobre fondo oscuro) */
.evc-selector.evc-tema-oscuro .evc-header-pin { color: var(--evc-field-text); }
.evc-header-actual { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; padding-bottom: 1px; }
.evc-header-flecha { display: flex; color: var(--evc-panel-muted); flex: 0 0 auto; transition: transform 0.2s ease; }
.evc-header-trigger[aria-expanded="true"] .evc-header-flecha { transform: rotate(180deg); }

.evc-header-pop {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: min(320px, 92vw);
	background: var(--evc-panel-bg);
	color: var(--evc-panel-text);
	border: 1px solid var(--evc-panel-border);
	border-radius: var(--evc-radio);
	box-shadow: var(--evc-sombra);
	z-index: 9999;
	padding: 8px;
	overflow: hidden;
}
.evc-header-pop[hidden] { display: none; }
/* Buscador dentro del popover: sin sombra, integrado */
.evc-header-pop .evc-buscador {
	min-height: 44px;
	box-shadow: none;
	background: var(--evc-panel-bg);
	border-color: var(--evc-panel-border);
}
.evc-header-pop .evc-input { color: var(--evc-panel-text); }
/* Resultados en flujo (no dropdown flotante), llenan el popover */
.evc-sugerencias-header {
	position: static;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	max-height: min(340px, 60vh);
}

/* ---------------- Responsive / móvil ---------------- */
@media (max-width: 600px) {
	.evc-selector { font-size: 16px; }
	.evc-titulo { font-size: 16px; }
	.evc-buscador,
	.evc-todas-toggle { min-height: 50px; }
	.evc-input { height: 48px; font-size: 16px; } /* 16px evita el zoom de iOS */
	.evc-chip { min-height: 42px; }
	.evc-fila,
	.evc-sugerencia { min-height: 50px; }
	.evc-nivel { max-height: 66vh; }
	.evc-sugerencias { max-height: 56vh; }
	.evc-chips { gap: 7px; }

	.evc-header-trigger { max-width: 60vw; }
	.evc-header-pop {
		position: fixed;
		left: 8px;
		right: 8px;
		width: auto;
		top: auto;
	}
	.evc-header-pop .evc-input { font-size: 16px; }
}

/* Respeto a "reduce motion" */
@media (prefers-reduced-motion: reduce) {
	.evc-chip, .evc-todas-flecha, .evc-header-flecha { transition: none; }
}