/* ==========================================================================
	PiperNova - area riservata
	Stile-3.css del 13/09/2026: raccoglie gli stili che prima erano scritti
	dentro i tag delle pagine.
	Numerato: a ogni modifica si incrementa il numero del file e si aggiorna
	InizioPagina.asp, così i browser non servono la versione vecchia.
	I colori e i caratteri sono quelli del sito pubblico: l'area riservata deve
	sembrare la stessa casa, non un'altra applicazione.
	========================================================================== */

:root {
	--fondo:        #F7F5F0;
	--pannello:     #FFFFFF;
	--inchiostro:   #1A1916;
	--tenue:        #6B6860;
	--accento:      #1D4E3F;
	--accento-lieve:#E8F2EF;
	--accento-scuro:#153829;
	--bordo:        #E0DDD6;
	--allarme:      #A1342B;
	--allarme-lieve:#FBEDEB;
	--attenzione:   #8A6410;
	--ok:           #1D4E3F;
	--serif:        'DM Serif Display', Georgia, serif;
	--sans:         'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--mono:         ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

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

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	background: var(--fondo);
	color: var(--inchiostro);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

#Pagina {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

#Principale {
	flex: 1 0 auto;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 2rem 4rem 2rem;
}

/* ---------------------------------------------------------------- testata */
#Intestazione {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 245, 240, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--bordo);
	padding: 0 2rem;
	margin-bottom: 2.5rem;
}

.testata-interno {
	max-width: 1080px;
	margin: 0 auto;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 10px 0;
}

.marchio {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--inchiostro);
}
.marchio img { height: 30px; width: auto; }
.marchio .nome {
	font-family: var(--serif);
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}
.marchio .reparto {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tenue);
	border-left: 1px solid var(--bordo);
	padding-left: 10px;
	margin-left: 2px;
}

nav.menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
nav.menu a {
	font-size: 14px;
	color: var(--tenue);
	text-decoration: none;
	padding: 6px 14px;
	border-radius: 6px;
	transition: color .2s, background .2s;
}
nav.menu a:hover { color: var(--inchiostro); background: var(--bordo); }
nav.menu a.attivo { color: var(--accento); background: var(--accento-lieve); font-weight: 500; }
nav.menu .chi {
	font-size: 12px;
	color: var(--tenue);
	padding-left: 10px;
	margin-left: 4px;
	border-left: 1px solid var(--bordo);
}
nav.menu a.esci { color: var(--tenue); }

/* -------------------------------------------------------------- tipografia */
h2 {
	font-family: var(--serif);
	font-size: 1.9rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-bottom: 4px;
}
h3 {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tenue);
	margin: 2.2rem 0 .8rem 0;
}
a { color: var(--accento); }
p.tenue { color: var(--tenue); font-size: 14px; }

/* ----------------------------------------------------------------- schede */
.griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin: 1.2rem 0;
}

.scheda {
	background: var(--pannello);
	border: 1px solid var(--bordo);
	border-radius: 12px;
	padding: 1.1rem 1.2rem;
}
.scheda .etichetta {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tenue);
	margin-bottom: 6px;
}
.scheda .numero {
	font-family: var(--serif);
	font-size: 2.1rem;
	line-height: 1.15;
}
.scheda .numero .unita { font-size: 1rem; color: var(--tenue); margin-left: 4px; }
.scheda .nota { font-size: 12px; color: var(--tenue); margin-top: 4px; }

/* ------------------------------------------------------------------ tabelle */
table.dati {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--pannello);
	border: 1px solid var(--bordo);
	border-radius: 12px;
	overflow: hidden;
}
table.dati th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tenue);
	font-weight: 500;
	padding: 10px 14px;
	border-bottom: 1px solid var(--bordo);
	white-space: nowrap;
}
table.dati td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--bordo);
}
table.dati tr:last-child td { border-bottom: none; }
table.dati tr:hover td { background: var(--fondo); }
table.dati td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Una tabella larga non deve allargare la pagina: su un telefono si finirebbe a
	scorrere di lato tutto, testata compresa. Dentro questo involucro scorre solo
	la tabella. */
