@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&family=Rubik:wght@400;500;600;700&display=swap');

*, *::before, *::after {
	box-sizing:border-box;
	margin:0px;
	padding:0px;
}

:root {
	--sidebar-w: 250px;
	--sidebar-w-collapsed: 64px;
	--topbar-h: 70px;
	--bg: #1A1D21;
	--surface: #23282C;
	--surface2: #1e2333;
	--border: #242c36;
	--accent: #0c768a;
	--accent2: #7c5cfc;
	--text: #e2e6f0;
	--text-muted: rgba(255,255,255,.8);
	--text-dim: rgba(255,255,255,.8);
	--sidebar-bg: #720a9f;
	/* Marca (viola): tinta piena, velo di sfondo, bordo, hover, testo leggibile su scuro */
	--brand: #720a9f;
	--brand-soft: rgba(114,10,159,.16);
	--brand-line: rgba(114,10,159,.55);
	--brand-text: rgb(192,145,212);
	--transition: 0.22s cubic-bezier(.4,0,.2,1);
	--radius: 0.25rem;
	--footer-h: 56px;
	--bs-gray-200: #eff5f6;
	--bs-gray-300: #f2f6f7;
	--bs-border-color: #242c36;
	--bs-light: #2a333f;
	--bs-secondary-color:#8b929a;
	--bs-table-border-color: #242c36;
}

html, body, header, footer, table, tr, th, td, form, input, textarea, select, img, ul, ol, li, p, hgroup, h1, h2, h3, h4, h5, h6, figure, figcaption, legend, nav, article, aside, abbr, iframe, a, fieldset {
	border:0px;
	margin:0px;
	padding:0px;
	list-style:none;
	font-family:Rubik, sans-serif;
	font-size:15px;
	line-height:normal;
	color:var(--text);
	border-spacing:0px;
	border-collapse:collapse;
	text-align:left;
}

html, body {
	height:100%;
	background:var(--bg);
	font-size:14px;
}

html {
	box-sizing:border-box;
}

body {
	min-height:100%;
	position:relative;
}

ol li {
	list-style:decimal;
}

a {
	text-decoration:none;
}

input[type=text], input[type=tel], input[type=email], input[type=number], input[type=decimal], input[type=password], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
	padding:10px 15px;
	border:1px solid #2a2f34;
	color:#ffffff;
	background:#262A2F;
	border-radius:3px;
	apparance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
}

select {
	padding-right:32px;
}

input[type=number], input[type=decimal] {
	width:100px;
}

input:focus, select:focus, textarea:focus {
	outline:0px none transparent;
	border:1px solid rgba(255,255,255,0.3)
}

input[type=checkbox]{
	width:20px;
	height:20px;
	border:1px solid rgba(255,255,255,0.3);
	border-radius:3px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer;
}

input:checked[type=checkbox]{
	background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

input[type=submit], input[type=button], a.button, button {
	padding:8px 30px;
	color:#ffffff;
	font-size:16px;
	text-shadow:1px 1px rgba(0,0,0,0.4);
	border-radius:3px;
	cursor:pointer;
	transition:all 300ms;
}

input[type=submit]:hover, input[type=button]:hover, a.button:hover, button:hover {
	opacity:0.7;
	text-decoration:none;
}

select {
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ced4da' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-position:right .9rem center;
	background-repeat:no-repeat;
	background-size:16px 12px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

select optgroup, select option {
	border:0px;
	background:rgba(0,0,0,0.4);	
	color:#ffffff;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

select:focus option:focus {
	background:#00ff00;
}

select[multiple] {
	width:200px;
	height:200px;
	padding:0px;
	background-image:none;
	background-color:#262A2F;
}

select[multiple] optgroup, select[multiple] option {
	background-color:#262A2F;
}

select[multiple] option:checked {
	background:rgba(0,0,0,0.2) linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%);
}

select[multiple]:focus option:checked {
	background:var(--main-color) linear-gradient(0deg, var(--main-color) 0%, var(--main-color) 100%);
}

hr {
	width:100%;
	height:1px;
	padding:0px;
	margin:0px;
	display:block;
	border:0px;
	border-top:1px solid rgba(255,255,255,0.15);
}

.clear {
	display:block;
	clear:both;
	line-height:1px;
	font-size:1px;
	height:1px;
}

.hide, .hidden {
	display:none !important;
}

#overlay {
	display: none;
	position: fixed; inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 90;
	backdrop-filter: blur(2px);
}

#overlay.active {
	display: block;
}

#sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sidebar-w);
	background: var(--sidebar-bg);
	display: flex;
	flex-direction: column;
	transition: width var(--transition), transform var(--transition);
	z-index: 100;
	overflow: hidden;
}

#sidebar.collapsed {
	width: var(--sidebar-w-collapsed);
}

.sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	height: var(--topbar-h);
	flex-shrink: 0;
	white-space: nowrap;
	overflow: hidden;
}

.brand-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.brand-icon img {
	max-width: 32px;
	max-height: 32px; 
}

.brand-name {
	font-size: 15px; font-weight: 600;
	color:#ffffff;
	transition: opacity var(--transition);
}

#sidebar.collapsed .brand-name {
	opacity: 0;
	pointer-events: none;
}

.workspace-switcher {
	position: relative;
	margin: 4px 12px 8px;
	flex-shrink: 0;
}

.workspace-selected {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255,255,255,.08);
	cursor: pointer;
	transition: background var(--transition);
	overflow: hidden;
}

.workspace-selected:hover {
	background: rgba(255,255,255,.14);
}

.workspace-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background:var(--bg);
}

.workspace-info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	transition: opacity var(--transition);
}

.workspace-name {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.workspace-team {
	font-size: 11px;
	color: rgba(255,255,255,.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.workspace-arrow {
	flex-shrink: 0;
	color: rgba(255,255,255,.6);
	transition: transform var(--transition), opacity var(--transition);
	display: flex;
	align-items: center;
}

.workspace-switcher.open .workspace-arrow {
	transform: rotate(180deg);
}

#sidebar.collapsed .workspace-switcher {
	display: none;
}

.workspace-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background:var(--surface);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
	z-index: 150;
}

.workspace-switcher.open .workspace-dropdown {
	display: block;
}

.workspace-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
	transition: background var(--transition);
	text-decoration: none;
	color: inherit;
}

.workspace-option:hover {
	background: rgba(255,255,255,.08);
}

.ws-avatar-sm {
	width: 32px;
	height: 32px;
	font-size: 13px;
}

.workspace-more {
	text-align: center;
	padding: 10px;
	font-size: 12px;
	color: rgba(255,255,255,.5);
	cursor: pointer;
	transition: color var(--transition);
}

.workspace-more:hover {
	color: #fff;
}

/* --- Scrollbar "nascosta finché non si usa" (hover-reveal) --- */
/* Larghezza sottile FISSA: lo spazio è sempre riservato, quindi niente
   sobbalzi di layout quando il pollice appare/scompare.
   Pollice trasparente di default -> invisibile; visibile solo all'hover.
   Necessario da Firefox 153, che ha disattivato le overlay-scrollbar auto-nascoste. */
.sidebar-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px 0;
	scrollbar-width: thin;                         /* Firefox */
	scrollbar-color: transparent transparent;      /* Firefox: pollice, traccia */
	transition: scrollbar-color var(--transition);
}

.sidebar-nav:hover {
	scrollbar-color: rgba(255,255,255,.28) transparent;   /* pollice visibile all'hover */
}

/* WebKit/Chromium: stesso comportamento */
.sidebar-nav::-webkit-scrollbar {
	width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
	transition: background var(--transition);
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,.28);
}

/* --- Variante "collassata": niente scrollbar -> niente gutter --- */
/* scrollbar-width:thin riserva SEMPRE un po' di spazio (gutter): su una
   sidebar stretta (solo icone) sposta il contenuto. Qui la si rimuove del
   tutto così il contenuto resta centrato (si scrolla comunque con la rotella). */
#sidebar.collapsed .sidebar-nav {
	scrollbar-width: none;                         /* Firefox */
}

#sidebar.collapsed .sidebar-nav::-webkit-scrollbar {
	width: 0;                                       /* WebKit */
}

.nav-section-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	color: #ffffff;
	text-transform: uppercase;
	padding: 14px 20px 6px;
	white-space: nowrap;
	overflow: hidden;
	opacity:0.5;
	transition: opacity var(--transition);
}

#sidebar.collapsed .nav-section-label {
	opacity: 0;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 6px; 
	margin: 1px 1rem;
	border-radius: 4px;
	color: var(--text-muted);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.nav-item:hover {
	background: var(--surface);
	color: var(--text);
}

.nav-item.active {
	background: rgba(255,255,255,.15);
	color: var(--text);
	box-shadow:0 2px 6px 0 rgba(var(--bs-gray-300),.5);
}

.nav-item i {
	font-size: 17px;
	opacity:0.6;
}

.nav-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}

.nav-label {
	font-size: 13.5px;
	font-weight: 500;
	transition: opacity var(--transition);
}

#sidebar.collapsed .nav-label {
	opacity: 0;
}

.nav-group {
	position: relative;
}

.nav-has-sub {
	cursor: pointer;
	user-select: none;
}

.nav-sub-arrow {
	margin-left: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: rgba(255,255,255,.4);
	transition: transform var(--transition), opacity var(--transition);
}

.nav-group.open > .nav-has-sub .nav-sub-arrow {
	transform: rotate(180deg);
}

#sidebar.collapsed .nav-sub-arrow {
	opacity: 0;
}

.nav-submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.nav-group.open > .nav-submenu {
	max-height: 2000px;
}

.nav-sub-item {
	display: block;
	padding: 7px 12px 7px 40px;
	font-size: 14px;
	color: rgba(255,255,255,.7);
	text-decoration: none;
	border-radius: 4px;
	margin: 1px 1rem;
	transition: background var(--transition), color var(--transition);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-sub-item:hover {
	background: rgba(255,255,255,.08);
	color: #fff;
}

.nav-sub-item.active {
	background: rgba(255,255,255,.12);
	color: #fff;
	font-weight: 500;
}

#sidebar.collapsed .nav-submenu {
	max-height: 0 !important;
}

#sidebar.collapsed .nav-item[data-tooltip]:hover::after {
	content: attr(data-tooltip);
	position: absolute; left: calc(var(--sidebar-w-collapsed) + 6px); top: 50%;
	transform: translateY(-50%);
	background: var(--surface2); color: var(--text);
	padding: 5px 10px; border-radius: 6px;
	font-size: 12px; white-space: nowrap;
	border: 1px solid var(--border);
	pointer-events: none; z-index: 200;
}

.sidebar-toggle-btn {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: color var(--transition), opacity var(--transition);
	font-size:26px;
	color:#ffffff;
}

.sidebar-toggle-btn:hover {
	color: #fff;
}

#sidebar.collapsed .sidebar-toggle-btn {
	display: none;
}

.sidebar-open-btn {
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: color var(--transition);
	font-size:26px;
	color:#ffffff;
}

.sidebar-open-btn:hover {
	color: var(--text);
}

.sidebar-open-btn .toggle-arrow {
	border-color: var(--border);
	background: var(--surface2);
}

#sidebar.collapsed ~ #topbar .sidebar-open-btn {
	display: flex;
}

.sidebar-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 0;
	cursor: pointer;
	transition: background var(--transition);
	box-shadow:0px -1px 3px rgba(0,0,0,0.1);
}

.sidebar-user:hover {
	background: var(--surface2);
}

.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.user-info {
	overflow: hidden;
	transition: opacity var(--transition);
}

.user-name {
	font-size: 13px;
	font-weight: 600;
}

.user-role {
	font-size: 11px;
	color: var(--text-muted);
}

#sidebar.collapsed .user-info {
	opacity: 0;
}

#topbar {
	position: fixed; top: 0; right: 0;
	height: var(--topbar-h);
	left: var(--sidebar-w);
	display: flex; align-items: center; gap: 16px;
	padding: 0 25px;
	z-index: 80;
	transition: left var(--transition);
	background:var(--bg);
}

#sidebar.collapsed ~ #topbar {
	left: var(--sidebar-w-collapsed);
}

.topbar-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
}

#hamburger {
	display: none;
	background: none; border: none; cursor: pointer;
	padding: 4px; color: var(--text); flex-shrink: 0;
}

.ham-bar {
	display: block; width: 20px; height: 2px;
	background: currentColor; border-radius: 2px;
	transition: transform .3s, opacity .3s;
	margin: 4px 0;
}

#hamburger.open .ham-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

#hamburger.open .ham-bar:nth-child(2) {
	opacity: 0;
}

#hamburger.open .ham-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.topbar-actions {
	margin-left: auto; display: flex; align-items: center; gap: 10px;
}

.topbar-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--surface);
	border-radius:25px;
	padding: 0px 14px;
	color: var(--text-muted);
	width: 200px;
	transition: width var(--transition), border-color var(--transition);
}

.topbar-search:focus-within {
	width: 280px;
	border-color: var(--accent);
}

.topbar-search svg {
	flex-shrink: 0;
	opacity: .5;
}

.topbar-search input {
	background: none;
	border: none;
	outline: none;
	color: var(--text);
	font-size: 13px;
	width: 100%;
	font-family: Rubik, sans-serif;
}

.topbar-search input::placeholder {
	color: var(--text-muted);
}

.tb-btn {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-muted);
	font-size: 16px;
	transition: color var(--transition), background var(--transition), border-color var(--transition);
	position: relative;
}

.tb-btn:hover {
	color: var(--text);
	background: var(--surface);
	border-color: var(--border);
}

.tb-btn .dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f7554f;
	border: 1.5px solid var(--bg);
}

.tb-flag {
	font-size: 20px;
	line-height: 1;
}

/* ─── Dropdown della topbar (ingranaggio, future voci, ecc) ─── */
.tb-dropdown {
	position: relative;
}

.tb-dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 180px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(0,0,0,.45);
	z-index: 150;
	padding: 4px 0;
}

.tb-dropdown.open .tb-dropdown-menu {
	display: block;
	animation: tbDropdownFadeIn 160ms ease-out;
}

@keyframes tbDropdownFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tb-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
	text-decoration: none;
	color: var(--text);
	font-size: 13.5px;
	white-space: nowrap;
}

.tb-dropdown-item:hover {
	background: rgba(255,255,255,.06);
}

.tb-dropdown-item svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.tb-dropdown-item .tb-dropdown-flag {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
	width: 20px;
	text-align: center;
}

.tb-dropdown-item.active {
	background: rgba(255,255,255,.04);
	font-weight: 500;
}

.tb-dropdown-item.active:hover {
	background: rgba(255,255,255,.1);
}

.tb-dropdown-item.danger {
	color: #f7554f;
}

.tb-dropdown-item.danger:hover {
	background: rgba(247,85,79,.08);
	color: #ff6e69;
}

.tb-dropdown-divider {
	height: 1px;
	background: rgba(255,255,255,.08);
	margin: 4px 0;
}

#main {
	margin-left: var(--sidebar-w);
	padding-top: var(--topbar-h);
	min-height: calc(100vh - var(--footer-h));
	transition: margin-left var(--transition);
}

#main .page {
	width:100%;
	padding:0 25px 28px 25px;
	display:none;
}

#main .page.visible {
	display:block;
}

#sidebar.collapsed ~ #main {
	margin-left: var(--sidebar-w-collapsed);
}

.row {
	display:grid;
	gap:20px;
	margin-bottom:20px;
}

.row.noMargin {
	margin-bottom:0px;
}

.row.boxes2 {
	grid-template-columns:1fr 1fr;
}

.row.boxes3 {
	grid-template-columns:repeat(3, 1fr);
}

.row.boxes4 {
	grid-template-columns:repeat(4, 1fr);
}

.row.boxes3-1 {
	grid-template-columns:calc(75% - 5px) calc(25% - 15px);
}

.row .box {
	display:flex;
	flex-direction:column;
	background:var(--surface);
	border-radius:0px;
}

.row .box.card {
	border-radius: 0.25rem;
	padding: 18px 20px;
	position:relative;
	transition: border-color var(--transition), transform var(--transition);
}

.row .box.card:hover {
	border-color: rgba(255,255,255,.12);
	transform: translateY(+2px);
}

.row .box .head {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 20px;
}

.row .box.card .head {
	padding:0px;
	margin-bottom:5px;
}

.row .box .head span {
	font-size:16px;
	font-weight:500;
	color:var(--text);
}

.row .box.card .head span {
	font-size:15px;
	font-weight:400;
	color:var(--bs-secondary-color);
}

/* Pulsante d'azione d'angolo di una card: OPT-IN con .card-action.
   (Prima era `.row .box.card button` e catturava OGNI button dentro una card,
   spostando in alto a destra anche i submit dei form e i cestini delle tabelle.) */
.row .box.card button.card-action {
	position:absolute;
	top:16px;
	right:16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	padding: 2px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition), background var(--transition);
}

.row .box.card .head button:hover {
	color: var(--text);
	background: rgba(255,255,255,.08);
}

.row .box table.classic {
	width:100%;
}

.row .box table.classic th, .row .box table.classic td {
	padding:10px;
}

#footer {
	position:static;
	top:auto;
	left:auto;
	bottom:auto;
	right:auto;
	height:var(--footer-h);
	margin-left: var(--sidebar-w);
	padding: 0 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
	color: #919bae;
	transition: margin-left var(--transition);
	background:var(--surface);
}

