/* ================================================================
   Proteína por Alimento — Estilos específicos
   Depende de common.css (variables, .biomap-*)
   ================================================================ */

/* ---------- Fila de agregar alimento ---------- */
#pa-app .pa-add-row label {
	display: block !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: var(--bm-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 0.5rem !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

.pa-add-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: .75rem;
	align-items: end;
}

.pa-add-food {
	min-width: 0;
}

.pa-add-portion {
	width: 120px;
}

.pa-add-btn-wrap {
	display: flex;
	align-items: flex-end;
}

#pa-add-btn {
	white-space: nowrap;
	padding: .6rem 1.2rem;
	font-size: .85rem;
}

/* ---------- Barra de progreso ---------- */
.pa-progress-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: .5rem;
}

.pa-progress-label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bm-muted);
	font-weight: 600;
}

.pa-progress-pct {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--bm-accent);
	text-shadow: var(--bm-glow);
}

.pa-progress-track {
	width: 100%;
	height: 22px;
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: var(--bm-radius);
	overflow: hidden;
	position: relative;
}

.pa-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--bm-accent), #00e07b);
	border-radius: var(--bm-radius);
	transition: width .4s ease;
	box-shadow: 0 0 12px rgba(0, 255, 136, .3);
	max-width: 100%;
}

.pa-progress-fill.pa-overflow {
	background: linear-gradient(90deg, var(--bm-accent), var(--bm-blue));
}

.pa-progress-legend {
	text-align: center;
	font-size: .8rem;
	color: var(--bm-muted);
	margin-top: .4rem;
	margin-bottom: 1.2rem;
}

/* ---------- Stats row ---------- */
.pa-stats {
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 1.2rem;
}

/* ---------- Tabla ---------- */
.pa-table-wrap {
	overflow-x: auto;
}

.pa-table th:last-child,
.pa-table td:last-child {
	width: 50px;
	text-align: center;
}

#pa-app .pa-remove-btn {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: rgba(230, 51, 86, .15) !important;
	color: var(--bm-warn) !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	transition: background .2s, transform .2s !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
}

#pa-app .pa-remove-btn:hover {
	background: rgba(230, 51, 86, .35) !important;
	transform: scale(1.1) !important;
}

#pa-app .pa-clear-btn {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	font-family: var(--bm-font) !important;
	font-size: .72rem !important;
	font-weight: 600 !important;
	color: var(--bm-warn) !important;
	padding: .3rem .6rem !important;
	border-radius: var(--bm-radius) !important;
	border: 1px solid rgba(230, 51, 86, .3) !important;
	transition: background .2s !important;
	white-space: nowrap !important;
	background: transparent !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
	margin: 0 !important;
}

#pa-app .pa-clear-btn:hover {
	background: rgba(230, 51, 86, .15) !important;
}

/* ---------- Atribución ---------- */
.pa-attrib {
	text-align: center;
	font-size: .72rem;
	color: var(--bm-muted);
	margin-top: .8rem;
}

.pa-attrib a {
	color: var(--bm-accent);
	text-decoration: none;
}

.pa-attrib a:hover {
	text-decoration: underline;
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 600px) {
	.pa-add-row {
		grid-template-columns: 1fr;
	}

	.pa-add-portion {
		width: 100%;
	}

	.pa-stats {
		grid-template-columns: 1fr;
	}
}