/* ===========================================================================
   Beraka Ingeniería - Portal de clientes
   Misma identidad del sistema administrativo, en una hoja aparte: el portal es
   una aplicación independiente y no depende de los archivos del admin.
   =========================================================================== */

:root {
	--beraka-teal: #13756a;
	--beraka-teal-oscuro: #106861;
	--beraka-noche: #1f2c3b;
	--beraka-menu: #1b343c;
	--beraka-tinta: #091824;
	--beraka-texto: #575757;
	--beraka-apagado: #959595;
	--beraka-verde: #009b63;
	--beraka-fondo: #f7f7f7;
	--beraka-borde: #eaeaea;

	--bs-link-color: var(--beraka-teal);
	--bs-link-hover-color: var(--beraka-teal-oscuro);
}

body {
	font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: var(--beraka-texto);
	background-color: var(--beraka-fondo);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Play', 'Ubuntu', Arial, sans-serif;
	text-transform: uppercase;
	color: var(--beraka-tinta);
	letter-spacing: .02em;
}

/* --- acceso --------------------------------------------------------------- */
.pantalla-acceso {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--beraka-noche) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><rect width="6" height="6" fill="%231f2c3b"/><circle cx="3" cy="3" r="1" fill="%23243546"/></svg>') repeat;
	padding: 20px;
}

.caja-acceso { width: 100%; max-width: 380px; }
.caja-acceso .card { border-radius: 0; border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.logo-acceso { max-width: 210px; height: auto; }

/* --- barra superior ------------------------------------------------------- */
.barra-portal {
	background: var(--beraka-menu);
	border-bottom: 4px solid var(--beraka-teal);
	color: #fff;
	padding: 12px 0;
}

.barra-portal .logo-barra { max-height: 46px; width: auto; background: #fff; padding: 3px 6px; }
.barra-portal .titulo {
	font-family: 'Play', Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .04em;
}
.barra-portal .cliente { font-size: 12px; color: rgba(255, 255, 255, .75); }

/* --- tarjetas, tablas ----------------------------------------------------- */
.card {
	border-radius: 0;
	border: 1px solid var(--beraka-borde);
	box-shadow: 0 1px 2px rgba(9, 24, 36, .06);
}

.card-header {
	background: #fff;
	border-bottom: 2px solid var(--beraka-teal);
	font-family: 'Play', Arial, sans-serif;
	text-transform: uppercase;
	color: var(--beraka-tinta);
	font-weight: 700;
}

.tarjeta-resumen { border-left: 4px solid var(--beraka-teal); background: #fff; }
.tarjeta-resumen .cifra {
	font-family: 'Play', Arial, sans-serif;
	font-size: 30px;
	line-height: 1;
	color: var(--beraka-tinta);
}
.tarjeta-resumen .etiqueta { font-size: 12px; text-transform: uppercase; color: var(--beraka-apagado); }

.etiqueta { font-size: 11px; text-transform: uppercase; color: var(--beraka-apagado); letter-spacing: .03em; }

.table > thead > tr > th {
	--bs-table-bg: var(--beraka-menu);
	background-color: var(--beraka-menu);
	color: #fff;
	font-family: 'Play', Arial, sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	border-bottom: 0;
	white-space: nowrap;
}

.table td { vertical-align: middle; }

.progress-bar { background-color: var(--beraka-teal); }

/* --- botones -------------------------------------------------------------- */
.btn { border-radius: 0; font-family: 'Play', Arial, sans-serif; text-transform: uppercase; }

.btn-beraka { background: var(--beraka-teal); border-color: var(--beraka-teal); color: #fff; }
.btn-beraka:hover, .btn-beraka:focus { background: var(--beraka-menu); border-color: var(--beraka-menu); color: #fff; }

.btn-outline-beraka { border-color: var(--beraka-teal); color: var(--beraka-teal); background: transparent; }
.btn-outline-beraka:hover { background: var(--beraka-teal); color: #fff; }

.badge-activo { background: var(--beraka-verde); }

.form-control, .form-select { border-radius: 0; border-color: #d8d8d8; font-size: 14px; }
.form-control:focus, .form-select:focus {
	border-color: var(--beraka-teal);
	box-shadow: 0 0 0 .2rem rgba(19, 117, 106, .15);
}
.form-label { font-size: 12px; text-transform: uppercase; color: var(--beraka-tinta); font-weight: 700; margin-bottom: .25rem; }

/* --- galería de avance ---------------------------------------------------- */
.galeria-avance {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
	max-height: 320px;
	overflow-y: auto;
}

.galeria-avance .foto-avance {
	display: block;
	text-decoration: none;
	border: 1px solid var(--beraka-borde);
	background: #fff;
}

.galeria-avance .foto-avance img,
.galeria-avance .foto-avance .sin-foto {
	width: 100%;
	height: 90px;
	object-fit: cover;
	display: block;
}

.galeria-avance .foto-avance .sin-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--beraka-fondo);
	color: var(--beraka-teal);
	font-size: 20px;
}

.galeria-avance .foto-avance .pie {
	display: block;
	font-size: 10px;
	padding: 3px 5px;
	background: var(--beraka-noche);
	color: #fff;
}

.galeria-avance .foto-avance .descripcion {
	display: block;
	font-size: 10px;
	padding: 3px 5px;
	color: var(--beraka-texto);
}

/* --- pie ------------------------------------------------------------------ */
.pie-portal {
	background: var(--beraka-noche);
	color: var(--beraka-apagado);
	font-size: 12px;
	padding: 22px 0;
	margin-top: 40px;
}

.pie-portal strong { color: #fff; font-family: 'Play', Arial, sans-serif; }

.leaflet-container { font-family: 'Ubuntu', Arial, sans-serif; }