#sidebar.collapsed ~ #footer {
	margin-left: var(--sidebar-w-collapsed);
}

#pageLoading {
	width:100%;
	height:100%;
	display:table;
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(0,0,0,0.8);
	z-index:9999999;
	overflow:hidden;
}

#pageLoading p {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

#pageLoading i {
	color:#ffffff;
	font-size:40px;
}

.resultMessage {
	margin:15px 0 0 0;
	display:none;
	position:relative;
	background:#4a4;
	border-top:5px solid #4a4;
	color:#ffffff;
}

.resultMessage.visible {
	display:block;
}

.resultMessage.error {
	background:#ffa200;
	border-top:3px solid #c98206;
}

.resultMessage.info {
	background:#74bce0;
	border-top:3px solid #4c94b8;
}

.resultMessage div {
	padding:15px 20px 10px 0px !important;
	font-weight:500 !important;
	font-size:16px !important;
	color:#ffffff;
}

.resultMessage div .link, .resultMessage div a {
	text-decoration:underline;
	cursor:pointer;
	color:#ffffff;
}

.resultMessage div .link:hover, .resultMessage div a:hover {
	text-decoration:none;
}

.resultMessage div i {
	position:absolute !important;
	top:12px !important;
	left:18px !important;
	font-size:20px !important;
	color:#ffffff;
}

.resultMessage div ul li {
	padding:0 0 5px 50px;
	font-size:16px;
	list-style:none;
	color:#ffffff;
	font-weight:300;
}

/*
═══════════════════════════════════════════════
	SPLASH (index.php)
═══════════════════════════════════════════════
*/

body.auth-page {
	min-height:100vh;
}

/*
═══════════════════════════════════════════════
	AUTH — schermata split (logo | form), responsive
═══════════════════════════════════════════════
*/
.auth-split {
	display:flex;
	min-height:100vh;
	width:100%;
}

