/* ==========================================================================
   Xalisquero · Puntos de Venta — estilos del front
   Cambia los colores ajustando las variables :root de abajo.
   ========================================================================== */

.xpv-app {
	--xpv-accent: #b5302a;        /* rojo tapatío / chile */
	--xpv-accent-dark: #8c231e;
	--xpv-ink: #2b2b2b;
	--xpv-muted: #6b6b6b;
	--xpv-line: #e7e3dd;
	--xpv-bg: #ffffff;
	--xpv-bg-soft: #faf7f2;
	--xpv-radius: 12px;
	--xpv-shadow: 0 6px 24px rgba(0, 0, 0, .10);

	font-family: inherit;
	color: var(--xpv-ink);
	max-width: 100%;
}

.xpv-loading,
.xpv-error {
	padding: 1.5rem;
	text-align: center;
	color: var(--xpv-muted);
	background: var(--xpv-bg-soft);
	border-radius: var(--xpv-radius);
}
.xpv-error { color: var(--xpv-accent-dark); }

/* --- Mapa --- */
.xpv-map {
	width: 100%;
	min-height: 320px;
	border-radius: var(--xpv-radius);
	overflow: hidden;
	box-shadow: var(--xpv-shadow);
	z-index: 0;
}

/* Burbuja (popup de Leaflet) */
.xpv-popup { display: flex; flex-direction: column; gap: .35rem; min-width: 180px; }
.xpv-popup-name { font-size: 1rem; color: var(--xpv-ink); }
.xpv-popup-addr { font-size: .85rem; color: var(--xpv-muted); }

.xpv-btn {
	margin-top: .35rem;
	display: inline-block;
	background: var(--xpv-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .45rem .9rem;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.xpv-btn:hover { background: var(--xpv-accent-dark); }
.xpv-btn-ghost { background: #fff; color: var(--xpv-accent); border: 1px solid var(--xpv-accent); }
.xpv-btn-ghost:hover { background: var(--xpv-bg-soft); color: var(--xpv-accent-dark); }
.xpv-popup-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.xpv-popup-actions .xpv-btn { margin-top: 0; }

/* --- Directorio --- */
.xpv-directory { margin-top: 1.25rem; }

.xpv-toolbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: .75rem;
}
.xpv-search {
	flex: 1 1 280px;
	padding: .7rem 1rem;
	border: 1px solid var(--xpv-line);
	border-radius: 999px;
	font-size: 1rem;
	outline: none;
	background: var(--xpv-bg);
}
.xpv-search:focus { border-color: var(--xpv-accent); box-shadow: 0 0 0 3px rgba(181, 48, 42, .12); }
.xpv-meta { color: var(--xpv-muted); font-size: .9rem; white-space: nowrap; }

.xpv-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--xpv-bg-soft);
	border: 1px dashed var(--xpv-accent);
	border-radius: var(--xpv-radius);
	padding: .6rem 1rem;
	margin-bottom: .9rem;
	font-size: .9rem;
}
.xpv-chip button {
	background: none;
	border: 0;
	color: var(--xpv-accent);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

/* Lista de tarjetas */
.xpv-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}
.xpv-card {
	background: var(--xpv-bg);
	border: 1px solid var(--xpv-line);
	border-radius: var(--xpv-radius);
	padding: 1.1rem 1.2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.xpv-card-title {
	margin: 0 0 .6rem;
	font-size: 1.05rem;
	color: var(--xpv-accent-dark);
	border-bottom: 2px solid var(--xpv-bg-soft);
	padding-bottom: .4rem;
}
.xpv-row { display: flex; gap: .5rem; margin: .3rem 0; font-size: .9rem; line-height: 1.4; }
.xpv-row a { color: var(--xpv-accent); text-decoration: none; word-break: break-word; }
.xpv-row a:hover { text-decoration: underline; }
.xpv-label {
	flex: 0 0 84px;
	color: var(--xpv-muted);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.xpv-card-actions { margin-top: .7rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.xpv-link {
	background: none;
	border: 0;
	color: var(--xpv-accent);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	font-size: .9rem;
}
.xpv-link:hover { text-decoration: underline; }

.xpv-empty { padding: 2rem; text-align: center; color: var(--xpv-muted); }

/* Paginación */
.xpv-pager {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	justify-content: center;
	margin-top: 1.4rem;
}
.xpv-pg {
	min-width: 38px;
	padding: .45rem .7rem;
	border: 1px solid var(--xpv-line);
	background: var(--xpv-bg);
	border-radius: 8px;
	cursor: pointer;
	font-size: .9rem;
	color: var(--xpv-ink);
}
.xpv-pg:hover:not(:disabled):not(.is-active) { border-color: var(--xpv-accent); }
.xpv-pg.is-active { background: var(--xpv-accent); color: #fff; border-color: var(--xpv-accent); cursor: default; }
.xpv-pg:disabled { opacity: .45; cursor: not-allowed; }
.xpv-gap { padding: .45rem .3rem; color: var(--xpv-muted); }

/* --- Modal de detalles --- */
.xpv-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.xpv-modal[hidden] { display: none; }
.xpv-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 14, 12, .55); }
.xpv-modal-box {
	position: relative;
	background: var(--xpv-bg);
	border-radius: var(--xpv-radius);
	box-shadow: var(--xpv-shadow);
	max-width: 460px;
	width: 100%;
	padding: 1.8rem 1.8rem 1.6rem;
	z-index: 1;
	animation: xpv-pop .18s ease;
}
@keyframes xpv-pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.xpv-modal-box h2 { margin: 0 0 1rem; font-size: 1.3rem; color: var(--xpv-accent-dark); padding-right: 2rem; }
.xpv-modal-close {
	position: absolute; top: .8rem; right: 1rem;
	background: none; border: 0; font-size: 1.8rem; line-height: 1;
	color: var(--xpv-muted); cursor: pointer;
}
.xpv-modal-close:hover { color: var(--xpv-ink); }
.xpv-modal-body .xpv-row { margin: .55rem 0; font-size: .95rem; }
.xpv-modal-actions { margin-top: 1.2rem; }
.xpv-modal-actions .xpv-btn { margin-top: 0; }

/* --- Responsivo --- */
@media (max-width: 640px) {
	.xpv-list { grid-template-columns: 1fr; }
	.xpv-meta { width: 100%; }
	.xpv-label { flex-basis: 72px; }
}