.tabella-scorrevole {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1rem 0;
}
.tabella-scorrevole > table.dati { margin: 0; }

/* ------------------------------------------------------------------- moduli */
.riquadro-modulo {
	max-width: 400px;
	margin: 6vh auto 0 auto;
	background: var(--pannello);
	border: 1px solid var(--bordo);
	border-radius: 14px;
	padding: 2.2rem 2rem 1.8rem 2rem;
}
.riquadro-modulo h2 { font-size: 1.6rem; }

.campo { margin: 1.1rem 0; }
.campo label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tenue);
	margin-bottom: 6px;
}
.campo input {
	width: 100%;
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: 8px;
	color: var(--inchiostro);
	font-size: 16px;
	font-family: var(--sans);
	padding: 12px 13px;
	outline: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.campo input:focus {
	background: var(--pannello);
	border-color: var(--accento);
	box-shadow: 0 0 0 3px rgba(29, 78, 63, 0.12);
}

.spunta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 1rem 0 1.3rem 0;
	cursor: pointer;
	user-select: none;
}
.spunta input {
	width: 20px;
	height: 20px;
	accent-color: var(--accento);
	cursor: pointer;
	flex: 0 0 auto;
}
.spunta span { font-size: 13px; color: var(--tenue); }
.spunta:hover span { color: var(--inchiostro); }

button.principale {
	width: 100%;
	background: var(--accento);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-family: var(--sans);
	font-weight: 500;
	padding: 14px;
	min-height: 48px;
	cursor: pointer;
	transition: background .2s;
}
button.principale:hover { background: var(--accento-scuro); }