/* ─── Lato logo ─── */
.auth-brand-side {
	flex:1 1 50%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:48px;
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(ellipse at 25% 20%, rgba(197,123,255,0.30), transparent 55%),
		radial-gradient(ellipse at 80% 85%, rgba(58,103,150,0.28), transparent 55%),
		linear-gradient(140deg, #720a9f 0%, #4a0a6b 45%, #2a0740 100%);
}

.auth-brand-side::after {
	content:"";
	position:absolute;
	inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
	background-size:46px 46px;
	mask-image:radial-gradient(ellipse at center, #000 25%, transparent 72%);
	-webkit-mask-image:radial-gradient(ellipse at center, #000 25%, transparent 72%);
	pointer-events:none;
}

.auth-brand-box {
	position:relative;
	z-index:1;
	text-align:center;
	max-width:440px;
	animation:authBrandIn 700ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes authBrandIn {
	from { opacity:0; transform:translateY(14px); }
	to { opacity:1; transform:translateY(0); }
}

.auth-brand-logo {
	display:block;
	width:120px;
	height:120px;
	object-fit:cover;
	margin:0 auto 26px;
	border-radius:23%; /* squircle stile icona app iOS (≈22-23% del lato) */
	box-shadow:0 14px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
	animation:authBrandFloat 5s ease-in-out infinite;
}

@keyframes authBrandFloat {
	0%, 100% { transform:translateY(0); }
	50% { transform:translateY(-8px); }
}

.auth-brand-title {
	font-family:Rubik, sans-serif;
	font-size:46px;
	font-weight:700;
	letter-spacing:-0.02em;
	color:#fff;
	line-height:1.05;
}

.auth-brand-title span { color:rgba(255,255,255,0.55); }

.auth-brand-tagline {
	margin:16px auto 0;
	max-width:400px;
	font-size:16px;
	line-height:1.6;
	color:rgba(255,255,255,0.78);
}

/* ─── Lato form ─── */
.auth-form-side {
	flex:1 1 50%;
	display:flex;
	overflow-y:auto;
	max-height:100vh;
	padding:48px 40px;
	background:var(--bg);
}

.auth-form-box {
	width:100%;
	max-width:400px;
	margin:auto; /* centra se ci sta, altrimenti scrolla dall'alto senza tagliare il contenuto */
}

/* Mobile: colonna — logo in alto, form sotto */
@media (max-width:820px) {
	.auth-split { flex-direction:column; min-height:100vh; }
	.auth-brand-side { flex:0 0 auto; padding:32px 24px 28px; }
	.auth-brand-logo { width:72px; height:72px; margin-bottom:12px; }
	.auth-brand-title { font-size:27px; }
	.auth-brand-tagline { display:none; }
	.auth-form-side { flex:1 1 auto; max-height:none; overflow-y:visible; padding:26px 20px 44px; }
	.auth-form-box { margin:0 auto; }
}

.auth-head {
	text-align:left;
	margin-bottom:22px;
}

.auth-title {
	font-size:27px;
	font-weight:700;
	letter-spacing:-0.01em;
	color:#fff;
	margin-bottom:5px;
}

.auth-subtitle {
	font-size:14px;
	color:rgba(255,255,255,0.6);
	line-height:1.5;
}

.auth-tabs {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:4px;
	padding:4px;
	background:rgba(0,0,0,0.25);
	border-radius:10px;
	margin-bottom:22px;
}

button.auth-tab {
	font-family:Rubik, sans-serif;
	font-size:13.5px;
	font-weight:500;
	padding:10px 14px;
	background:transparent;
	border:0;
	color:rgba(255,255,255,0.6);
	text-shadow:none;
	border-radius:7px;
	cursor:pointer;
	transition:background 200ms, color 200ms;
}

button.auth-tab.active {
	background:var(--surface2);
	color:#fff;
	box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

button.auth-tab:hover:not(.active) {
	color:#fff;
	opacity:1;
}

.auth-form .form-group {
	margin-bottom:14px;
}

.auth-form .form-group label {
	display:block;
	font-size:11px;
	font-weight:500;
	color:rgba(255,255,255,0.55);
	margin-bottom:6px;
	text-transform:uppercase;
	letter-spacing:0.06em;
}

.auth-form .field-optional {
	text-transform:none;
	letter-spacing:0;
	font-weight:400;
	color:rgba(255,255,255,0.35);
}

/* Campi in errore (il JS aggiunge .error agli input non validi): bordo rosso evidente */
.auth-form input.error,
.auth-form select.error {
	border-color:#e0553f;
	box-shadow:0 0 0 3px rgba(224,85,63,0.18);
}

.auth-form input.error:focus,
.auth-form select.error:focus {
	border-color:#e0553f;
	box-shadow:0 0 0 3px rgba(224,85,63,0.28);
}

/* ─── Transizioni smooth tra i form (login ↔ registrazione, reset, ecc.) ─── */
.auth-form {
	transition:opacity 260ms ease, transform 260ms ease;
}

.auth-form.fade-out {
	opacity:0;
	transform:translateY(10px);
	pointer-events:none;
}

.auth-form.fade-in-start {
	opacity:0;
	transform:translateY(-10px);
}

/* Uscita smooth dell'intero blocco form (dopo il login, prima del redirect) */
.auth-form-box {
	transition:opacity 380ms ease, transform 380ms ease;
}

.auth-form-box.leaving {
	opacity:0;
	transform:translateY(-12px) scale(0.985);
	pointer-events:none;
}

/* Blocco "Sei un professionista?": NON è un .form-group, così le .form-check al suo interno
   NON vengono toccate da `.form-group label` (che imporrebbe display:block/uppercase/bold) e
   restano IDENTICHE alle checkbox di termini/privacy. La domanda usa .prof-label (= stile label). */
.auth-form .prof-group {
	margin-bottom:14px;
}

.auth-form .prof-label {
	display:block;
	font-size:11px;
	font-weight:500;
	color:rgba(255,255,255,0.55);
	margin-bottom:6px;
	text-transform:uppercase;
	letter-spacing:0.06em;
}

.auth-form input[type=text],
.auth-form input[type=email],
.auth-form input[type=tel],
.auth-form input[type=password],
.auth-form select {
	width:100%;
	padding:11px 14px;
	font-size:14px;
}

.auth-form .form-hint {
	font-size:11.5px;
	color:rgba(255,255,255,0.45);
	margin-top:6px;
	line-height:1.4;
}

.auth-form .form-row.two-col {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin:0 0 0 0;
	align-items:stretch;
}

.auth-form .form-row.two-col .form-group {
	margin-bottom:14px;
}

/* Phone input con prefisso "+39" */
.auth-form .phone-input {
	display:flex;
	gap:8px;
	align-items:stretch;
}

.auth-form .phone-input .phone-prefix {
	width:auto;
	flex:0 0 auto;
	padding:11px 10px;
	background:rgba(0,0,0,0.25);
	border:1px solid #2a2f34;
	color:rgba(255,255,255,0.8);
	font-size:14px;
	font-weight:500;
	cursor:not-allowed;
	opacity:0.9;
	background-image:none;
	padding-right:10px;
}

.auth-form .phone-input input[type=tel] {
	flex:1 1 auto;
	letter-spacing:0.02em;
}

/* Step verifica OTP */
.auth-form .verify-head {
	margin-bottom:16px;
}

.auth-form .verify-back {
	font-family:Rubik, sans-serif;
	font-size:12px;
	padding:4px 0;
	background:transparent;
	border:0;
	color:rgba(255,255,255,0.55);
	text-shadow:none;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	gap:4px;
	transition:color 200ms;
	margin-bottom:8px;
}

.auth-form .verify-back:hover {
	color:#fff;
	opacity:1;
}

.auth-form .verify-back i {
	font-size:11px;
}

.auth-form .verify-sent-to {
	font-size:13px;
	color:rgba(255,255,255,0.7);
	line-height:1.5;
}

.auth-form .verify-sent-to strong {
	color:#fff;
	font-weight:600;
}

.auth-form .otp-input {
	font-family:'DM Mono', monospace;
	font-size:24px !important;
	font-weight:500;
	text-align:center;
	letter-spacing:0.45em;
	padding:14px !important;
}

.auth-form .verify-resend-row {
	justify-content:center;
	font-size:13px;
	margin-top:14px;
}

.auth-form .verify-resend-text {
	color:rgba(255,255,255,0.55);
}

.auth-form .verify-resend-btn {
	font-family:Rubik, sans-serif;
	font-size:13px;
	padding:0;
	background:transparent;
	border:0;
	color:#b58dff;
	text-shadow:none;
	cursor:pointer;
}

.auth-form .verify-resend-btn:disabled {
	color:rgba(255,255,255,0.35);
	cursor:not-allowed;
}

.auth-form .verify-resend-btn:not(:disabled):hover {
	opacity:0.75;
	text-decoration:underline;
}

.auth-form .form-row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin:4px 0 18px;
	flex-wrap:wrap;
}

.auth-form .form-check {
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:rgba(255,255,255,0.7);
	cursor:pointer;
	font-size:13px;
	line-height:1.4;
}

.auth-form .form-check input[type=checkbox] {
	width:16px;
	height:16px;
}

.auth-form .form-check-full {
	display:flex;
	align-items:flex-start;
	margin:4px 0 18px;
}

.auth-form .form-check-full span {
	font-size:12.5px;
}

.auth-form .form-link {
	color:#b58dff;
	font-size:13px;
	transition:opacity 200ms;
}

.auth-form .form-link:hover {
	opacity:0.75;
	text-decoration:underline;
}

.auth-form button.auth-submit {
	width:100%;
	font-family:Rubik, sans-serif;
	font-size:15px;
	font-weight:600;
	padding:13px 20px;
	background:linear-gradient(135deg, #720a9f 0%, #3a6796 100%);
	color:#fff;
	border:0;
	border-radius:8px;
	cursor:pointer;
	text-shadow:none;
	transition:opacity 200ms, transform 120ms, box-shadow 200ms;
	margin-top:4px;
	box-shadow:0 8px 22px rgba(114,10,159,0.3);
}

.auth-form button.auth-submit:hover {
	opacity:0.94;
	box-shadow:0 10px 26px rgba(58,103,150,0.4);
}

.auth-form button.auth-submit:active {
	transform:scale(0.985);
}

.auth-form .resultMessage {
	margin-top:14px;
	border-radius:6px;
	overflow:hidden;
}
/* ═══════════════════════════════════════════════
   UTILITY DI CONTENUTO CONDIVISE (form, tabelle, bottoni) — usate dai partial
   Prefisso .m-  (generico). Vivono qui così ogni pagina le riusa.
   ═══════════════════════════════════════════════ */
.m-note{color:var(--text-muted);font-size:13px;margin-bottom:18px;}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.at-followas{grid-column:1/-1;margin-top:2px;}
.at-followas-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:6px;}
.at-followas .at-check{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--text);font-size:14px;cursor:pointer;}
.at-followas .at-check input{width:18px;height:18px;flex:0 0 auto;}
.at-inactive{color:#e0a200;font-size:12px;font-weight:500;white-space:nowrap;}
.m-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:5px;}
.m-field input, .m-field select, .m-field textarea{width:100%;padding:9px 11px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;font-family:inherit;}
.m-field input:focus, .m-field select:focus, .m-field textarea:focus{outline:none;border-color:var(--accent);}
.m-field textarea{min-height:96px;resize:vertical;line-height:1.5;}
.m-collapse-h{cursor:pointer;user-select:none;color:var(--text-muted);font-size:12px;margin:16px 0 10px;text-transform:uppercase;letter-spacing:.04em;}
.m-collapse-h i{font-size:10px;}
.m-collapse-b{display:none;}
.m-collapse-b.open{display:block;}
.m-actions{margin-top:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.m-btn{background:var(--accent);color:#fff;border:1px solid transparent;padding:10px 20px;border-radius:var(--radius);cursor:pointer;font-size:14px;font-family:inherit;line-height:1.2;text-shadow:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;}
.m-btn:hover{opacity:1;filter:brightness(1.15);}
.m-btn i{font-size:13px;}
.m-btn.primary{background:var(--brand);}
.m-btn.ghost{background:transparent;border-color:var(--border);color:var(--text-muted);}
.m-btn.ghost:hover{filter:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:var(--text);}
.m-btn.sm{padding:7px 13px;font-size:13px;}
.m-btn.danger{background:transparent;border-color:rgba(192,86,79,.5);color:#c0564f;}
.m-btn.danger:hover{filter:none;background:rgba(192,86,79,.12);color:#e2606a;}
/* Disabilitato (es. scheda in sola lettura): deve VEDERSI che non si può premere */
.m-btn[disabled]{opacity:.35;cursor:default;}
.m-btn[disabled]:hover{filter:none;background:var(--accent);}
.m-btn.ghost[disabled]:hover,.m-btn.danger[disabled]:hover{background:transparent;}
.m-btn.primary[disabled]:hover{background:var(--brand);}
.m-chart-wrap{height:300px;}
.m-table-wrap{overflow-x:auto;}
table.m-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap;}
table.m-table th{text-align:left;color:var(--text-muted);font-weight:500;font-size:11px;text-transform:uppercase;border-bottom:1px solid var(--border);padding:9px 10px;}
table.m-table td{padding:9px 10px;border-bottom:1px solid var(--border);}
table.m-table td.num,table.m-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
table.m-table td.actions{text-align:right;white-space:nowrap;}
.m-del{color:#c0564f;cursor:pointer;background:none;border:none;font-size:14px;padding:2px 6px;text-shadow:none;}
.m-empty{color:var(--text-muted);font-size:13px;padding:22px 0;text-align:center;}
.m-msg{font-size:13px;color:var(--text-muted);}
.m-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none;}
.m-person{display:flex;align-items:center;gap:10px;}
.m-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;background:rgba(255,255,255,.08);color:var(--text-muted);}

/* Intestazione di sezione: titolo + testo introduttivo a sinistra, azioni a destra. */
.m-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.m-head h2{margin:0 0 5px;font-size:19px;font-weight:600;color:var(--text);}
.m-head .m-note{margin:0;max-width:640px;}
.m-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;}

/* Bottone di sola icona (riordino, elimina): è un TASTO vero, con sfondo e bordo propri —
   un'icona nuda su fondo scuro non si legge come cliccabile. La variante .danger è rossa
   sempre, non solo all'hover. */
.m-ic{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;padding:6px 8px;line-height:1;text-shadow:none;transition:background var(--transition),color var(--transition),border-color var(--transition);}
.m-ic:hover{opacity:1;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.22);color:var(--text);}
.m-ic.danger{background:rgba(192,86,79,.16);border-color:rgba(192,86,79,.34);color:#e2606a;}
.m-ic.danger:hover{background:rgba(192,86,79,.3);border-color:rgba(192,86,79,.55);color:#f5949b;}
.m-ic i{font-size:14px;}
.m-ic i:before{margin:0;width:auto;}
.m-ic[disabled]{opacity:.3;cursor:default;}
.m-ic[disabled]:hover{background:rgba(255,255,255,.07);border-color:var(--border);color:var(--text-muted);}

/* Allenamento svolto (workout.php): intestazione e provenienza. La tabella riusa .tc-
   L'intestazione è un BLOCCO, non tre righe di testo in fila: data per esteso a
   sinistra con le pastiglie di stato e provenienza, i tre numeri della seduta a destra. */
.wo-hd{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;
	padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.wo-hd-main{min-width:0;}
.wo-hd h2{margin:0 0 8px;font-size:22px;font-weight:600;color:var(--text);line-height:1.2;}
/* Il giorno della settimana arriva da toLocaleDateString: minuscolo, e la maiuscola
   la mette il CSS solo sull'iniziale (text-transform:capitalize darebbe "Martedì 28 Luglio"). */
.wo-hd h2::first-letter{text-transform:uppercase;}
.wo-hd-tags{display:flex;flex-wrap:wrap;gap:8px;}
.wo-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
	font-size:12px;font-weight:600;letter-spacing:.02em;border:1px solid var(--border);color:var(--text-muted);}
.wo-pill.done{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text);}
.wo-pill.planned{background:transparent;}
.wo-pill.src{background:var(--bg);color:var(--text);font-weight:500;}
.wo-pill.src.free{color:var(--text-muted);font-style:italic;}
.wo-hd-stats{display:flex;gap:28px;flex-wrap:wrap;}
.wo-hd-stats div{display:flex;flex-direction:column;gap:2px;}
.wo-hd-stats b{font-size:22px;font-weight:600;color:var(--brand-text);line-height:1.1;}
.wo-hd-stats span{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
@media (max-width:600px){
	.wo-hd{gap:14px;}
	.wo-hd h2{font-size:19px;}
	.wo-hd-stats{gap:20px;}
	.wo-hd-stats b{font-size:18px;}
}
.wo-note-ro{padding:10px 12px;border:1px solid var(--border);border-left:3px solid var(--brand-line);border-radius:var(--radius);background:var(--bg);font-size:13.5px;line-height:1.55;color:var(--text-muted);white-space:pre-line;}
/* Stato vuoto della seduta. ⚠️ Con zero esercizi la tabella NON si disegna: le sole
   intestazioni (ESERCIZIO … SERIE … VOLUME) distese su una card a tutta larghezza si
   leggono come parole sparse senza impaginazione — difetto reale, segnalato dal
   proprietario. Al posto del thead fantasma, una cornice tratteggiata centrata. */
.wo-empty{margin-top:4px;padding:38px 22px;border:1px dashed var(--border);border-radius:var(--radius);
	text-align:center;color:var(--text-muted);}
.wo-empty i{display:block;font-size:26px;margin-bottom:10px;color:var(--brand-text);opacity:.85;}
.wo-empty i:before{margin:0;width:auto;}
.wo-empty b{display:block;font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:5px;}
.wo-empty span{display:block;font-size:13px;max-width:520px;margin:0 auto;line-height:1.5;}
/* Il min-width vale SOLO dove la tabella è ancora una tabella: sotto i 1200px le righe
   diventano blocchi e una larghezza minima qui provocherebbe scroll orizzontale.
   (Due classi battono la regola responsive a classe singola: va confinata nel media query.) */
@media (min-width:1200px){table.tc.wo-tc{min-width:820px;}}
/* Riepilogo in coda alla consultazione: quanti esercizi e quanto volume complessivo.
   È la domanda che ci si fa riguardando una seduta, e la tabella da sola non risponde. */
.wo-tot{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--text-muted);}
.wo-tot b{color:var(--brand-text);font-weight:600;font-size:15px;}

/* ═══════════════════════════════════════════════
   DIETA (diet.php) — prefisso .dt-
   Il guscio a linguette è quello della scheda (.tc-bar/.tc-editor/.tc-rail/.tc-panel):
   stesso faldone, già responsive. Qui c'è solo lo specifico dei pasti.
   ═══════════════════════════════════════════════ */
.dt-view-name{font-size:20px;font-weight:600;color:var(--text);margin-bottom:6px;}
.dt-view-note{white-space:pre-wrap;}

.dt-day-h{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.dt-day-h h2{margin:0;font-size:18px;font-weight:600;color:var(--text);}
.dt-day-name{flex:1;max-width:340px;padding:8px 11px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;}
.dt-day-name:focus{outline:none;border-color:var(--brand-line);}


/* ── TABELLA del giorno: stesso impianto del diario (sez. 6.8) ──
   Una riga per alimento con tutti i macro, fascia del pasto coi subtotali, totali
   in fondo. In più ciò che il diario non ha: le SOSTITUZIONI — un sostituto di voce
   è una riga rientrata sotto la sua, un pasto sostitutivo è una fascia tratteggiata. */
.dt-t thead th{padding:10px 10px;background:rgba(255,255,255,.045);color:var(--text);
	font-size:11px;font-weight:600;letter-spacing:.07em;border-bottom:1px solid var(--border);}
.dt-t thead th:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);}
.dt-t thead th:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);}
.dt-t tbody td,.dt-t tfoot td{vertical-align:middle;}
.dt-t td.c-food{white-space:normal;}
.dt-t td.c-food b{font-weight:400;font-size:13.5px;color:var(--text);}
.dt-t td.c-food span{display:block;font-size:11.5px;color:var(--text-muted);}
.dt-t td.num,.dt-t th.num{text-align:right;font-variant-numeric:tabular-nums;}
.dt-t td.num{font-size:13.5px;color:var(--text-muted);}
.dt-t td.c-kcal{font-size:13.5px;color:var(--text);font-weight:600;}
.dt-t input.dt-g{width:58px;}
.dt-t td.c-g{white-space:nowrap;}
.dt-t td.c-g em{font-style:normal;font-size:11.5px;color:var(--text-muted);margin-left:4px;}
.dt-t td.c-act{white-space:nowrap;text-align:right;}
.dt-t td.c-act .m-ic+.m-ic{margin-left:4px;}
.dt-missing{font-style:normal;color:#e0736f;font-size:12.5px;}

/* Fascia del pasto */
.dt-t tr.dt-mrow td{padding:11px 10px;background:var(--brand-soft);border-bottom:none;
	border-top:1px solid var(--brand-line);}
.dt-t tr.dt-mrow:hover td{background:var(--brand-soft);}
.dt-t tr.dt-mrow td:first-child{border-left:3px solid var(--brand);}
.dt-t tr.dt-mrow td.num{color:var(--brand-text);font-size:12.5px;font-weight:600;}
.dt-t tr.dt-mrow+tr td{padding-top:15px;}
.dt-t tr.dt-addrow td{padding:6px 10px 18px;border-bottom:none;}
/* Un pasto SOSTITUTIVO: fascia tratteggiata, così si distingue dal principale */
.dt-t tr.dt-mrow.alt td{background:transparent;border-top:1px dashed var(--brand-line);}
.dt-t tr.dt-mrow.alt:hover td{background:transparent;}
.dt-t tr.dt-mrow.alt td:first-child{border-left:3px dashed var(--brand-line);}
.dt-alt-tag{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:20px;
	font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
	background:var(--brand-soft);color:var(--brand-text);border:1px solid var(--brand-line);}

/* Il nome del pasto NON è un <input>: la regola globale input[type=text] è più
   specifica di una classe e rimetterebbe sfondo, bordo e padding (sez. 6.8). */
.dt-mname{display:inline-block;min-width:2ch;max-width:100%;padding:1px 0;
	border-bottom:1px solid transparent;color:var(--text);font-size:12.5px;font-weight:600;
	text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;cursor:text;}
.dt-mname:focus{outline:none;border-bottom-color:var(--brand-line);}
.dt-mname:empty:before{content:attr(data-ph);opacity:.55;}

/* Riga di un SOSTITUTO di voce: rientrata e con l'etichetta "oppure" */
.dt-t tr.dt-alt td{opacity:.85;}
.dt-t tr.dt-alt td.c-food{padding-left:26px;}
.dt-or{display:inline-block;margin-right:7px;font-size:10px;font-weight:600;
	text-transform:uppercase;letter-spacing:.05em;color:var(--brand-text);}

/* Totali del giorno */
.dt-t tfoot td{padding:15px 10px;border-top:2px solid var(--brand);
	font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.dt-t tfoot td.lbl{font-size:11.5px;font-weight:600;text-transform:uppercase;
	letter-spacing:.07em;color:var(--text-muted);}

/* Riepilogo con la barra dei macro, come nel diario */
.dt-sum{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.dt-sum.top{margin-top:22px;padding-bottom:0;border-bottom:none;}
.dt-kcal{display:flex;align-items:baseline;gap:8px;}
.dt-kcal b{font-size:30px;font-weight:600;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.dt-kcal span{font-size:13.5px;color:var(--text-muted);}
.dt-macrobar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:14px 0 11px;background:var(--border);}
.dt-macrobar i{display:block;height:100%;transition:width var(--transition);}
.dt-mp{background:var(--brand);}
.dt-mc{background:#3fa7c4;}
.dt-mg{background:#d9964a;}
.dt-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text-muted);}
.dt-legend b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.dt-legend em{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;}
.dt-sum-l{display:block;margin-bottom:8px;font-size:11.5px;font-weight:600;
	text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}

.dt-addmeal{margin-top:18px;}
.dt-foot{display:block;margin-top:16px;font-size:11.5px;color:var(--text-muted);opacity:.8;}

/* Assegnazioni (solo in contesto libreria) */
.dt-assign{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.dt-assign-t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:10px;}
.dt-chk{display:inline-flex;align-items:center;gap:7px;margin:0 16px 8px 0;font-size:13.5px;color:var(--text);cursor:pointer;}

/* Selettore alimenti: si apre sotto il pulsante che l'ha chiamato */
.dt-picker{position:relative;margin:8px 0;padding:10px;background:var(--bg);border:1px solid var(--brand-line);border-radius:var(--radius);}
.dt-picker-q{width:100%;padding:8px 11px;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;}
.dt-picker-q:focus{outline:none;border-color:var(--brand-line);}
.dt-picker-r{max-height:280px;overflow-y:auto;margin-top:8px;}
.dt-picker-i{display:flex;align-items:baseline;gap:10px;width:100%;padding:7px 9px;background:none;border:none;border-bottom:1px solid var(--border);
	color:var(--text);font-size:13px;text-align:left;text-shadow:none;cursor:pointer;}
.dt-picker-i:hover{background:var(--brand-soft);}
.dt-picker-i span{flex:1;min-width:0;}
.dt-picker-i em{font-style:normal;color:var(--text-muted);font-size:11.5px;}
.dt-picker-i b{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:12px;white-space:nowrap;}

/* ⚠️ La larghezza minima sta DENTRO il media query: fuori, `table.tc.dt-t` (due classi)
   batterebbe il `table.tc{min-width:0}` del blocco responsive e la tabella
   scrollerebbe in orizzontale anche da telefono (stessa trappola di wo-tc e dy-t). */
@media (min-width:1200px){
	table.tc.dt-t{min-width:700px;}
}
@media (max-width:1199px){
	/* Le righe diventano card; fasce dei pasti e riga "aggiungi" restano tali */
	.dt-t tbody tr.dt-addrow{background:transparent;border:none;border-left:none;padding:0 0 4px;margin:0;}
	.dt-t tbody tr.dt-addrow td{padding:0;}
	.dt-t td.c-food{padding-right:92px;}
	.dt-t td.c-food b{font-size:14.5px;}
	.dt-t tbody tr.dt-mrow{background:var(--brand-soft);border:1px solid var(--brand-line);
		border-left:3px solid var(--brand);border-radius:var(--radius);padding:10px 12px;margin:18px 0 12px;}
	.dt-t tbody tr.dt-mrow.alt{background:transparent;border-style:dashed;}
	.dt-t tbody tr.dt-mrow td{padding:0;background:transparent;border:none;}
	.dt-t tbody tr.dt-mrow td:first-child{border-left:none;}
	.dt-t tbody tr.dt-mrow td.num{display:none;}
	.dt-t tbody tr.dt-mrow td.c-act{position:absolute;top:8px;right:8px;}
	.dt-t tbody tr.dt-mrow+tr td{padding-top:0;}
	.dt-t tbody tr.dt-alt{border-left-style:dashed;}
	.dt-t tbody tr.dt-alt td.c-food{padding-left:0;}
	.dt-t td.c-act{position:absolute;top:12px;right:12px;padding:0;}
	.dt-t td.c-g,.dt-t td.num{display:inline-block;width:31%;vertical-align:top;}
	.dt-t tfoot,.dt-t tfoot tr,.dt-t tfoot td{display:block;}
	.dt-t tfoot tr{border-top:2px solid var(--brand);padding-top:14px;margin-top:6px;}
	.dt-t tfoot td{display:inline-block;width:31%;padding:0 0 10px;border-top:none;}
	.dt-t tfoot td.lbl{width:100%;}
}
@media (max-width:767px){
	.dt-day-name{max-width:none;}
	.dt-t td.c-g,.dt-t td.num,.dt-t tfoot td{width:47%;}
	.dt-legend{gap:14px;}
}

/* ═══════════════════════════════════════════════
   DIARIO ALIMENTARE (diary.php) — prefisso .dy-
   TABELLA come nel software originale: una riga per alimento con TUTTI i macro,
   subtotali sulla riga del pasto e totali in fondo. Riusa i componenti esistenti —
   `table.tc` (col collasso a card ≤1199px), `input.dy-g` che CONDIVIDE la
   definizione con i campi della scheda, `.tc-setadd`, `.m-ic`, `.m-btn`.
   Su schermi larghi il contenuto sta su DUE colonne: a sinistra riepilogo e
   tabella, a destra le note — una tabella lunga un chilometro su un monitor largo
   non ha senso. Stesso impianto della pagina Alimenti (.fd-layout).
   ═══════════════════════════════════════════════ */

/* Stesso impianto dell'Agenda (.cal-layout): griglia semplice, stessa larghezza della
   colonna laterale (368px), due card che partono dallo stesso punto e si allungano
   uguali. NIENTE `align-items:start` né `sticky` sulla colonna di destra — è così che
   si era ridotta all'altezza del suo contenuto, sembrando posizionata a caso.
   Una colonna di default; le due colonne si attivano nel media query più sotto. */
.row.dy-layout{grid-template-columns:minmax(0,1fr);}

/* ── Intestazione del giorno ── */
.dy-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.dy-when{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 4px;}
.dy-when b{font-size:19px;font-weight:600;color:var(--text);white-space:nowrap;}
/* Solo l'iniziale, non ogni parola: "lunedì 27 luglio", non "Lunedì 27 Luglio" */
.dy-when b::first-letter{text-transform:uppercase;}
.dy-when i{color:var(--text-muted);font-size:15px;}
/* Il selettore nativo sta sopra la data, invisibile: cliccando si apre il calendario
   del sistema senza dover mostrare un campo "MM/GG/AAAA" che stonerebbe. */
.dy-when input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
	border:none;background:none;padding:0;}
.dy-head-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
/* Il pallino compare solo quando ci sono modifiche non salvate */
.dy-dirty{display:none;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:7px;}
.dy-dirty.on{display:inline-block;}

/* ── Riepilogo: il numero grande e la barra proporzionale dei macro ── */
.dy-sum{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.dy-kcal{display:flex;align-items:baseline;gap:8px;}
.dy-kcal b{font-size:34px;font-weight:600;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.dy-kcal span{font-size:14px;color:var(--text-muted);}
/* Ripartisce le CALORIE fra i tre macro (4/4/9): è la lettura che interessa davvero */
.dy-macrobar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:16px 0 12px;background:var(--border);}
.dy-macrobar i{display:block;height:100%;transition:width var(--transition);}
.dy-mp{background:var(--brand);}
.dy-mc{background:#3fa7c4;}
.dy-mg{background:#d9964a;}
.dy-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text-muted);}
.dy-legend b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.dy-legend em{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;}
.dy-from{margin-top:14px;font-size:12.5px;color:var(--text-muted);}

/* ── Tabella ──
   Intestazioni vere: fascia di sfondo, testo leggibile, non due paroline sbiadite. */
.dy-t thead th{padding:10px 10px;background:rgba(255,255,255,.045);color:var(--text);
	font-size:11px;font-weight:600;letter-spacing:.07em;border-bottom:1px solid var(--border);}
.dy-t thead th:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);}
.dy-t thead th:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);}
/* Valori su una riga sola: centrati in verticale si leggono meglio dell'allineamento
   in alto, che nella scheda serve perché lì le celle impilano più serie. */
.dy-t tbody td,.dy-t tfoot td{vertical-align:middle;}
.dy-t td.c-food{white-space:normal;}
.dy-t td.c-food b{font-weight:400;font-size:13.5px;color:var(--text);}
.dy-t td.c-food span{display:block;font-size:11.5px;color:var(--text-muted);}
.dy-t td.num,.dy-t th.num{text-align:right;font-variant-numeric:tabular-nums;}
.dy-t td.num{font-size:13.5px;color:var(--text-muted);}
.dy-t td.c-kcal{font-size:13.5px;color:var(--text);font-weight:600;}
.dy-t input.dy-g{width:58px;}
.dy-t td.c-g{white-space:nowrap;}
.dy-t td.c-g em{font-style:normal;font-size:11.5px;color:var(--text-muted);margin-left:4px;}

/* ── Riga del pasto: deve leggersi come una FASCIA, non come una voce fra le altre ── */
.dy-t tr.dy-mrow td{padding:11px 10px;background:var(--brand-soft);border-bottom:none;
	border-top:1px solid var(--brand-line);}
