/* ==================================================================
 * NUTRIFIT · Mètriques — Estils
 * Integrat amb Astra Pro · colors corporatius · font Inter
 * ================================================================== */

:root {
	--nf-verde:      #8BBF3C;  /* verd corporatiu */
	--nf-verde-osc:  #6AA32A;  /* verd fosc (hover) */
	--nf-gris:       #6D6E71;  /* gris corporatiu */
	--nf-gris-clar:  #F5F5F5;  /* fons clar */
	--nf-blanc:      #FFFFFF;
	--nf-text:       #2D2D2D;  /* gris fosc text */
	--nf-roig:       #E0533D;
	--nf-groc:       #E9B949;
	--nf-radius:     12px;
	--nf-shadow:     0 2px 10px rgba(0, 0, 0, 0.07);
	--nf-shadow-h:   0 4px 18px rgba(0, 0, 0, 0.12);
}

/* Contenidor general */
.nf-metriques {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--nf-text);
	max-width: 1180px;
	margin: 0 auto;
}
.nf-metriques * { box-sizing: border-box; }

/* Cards */
.nf-card {
	background: var(--nf-blanc);
	border-radius: var(--nf-radius);
	box-shadow: var(--nf-shadow);
	padding: 22px 24px;
	margin-bottom: 22px;
	border: 1px solid rgba(0, 0, 0, 0.04);
}
.nf-card-title,
.nf-chart-title {
	color: var(--nf-text);
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--nf-verde);
	display: inline-block;
}
.nf-titulo { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; color: var(--nf-text); }
.nf-sub { color: var(--nf-gris); margin: 0; font-size: 0.95rem; }
.nf-help { color: var(--nf-gris); font-size: 0.85rem; font-style: italic; margin: 0 0 14px; }

/* Capçalera del client */
.nf-header-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	border-left: 5px solid var(--nf-verde);
}
.nf-ultima-rev {
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--nf-blanc);
}

/* Semàfor */
.nf-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--nf-blanc);
	white-space: nowrap;
}
.nf-verd  { background: var(--nf-verde); }
.nf-groc  { background: var(--nf-groc); color: #5a4600; }
.nf-roig  { background: var(--nf-roig); }
.nf-verd-bg  { background: var(--nf-verde); color: var(--nf-blanc); }
.nf-groc-bg  { background: var(--nf-groc); color: #5a4600; }
.nf-roig-bg  { background: var(--nf-roig); color: var(--nf-blanc); }
.nf-gris-bg  { background: var(--nf-gris); color: var(--nf-blanc); }

.nf-semaforo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}
.nf-sem-item {
	background: var(--nf-gris-clar);
	border-radius: var(--nf-radius);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.nf-sem-label { font-size: 0.82rem; color: var(--nf-gris); font-weight: 500; }
.nf-sem-val { font-size: 1.3rem; font-weight: 700; color: var(--nf-text); }

/* Alertes */
.nf-alert {
	padding: 14px 18px;
	border-radius: var(--nf-radius);
	margin-bottom: 18px;
	font-weight: 500;
}
.nf-goal { font-size: 1.1rem; }

/* Gràfics */
.nf-charts-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin-top: 12px;
}
.nf-chart-box {
	background: var(--nf-blanc);
	border-radius: var(--nf-radius);
	box-shadow: var(--nf-shadow);
	padding: 18px;
}
.nf-chart { width: 100% !important; max-height: 320px; }

/* Taules responsive amb capçalera verda */
.nf-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	font-size: 0.92rem;
	overflow: hidden;
	border-radius: var(--nf-radius);
}
.nf-table thead th {
	background: var(--nf-verde);
	color: var(--nf-blanc);
	text-align: left;
	padding: 12px 14px;
	font-weight: 600;
}
.nf-table tbody td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--nf-gris-clar);
}
.nf-table tbody tr:nth-child(even) { background: var(--nf-gris-clar); }
.nf-table tbody tr:hover { background: rgba(139, 191, 60, 0.08); }

/* Botons estil Astra */
.nf-btn {
	display: inline-block;
	background: var(--nf-verde);
	color: var(--nf-blanc) !important;
	border: none;
	border-radius: 8px;
	padding: 11px 22px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.1s ease;
	font-family: inherit;
}
.nf-btn:hover { background: var(--nf-verde-osc); transform: translateY(-1px); }
.nf-btn-sec { background: var(--nf-gris); }
.nf-btn-sec:hover { background: #5a5b5e; }
.nf-link { color: var(--nf-verde-osc); font-weight: 600; text-decoration: none; }
.nf-link:hover { text-decoration: underline; }

/* Layout panell professional */
.nf-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 22px;
	align-items: start;
}
.nf-lista { list-style: none; margin: 0; padding: 0; }
.nf-lista li {
	padding: 12px 14px;
	border-radius: 8px;
	margin-bottom: 8px;
	background: var(--nf-gris-clar);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.nf-lista li.nf-activo { outline: 2px solid var(--nf-verde); }
.nf-lista li a { color: var(--nf-text); font-weight: 600; text-decoration: none; }
.nf-ficha-acciones { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.nf-inline-form { margin: 0; }

/* Estadístiques director */
.nf-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}
.nf-stat { text-align: center; padding: 22px 12px; }
.nf-stat-num { display: block; font-size: 2.2rem; font-weight: 700; color: var(--nf-verde); line-height: 1; }
.nf-stat.nf-roig-bg .nf-stat-num { color: var(--nf-blanc); }
.nf-stat-lbl { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--nf-gris); }
.nf-stat.nf-roig-bg .nf-stat-lbl { color: var(--nf-blanc); }

/* Formulari d'entrada */
.nf-form-group-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--nf-verde-osc);
	margin: 22px 0 12px;
}
.nf-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.nf-form label, .nf-form-row label {
	display: flex;
	flex-direction: column;
	font-size: 0.85rem;
	color: var(--nf-gris);
	font-weight: 500;
	gap: 5px;
}
.nf-form input, .nf-form select, .nf-form textarea {
	padding: 9px 11px;
	border: 1px solid #d8d8d8;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--nf-text);
	background: var(--nf-blanc);
}
.nf-form input:focus, .nf-form select:focus, .nf-form textarea:focus {
	outline: none;
	border-color: var(--nf-verde);
	box-shadow: 0 0 0 3px rgba(139, 191, 60, 0.15);
}
.nf-form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.nf-form-marcas { display: flex; flex-direction: column; gap: 10px; }
.nf-marca-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 10px;
	align-items: center;
}
.nf-marca-nom { font-weight: 600; color: var(--nf-text); font-size: 0.9rem; }
.nf-form-notes { margin: 18px 0; }
.nf-form .nf-btn { margin-top: 18px; }

/* Responsive */
@media (max-width: 860px) {
	.nf-layout { grid-template-columns: 1fr; }
	.nf-header-card { flex-direction: column; align-items: flex-start; }
	.nf-marca-row { grid-template-columns: 1fr 1fr; }
	.nf-table { display: block; overflow-x: auto; white-space: nowrap; }
}