.messaggio {
	border-radius: 8px;
	padding: 10px 13px;
	font-size: 14px;
	margin: 1rem 0;
	border: 1px solid;
}
.messaggio.errore { color: var(--allarme); border-color: #E9C4BF; background: var(--allarme-lieve); }
.messaggio.avviso { color: var(--attenzione); border-color: #E8DCBB; background: #FBF6E9; }

/* -------------------------------------------------------------------- piede */
#FinePagina {
	flex-shrink: 0;
	background: var(--inchiostro);
	color: rgba(255,255,255,0.55);
	padding: 1.4rem 2rem;
	font-size: 13px;
}
.piede-interno {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}
#FinePagina a { color: rgba(255,255,255,0.75); }

/* ------------------------------------------------------------- schermi corti */
@media (max-width: 640px) {
	#Principale { padding: 0 1.2rem 3rem 1.2rem; }
	#Intestazione { padding: 0 1.2rem; position: static; }
	.marchio .reparto { display: none; }
	h2 { font-size: 1.6rem; }
	.riquadro-modulo { margin-top: 2rem; padding: 1.6rem 1.4rem; }
	/* voci di menu più distanziate: col dito si sbaglia più facilmente */
	nav.menu a { padding: 9px 12px; }
	nav.menu .chi { padding-left: 8px; margin-left: 0; }
	.griglia { grid-template-columns: 1fr; }
}


/* ==========================================================================
	ORE
	Tutto qui sotto è pensato per il pollice, non per il mouse: bersagli
	grandi, niente menu a tendina dove basta un pulsante, e i numeri si
	cambiano con due tasti invece che digitando.
	========================================================================== */

/* ------------------------------------------------- gruppi di pulsanti-scelta */
.scelta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.scelta button {
	flex: 1 1 auto;
	min-width: 76px;
	min-height: 48px;
	background: var(--pannello);
	border: 1px solid var(--bordo);
	border-radius: 10px;
	color: var(--tenue);
	font-family: var(--sans);
	font-size: 15px;
	padding: 10px 14px;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.scelta button:hover { border-color: var(--accento); color: var(--inchiostro); }
.scelta button.acceso {
	background: var(--accento);
	border-color: var(--accento);
	color: #fff;
	font-weight: 500;
}
/* il notturno da solo, largo tutto: è una cosa sola e sta su una riga sua */
.scelta.unica button { flex: 1 1 100%; }

/* ------------------------------------------------------------ contaore */
.passo {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 4px;
}
.passo button {
	width: 56px;
	min-height: 52px;
	background: var(--pannello);
	border: 1px solid var(--bordo);
	border-radius: 10px;
	color: var(--inchiostro);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
}
.passo button:hover { border-color: var(--accento); }
.passo .valore {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pannello);
	border: 1px solid var(--bordo);
	border-radius: 10px;
	font-family: var(--serif);
	font-size: 1.7rem;
}
.passo .valore .unita { font-family: var(--sans); font-size: 13px; color: var(--tenue); margin-left: 6px; }

/* ------------------------------------------------------ elenco giornate */
.giorno {
	display: block;
	background: var(--pannello);
	border: 1px solid var(--bordo);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: var(--inchiostro);
}
.giorno:hover { border-color: var(--accento); }
.giorno .capo {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.giorno .quando { font-weight: 500; }
.giorno .quante { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; }
.giorno .cosa {
	color: var(--tenue);
	font-size: 13px;
	margin-top: 3px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.giorno .segni { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }

.segno {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--bordo);
	color: var(--tenue);
	background: var(--fondo);
}
.segno.cliente { border-color: var(--accento); color: var(--accento); background: var(--accento-lieve); }
.segno.fatturato { border-color: #CFE0D9; color: var(--accento); }
.segno.notte { border-color: #D5CEE4; color: #5B4B8A; background: #F3F0FA; }

/* ------------------------------------------------------------- intestazione */
.riga-titolo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.bottone {
	display: inline-block;
	background: var(--accento);
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 500;
	min-height: 46px;
	line-height: 24px;
}
.bottone:hover { background: var(--accento-scuro); color: #fff; }
.bottone.tenue {
	background: transparent;
	color: var(--tenue);
	border: 1px solid var(--bordo);
}
.bottone.tenue:hover { background: var(--pannello); color: var(--inchiostro); }

.campo textarea {
	width: 100%;
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: 8px;
	color: var(--inchiostro);
	font-size: 16px;
	font-family: var(--sans);
	line-height: 1.5;
	padding: 12px 13px;
	outline: none;
	resize: vertical;
	min-height: 96px;
}
.campo textarea:focus {
	background: var(--pannello);
	border-color: var(--accento);
	box-shadow: 0 0 0 3px rgba(29, 78, 63, 0.12);
}
.campo select {
	width: 100%;
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: 8px;
	color: var(--inchiostro);
	font-size: 16px;
	font-family: var(--sans);
	padding: 12px 13px;
	min-height: 48px;
}

.modulo-largo { max-width: 560px; }
.aiuto { font-size: 12px; color: var(--tenue); margin-top: 5px; }

/* il salva resta a portata di pollice anche con la tastiera aperta */
.salva { margin-top: 1.6rem; }
.salva button.principale { min-height: 52px; }

/* ==========================================================================
	STILI CHE PRIMA ERANO SCRITTI DENTRO I TAG
	========================================================================== */

.messaggio.ok { color: var(--accento); border-color: #CFE0D9; background: var(--accento-lieve); }

.scelta.filtri { margin-bottom: 16px; }
.bottone.tenue.acceso,
.bottone.tenue.acceso:hover {
	background: var(--accento);
	color: #fff;
	border-color: var(--accento);
}

.giorno .quante .unita { font-family: var(--sans); font-size: 12px; color: var(--tenue); }

p.nota-fondo { margin-top: 18px; }
p.nota-modulo { margin-top: 18px; font-size: 12px; }
p.rientra { margin-top: 22px; }
p.debug { text-align: center; font-size: 12px; }

.modulo-cancella { margin-top: 14px; }
button.principale.pericolo,
button.principale.pericolo:hover {
	background: transparent;
	color: var(--allarme);
	border: 1px solid #E9C4BF;
}