.dy-t tr.dy-mrow:hover td{background:var(--brand-soft);}
.dy-t tr.dy-mrow td:first-child{border-left:3px solid var(--brand);}
.dy-t tr.dy-mrow td.num{color:var(--brand-text);font-size:12.5px;font-weight:600;}
.dy-t tr.dy-mrow td.c-del{background:var(--brand-soft);}
/* Il nome pasto NON è un <input>: la regola globale input[type=text] è più specifica
   di una classe e rimetterebbe sfondo, bordo e padding (il "rettangolo vuoto"), e un
   input andrebbe pure dimensionato a mano. Un testo modificabile sul posto si
   dimensiona da sé e non ha stile da battere. */
.dy-mname{display:inline-block;min-width:2ch;max-width:100%;padding:1px 0;
	border-bottom:1px solid transparent;color:var(--text);font-size:12.5px;font-weight:600;
	text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;cursor:text;}
.dy-mname:focus{outline:none;border-bottom-color:var(--brand-line);}
.dy-mname:empty:before{content:attr(data-ph);opacity:.55;}
/* Prima voce dopo la fascia del pasto: un filo d'aria per staccarla */
.dy-t tr.dy-mrow+tr td{padding-top:15px;}
.dy-t tr.dy-addrow td{padding:6px 10px 18px;border-bottom:none;}

/* ── Riga dei totali: è la lettura finale, quindi pesa di più ── */
.dy-t tfoot td{padding:15px 10px;border-top:2px solid var(--brand);
	font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.dy-t tfoot td.lbl{font-size:11.5px;font-weight:600;text-transform:uppercase;
	letter-spacing:.07em;color:var(--text-muted);}

.dy-addmeal{margin-top:18px;}

/* ── Colonna di destra ── */
.dy-side h3{margin:0 0 10px;font-size:11.5px;font-weight:600;text-transform:uppercase;
	letter-spacing:.06em;color:var(--text-muted);}
.dy-side textarea{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--border);
	border-radius:var(--radius);color:var(--text);font-size:14px;font-family:inherit;resize:vertical;}
.dy-side textarea:focus{outline:none;border-color:var(--brand-line);}
.dy-frozen{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
	font-size:11.5px;color:var(--text-muted);opacity:.8;line-height:1.55;}

