/* ===== Barracas Fotos ===== */
.bf-uploader,
.bf-galeria {
	--bf-rojo: #d81920;
	--bf-oscuro: #1a1a1a;
	--bf-borde: #e2e2e2;
	max-width: 1100px;
	margin: 0 auto;
	font-family: inherit;
}

/* ---- Avisos ---- */
.bf-aviso {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 15px;
}
.bf-aviso-ok { background: #e7f6e7; color: #1e6b26; border: 1px solid #b6e0b6; }
.bf-aviso-error { background: #fdeaea; color: #a11; border: 1px solid #f3c2c2; }
.bf-err-inline { color: #a11; }

/* ---- Formulario de carga ---- */
.bf-uploader {
	background: #fff;
	border: 1px solid var(--bf-borde);
	border-radius: 12px;
	padding: 26px;
	box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.bf-field { margin-bottom: 20px; }
.bf-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--bf-oscuro);
}
.bf-uploader select,
.bf-uploader input[type="file"] {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--bf-borde);
	border-radius: 8px;
	font-size: 15px;
	background: #fafafa;
	box-sizing: border-box;
}
.bf-hint { font-size: 13px; color: #888; margin: 8px 0 0; }
.bf-btn {
	background: var(--bf-rojo);
	color: #fff;
	border: 0;
	padding: 14px 30px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s;
}
.bf-btn:hover { background: #b3151b; }

/* ---- Preview de selección ---- */
.bf-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.bf-preview img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--bf-borde);
}

/* ---- Galería: índice de categorías ---- */
.bf-titulo { margin: 0 0 20px; color: var(--bf-oscuro); }
.bf-grid-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}
.bf-card {
	position: relative;
	display: block;
	height: 190px;
	border-radius: 12px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #333;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	transition: transform .18s;
}
.bf-card:hover { transform: translateY(-4px); }
.bf-card-empty { background-color: #4a4a4a; }
.bf-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.05) 100%);
}
.bf-card-info {
	position: absolute;
	left: 16px;
	bottom: 14px;
	right: 16px;
	color: #fff;
}
.bf-card-nombre { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; }
.bf-card-count { display: block; font-size: 13px; opacity: .85; margin-top: 4px; }

/* ---- Galería: fotos de una categoría ---- */
.bf-cat-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.bf-cat-head .bf-titulo { margin: 0; }
.bf-volver {
	text-decoration: none;
	font-weight: 600;
	color: var(--bf-rojo);
	background: #fff;
	border: 1px solid var(--bf-borde);
	padding: 8px 14px;
	border-radius: 8px;
}
.bf-volver:hover { background: #faf0f0; }
.bf-vacio { color: #888; font-size: 16px; }

.bf-grid-fotos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}
.bf-foto {
	position: relative;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #eee;
	aspect-ratio: 1 / 1;
	cursor: pointer;
}
.bf-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s;
}
.bf-foto:hover img { transform: scale(1.05); }
.bf-descargar {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0,0,0,.6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	text-decoration: none;
	opacity: 0;
	transition: opacity .18s;
}
.bf-foto:hover .bf-descargar { opacity: 1; }
.bf-descargar:hover { background: var(--bf-rojo); }

/* ---- Paginación ---- */
.bf-paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 26px;
	font-size: 15px;
	color: #666;
}
.bf-paginacion a {
	text-decoration: none;
	font-weight: 600;
	color: var(--bf-rojo);
	padding: 8px 16px;
	border: 1px solid var(--bf-borde);
	border-radius: 8px;
}

/* ---- Lightbox ---- */
.bf-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
.bf-lightbox.abierto { display: flex; }
.bf-lb-img {
	max-width: 90vw;
	max-height: 82vh;
	object-fit: contain;
	border-radius: 6px;
}
.bf-lb-cerrar, .bf-lb-prev, .bf-lb-next {
	position: absolute;
	background: rgba(255,255,255,.12);
	color: #fff;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	width: 52px;
	height: 52px;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.bf-lb-cerrar:hover, .bf-lb-prev:hover, .bf-lb-next:hover { background: var(--bf-rojo); }
.bf-lb-cerrar { top: 20px; right: 20px; }
.bf-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.bf-lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.bf-lb-descargar {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bf-rojo);
	color: #fff;
	text-decoration: none;
	padding: 12px 26px;
	border-radius: 8px;
	font-weight: 700;
}
.bf-lb-descargar:hover { background: #b3151b; }

@media (max-width: 600px) {
	.bf-lb-prev { left: 8px; }
	.bf-lb-next { right: 8px; }
	.bf-grid-fotos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}