/* ── Ricalca: una sezione in cima alla stessa card, non un'altra scatola ── */
.dy-trace{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.dy-trace h3{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--text);}
.dy-trace p{margin:0 0 16px;font-size:13px;color:var(--text-muted);}
.dy-trace-sel{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.dy-trace-sel select{flex:1;min-width:180px;padding:9px 30px 9px 11px;background-color:var(--bg);
	border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13.5px;}
.dy-trace-sel select:focus{outline:none;border-color:var(--brand-line);}
.dy-tr-meal{margin-bottom:16px;}
.dy-tr-meal-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.dy-tr-meal-h b{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
.dy-tr-meal-h select{padding:5px 26px 5px 9px;background-color:var(--bg);border:1px solid var(--brand-line);
	border-radius:var(--radius);color:var(--text);font-size:12.5px;}
.dy-tr-item{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:13.5px;}
.dy-tr-item>span{width:58px;text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.dy-tr-item>b{flex:1;min-width:0;font-weight:400;color:var(--text);}
.dy-tr-item select{flex:1;min-width:0;padding:5px 26px 5px 9px;background-color:var(--bg);
	border:1px solid var(--brand-line);border-radius:var(--radius);color:var(--text);font-size:12.5px;}
.dy-trace-actions{display:flex;align-items:center;gap:12px;}

/* ⚠️ La larghezza minima sta DENTRO il media query: fuori, `table.tc.dy-t` (due classi)
   batterebbe il `table.tc{min-width:0}` del blocco responsive e la tabella
   scrollerebbe in orizzontale anche da telefono. Stessa trappola già vista con wo-tc. */
@media (min-width:1200px){
	table.tc.dy-t{min-width:660px;}
}
/* ⚠️ Due colonne da 1400px, non da 1199 come l'Agenda: stesso meccanismo, soglia
   diversa per una ragione precisa. Il calendario dell'Agenda si RESTRINGE con la
   colonna, una tabella no — ha otto colonne e sotto i 1400px, tolte sidebar e note,
   kcal ed elimina finivano fuori dallo schermo. Meglio una colonna sola con la
   tabella intera che due colonne con la colonna più importante tagliata. */
@media (min-width:1400px){
	.row.dy-layout{grid-template-columns:minmax(0,1fr) 368px;}
}
/* Sotto i 1199px la tabella si scompone in card, come nella scheda */
@media (max-width:1199px){
	/* La riga "aggiungi" e quella del pasto NON sono card: sono comandi e titoli */
	.dy-t tbody tr.dy-addrow{background:transparent;border:none;border-left:none;padding:0 0 4px;margin:0;}
	.dy-t tbody tr.dy-addrow td{padding:0;}
	.dy-t td.c-food{padding-right:52px;}
	.dy-t td.c-food b{font-size:14.5px;}
	/* La riga del pasto resta una FASCIA anche quando le voci diventano card */
	.dy-t tbody tr.dy-mrow{background:var(--brand-soft);border:1px solid var(--brand-line);
		border-left:3px solid var(--brand);border-radius:var(--radius);padding:10px 12px;margin:18px 0 12px;}
	.dy-t tbody tr.dy-mrow td{padding:0;background:transparent;border:none;}
	.dy-t tbody tr.dy-mrow td:first-child{border-left:none;}
	.dy-t tbody tr.dy-mrow td.num{display:none;}
	.dy-t tbody tr.dy-mrow td.c-del{position:absolute;top:8px;right:8px;}
	.dy-t tbody tr.dy-mrow+tr td{padding-top:0;}
	.dy-t td.c-g,.dy-t td.num{display:inline-block;width:31%;vertical-align:top;}
	.dy-t tfoot,.dy-t tfoot tr,.dy-t tfoot td{display:block;}
	.dy-t tfoot tr{border-top:2px solid var(--brand);padding-top:14px;margin-top:6px;}
	.dy-t tfoot td{display:inline-block;width:31%;padding:0 0 10px;border-top:none;}
	.dy-t tfoot td.lbl{width:100%;}
}
@media (max-width:767px){
	.dy-head-actions{margin-left:0;width:100%;justify-content:flex-end;
		padding-top:12px;border-top:1px solid var(--border);}
	.dy-when b{font-size:17px;}
	.dy-t td.c-g,.dy-t td.num,.dy-t tfoot td{width:47%;}
	.dy-legend{gap:14px;}
}

/* ═══════════════════════════════════════════════
   RICETTARIO (cookbook.php · recipe.php) — prefisso .rc-
   Stesso impianto di diario e dieta: due colonne sopra i 1400px (a sinistra i
   numeri e la tabella degli ingredienti, a destra il PROCEDIMENTO), `table.tc`
   coi macro e i totali in fondo, `input.rc-g` che condivide la definizione coi
   campi della scheda, `.tc-setadd` per aggiungere, `.m-ic` per le icone.
   ═══════════════════════════════════════════════ */

.rc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.rc-name strong{font-size:13.5px;font-weight:600;color:var(--text);}
.rc-badge{display:inline-block;margin-left:7px;color:var(--text-muted);font-size:11px;}
.rc-badge i:before{margin:0;width:auto;}
table.rc-table td{vertical-align:middle;}

/* Una colonna di default; due quando c'è davvero spazio — stessa soglia del diario,
   e per la stessa ragione: la tabella ha otto colonne e non si restringe. */
.row.rc-layout{grid-template-columns:minmax(0,1fr);}
@media (min-width:1400px){
	.row.rc-layout{grid-template-columns:minmax(0,1fr) 368px;}
}

.rc-title{margin:0 0 16px;font-size:22px;font-weight:600;color:var(--text);}

/* I tre numeri che descrivono la ricetta: somma, resa, porzione */
.rc-nums{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.rc-num{flex:1;min-width:150px;padding:11px 13px;background:var(--bg);border:1px solid var(--border);
	border-radius:var(--radius);display:flex;flex-direction:column;gap:5px;}
.rc-num>span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.rc-num>b{font-size:17px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.rc-num input.rc-g{width:78px;text-align:right;}
.rc-num em{font-style:normal;font-size:11.5px;color:var(--text-muted);margin-left:5px;}
.rc-num u{display:block;text-decoration:none;font-size:11px;color:var(--brand-text);font-variant-numeric:tabular-nums;}

/* Riepiloghi: per 100 g e per porzione, affiancati */
.rc-sums{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.rc-sum{flex:1;min-width:260px;}
.rc-warn{display:block;margin:-8px 0 16px;color:#e0a13f;}

/* Etichetta CONDIVISA: marca una voce che è una ricetta, non un alimento.
   La usano il ricettario, la dieta e il diario — una ricetta si può mettere in
   un pasto come qualsiasi alimento, e chi legge deve poterla distinguere. */
.rc-tag{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:20px;font-size:9.5px;
	font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
	background:var(--brand-soft);color:var(--brand-text);border:1px solid var(--brand-line);}
.rc-t td.c-food b{font-weight:400;font-size:13.5px;color:var(--text);}
/* :not(.rc-tag) — la marca va a capo, l'etichetta "ricetta" no: senza l'esclusione
   diventerebbe anch'essa un blocco largo quanto la cella */
.rc-t td.c-food span:not(.rc-tag){display:block;font-size:11.5px;color:var(--text-muted);}
.rc-t td.num,.rc-t th.num{text-align:right;font-variant-numeric:tabular-nums;}
.rc-t td.num{font-size:13.5px;color:var(--text-muted);}
.rc-t td.c-kcal{font-size:13.5px;color:var(--text);font-weight:600;}
.rc-t td.c-g em{font-style:normal;font-size:11.5px;color:var(--text-muted);margin-left:4px;}
.rc-t thead th{padding:10px;background:rgba(255,255,255,.045);color:var(--text);
	font-size:11px;font-weight:600;letter-spacing:.07em;border-bottom:1px solid var(--border);}
.rc-t tbody td,.rc-t tfoot td{vertical-align:middle;}
.rc-t tbody tr.rc-addrow td,.rc-t tbody tr.rc-pickrow td{padding:8px 10px 16px;border-bottom:none;}
.rc-t tfoot td{padding:15px 10px;border-top:2px solid var(--brand);
	font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.rc-t tfoot td.lbl{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);}
.rc-t input.rc-g{width:58px;}

/* Colonna di destra: il procedimento */
.rc-side h3{margin:0 0 10px;font-size:11.5px;font-weight:600;text-transform:uppercase;
	letter-spacing:.06em;color:var(--text-muted);}
.rc-side h3.rc-h2{margin-top:20px;}
.rc-side textarea{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--border);
	border-radius:var(--radius);color:var(--text);font-size:14px;font-family:inherit;resize:vertical;line-height:1.55;}
.rc-side textarea:focus{outline:none;border-color:var(--brand-line);}
.rc-method{font-size:14px;color:var(--text);line-height:1.6;white-space:pre-wrap;}

@media (min-width:1200px){
	table.tc.rc-t{min-width:660px;}
}
@media (max-width:1199px){
	.rc-t tbody tr.rc-addrow,.rc-t tbody tr.rc-pickrow{background:transparent;border:none;border-left:none;padding:0;margin:0;}
	.rc-t tbody tr.rc-addrow td,.rc-t tbody tr.rc-pickrow td{padding:0 0 12px;}
	.rc-t td.c-food{padding-right:52px;}
	.rc-t td.c-food b{font-size:14.5px;}
	.rc-t td.c-del{position:absolute;top:12px;right:12px;padding:0;}
	.rc-t td.c-g,.rc-t td.num{display:inline-block;width:31%;vertical-align:top;}
	.rc-t tfoot,.rc-t tfoot tr,.rc-t tfoot td{display:block;}
	.rc-t tfoot tr{border-top:2px solid var(--brand);padding-top:14px;margin-top:6px;}
	.rc-t tfoot td{display:inline-block;width:31%;padding:0 0 10px;border-top:none;}
	.rc-t tfoot td.lbl{width:100%;}
}
@media (max-width:767px){
	.rc-t td.c-g,.rc-t td.num,.rc-t tfoot td{width:47%;}
	.rc-num{min-width:130px;}
}

/* Colonna QUANTITÀ di diario, dieta e ricettario — una tendina in una colonna
   sua, accanto a quella del peso, com'era nel vecchio software: "-", da 1 a 10,
   1/2, 1/3, 1/4. Scegliere 1 significa una confezione intera.
   La cella NON ha la classe .num di proposito: le funzioni che aggiornano i
   numeri di riga indicizzano le celle con td.num e eq(1..5), e aggiungerne una
   sposterebbe tutti i macro di una posizione. */
/* L'intestazione sta su UNA riga: "Qtà confezione" spezzato in due ("QTÀ" sopra
   e "CONFEZIONE" sotto) è brutto e sfalsa l'altezza della testata. La colonna è
   larga a sufficienza nei colgroup delle pagine che usano quell'etichetta. */
th.c-q{text-align:right;white-space:nowrap;}
td.c-q{text-align:right;vertical-align:middle;}
td.c-q select{width:100%;max-width:70px;padding:6px 22px 6px 8px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;font-variant-numeric:tabular-nums;}
td.c-q select:focus{outline:none;border-color:var(--brand-line);}

/* ═══════════════════════════════════════════════
   ALIMENTI (foods.php) — prefisso .fd-
   ═══════════════════════════════════════════════ */
.row.fd-layout{grid-template-columns:minmax(0,1fr) 400px;}

.fd-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.fd-search{flex:1;min-width:200px;padding:9px 12px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;}
.fd-search:focus{outline:none;border-color:var(--brand-line);}
.fd-bar select{padding:9px 30px 9px 11px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px;max-width:210px;}

table.fd-table td{vertical-align:middle;}
.fd-row{cursor:pointer;}
.fd-row:hover{background:rgba(255,255,255,.03);}
.fd-row.sel{background:var(--brand-soft);}
.fd-name strong{font-size:13.5px;font-weight:600;color:var(--text);}
.fd-brand{display:block;font-size:11.5px;color:var(--text-muted);}
.fd-sec{font-size:12px;color:var(--text-muted);}
.fd-macros{white-space:nowrap;font-variant-numeric:tabular-nums;}
.fd-macros span{display:inline-block;margin-left:10px;font-size:12.5px;color:var(--text-muted);}

/* Provenienza: si distingue a colpo d'occhio da dove viene il dato */
.fd-tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.fd-tag.crea{background:rgba(255,255,255,.07);color:var(--text-muted);}
.fd-tag.mine{background:var(--brand-soft);color:var(--brand-text);border:1px solid var(--brand-line);}
.fd-tag.over{background:rgba(12,118,138,.2);color:#5ec8dd;border:1px solid rgba(12,118,138,.5);}

.fd-pager{display:flex;align-items:center;gap:12px;margin-top:14px;}

/* Dettaglio */
.fd-head h2{margin:0 0 3px;font-size:18px;font-weight:600;color:var(--text);}
.fd-brand-big{font-size:13px;color:var(--text-muted);margin-bottom:8px;}
.fd-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.fd-kcal{padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:var(--radius);background:var(--bg);margin-bottom:14px;}
.fd-kcal b{font-size:22px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.fd-kcal span{font-size:12px;color:var(--text-muted);margin-left:4px;}
.fd-macrolist{display:flex;flex-direction:column;gap:1px;}
.fd-mrow{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg);border-radius:var(--radius);font-size:13.5px;}
.fd-mrow span{flex:1;color:var(--text-muted);}
.fd-mrow b{font-variant-numeric:tabular-nums;color:var(--text);}
.fd-mrow em{font-style:normal;font-size:11px;color:var(--text-muted);opacity:.8;}

.fd-form-macros{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.fd-orig{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.fd-orig-t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:8px;}

/* Lettura dell'etichetta — compare solo nel form di un alimento NUOVO.
   Il campo file resta nascosto: lo apre il pulsante, che è un componente dell'app
   e non un <input type=file> nudo (che erediterebbe lo stile grezzo del browser). */
.fd-ocr{margin-bottom:16px;padding:14px;border:1px dashed var(--brand-line);border-radius:var(--radius);background:var(--brand-soft);}
.fd-ocr input[type=file]{display:none;}
.fd-ocr .m-msg{display:block;margin-top:9px;line-height:1.5;}
/* A lettura avvenuta il suggerimento si svuota: senza questo, lo spazio che
   occupava resterebbe lì come un buco dentro il riquadro */
.fd-ocr .m-msg:empty{display:none;}
.fd-ocr .m-btn[disabled] i{animation:fd-spin 1s linear infinite;}
@keyframes fd-spin{to{transform:rotate(360deg);}}

.fd-ocr-res{margin-bottom:16px;}
.fd-ocr-state{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--text);margin-bottom:10px;}
.fd-ocr-state i{color:var(--brand-text);}
.fd-ocr-state b{font-weight:600;}
/* L'ambra non esiste ancora nella palette: è la sola nota fuori dal grigio/viola,
   e serve che gli avvisi si vedano — sono il motivo per cui l'utente ricontrolla */
.fd-warn{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;margin-bottom:6px;border-radius:var(--radius);background:rgba(197,148,58,.12);border:1px solid rgba(197,148,58,.45);font-size:12.5px;line-height:1.5;color:#e2bb6a;}
.fd-warn i{flex:0 0 auto;margin-top:2px;}
/* Le note dicono cosa ha fatto il sistema, non cosa deve fare l'utente: stesso
   impianto dell'avviso ma nei colori di marca, così non si confondono a colpo
   d'occhio con qualcosa da controllare */
.fd-note{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;margin-bottom:6px;border-radius:var(--radius);background:var(--brand-soft);border:1px solid var(--brand-line);font-size:12.5px;line-height:1.5;color:var(--text);}
.fd-note i{flex:0 0 auto;margin-top:2px;color:var(--brand-text);}
.fd-kcalcheck{font-size:12px;color:var(--text-muted);margin-bottom:8px;font-variant-numeric:tabular-nums;}
.fd-trans{display:none;margin-top:8px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);font-size:12px;line-height:1.65;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;}
.fd-trans.open{display:block;}

/* Composizione CREA: molte voci, quindi a scomparsa e in griglia */
.fd-comp{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.fd-comp-b{display:none;margin-top:12px;}
.fd-comp-b.open{display:block;}
.fd-comp-g{margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-text);}
.fd-comp-g:first-child{margin-top:0;}
.fd-comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;}
.fd-comp-grid div{display:flex;align-items:baseline;gap:8px;font-size:12px;padding:3px 0;border-bottom:1px solid var(--border);}
.fd-comp-grid span{flex:1;color:var(--text-muted);}
.fd-comp-grid b{font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;}
.fd-comp-grid b em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--text-muted);}
.fd-comp-note{display:block;margin-top:12px;}

/* Il pannello resta a vista mentre si scorre l'elenco (che è lungo migliaia di righe) */
@media (min-width:1200px){
	#fdSide{position:sticky;top:calc(var(--topbar-h) + 14px);align-self:start;max-height:calc(100vh - var(--topbar-h) - 28px);overflow-y:auto;}
}
@media (max-width:1199px){
	/* minmax(0,…) e non 1fr: senza, la tabella (larga) sfonda la traccia della griglia
	   e allarga l'intera pagina, spingendo fuori viewport anche il pannello di destra */
	.row.fd-layout{grid-template-columns:minmax(0,1fr);}
	/* Il pannello va SOPRA l'elenco, non sotto: l'elenco è lungo migliaia di righe
	   e averlo in coda significava aprire una scheda in fondo alla pagina.
	   Stando per primo dentro #main — che ha già padding-top pari all'altezza della
	   topbar fissa — comincia esattamente sotto di essa: non c'è nessun offset da
	   calcolare e non c'è modo che venga tagliato. */
	#fdSide{order:-1;}
	/* Serve solo quando si tocca una riga dell'elenco (vedi panelIntoView): lì il
	   pannello è sopra il punto in cui si sta guardando, e va riportato a vista. */
	#fdSide{scroll-margin-top:calc(var(--topbar-h) + 14px);}
}
@media (max-width:767px){
	.fd-form-macros,.fd-comp-grid{grid-template-columns:1fr;}
	.fd-bar select{max-width:none;flex:1;}
	/* A 390px le colonne non ci stanno tutte: la sezione si sacrifica (resta nel
	   dettaglio) e il nome può andare a capo, così macro/kcal/origine restano a vista */
	table.fd-table th:nth-child(2),table.fd-table td.fd-sec{display:none;}
	table.fd-table th,table.fd-table td{padding:9px 5px;}
	.fd-name{white-space:normal;}
	.fd-name strong{font-size:13px;}
	.fd-macros span{margin-left:6px;font-size:11.5px;}
}

/* ═══════════════════════════════════════════════
   AGENDA (calendar.php) — prefisso .cal-
   ═══════════════════════════════════════════════ */
/* Calendario a sinistra, dettaglio del giorno a destra; sotto i 1199px vanno in colonna. */
.row.cal-layout{grid-template-columns:minmax(0,1fr) 368px;}

.cal-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.cal-title{font-size:17px;font-weight:600;color:var(--text);min-width:170px;}
.cal-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:11.5px;color:var(--text-muted);}
.cal-legend span{display:inline-flex;align-items:center;gap:5px;}
.cal-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.cal-dot.planned{background:var(--brand-soft);border:1px solid var(--brand-line);}
.cal-dot.done{background:var(--brand);}
.cal-wi{font-size:11px;opacity:.7;}
.cal-wi:before{margin:0;width:auto;}

/* Sette giorni più una colonna di RIEPILOGO settimanale: nel vecchio gestionale il
   calendario era un aggregatore, e la settimana è l'unità con cui si legge una dieta. */
.cal-grid-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr) 96px;gap:4px;}
.cal-grid-head{margin-bottom:4px;}
.cal-grid-head div{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:center;padding-bottom:4px;}

.cal-cell{min-height:96px;padding:6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:border-color var(--transition),background var(--transition);}
.cal-cell:hover{border-color:var(--brand-line);}
.cal-cell.out{background:transparent;border-color:transparent;cursor:default;opacity:.3;}
.cal-cell.out:hover{border-color:transparent;}
.cal-cell.today{border-color:var(--brand);}
.cal-cell.sel{background:var(--brand-soft);border-color:var(--brand);}
.cal-n{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.cal-cell.today .cal-n{color:var(--brand-text);font-weight:700;}
.cal-marks{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;}

/* Un segno per allenamento: la lettera dello split dice subito QUALE */
.cal-chip{display:inline-flex;align-items:center;gap:3px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius);font-size:11px;font-weight:600;justify-content:center;}
.cal-chip i.icon-heartbeat{font-size:10px;opacity:.85;}
.cal-chip i.done{font-size:9px;}
.cal-chip.planned{background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-text);}
.cal-chip.done{background:var(--brand);color:#fff;}
.cal-chip i{font-size:9px;}
.cal-chip i:before{margin:0;width:auto;}
.cal-w{display:inline-flex;align-items:center;height:20px;color:var(--accent);font-size:12px;}
/* Alimentazione: blocco a sé, con icona propria e i macro sotto le kcal. Nella
   stessa cella convivono due cose diverse — allenamento e alimentazione — e senza
   un segno che le distingua si leggono come un elenco unico. */
.cal-food{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.07);}
.cal-food-k{display:flex;align-items:baseline;gap:4px;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.cal-food-k i{font-size:10px;color:var(--accent);}
.cal-li{font-size:11px;color:var(--brand-text);}
.cal-li.food{color:var(--accent);}
.cal-li:before{margin:0 4px 0 0;width:auto;}
.cal-food-k i:before{margin:0;width:auto;}
.cal-food-k b{font-size:12px;font-weight:600;color:var(--text);}
.cal-food-m{display:block;margin-top:1px;font-size:9.5px;color:var(--text-muted);
	font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-cell.sel .cal-food-k,.cal-cell.today .cal-food-k{color:var(--text);}

/* Riepilogo della settimana, in coda a ogni riga */
.cal-week{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
	min-height:96px;padding:6px 8px;border-radius:var(--radius);background:rgba(255,255,255,.03);}
.cal-week b{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1;}
.cal-week span{font-size:10px;color:var(--text-muted);text-align:right;line-height:1.3;}
.cal-week.empty b{color:var(--text-muted);opacity:.5;}
.cal-w i:before{margin:0;width:auto;}

/* Pannello del giorno */
.cal-weight{margin-bottom:14px;font-size:13px;color:var(--text-muted);}
.cal-weight i{color:var(--accent);}
/* ── Diario alimentare dentro il pannello del giorno ── */
.cal-diary{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.cal-diary-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.cal-diary-h h3{margin:0;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
.cal-diary-h a{margin-left:auto;font-size:12.5px;color:var(--brand-text);}
.cal-dk{display:flex;align-items:baseline;gap:7px;}
.cal-dk b{font-size:24px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;}
.cal-dk span{font-size:12.5px;color:var(--text-muted);}
.cal-dbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:11px 0 9px;background:var(--border);}
.cal-dbar i{display:block;height:100%;}
.cal-dleg{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--text-muted);margin-bottom:12px;}
.cal-dleg b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.cal-dleg em{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;}
.cal-dmeal{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;}
.cal-dmeal b{flex:1;min-width:0;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.cal-dmeal span{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cal-dmeal em{font-style:normal;font-size:11.5px;color:var(--text-muted);}
.cal-dadd{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.cal-dadd select{flex:1;min-width:110px;padding:7px 26px 7px 9px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:12.5px;}
.cal-dadd select:focus{outline:none;border-color:var(--brand-line);}

.cal-list{display:flex;flex-direction:column;gap:10px;}
.cal-item{padding:12px;border:1px solid var(--border);border-left:3px solid var(--brand-line);border-radius:var(--radius);background:var(--bg);}
.cal-item.done{border-left-color:var(--brand);}
.cal-item-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;}
.cal-state{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
.cal-item-n{margin-top:6px;font-size:12.5px;color:var(--text-muted);}
.cal-item-a{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;}
.cal-item-a .m-btn{padding:6px 10px;font-size:12.5px;}
.cal-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px;}
.cal-form .m-actions{margin-top:2px;}

@media (max-width:1199px){
	.row.cal-layout{grid-template-columns:1fr;}
}
@media (max-width:767px){
	/* Sul telefono la colonna del riepilogo non ci sta: la settimana si legge aprendo
	   il giorno, e il totale del mese resta in cima al pannello. */
	.cal-grid-head,.cal-grid{grid-template-columns:repeat(7,1fr);}
	.cal-week,.cal-grid-head div.cal-wh{display:none;}
	.cal-cell{min-height:62px;padding:4px;}
	/* a telefono i macro non ci stanno: resta la riga delle kcal */
	.cal-food-m{display:none;}
	.cal-legend{margin-left:0;width:100%;gap:10px;}
	.cal-title{min-width:0;flex:1;font-size:15px;}
	.cal-chip{min-width:18px;height:18px;font-size:10px;padding:0 4px;}
}

/* ═══════════════════════════════════════════════
   LIBRERIA SCHEDE (plans.php) — prefisso .pl-
   ═══════════════════════════════════════════════ */
.pl-table td{vertical-align:top;}
.pl-name strong{font-size:14px;font-weight:600;color:var(--text);}
.pl-note{margin-top:3px;max-width:300px;font-size:12px;line-height:1.45;color:var(--text-muted);white-space:normal;}
/* .m-table è nowrap: le celle che devono andare a capo lo dichiarano */
.pl-assigned{white-space:normal;min-width:210px;}
.pl-chip{display:inline-flex;align-items:center;gap:4px;margin:0 5px 5px 0;padding:3px 4px 3px 10px;border:1px solid var(--brand-line);border-radius:20px;background:var(--brand-soft);color:var(--brand-text);font-size:12px;}
.pl-x{background:transparent;border:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 3px;text-shadow:none;}
.pl-x:hover{opacity:1;color:#f5949b;}
.pl-none{font-size:12px;color:var(--text-muted);opacity:.7;}
.pl-assign{display:block;margin-top:4px;max-width:190px;padding:5px 24px 5px 9px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:12.5px;background-position:right .5rem center;background-size:13px 10px;}
.pl-assign:focus{border-color:var(--brand-line);color:var(--text);}

/* ═══════════════════════════════════════════════
   SCHEDA D'ALLENAMENTO (plan.php) — prefisso .tc-
   ═══════════════════════════════════════════════ */

/* — Lista schede — */
.tc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.tc-tile{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;cursor:pointer;transition:border-color var(--transition),transform var(--transition);}
.tc-tile:hover{border-color:var(--brand-line);transform:translateY(-2px);}
.tc-tile-ic{width:38px;height:38px;border-radius:var(--radius);background:var(--brand-soft);color:var(--brand-text);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;}
.tc-tile-ic i:before{margin:0;width:auto;}
.tc-tile h3{margin:0 0 5px;font-size:15px;font-weight:600;color:var(--text);}
.tc-tile-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-muted);}
.tc-tile-by{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);}
.tc-tile-by i{font-size:12px;opacity:.7;}
.tc-tile-by i:before{margin:0;width:auto;}
.tc-tile-note{font-size:12px;color:var(--text-muted);opacity:.75;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.tc-tile.add{align-items:center;justify-content:center;text-align:center;border-style:dashed;background:transparent;color:var(--text-muted);min-height:150px;}
.tc-tile.add:hover{color:var(--brand-text);}
.tc-tile.add .tc-tile-ic{background:transparent;border:1px dashed var(--border);}

/* — Barra dell'editor: sempre visibile mentre si scorre un giorno lungo — */
.tc-bar{position:sticky;top:var(--topbar-h);z-index:6;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg);padding:14px 0 16px;margin-bottom:2px;}
.tc-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;}

/* — Tab VERTICALI a faldone: linguette a sinistra, pannello a destra. La linguetta attiva
     ha lo stesso fondo del pannello e ne scavalca il bordo (margin-right:-1px), così i due
     pezzi risultano un unico contenitore: è ciò che fa capire "sono dentro questa tab". — */
.tc-editor{display:flex;align-items:stretch;}
.tc-rail{flex:0 0 168px;display:flex;flex-direction:column;gap:3px;padding-top:14px;}
.tc-tab{position:relative;z-index:2;margin-right:-1px;display:flex;align-items:center;gap:8px;text-align:left;padding:12px 14px;border:1px solid transparent;border-right:none;border-radius:var(--radius) 0 0 var(--radius);background:transparent;color:var(--text-muted);font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.3;text-shadow:none;cursor:pointer;transition:background var(--transition),color var(--transition);}
.tc-tab:hover{opacity:1;background:rgba(255,255,255,.05);color:var(--text);}
.tc-tab.active{background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:inset 3px 0 0 var(--brand);}
.tc-tab i{font-size:14px;opacity:.7;flex:none;}
.tc-tab i:before{margin:0;width:auto;}
.tc-tab.only-icon{justify-content:center;}
.tc-tab.only-icon i{opacity:.85;}
.tc-tab .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tc-tab .cnt{flex:none;font-size:11px;font-weight:400;opacity:.6;font-variant-numeric:tabular-nums;}
.tc-tab.add{margin-top:6px;margin-right:0;border:1px dashed var(--border);border-radius:var(--radius);color:var(--brand-text);justify-content:center;}
.tc-tab.add:hover{background:var(--brand-soft);border-color:var(--brand-line);color:#fff;}
/* Consultazione su schermo largo: linguette con la sola lettera, colonna minima.
   La regola sta qui e NON fuori dal media query: sotto i 1500px il rail è orizzontale
   e un flex-basis si tradurrebbe nella sua altezza. */
@media (min-width:1500px){
	.tc-editor.view .tc-rail{flex:0 0 40px;}
	.tc-editor.view .tc-tab{padding:12px 4px;justify-content:center;}
	.tc-editor.view .tc-tab .lbl{flex:none;overflow:visible;}
}
.tc-panel{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:0 var(--radius) var(--radius) var(--radius);padding:16px;}

/* — Scheda in CONSULTAZIONE: nessun campo, solo il contenuto — */
.tcv-head h2{margin:0 0 6px;font-size:19px;font-weight:600;color:var(--text);}
.tcv-note{font-size:13px;line-height:1.55;color:var(--text-muted);max-width:720px;white-space:pre-line;}
.tcv-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-muted);}
.tcv-meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.tcv-wrap{overflow-x:auto;}
table.tcv{width:100%;min-width:640px;border-collapse:collapse;}
table.tcv thead th{text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:0 10px 11px;border-bottom:1px solid var(--border);}
table.tcv tbody td{padding:13px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
table.tcv tbody tr:last-child td{border-bottom:none;}
.tcv-n{width:34px;color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums;}
.tcv-ex{font-size:14px;font-weight:600;color:var(--text);}
.tcv-sub{margin-top:3px;font-size:12px;color:var(--text-muted);}
.tcv-info{font-size:12.5px;line-height:1.45;color:var(--text-muted);}
.tcv-sets{display:flex;flex-direction:column;gap:5px;}
.tcv-set{font-size:13.5px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tcv-set span{color:var(--text-muted);}
.tcv-sn{display:inline-block;width:16px;font-size:11px;}
.tcv-rest{margin-left:6px;padding-left:8px;border-left:1px solid var(--border);}
/* Scomposizione del carico: sta ACCANTO al totale, più tenue, perché è un dettaglio
   di come si compone quel numero — non un secondo numero da leggere. */
.tcv-brk{margin-left:5px;font-size:12px;color:var(--text-muted);}
/* ── La settimana della programmazione, nella colonna Serie ──
   Se la scheda ha una programmazione assegnata, l'intestazione Serie diventa il
   pager della settimana e i carichi previsti (in colore di marca) sovrascrivono
   a video quelli di base. */
.tcv-wnav{display:inline-flex;align-items:center;gap:5px;margin-left:8px;vertical-align:middle;text-transform:none;letter-spacing:0;}
.tcv-wnav b{font-size:12.5px;font-weight:600;color:var(--brand-text);}
.tcv-wnav small{font-size:11px;color:var(--text-muted);}
.tcv-wnav .m-ic{padding:1px 4px;font-size:11px;}
.tcv-wnav .m-ic:disabled{opacity:.25;cursor:default;}
.tcv-plnkg{color:var(--brand-text);}
.tcv-vol{width:96px;}

@media (max-width:767px){
	.tcv-wrap{overflow:visible;}
	table.tcv,table.tcv tbody,table.tcv tr,table.tcv td{display:block;width:auto;min-width:0;}
	table.tcv thead{display:none;}
	table.tcv tbody tr{position:relative;background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:var(--radius);padding:14px 14px 4px;margin-bottom:12px;}
	table.tcv tbody td{border-bottom:none;padding:0 0 12px;}
	table.tcv tbody td[data-lbl]:before{content:attr(data-lbl);display:block;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:5px;}
	table.tcv td.tcv-n{position:absolute;top:12px;right:12px;padding:0;width:auto;}
	table.tcv td.tcv-vol{width:auto;}
}

/* — Pannello del giorno — */
.tc-assign{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);max-width:720px;}
.tc-assign-t{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:10px;}
.tc-assign-list{display:flex;flex-wrap:wrap;gap:8px 18px;}
.tc-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer;}
.tc-check input{width:18px;height:18px;flex:none;}
.tc-day-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.tc-day-t{font-size:15px;font-weight:600;color:var(--text);}
.tc-day-t small{font-weight:400;font-size:12px;color:var(--text-muted);margin-left:6px;}

/* — Tabella degli esercizi: una riga per esercizio, densa e leggibile in un colpo d'occhio.
     Il contenitore è il .tc-panel della tab, quindi qui niente sfondo né bordo propri.
     Sotto i 991px le righe diventano card (vedi media query in fondo). — */
/* Se la finestra è stretta la tabella scorre: la barra si vede, non taglia in silenzio. */
.tc-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--brand-line) transparent;}
.tc-wrap::-webkit-scrollbar{height:9px;}
.tc-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:5px;}
.tc-wrap::-webkit-scrollbar-thumb{background:var(--brand-line);border-radius:5px;}
/* table-layout:fixed = il colgroup comanda davvero. Senza, le intestazioni in nowrap
   allargano le colonne strette (Gruppo muscolare rubava spazio a Muscoli target).
   TUTTE le colonne hanno larghezza fissa TRANNE "Esercizio": così lo spazio che avanza
   finisce lì (select più larghe, niente nomi troncati) invece di formare un buco morto
   fra "Serie" e "Volume". */
table.tc{width:100%;min-width:1060px;border-collapse:collapse;table-layout:fixed;}
table.tc thead th{text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:0 10px 11px;border-bottom:1px solid var(--border);background:transparent;}
table.tc tbody td{padding:13px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
table.tc tbody tr:last-child td{border-bottom:none;}
table.tc tbody tr:hover{background:rgba(255,255,255,.02);}
table.tc tbody tr.invalid{background:rgba(192,86,79,.08);box-shadow:inset 3px 0 0 #c0564f;}

/* Riordino (colonna 1) */
.tc-ord{display:flex;flex-direction:column;gap:1px;}

/* Esercizio: la select principale, sotto attrezzo e variante più piccoli */
.tc-exsel{width:100%;font-size:14px;font-weight:600;padding:8px 30px 8px 10px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);}
.tc-exsel:focus{border-color:var(--brand-line);}
/* l'attrezzo è una parola corta, la variante può essere lunga: le proporzioni lo rispecchiano */
.tc-sub{display:grid;grid-template-columns:.92fr 1.08fr;gap:6px;margin-top:6px;}
/* Stessa veste per tutte le select secondarie della riga (attrezzo, variante, bilanciere):
   è ciò che le fa leggere come campi omogenei e non come pezzi scollegati. */
.tc-sub select,.tc-barsel{width:100%;font-size:12.5px;padding:6px 24px 6px 9px;background-color:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);background-position:right .5rem center;background-size:13px 10px;}
.tc-sub select:focus,.tc-barsel:focus{border-color:var(--brand-line);color:var(--text);}

/* Celle informative derivate dal catalogo (sola lettura) */
.tc-info{font-size:12px;color:var(--text-muted);line-height:1.45;}
.tc-info.dim{opacity:.45;}

/* Peso del bilanciere (attrezzo scarico) */
/* Peso libero: compare sotto la select solo quando si sceglie "Altro…" */
.tc-barcustom{width:100%;margin-top:5px;padding:6px 8px;text-align:center;background-color:var(--bg);border:1px solid var(--brand-line);border-radius:var(--radius);color:var(--text);font-size:12.5px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;}
.tc-barcustom:focus{outline:none;border-color:var(--brand);}
/* Il "+" fra il bilanciere e le serie: dice che i due numeri si sommano, invece di
   sembrare due colonne indipendenti. La cella diventa relativa e il segno si appoggia
   al bordo destro, all'altezza della select. */
.tc td.c-bar{position:relative;}
/* top/right misurati, non stimati: il segno deve stare sull'asse della select (centro
   a 28px dal bordo alto della cella) e a metà dello spazio fra le due colonne. */
.tc-barplus{position:absolute;top:20px;right:-9px;width:18px;text-align:center;
	font-size:16px;font-weight:600;line-height:1;color:var(--brand-text);}
@media (max-width:1199px){
	/* A card la cella non è più una colonna: il segno tornerebbe fuori posto. */
	.tc-barplus{display:none;}
}

/* Serie impilate: una riga per serie, rip × dischi · recupero */
.tc-sets{display:flex;flex-direction:column;gap:5px;}
.tc-set{display:flex;align-items:center;gap:4px;}
.tc-set .n{width:13px;flex:none;text-align:right;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.tc-set input,input.dy-g,input.dt-g,input.rc-g{flex:none;padding:6px 4px;text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;}
.tc-set input:focus,input.dy-g:focus,input.dt-g:focus,input.rc-g:focus{outline:none;border-color:var(--brand-line);}
.tc-set .s-reps{width:50px;}
.tc-set .s-load{width:58px;}
.tc-set .s-rm,.tc-set .s-rs{width:36px;}
.tc-set u{text-decoration:none;flex:none;font-size:11px;color:var(--text-muted);}
.tc-set em{font-style:normal;flex:none;font-size:11px;color:var(--text-muted);padding:0 1px;}
.tc-set .m-ic{padding:3px 4px;margin-left:2px;}
.tc-set .m-ic i{font-size:12px;}
table.tc input::-webkit-outer-spin-button,table.tc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.tc-setadd{align-self:flex-start;margin-top:4px;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--radius);color:var(--brand-text);padding:6px 12px;font-size:12px;font-family:inherit;line-height:1;text-shadow:none;cursor:pointer;}
.tc-setadd:hover{opacity:1;background:var(--brand);border-color:var(--brand);color:#fff;}
.tc-setadd i:before{margin:0 3px 0 0;width:auto;}

/* Volume totale: Σ ripetizioni × (dischi + bilanciere) */
.tc-vol{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tc-vol small{display:block;font-size:10px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);}
.tc-vol.zero{color:var(--text-muted);font-weight:400;}

/* ≤1499px: le linguette passano SOPRA il pannello. Il rail verticale costa 168px di
   larghezza e sotto questa soglia la tabella a 8 colonne non entrerebbe più nel pannello
   (a 1440 mancavano ~80px): meglio restituirle quello spazio che farla scorrere. */
@media (max-width:1499px){
	.tc-editor{flex-direction:column;}
	/* wrap invece di scroll: con overflow il margine negativo che salda la linguetta al
	   pannello verrebbe tagliato via */
	.tc-rail{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:3px;padding:0;}
	.tc-tab{margin:0 0 -1px 0;border-right:1px solid transparent;border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;white-space:nowrap;}
	.tc-tab.active{border-color:var(--border);border-bottom:1px solid var(--surface);box-shadow:inset 0 3px 0 var(--brand);}
	.tc-tab.add{margin:0 0 -1px 6px;border:1px dashed var(--border);border-bottom:none;}
	.tc-panel{border-radius:0 var(--radius) var(--radius) var(--radius);}
}

/* ≤1199px: la tabella si scompone in card, una per esercizio */
@media (max-width:1199px){
	.tc-panel{padding:14px;}
	.tc-wrap{overflow:visible;}
	table.tc,table.tc tbody,table.tc tr,table.tc td{display:block;width:auto;min-width:0;}
	table.tc thead{display:none;}
	/* le card stanno DENTRO il pannello (--surface): fondo più scuro per staccarsene */
	table.tc tbody tr{position:relative;background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:var(--radius);padding:14px 14px 4px;margin-bottom:12px;}
	table.tc tbody tr:hover{background:var(--bg);}
	table.tc tbody td{border-bottom:none;padding:0 0 12px;}
	table.tc tbody td:empty{display:none;}
	table.tc tbody td[data-lbl]:before{content:attr(data-lbl);display:block;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:5px;}
	/* riordino ed elimina ancorati in alto a destra della card */
	.tc td.c-ord,.tc td.c-del{position:absolute;top:12px;padding:0;}
	.tc td.c-ord{right:42px;}
	.tc td.c-ord .tc-ord{flex-direction:row;}
	.tc td.c-del{right:12px;}
	.tc td.c-ex{padding-right:86px;}
	/* gruppo muscolare e muscoli target affiancati */
	.tc td.c-grp,.tc td.c-mus{display:inline-block;width:49%;vertical-align:top;}
	.tc td.c-bar{max-width:200px;}
}
@media (max-width:575px){
	.tc td.c-grp,.tc td.c-mus{display:block;width:auto;}
	.tc-sub{grid-template-columns:1fr;}
}
@media (max-width:479px){.m-chart-wrap{height:240px;}}

/* ── La riga PAUSA: una cesura, non un esercizio ─────────────────────────────
   Deve leggersi al volo come "qui l'allenamento si divide in due". Fondo neutro,
   filetto tratteggiato sopra e sotto, testo centrato: non somiglia a nessuna
   riga di esercizio e non si confonde con una riga vuota. */
table.tc tr.tc-pauserow td,table.tcv tr.tcv-pauserow td{
	background:rgba(255,255,255,.03);
	border-top:1px dashed var(--border);
	border-bottom:1px dashed var(--border);
	padding:12px 10px;
}
table.tc tr.tc-pauserow:hover td{background:rgba(255,255,255,.03);}
td.c-pause{text-align:center;}
td.c-pause b{
	display:inline-block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
	color:var(--text-muted);font-weight:600;
}
td.c-pause span{display:block;font-size:11.5px;color:var(--text-muted);margin-top:3px;}
@media (max-width:991px){
	/* nel collasso a card la pausa resta una banda a tutta larghezza */
	table.tc tr.tc-pauserow td.c-pause{display:block;width:auto;padding:10px;}
	table.tc tr.tc-pauserow td.c-pause:before{content:none;}
}

/* La spunta "peso del bilanciere incluso" (scheda, programmazione, allenamento).
   ⚠️ `.pl-check` è `inline-flex`: senza `display:block` sulla nota, il
   suggerimento si incolla di fianco all'etichetta sulla stessa riga, senza
   nemmeno uno spazio. Un contenitore che si inventa va anche vestito.
   È incorniciata come riga di impostazione (fondo pagina + filetto di marca, lo
   stesso vestito di .wo-note-ro): da sciolta, spunta e spiegazione galleggiavano
   sulla card come testo qualunque — parte del "parole a caso" segnalato. */
.tc-barflag{margin-top:18px;margin-bottom:16px;padding:12px 14px;border:1px solid var(--border);
	border-left:3px solid var(--brand-line);border-radius:var(--radius);background:var(--bg);}
.tc-barflag .m-note{display:block;margin-top:6px;max-width:620px;margin-bottom:0;}

/* ═══════════════════════════════════════════════════════════════════════════
	PROGRAMMAZIONE  (.pl-)  — sez. 6.11
	La matrice: esercizi in verticale, settimane in orizzontale, e in ogni cella
	le serie impilate. Il guscio a linguette e la tabella sono quelli della
	scheda (.tc-), già responsive: qui c'è solo lo specifico della matrice.
	═══════════════════════════════════════════════════════════════════════════ */

/* ── L'editor: DUE COLONNE ──
   A sinistra la scheda descrittiva, ANCORATA (sticky: resta ferma mentre a destra
   si scorrono le settimane — pattern già usato da #fdSide negli Alimenti). A destra
   la gestione delle settimane. Le versioni a blocco-sopra sono state bocciate. */
/* A TUTTA larghezza (regola 9.3, richiesto esplicitamente): con le due colonne il
   vuoto non può formarsi — le righe a griglia riempiono qualunque larghezza. */
.pl-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start;}
/* i pannelli: lo stile di .box.card vive sotto `.row .box` e qui .row non c'è,
   quindi la superficie va data esplicitamente. La colonna sinistra è un wrapper
   sticky con DUE box: la scheda descrittiva e il selettore della settimana. */
.pl-panel,.pl-main{background:var(--surface);border-radius:0.25rem;padding:18px 20px;}
.pl-panel+.pl-panel{margin-top:16px;}
.pl-panel.hidden{display:none;}
.pl-side{position:sticky;top:calc(var(--topbar-h) + 74px);}
@media (max-width:1199px){
	.pl-layout{grid-template-columns:minmax(0,1fr);}
	.pl-side{position:static;}
}
/* la scheda descrittiva: titolo senza scatola, provenienza, chip, note */
.pl-head{text-align:left;}
input.pl-title{
	width:100%;padding:2px 0;background:transparent;border:none;border-radius:0;
	font-size:21px;font-weight:600;color:var(--text);
}
input.pl-title::placeholder{color:var(--text-muted);opacity:.45;font-weight:500;}
input.pl-title:focus{outline:none;}
.pl-from{margin-top:4px;font-size:12.5px;color:var(--text-muted);}
.pl-from b{display:block;margin-top:1px;font-size:13.5px;color:var(--brand-text);font-weight:600;}
.pl-fromsel{margin-top:10px;}
.pl-fromsel select{width:100%;}
.pl-headhint{margin-top:8px;font-size:11.5px;color:var(--text-muted);line-height:1.5;}
/* gli atleti sono chip: accese = assegnata. Niente checkbox in scatola. */
.pl-chips{margin-top:18px;}
.pl-chips>span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:8px;}
.pl-chips>div{display:flex;flex-wrap:wrap;gap:8px;}
.pl-chip{
	padding:6px 16px;border-radius:999px;border:1px solid var(--border);
	background:rgba(255,255,255,.04);color:var(--text-muted);font-size:12.5px;
	cursor:pointer;text-shadow:none;
	transition:background .15s,color .15s,border-color .15s;
}
.pl-chip:hover:not(.on){border-color:var(--brand-line);color:var(--brand-text);}
.pl-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;}
/* la nota è un appunto: filetto sopra, niente pannello */
textarea.pl-note{
	display:block;width:100%;margin-top:18px;padding:12px 0 0;
	background:transparent;border:none;border-top:1px solid var(--border);border-radius:0;
	resize:none;font-size:12.5px;line-height:1.55;color:var(--text-muted);
}
textarea.pl-note:focus{outline:none;color:var(--text);}
textarea.pl-note::placeholder{opacity:.55;}
/* ⚠️ Il prefisso `.m-field` è OBBLIGATORIO, non decorativo. Dentro un `.m-field`
   valgono `.m-field label{display:block;text-transform:uppercase}` e
   `.m-field input{width:100%;padding:9px 11px}`, entrambe 0,0,1,1: una `.pl-check`
   da sola (0,0,1,0) perde, e la casella di spunta viene fuori **87×20 con dieci
   pixel di padding** — misurata, non supposta. Con `.m-field` davanti si pareggia
   la specificità e si vince per ordine. La spunta in sé (20×20, `appearance:none`,
   segno SVG) resta quella dell'app: non si ridefinisce. */
.m-field label.pl-check{
	display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;
	text-transform:none;letter-spacing:0;font-weight:400;color:var(--text);margin:0;
}
.m-field .pl-check input[type="checkbox"]{
	width:20px;min-width:20px;height:20px;padding:0;margin:0;flex:none;
}

/* ── Il pager: NUMERO grande e frecce ai lati ──
   Solo l'essenziale: numero della settimana ben visibile, puntini per il salto
   diretto, aggiungi ed elimina. Clona / porta-in-agenda / etichetta: TOLTI su
   richiesta (mai usati).
   ⚠️ Il vuoto morto qui NON PUÒ esistere per costruzione: le serie sono righe a
   GRIGLIA con campi flessibili che riempiono la card (coi campi a larghezza fissa
   restava sempre un buco a destra — bocciato tre volte). */
/* il pager vive nel box stretto della colonna sinistra: gap tarato perché
   freccia + numero + freccia stiano nei ~320px utili */
.pl-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:2px 0;}
.pl-arr{
	flex:none;width:46px;height:46px;border-radius:50%;padding:0;
	display:flex;align-items:center;justify-content:center;
	background:var(--bg);border:1px solid var(--border);color:var(--text-muted);
	font-size:19px;line-height:1;cursor:pointer;text-shadow:none;
	transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.pl-arr:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.06);}
.pl-arr:disabled{opacity:.25;cursor:default;}
.pl-whead{text-align:center;min-width:0;flex:1;}
/* il numero è IL protagonista: etichetta piccola sopra, cifra grande sotto */
.pl-wnum{line-height:1;}
.pl-wnum span{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--text-muted);margin-bottom:4px;}
.pl-wnum b{font-size:40px;font-weight:700;color:var(--text);}
.pl-wnum small{font-size:15px;font-weight:600;color:var(--text-muted);margin-left:5px;}
/* i puntini: uno per settimana, la corrente piena, gli altri cliccabili */
.pl-dots{display:flex;justify-content:center;gap:6px;margin-top:9px;flex-wrap:wrap;}
.pl-dot{
	width:24px;height:24px;border-radius:50%;padding:0;flex:none;
	display:flex;align-items:center;justify-content:center;
	background:transparent;border:1px solid var(--border);color:var(--text-muted);
	font-size:11px;font-weight:600;cursor:pointer;text-shadow:none;
	transition:background .15s,color .15s,border-color .15s;
}
.pl-dot:hover{border-color:var(--brand-line);color:var(--brand-text);}
.pl-dot.on{background:var(--brand);border-color:var(--brand);color:#fff;cursor:default;}
/* le due sole azioni, sotto il pager: aggiungi (clona l'ultima) ed elimina */
.pl-wtools{
	display:flex;align-items:center;justify-content:center;gap:10px;
	margin:14px 0 0;
}
.pl-act{
	flex:none;width:36px;height:36px;border-radius:50%;padding:0;
	display:flex;align-items:center;justify-content:center;
	background:var(--bg);border:1px solid var(--border);color:var(--text-muted);
	font-size:14px;line-height:1;cursor:pointer;text-shadow:none;
	transition:background .15s,color .15s,border-color .15s;
}
.pl-act:hover{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-text);}
.pl-act.danger:hover{background:rgba(224,82,95,.12);border-color:rgba(224,82,95,.5);color:#f0808a;}
@media (max-width:600px){
	.pl-pager{gap:14px;}
}

/* ── Il cambio settimana SI VEDE ──
   Le card scivolano dalla direzione del movimento; con "Aggiungi" — dove la nuova
   settimana è il clone dell'ultima e senza animazione sembrava che il click non
   avesse fatto nulla — rimbalzano anche il numero grande e il puntino nuovo. */
.pl-anim-next .pl-cards{animation:plSlideNext .3s ease both;}
.pl-anim-prev .pl-cards{animation:plSlidePrev .3s ease both;}
.pl-anim-add  .pl-cards{animation:plSlideNext .3s ease both;}
.pl-anim-add  .pl-wnum b{display:inline-block;animation:plPop .5s cubic-bezier(.2,1.6,.4,1) both;}
.pl-anim-add  .pl-dot.on{animation:plPop .5s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes plSlideNext{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}}
@keyframes plSlidePrev{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:none;}}
@keyframes plPop{
	0%{transform:scale(.4);color:var(--brand-text);}
	60%{transform:scale(1.15);color:var(--brand-text);}
	100%{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
	.pl-anim-next .pl-cards,.pl-anim-prev .pl-cards,.pl-anim-add .pl-cards,
	.pl-anim-add .pl-wnum b,.pl-anim-add .pl-dot.on{animation:none;}
}

/* ── Gli esercizi: CARD, non tabella ──
   Ogni esercizio è una card col nome a sinistra e il massimale in evidenza a
   destra; le serie sotto, a griglia. Gli split sono separatori leggeri. */
/* il titolo dello split NON deve perdersi fra le card (richiesto): pastiglia
   PIENA di marca, testo più grande, riga che corre fino al bordo destro */
.pl-split{
	display:flex;align-items:center;gap:14px;margin:28px 0 12px;
	font-size:13.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.pl-split:first-of-type{margin-top:4px;}
.pl-split span{
	display:inline-block;padding:7px 18px;border-radius:999px;
	background:var(--brand);color:#fff;
}
/* la settimana corrente, accanto allo split: il selettore è a sinistra e
   scorrendo può essere lontano — qui si legge dove si sta scrivendo */
.pl-split em{font-style:normal;font-size:12px;font-weight:600;color:var(--brand-text);}
.pl-split::after{content:"";flex:1;height:1px;background:var(--brand-line);}
/* Più esercizi per riga dove ci stanno: la griglia si riempie da sola, e la CARD
   decide il proprio layout in base alla larghezza che le tocca (container query),
   non alla larghezza dello schermo. */
/* align-items di default (stretch): le card di una riga hanno TUTTE la stessa
   altezza — più armonico di una fila sfalsata (richiesto). Il "+ Serie" è
   ancorato in fondo, così nelle card corte lo spazio avanzato resta sotto le
   serie e i pulsanti della riga sono allineati fra loro. */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;margin-bottom:4px;}
.pl-excard{
	background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
	padding:11px 12px 9px;
	container-type:inline-size;
	display:flex;flex-direction:column;
}
.pl-excard .pl-sets{flex:1;display:flex;flex-direction:column;}
.pl-excard .pl-sets .tc-setadd{margin-top:auto;align-self:flex-start;}
.pl-exhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:9px;}
.pl-exname{min-width:0;}
.pl-exname b{display:block;font-size:14.5px;color:var(--text);}
.pl-exname span{display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.pl-exmax{flex:none;text-align:right;line-height:1.25;}
.pl-exmax b{display:block;font-size:14px;font-weight:600;color:var(--brand-text);}
.pl-exmax span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
.pl-exmax.none b{color:#e0b23c;}

/* ── Le serie: righe a GRIGLIA che riempiono la card ──
   n · rip · × · carico · unità · kg risolti · recupero · ✕. I tre campi sono
   frazioni flessibili: si dividono lo spazio qualunque sia la larghezza, quindi
   il vuoto morto non esiste. Lo slot dei kg risolti c'è sempre (anche vuoto):
   tiene le righe allineate in colonna. */
/* lo slot dei kg risolti (solo righe in %) si dimensiona sul contenuto: nelle
   righe in kg è vuoto e collassa a zero, niente buco al centro */
.pl-set{
	display:grid;align-items:center;gap:6px;margin-bottom:6px;
	grid-template-columns:18px minmax(0,0.9fr) 12px minmax(0,1.1fr) 56px minmax(0,auto) minmax(0,0.9fr) 28px;
}
.pl-sn{font-size:11px;color:var(--text-muted);text-align:right;}
.pl-set .pl-x{color:var(--text-muted);font-size:12px;text-align:center;}
.pl-set input.pn-reps,.pl-set input.pn-load,.pl-set input.pn-rest{width:100%;padding:7px 6px;text-align:center;}
.pl-set select.pn-unit{width:100%;padding:6px 2px 6px 8px;font-size:11.5px;background-position:right 4px center;}
.pl-set .m-ic{padding:2px 3px;justify-self:center;}
.pl-res{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-res b{color:var(--text);}
.pl-res i{font-style:normal;opacity:.75;}
/* il "+ Serie" allineato sotto le ripetizioni, non appeso al bordo */
.pl-sets .tc-setadd{margin-left:24px;}
/* ⚠️ CONTAINER query, non media query: con più card per riga la larghezza che
   conta è quella della CARD, non dello schermo. Sotto i 480px di card lo slot
   della % esce dalla riga e va a capo sotto i campi; i campi si compattano
   (col padding pieno "2'00" usciva troncato). Copre anche il telefono, dove la
   card è larga quanto lo schermo. */
@container (max-width:480px){
	.pl-set{grid-template-columns:16px minmax(0,1fr) 12px minmax(0,1.2fr) 52px minmax(0,1fr) 26px;}
	.pl-res{grid-column:2 / -1;grid-row:2;margin-top:-2px;}
	.pl-sets .tc-setadd{margin-left:0;}
	.pl-set input.pn-reps,.pl-set input.pn-load,.pl-set input.pn-rest{padding:7px 2px;font-size:13px;}
	.pl-set select.pn-unit{padding:6px 2px 6px 6px;}
}


/* ═══════════════════════════════════════════════════════════════════════════
	FOTO  (.ph-)  — sez. 11.1
	Foto di progresso: upload, griglia per data, confronto a coppie. Le immagini
	arrivano SEMPRE dall'endpoint autenticato, mai da file pubblici.
	═══════════════════════════════════════════════════════════════════════════ */
.ph-up{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.ph-up .m-field{margin:0;}
.ph-up-note{flex:1;min-width:220px;max-width:420px;}
.ph-day{margin-top:22px;}
.ph-day h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);}
.ph-day h3::first-letter{text-transform:uppercase;}
.ph-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.ph-card{
	position:relative;margin:0;border:2px solid var(--border);border-radius:0.25rem;
	overflow:hidden;cursor:pointer;background:var(--bg);
	transition:border-color .15s,transform .1s;
}
.ph-card:hover{border-color:var(--brand-line);}
.ph-card.sel{border-color:var(--brand);}
.ph-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;}
.ph-card figcaption{padding:7px 10px;font-size:11.5px;color:var(--text-muted);line-height:1.35;}
/* la spunta di selezione: visibile solo quando la card è selezionata */
.ph-check{
	position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;
	display:none;align-items:center;justify-content:center;
	background:var(--brand);color:#fff;font-size:12px;
}
.ph-card.sel .ph-check{display:flex;}
.ph-card .ph-del{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .15s;background:rgba(0,0,0,.55);}
.ph-card:hover .ph-del{opacity:1;}
/* la barra del confronto: fissa in basso quando ci sono due selezioni */
.ph-bar{
	position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:50;
	display:flex;gap:10px;padding:10px 14px;
	background:var(--surface);border:1px solid var(--brand-line);border-radius:999px;
	box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.ph-bar.hidden{display:none;}
/* il confronto: due colonne, a sinistra la più vecchia */
.ph-modal{
	position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,.72);padding:20px;
}
.ph-modal-box{
	width:100%;max-width:980px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;
	background:var(--surface);border:1px solid var(--border);border-radius:0.25rem;
}
.ph-modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);}
.ph-modal-h h3{margin:0;font-size:14px;font-weight:600;color:var(--text);}
.ph-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;overflow-y:auto;}
.ph-duo figure{margin:0;min-width:0;}
.ph-duo img{display:block;width:100%;max-height:64vh;object-fit:contain;background:var(--bg);border-radius:0.25rem;}
.ph-duo figcaption{margin-top:8px;text-align:center;font-size:12.5px;color:var(--text-muted);}
.ph-duo figcaption::first-letter{text-transform:uppercase;}
@media (max-width:600px){
	.ph-duo{grid-template-columns:1fr;}
	.ph-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}

/* ═══════════════════════════════════════════════════════════════════════════
	DASHBOARD PT  (.db-)  — sez. 11.2
	Il portafoglio atleti, ordinato "chi è fermo prima". Riusa .m-table/.m-person.
	═══════════════════════════════════════════════════════════════════════════ */
.db-summary{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:16px;}
.db-summary>div{display:flex;flex-direction:column;gap:2px;}
.db-summary b{font-size:23px;font-weight:600;color:var(--text);line-height:1.1;}
.db-summary span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.db-summary .warn b{color:#e0b23c;}
.db-summary a{color:var(--brand-text);}
/* il semaforo dell'ultima seduta: il colore si legge prima del numero */
.db-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px;}
.db-dot.ok{background:#6fcf8e;}
.db-dot.warn{background:#e0b23c;}
.db-dot.idle{background:#f0808a;}
.db-dot.never{background:var(--border);}
.db-dt{margin-left:6px;color:var(--text-muted);}
.db-plan{display:block;font-size:11.5px;color:var(--brand-text);margin-top:2px;}
.db-t th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);}
@media (max-width:991px){
	/* la tabella si scompone in blocchi etichettati, come le altre */
	.db-t thead{display:none;}
	.db-t,.db-t tbody,.db-t tr,.db-t td{display:block;width:auto;}
	.db-t tr{padding:10px 0;border-bottom:1px solid var(--border);}
	.db-t td{border:none;padding:4px 0;}
	.db-t td[data-lbl]::before{content:attr(data-lbl) ": ";font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
	.db-t td:first-child[data-lbl]::before{content:"";}
}

/* ═══════════════════════════════════════════════════════════════════════════
	CALORIE / PESO  (.tr-)  — sez. 11.1
	Kcal a barre e peso a linea sullo stesso grafico; statistiche del periodo
	sopra, selettore a pillole. Full-width (regola 9.3).
	═══════════════════════════════════════════════════════════════════════════ */
.tr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:16px;}
.tr-per{display:flex;gap:6px;flex-wrap:wrap;}
.tr-p{
	padding:6px 14px;border-radius:999px;border:1px solid var(--border);
	background:rgba(255,255,255,.04);color:var(--text-muted);font-size:12.5px;
	cursor:pointer;text-shadow:none;transition:background .15s,color .15s,border-color .15s;
}
.tr-p:hover:not(.on){border-color:var(--brand-line);color:var(--brand-text);}
.tr-p.on{background:var(--brand);border-color:var(--brand);color:#fff;cursor:default;}
.tr-stats{display:flex;gap:28px;flex-wrap:wrap;}
.tr-stats>div{display:flex;flex-direction:column;gap:2px;}
.tr-stats b{font-size:19px;font-weight:600;color:var(--text);line-height:1.1;}
.tr-stats span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.tr-delta{font-style:normal;}
.tr-delta.up{color:#f0808a;}     /* nel peso, su = attenzione e giù = verde: è il contrario dei carichi */
.tr-delta.down{color:#6fcf8e;}
.tr-chart{position:relative;height:380px;}
.tr-chart canvas{position:absolute;inset:0;}
@media (max-width:767px){.tr-chart{height:280px;}}

/* ═══════════════════════════════════════════════════════════════════════════
	RIEPILOGO  (.rp-)  — sez. 11.1
	La schermata d'ingresso: griglia di card riassuntive, ognuna cliccabile verso
	la sua sezione. Il bilancio energetico chiede QUI i dati mancanti (niente
	pagina profilo) e ospita l'inserimento dei passi per il NEAT.
	═══════════════════════════════════════════════════════════════════════════ */
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:stretch;}
.rp-card{
	background:var(--surface);border:1px solid var(--border);border-radius:0.25rem;
	padding:16px 18px;display:flex;flex-direction:column;min-width:0;
}
.rp-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.rp-h h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);}
.rp-h a{font-size:12px;color:var(--text-muted);white-space:nowrap;}
.rp-h a:hover{color:var(--brand-text);}
.rp-empty{font-size:13px;color:var(--text-muted);line-height:1.5;}
.rp-cta{margin-top:12px;}
/* il dato principale della card: numero/nome grande, dettaglio sotto */
.rp-big b{display:block;font-size:21px;font-weight:600;color:var(--text);line-height:1.2;}
.rp-big span{display:block;margin-top:3px;font-size:12px;color:var(--text-muted);}
.rp-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;}
.rp-stats div{display:flex;flex-direction:column;gap:2px;}
.rp-stats b{font-size:19px;font-weight:600;color:var(--text);line-height:1.1;}
.rp-stats span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.rp-list{display:flex;flex-direction:column;gap:10px;}
.rp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.rp-row>div{min-width:0;}
.rp-row b{display:block;font-size:13.5px;color:var(--text);}
.rp-row span{display:block;margin-top:2px;font-size:12px;color:var(--text-muted);}
.rp-kg{color:var(--brand-text);font-weight:600;}
.rp-delta{font-style:normal;font-weight:600;font-size:12px;}
.rp-delta.up{color:#6fcf8e;}
.rp-delta.down{color:#f0808a;}
.rp-stale{font-style:normal;color:#e0b23c;font-size:11.5px;}
.rp-spark{flex:1;min-height:64px;margin-top:12px;position:relative;}
.rp-spark canvas{position:absolute;inset:0;width:100%!important;height:100%!important;}
/* avanzamento della programmazione */
.rp-progress{height:8px;margin-top:14px;border-radius:999px;background:var(--bg);border:1px solid var(--border);overflow:hidden;}
.rp-progress i{display:block;height:100%;background:var(--brand);}
.rp-progress-l{margin-top:6px;font-size:12px;color:var(--text-muted);}
/* bilancio energetico: righe voce→valore, la normocalorica in evidenza */
.rp-energy{display:flex;flex-direction:column;gap:6px;}
.rp-energy>div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;}
.rp-energy span{color:var(--text-muted);}
.rp-energy b{color:var(--text);font-variant-numeric:tabular-nums;}
.rp-energy .rp-norm{margin-top:4px;padding-top:8px;border-top:1px solid var(--border);}
.rp-energy .rp-norm span{color:var(--brand-text);font-weight:600;}
.rp-energy .rp-norm b{color:var(--brand-text);font-size:15px;}
/* i passi: una riga campo+salva, con le kcal risolte accanto */
.rp-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.rp-steps label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.rp-steps input{width:96px;padding:7px 8px;text-align:center;}
.rp-steps-k{font-size:12px;color:var(--brand-text);}
/* il form dei dati mancanti */
.rp-form{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
/* il recupero dei giorni passati */
.rp-steps-past{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:var(--text-muted);cursor:pointer;}
.rp-steps-past:hover{color:var(--brand-text);}
/* ── La lightbox dei passi ── */
.rp-modal{
	position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,.62);padding:20px;
}
.rp-modal-box{
	width:100%;max-width:420px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;
	background:var(--surface);border:1px solid var(--border);border-radius:0.25rem;
}
.rp-modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);}
.rp-modal-h h3{margin:0;font-size:14px;font-weight:600;color:var(--text);}
/* le frecce sfogliano le settimane precedenti */
.rp-modal-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px 0;}
.rp-modal-nav span{font-size:12.5px;font-weight:600;color:var(--brand-text);}
.rp-modal-nav span::first-letter{text-transform:uppercase;}
.rp-modal-nav .m-ic[disabled]{opacity:.25;cursor:default;}
.rp-modal-b{padding:12px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.rp-modal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.rp-modal-row span{font-size:12.5px;color:var(--text-muted);}
.rp-modal-row span::first-letter{text-transform:uppercase;}
.rp-modal-row.today span{color:var(--brand-text);font-weight:600;}
.rp-modal-row input{width:96px;padding:7px 8px;text-align:center;flex:none;}
.rp-modal-f{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--border);}

/* ═══════════════════════════════════════════════════════════════════════════
	CARICHI  (.pg-)  — sez. 6.10
	Panoramica di tutti gli esercizi, poi il dettaglio di uno solo. Riusa i
	componenti dell'app (.m-table, .box.card, .m-btn); qui c'è solo lo specifico.
	═══════════════════════════════════════════════════════════════════════════ */

/* ── Panoramica ─────────────────────────────────────────────────────────── */
.pg-table tbody tr.pg-row{cursor:pointer;}
.pg-table tbody tr.pg-row:hover{background:var(--brand-soft);}
.pg-name strong{display:block;}
.pg-name span{display:block;font-size:11.5px;color:var(--text-muted);}
.pg-name em{
	display:inline-block;margin-top:4px;font-style:normal;font-size:10px;
	letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:20px;
	background:rgba(224,178,60,.14);color:#e0b23c;border:1px solid rgba(224,178,60,.35);
}
.pg-trend{font-variant-numeric:tabular-nums;font-weight:600;}
.pg-trend.up{color:#3ec98a;}
.pg-trend.down{color:#e06a6a;}
.pg-trend.flat{color:var(--text-muted);font-weight:400;}

/* ── I tre numeri in testa al dettaglio ─────────────────────────────────── */
.pg-bigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
/* due soli numeri: il massimale (uno) e il volume */
.pg-bigs.pg-due{grid-template-columns:repeat(2,minmax(0,1fr));}
.pg-big{display:flex;flex-direction:column;gap:2px;}
.pg-big span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.pg-big b{font-size:30px;font-weight:600;line-height:1.15;}
.pg-big b i{font-size:14px;font-style:normal;font-weight:400;color:var(--text-muted);}
.pg-big em{font-style:normal;font-size:12px;color:var(--text-muted);}

/* ── Due colonne: il grafico vuole larghezza, il contorno no ────────────── */
.pg-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;}
.pg-side{display:flex;flex-direction:column;gap:20px;}
.pg-h2{margin-top:26px;}
.pg-warn{margin-top:10px;}

/* ── Storico ────────────────────────────────────────────────────────────── */
.pg-sets{line-height:1.9;}
.pg-sets span{
	display:inline-block;margin:0 6px 0 0;padding:2px 8px;border-radius:3px;
	background:var(--surface-2,rgba(255,255,255,.05));font-size:12.5px;
	font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pg-sets span.pg-unrel{opacity:.55;border:1px dashed var(--border);}

/* ── Griglia dei massimali per ripetizioni ─────────────────────────────── */
.pg-grid th{width:74px;font-weight:400;color:var(--text-muted);background:none;}
.pg-grid td.num{width:96px;font-variant-numeric:tabular-nums;}
.pg-grid td.pg-pred{color:var(--text-muted);}
.pg-grid .pg-when{font-size:11.5px;color:var(--text-muted);text-align:right;}
.pg-scores th{font-weight:400;color:var(--text-muted);background:none;}
.pg-scores td.num b{font-size:17px;}

/* ── Il modulo del massimale ────────────────────────────────────────────── */
.pg-form{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.pg-form .pg-wide{grid-column:1/-1;}
.pg-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:16px;}
.pg-form-actions .m-msg{margin-right:auto;}

@media (min-width:1500px){
	/* la stessa soglia della scheda: sotto, il grafico si stringerebbe troppo */
	.pg-layout{grid-template-columns:minmax(0,1fr) 380px;}
}
@media (max-width:767px){
	.pg-bigs{grid-template-columns:minmax(0,1fr);gap:14px;}
	.pg-big b{font-size:24px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
	IL LIBRO DI RICETTE  (.bk-)  — sez. 6.9.ter
	Vista alternativa all'elenco: un volume aperto sulla scrivania scura.
	Regole del pezzo: qui dentro NON valgono le variabili del tema scuro — la
	carta è carta, l'inchiostro è inchiostro, e il viola di marca entra solo
	come accento (fregi, tacche, collegamenti). È l'unico punto del software in
	cui si usa un carattere con grazie: un ricettario si legge come un libro.
	═══════════════════════════════════════════════════════════════════════════ */

.bk{
	--carta:#f6f1e6;          /* pagina */
	--carta-piega:#e6dcc8;    /* ombra verso la costa */
	--inchiostro:#2a2119;
	--inchiostro-tenue:#6d6154;
	--filetto:#c9bda6;
	--pelle:#4a0a66;          /* copertina: il viola di marca, incupito */
	--pelle-chiara:#6c1091;
	font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
	color:var(--inchiostro);
}
/* ⚠️ Il colore va RIMESSO A EREDITARE elemento per elemento. Nel tema scuro
   `td`, `span`, `li`, `p`… hanno un colore proprio, più specifico del colore
   posato su `.bk`: senza questa riga gli ingredienti e i valori restavano
   grigio chiaro su carta, praticamente illeggibili. Il vecchio ricettario
   apriva il suo foglio di stile esattamente con lo stesso elenco.
   `inherit` e non un colore fisso, così le testatine restano tenui.

   ⚠️ L'elenco deve comprendere anche i CONTENITORI (`ul`, `table`, `tr`…), non
   solo il testo: con `inherit` la catena si spezza al primo anello mancante —
   era `ul` a restare chiaro, e i `li` ereditavano diligentemente da lui. */
.bk h1,.bk h2,.bk h3,.bk h4,.bk p,.bk ul,.bk ol,.bk li,.bk dl,.bk dt,.bk dd,
.bk table,.bk thead,.bk tbody,.bk tfoot,.bk tr,.bk td,.bk th,.bk caption,
.bk b,.bk strong,.bk span,.bk em,.bk i,.bk a{color:inherit;}

/* ── La scrivania e il volume ─────────────────────────────────────────────── */
.bk-desk{padding:6px 0 30px;}
.bk-book{
	position:relative;max-width:1180px;margin:0 auto;
	background:linear-gradient(150deg,var(--pelle-chiara),var(--pelle) 55%,#37074c);
	border-radius:6px;padding:16px;
	box-shadow:0 26px 60px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset;
}
/* filetto impresso sulla pelle, come una cornice a secco */
.bk-book:before{
	content:"";position:absolute;inset:7px;border-radius:4px;
	border:1px solid rgba(255,255,255,.16);pointer-events:none;
}
/* il segnalibro */
.bk-ribbon{
	position:absolute;top:-6px;right:52px;width:26px;height:74px;z-index:3;
	background:linear-gradient(180deg,#b8123f,#7d0a2a);border-radius:2px 2px 0 0;
	box-shadow:0 6px 12px rgba(0,0,0,.45);
}
.bk-ribbon:after{
	content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;
	background:linear-gradient(180deg,#7d0a2a,#7d0a2a);
	clip-path:polygon(0 0,100% 0,100% 100%,50% 62%,0 100%);
}

/* ── Le due pagine ────────────────────────────────────────────────────────── */
.bk-spread{
	position:relative;display:grid;grid-template-columns:1fr 1fr;
	background:var(--carta);border-radius:2px;overflow:hidden;
	perspective:2400px;
	box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.bk-page{
	position:relative;padding:44px 46px 54px;min-height:560px;
	display:flex;flex-direction:column;
}
/* la carta si incurva verso la costa: ombra sul bordo interno di ciascuna pagina */
.bk-page.bk-l{background:linear-gradient(90deg,#efe8d9 0,var(--carta) 7%,var(--carta) 88%,var(--carta-piega) 100%);}
.bk-page.bk-r{background:linear-gradient(270deg,#efe8d9 0,var(--carta) 7%,var(--carta) 88%,var(--carta-piega) 100%);}
/* la costa */
.bk-spread:after{
	content:"";position:absolute;top:0;bottom:0;left:50%;width:46px;
	transform:translateX(-50%);pointer-events:none;z-index:2;
	background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(90,70,40,.18) 42%,rgba(60,45,25,.34) 50%,rgba(90,70,40,.18) 58%,rgba(0,0,0,0) 100%);
}

/* ── Testatina e piede ───────────────────────────────────────────────────── */
.bk-head{
	display:flex;justify-content:space-between;gap:12px;
	font-size:10px;letter-spacing:.18em;text-transform:uppercase;
	color:var(--inchiostro-tenue);padding-bottom:18px;
}
/* il segnalibro scende sull'angolo in alto a destra: la testatina gli lascia posto */
.bk-page.bk-r .bk-head{flex-direction:row-reverse;padding-right:52px;}
.bk-foot{
	margin-top:auto;padding-top:22px;font-size:11px;letter-spacing:.14em;
	color:var(--inchiostro-tenue);
}
.bk-page.bk-r .bk-foot{text-align:right;}

/* ── Titolo del capitolo ─────────────────────────────────────────────────── */
/* ⚠️ Il colore va imposto: h2/h3 hanno un colore chiaro dal tema scuro e su
   carta sparirebbero. È successo davvero — il titolo si leggeva appena. */
.bk-title{
	position:relative;text-align:center;text-transform:uppercase;
	letter-spacing:.1em;font-size:26px;line-height:1.22;font-weight:700;
	margin:0 0 6px;padding:0 0 16px;color:var(--inchiostro);
	font-family:inherit;
}
/* i due filetti ai lati della losanga */
.bk-rule{
	display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 26px;
	color:var(--filetto);
}
.bk-rule:before,.bk-rule:after{content:"";height:1px;flex:1;background:var(--filetto);}
.bk-rule i{
	width:9px;height:9px;background:var(--brand);transform:rotate(45deg);
	display:block;opacity:.75;
}
.bk-sub{
	text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--inchiostro-tenue);margin:-18px 0 24px;
}

/* ── Ingredienti, con i punti di guida ───────────────────────────────────── */
.bk-h{
	font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
	color:var(--inchiostro-tenue);margin:0 0 12px;
}
.bk-ing{list-style:none;margin:0 0 6px;padding:0;}
.bk-ing li{display:flex;align-items:baseline;gap:6px;padding:5px 0;font-size:15px;}
.bk-ing li .bk-dots{flex:1;border-bottom:1px dotted var(--filetto);transform:translateY(-4px);}
.bk-ing li .bk-q{white-space:nowrap;font-variant-numeric:tabular-nums;}
.bk-ing li.bk-sub-rec{padding-left:14px;}
.bk-ing li em{font-style:normal;color:var(--inchiostro-tenue);font-size:12.5px;}
/* prefissata con `.bk` per battere l'ereditarietà rimessa qui sopra */
.bk .bk-mark{
	font-size:9px;letter-spacing:.1em;text-transform:uppercase;
	border:1px solid var(--brand-line);color:var(--brand-text);
	padding:1px 6px;border-radius:20px;margin-left:6px;white-space:nowrap;
}
.bk-yield{
	margin-top:14px;padding-top:12px;border-top:1px solid var(--filetto);
	font-size:13px;color:var(--inchiostro-tenue);
}
.bk-yield b{color:var(--inchiostro);}

/* ── Procedimento, col capolettera ───────────────────────────────────────── */
.bk-method{font-size:15.5px;line-height:1.72;margin:0;text-align:justify;hyphens:auto;}
.bk-method p{margin:0 0 .9em;text-indent:1.6em;}
.bk-method p:first-child{text-indent:0;}
.bk-method p:first-child:first-letter{
	float:left;font-size:3.4em;line-height:.78;font-weight:700;
	padding:.06em .09em 0 0;color:var(--brand);
}
.bk-empty{
	font-style:italic;color:var(--inchiostro-tenue);text-align:center;
	padding:26px 0;font-size:14px;
}

/* ── Valori nutrizionali ─────────────────────────────────────────────────── */
.bk-facts{margin-top:26px;padding-top:18px;border-top:1px solid var(--filetto);}
.bk-facts table{width:100%;border-collapse:collapse;font-size:13.5px;}
.bk-facts th{
	text-align:left;font-weight:400;color:var(--inchiostro-tenue);
	padding:4px 0;background:none;
}
.bk-facts td{text-align:right;padding:4px 0;font-variant-numeric:tabular-nums;}
.bk-facts tr.bk-kcal th,.bk-facts tr.bk-kcal td{
	font-weight:700;color:var(--inchiostro);border-bottom:1px solid var(--filetto);
	padding-bottom:8px;
}
/* l'intestazione delle due colonne: piccola e tenue, non è un dato */
.bk-facts tr.bk-cols td{
	color:var(--inchiostro-tenue);font-size:10px;letter-spacing:.16em;
	text-transform:uppercase;padding-bottom:10px;
}
.bk-facts caption{
	caption-side:top;text-align:left;font-size:10px;letter-spacing:.18em;
	text-transform:uppercase;color:var(--inchiostro-tenue);padding-bottom:8px;
}

/* ── L'indice ────────────────────────────────────────────────────────────── */
.bk-index{columns:2;column-gap:34px;font-size:14px;}
.bk-letter{break-inside:avoid;margin:0 0 16px;}
.bk-letter b{
	display:block;font-size:15px;letter-spacing:.1em;color:var(--brand);
	border-bottom:1px solid var(--filetto);padding-bottom:3px;margin-bottom:6px;
}
.bk-letter a{
	display:flex;align-items:baseline;gap:5px;color:var(--inchiostro);
	text-decoration:none;padding:3px 0;cursor:pointer;
}
.bk-letter a:hover{color:var(--brand);}
.bk-letter a .bk-dots{flex:1;border-bottom:1px dotted var(--filetto);transform:translateY(-4px);}
.bk-letter a .bk-p{font-size:12px;color:var(--inchiostro-tenue);font-variant-numeric:tabular-nums;}
.bk-front{display:flex;flex-direction:column;justify-content:center;text-align:center;height:100%;}
/* il frontespizio in cima all'indice: non centrato in verticale, sta in testa */
.bk-front.bk-flat{display:block;height:auto;}

/* ── La pagina che gira ──────────────────────────────────────────────────── */
.bk-flip{
	position:absolute;top:0;bottom:0;width:50%;z-index:4;
	transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.02,.28,1);
	pointer-events:none;
}
.bk-flip.bk-fwd{left:50%;transform-origin:left center;}
.bk-flip.bk-bwd{left:0;transform-origin:right center;}
.bk-flip.bk-go.bk-fwd{transform:rotateY(-180deg);}
.bk-flip.bk-go.bk-bwd{transform:rotateY(180deg);}
.bk-flip .bk-face{
	position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
	background:var(--carta);
}
.bk-flip .bk-back{transform:rotateY(180deg);}
/* l'ombra che scorre sulla pagina mentre gira */
.bk-flip .bk-face:after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,0) 38%);
}
.bk-flip.bk-bwd .bk-face:after{background:linear-gradient(270deg,rgba(0,0,0,.16),rgba(0,0,0,0) 38%);}

/* ── Comandi ─────────────────────────────────────────────────────────────── */
.bk-nav{
	display:flex;align-items:center;justify-content:center;gap:14px;
	margin:18px auto 0;font-family:var(--font);
}
.bk-nav .bk-pos{
	font-size:12px;color:var(--text-muted);min-width:120px;text-align:center;
	font-variant-numeric:tabular-nums;
}
.bk-turn{
	width:42px;height:42px;border-radius:50%;border:1px solid var(--border);
	background:var(--surface);color:var(--text);cursor:pointer;padding:0;
	display:inline-flex;align-items:center;justify-content:center;font-size:15px;
	transition:background .15s,border-color .15s,transform .15s;
}
.bk-turn:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand-line);transform:translateY(-1px);}
.bk-turn:disabled{opacity:.32;cursor:default;}
.bk-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:8px;font-family:var(--font);}

/* ── Responsive: sotto i 900px si legge una pagina per volta ─────────────── */
@media (max-width:899px){
	.bk-book{padding:10px;border-radius:4px;}
	.bk-ribbon{right:26px;width:20px;height:56px;}
	.bk-spread{grid-template-columns:1fr;}
	.bk-spread:after{display:none;}
	.bk-page{padding:26px 22px 34px;min-height:0;}
	.bk-page.bk-l,.bk-page.bk-r{background:var(--carta);}
	/* niente giravolte 3D su schermo stretto: le due pagine si impilano e si
	   leggono di seguito, che è la lettura giusta sul telefono */
	.bk-flip{display:none;}
	.bk-title{font-size:21px;}
	.bk-index{columns:1;}
	/* impilate, le due testatine dicono la stessa cosa due volte: la seconda va via.
	   E cade anche lo spazio lasciato al segnalibro, che qui non c'è. */
	.bk-page.bk-r .bk-head{display:none;}
	.bk-hint{display:none;}   /* senza tastiera, il suggerimento sulle frecce è rumore */
	.bk-front{padding:30px 0;}
	.bk-front .bk-big{font-size:28px;}
}
@media (max-width:479px){
	.bk-page{padding:22px 16px 28px;}
	.bk-method{font-size:14.5px;text-align:left;}
}