@charset "UTF-8";
/* ============================================================================
   style_base.css  —  Foglio di stile base del progetto
   ----------------------------------------------------------------------------
   Struttura del file:
     1.  Import dei font
     2.  Variabili di tema (:root)  ->  cambia qui i colori per ri-brandizzare
     3.  Reset / normalizzazione
     4.  Tipografia di base
     5.  Layout principale (testa, main, footer)
     6.  Logo
     7.  Separatori
     8.  Menu (cont_menu / box_ico / ico_menu)
     9.  Login mini (form di login nell'header)
    10.  Bottoni
    11.  Righe messaggio / errore
    12.  Classi utility (flex, colori testo, colori sfondo)
    13.  Media query (responsive)
    14.  Tema scuro automatico (prefers-color-scheme)

   Convenzioni delle classi usate nei file PHP:
     tcN   = "testo colore N"        (colore del testo)
     bgcN  = "background colore N"   (colore di sfondo)
     *T    = variante tenue/trasparente del colore
     *_50  = variante di sfondo al 50% (toni messaggio)
     fxC   = flex centrato        fxSb = flex space-between
   ========================================================================== */


/* ============================================================================
   1. FONT
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap');


/* ============================================================================
   2. VARIABILI DI TEMA
   Modifica SOLO questi valori per cambiare l'intero aspetto del sito.
   ========================================================================== */
:root{
	/* --- Palette principale --------------------------------------------- */
	--c1: #1f3a5f;          /* Colore 1 — brand primario (blu profondo)     */
	--c2: #2a9d8f;          /* Colore 2 — accento (verde acqua)             */
	--c3: #e23b4c;          /* Colore 3 — allarme / errore (rosso)          */

	/* --- Varianti tenui (sfondi leggeri, hover, badge) ------------------ */
	--c1-tenue: #e6ebf2;
	--c2-tenue: #e0f3f0;
	--c3-tenue: #fbe4e6;

	/* --- Varianti messaggio (sfondi al "50%") --------------------------- */
	--c1-50: #d3ece8;       /* sfondo messaggio positivo / informativo      */
	--c3-50: #f7d3d6;       /* sfondo messaggio di errore                   */

	/* --- Testo e superfici --------------------------------------------- */
	--testo:        #1c2733; /* testo principale                            */
	--testo-tenue:  #5b6b7a; /* testo secondario / didascalie               */
	--sfondo:       #f4f6f9; /* sfondo della pagina                         */
	--superficie:   #ffffff; /* sfondo di card, header, footer              */
	--bordo:        #dde3ea; /* linee e bordi sottili                       */

	/* --- Tipografia ----------------------------------------------------- */
	--font-titoli: 'Sora', 'Segoe UI', system-ui, sans-serif;
	--font-testo:  'Manrope', 'Segoe UI', system-ui, sans-serif;

	/* --- Raggi, ombre, spaziatura, transizioni -------------------------- */
	--raggio-s: 8px;
	--raggio-m: 12px;
	--raggio-l: 18px;

	--ombra-s: 0 1px 3px rgba(20, 35, 55, .08);
	--ombra-m: 0 6px 18px rgba(20, 35, 55, .10);
	--ombra-l: 0 14px 40px rgba(20, 35, 55, .14);

	--spazio:  1rem;
	--gap:     .9rem;

	--transizione: .22s ease;

	/* --- Larghezza massima del contenuto ------------------------------- */
	--larghezza-max: 100%;/*1180px;*/
}


/* ============================================================================
   3. RESET / NORMALIZZAZIONE
   ========================================================================== */
*,
*::before,
*::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

img,
picture,
svg{
	display: block;
	max-width: 100%;
	height: auto;
}

a{
	color: inherit;
	text-decoration: none;
	transition: color var(--transizione);
}

button,
input,
select,
textarea{
	font: inherit;
	color: inherit;
}

ul,
ol{
	list-style: none;
}

:focus-visible{
	outline: 2px solid var(--c2);
	outline-offset: 2px;
}

/* ============================================================================
   4. TIPOGRAFIA DI BASE
   ========================================================================== */
body{
	font-family: var(--font-testo);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--testo);
	background-color: var(--sfondo);
	/* sfondo con leggera profondità, non un piatto colore unico */
	background-image:
		radial-gradient(900px 500px at 100% -5%, rgba(42,157,143,.06), transparent 60%),
		radial-gradient(800px 500px at -5% 0%, rgba(31,58,95,.07), transparent 55%);
	background-attachment: fixed;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--font-titoli);
	font-weight: 600;
	line-height: 1.25;
	color: var(--c1);
	letter-spacing: -.01em;
}

h1{ font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }
h2{ font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
h3{ font-size: 1.35rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: .95rem; font-weight: 500; color: var(--testo-tenue); }

p{ margin-bottom: .8rem; }

a:hover{ color: var(--c2); }

strong, b{ font-weight: 700; }


/* ============================================================================
   5. LAYOUT PRINCIPALE
   ========================================================================== */

/* --- Header: testa (utente loggato) / testa1 (utente non loggato) ------- */
.testa,
.testa1{
	width: 100%;
	background-color: var(--superficie);
	box-shadow: var(--ombra-s);
	border-bottom: 1px solid var(--bordo);
	position: sticky;
	top: 0;
	z-index: 100;
	margin: 0 0 3em 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);

	padding: .7rem clamp(1rem, 4vw, 2.4rem);
}

/* leggera differenza visiva tra header loggato e non loggato */
.testa{
	border-top: 3px solid var(--c2);
}
.testa1{
	border-top: 3px solid var(--c1);
}

/* --- Contenuto centrale ------------------------------------------------- */
main{
	flex: 1 0 auto;            /* spinge il footer in fondo                  */
	width: 100%;
	max-width: var(--larghezza-max);
	margin-inline: auto;
	padding: clamp(1.2rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2rem);
}

/* --- Footer ------------------------------------------------------------- */
footer{
	flex-shrink: 0;
	background-color: var(--c1);
	color: #eef2f7;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;

	padding: 1.6rem clamp(1rem, 4vw, 2.4rem);
}

footer .testo h4{
	color: #ffffff;
	margin-bottom: .15rem;
}
footer .testo h5{
	color: rgba(255, 255, 255, .72);
}


/* ============================================================================
   6. LOGO
   ========================================================================== */
.logo{
	height: 10em;
	width: auto;
	object-fit: contain;
	transition: transform var(--transizione);
	margin: 0 0 -5em 0;
}
.logo:hover{
	transform: scale(1.04);
}

.logo_piede{
	height: 56px;
	width: auto;
	object-fit: contain;
	/* il logo nel footer è su sfondo scuro: lo schiariamo se serve */
	filter: brightness(0) invert(1);
	opacity: .92;
}


/* ============================================================================
   7. SEPARATORI
   .separatore       -> linea/divisore di base (sottile)
   .separatore.bgcXX -> divisore colorato e più marcato
   ========================================================================== */
.separatore{
	width: 100%;
	height: 1px;
	background-color: var(--bordo);
	border: 0;
}

/* quando il separatore riceve un colore di sfondo diventa una banda visibile */
.separatore.bgc1T,
.separatore.bgc2T,
.separatore.bgc1_50,
.separatore.bgc3_50{
	height: 4px;
}


/* ============================================================================
   8. MENU  (menu_mini.php)
   ========================================================================== */
.cont_menu{
	width: 100%;
	max-width: var(--larghezza-max);
	margin-inline: auto;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;

	padding: .6rem clamp(1rem, 4vw, 2rem);
}

/* casella icona del menu */
.box_ico{
	/*width: 52px;
	height: 52px;*/
	margin: 0 0.5em;
	border-radius: var(--raggio-m);
	background-color: var(--superficie);
	border: 1px solid var(--bordo);
	box-shadow: var(--ombra-s);
	cursor: pointer;
	transition: transform var(--transizione),
				box-shadow var(--transizione),
				background-color var(--transizione);
}

.box_ico:hover{
	transform: translateY(-2px);
	box-shadow: var(--ombra-m);
	background-color: var(--c2-tenue);
}

/* la pagina attiva riceve la classe bgc2T direttamente nel PHP */
.box_ico.bgc2T{
	background-color: var(--c2-tenue);
	border-color: var(--c2);
}

.ico_menu{
	width: 4em;
	height: 4em;
	object-fit: contain;
}


/* ============================================================================
   9. LOGIN MINI  (login_mini.php incluso nell'header)
   ========================================================================== */
.cont_login{
	display: flex;
	align-items: center;
}

/* il form vero e proprio */
.cont_login_mini{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gap);
}

/* riga con i campi (username / password / bottone) */
.cont_login_mini_interno{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .55rem;
}

/* singola cella del form (campo o info) */
.cont_login_mini .elemento{
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* campi di testo / password */
.cont_login_mini input[type="text"],
.cont_login_mini input[type="password"]{
	width: 100%;
	min-width: 150px;
	padding: .55rem .8rem;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-s);
	background-color: var(--sfondo);
	transition: border-color var(--transizione),
				box-shadow var(--transizione),
				background-color var(--transizione);
}

.cont_login_mini input::placeholder{
	color: var(--testo-tenue);
	opacity: .85;
}

.cont_login_mini input:focus{
	outline: none;
	border-color: var(--c2);
	background-color: var(--superficie);
	box-shadow: 0 0 0 3px var(--c2-tenue);
}

/* versione "pagina" del box di login (home.php) */
.cont_login_p{
	background-color: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-l);
	box-shadow: var(--ombra-m);
	padding: clamp(1.4rem, 4vw, 2.4rem);
}


/* ============================================================================
   10. BOTTONI
   .bottone                -> stile base (usa il colore accento c2)
   .style_btn_aggiuntivo   -> piccoli aggiustamenti per i bottoni dell'header
   .colore_3               -> variante rossa (es. LOGOUT)
   ========================================================================== */
.bottone{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;

	font-family: var(--font-testo);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	white-space: nowrap;

	margin: 0 1em;
	padding: .62rem 1.25rem;
	border: 0;
	border-radius: var(--raggio-s);
	cursor: pointer;
	user-select: none;

	color: #ffffff;
	background-color: var(--c2);
	box-shadow: var(--ombra-s);

	transition: transform var(--transizione),
				box-shadow var(--transizione),
				background-color var(--transizione),
				filter var(--transizione);
}

.bottone:hover{
	filter: brightness(1.07);
	transform: translateY(-1px);
	box-shadow: var(--ombra-m);
}

.bottone:active{
	transform: translateY(0);
	box-shadow: var(--ombra-s);
	filter: brightness(.96);
}

.bottone:disabled{
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* bottoni compatti dentro l'header */
.style_btn_aggiuntivo{
	padding: .5rem 1rem;
	font-size: .9rem;
}

/* variante rossa (LOGOUT) */
.bottone.colore_3{
	background-color: var(--c3);
}


/* ============================================================================
   11. RIGHE MESSAGGIO / ERRORE  (testa.php)
   $_SESSION['errore'] != 0  -> errore  (toni rossi:  bgc3_50 / tc3)
   $_SESSION['errore'] == 0  -> ok/info (toni verdi:  bgc1_50 / tc2)
   ========================================================================== */
.cont-riga-errore{
	width: 100%;
	max-width: var(--larghezza-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.riga{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: var(--raggio-m);
	padding: .85rem 1.1rem;
	font-weight: 500;
	flex-direction: row;
    flex-wrap: wrap;
	width: calc( 100% - 2.2rem);
}

.riga-bottone{
	display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    border-radius: var(--raggio-m);
    padding: .85rem 1.1rem;
    font-weight: 500;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 2.2rem);
}
.riga-errore{
	border: 1px solid transparent;
	animation: comparsa-messaggio .35s ease both;
}

/* il bordo segue il tipo di messaggio */
.riga-errore.bgc3_50{ border-color: rgba(226, 59, 76, .35); }
.riga-errore.bgc1_50{ border-color: rgba(42, 157, 143, .35); }

#risposta{
	width: 100%;
}

@keyframes comparsa-messaggio{
	from{ opacity: 0; transform: translateY(-6px); }
	to  { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
   12. gruppo pagina fieldset
   ========================================================================== */
fieldset{
	width: 100%;
	margin: 1em;
	padding: 0.5em;
	border: 1px solid var(--c2);
    border-radius: 1em;
}

fieldset .riga{
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
fieldset .riga .elemento{
	margin: 0 0.2em;
}



/* ============================================================================
   12. CLASSI UTILITY
   ========================================================================== */

/* --- Flex helper -------------------------------------------------------- */
.fxC{                         /* contenuto centrato su entrambi gli assi   */
	display: flex;
	align-items: center;
	justify-content: center;
}
.fxSb{                        /* spazio distribuito tra gli elementi       */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}

/* --- Colori del testo --------------------------------------------------- */
.tc1{ color: var(--c1); font-weight: 600; }
.tc2{ color: var(--c2); font-weight: 600; }
.tc3{ color: var(--c3); font-weight: 600; }

/* --- Colori di sfondo (pieni) ------------------------------------------ */
.bgc1{ background-color: var(--c1); color: #fff; }
.bgc2{ background-color: var(--c2); color: #fff; }
.bgc3{ background-color: var(--c3); color: #fff; }

/* --- Colori di sfondo (varianti tenui *T) ------------------------------ */
.bgc1T{ background-color: var(--c1-tenue); }
.bgc2T{ background-color: var(--c2-tenue); }
.bgc3T{ background-color: var(--c3-tenue); }

/* --- Colori di sfondo (varianti messaggio *_50) ------------------------ */
.bgc1_50{ background-color: var(--c1-50); color: var(--c1); }
.bgc3_50{ background-color: var(--c3-50); color: var(--c3); }


/* ============================================================================
   13. RESPONSIVE  —  MEDIA QUERY
   ========================================================================== */

/* --- Tablet (<= 900px) -------------------------------------------------- */
@media (max-width: 900px){
	.cont_login_p{
		width: 86% !important;       /* annulla width/margin inline di home  */
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* --- Smartphone (<= 640px) --------------------------------------------- */
@media (max-width: 640px){

	body{ font-size: 15px; }

	/* header in colonna: logo sopra, login sotto */
	.testa,
	.testa1{
		flex-direction: column;
		align-items: stretch;
		gap: .8rem;
		padding: .8rem 1rem;
	}

	.logo{
		height: 44px;
		margin-inline: auto;
	}

	.cont_login{
		width: 100%;
		justify-content: center;
	}

	/* il form di login si impila in verticale */
	.cont_login_mini,
	.cont_login_mini_interno{
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.cont_login_mini .elemento{
		width: 100%;
	}

	.cont_login_mini .bottone{
		width: 100%;
	}

	.cont_login_mini input[type="text"],
	.cont_login_mini input[type="password"]{
		min-width: 0;
	}

	/* footer in colonna e centrato */
	footer{
		flex-direction: column;
		text-align: center;
		gap: .7rem;
	}

	/* menu icone centrato */
	.cont_menu{
		justify-content: center;
	}

	.cont_login_p{
		width: 100% !important;
	}
}

/* --- Schermi molto piccoli (<= 380px) ---------------------------------- */
@media (max-width: 380px){
	main{ padding-inline: .8rem; }
	.box_ico{ width: 48px; height: 48px; }
}

/* --- Riduzione del movimento (accessibilità) --------------------------- */
@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* ============================================================================
   14. TEMA SCURO AUTOMATICO
   Si attiva se l'utente ha il sistema operativo in modalità scura.
   Ridefinisce solo le variabili: tutto il resto si adatta da solo.
   ========================================================================== */
@media (prefers-color-scheme: dark){
	:root{
		--c1: #5b8fd6;
		--c2: #36c2b0;
		--c3: #f0586a;

		--c1-tenue: #1e2a3d;
		--c2-tenue: #16302e;
		--c3-tenue: #3a2125;

		--c1-50: #1c3330;
		--c3-50: #3d2227;

		--testo:        #e7ecf2;
		--testo-tenue:  #9aa7b6;
		--sfondo:       #0f141b;
		--superficie:   #1a212c;
		--bordo:        #2c3744;

		--ombra-s: 0 1px 3px rgba(0, 0, 0, .45);
		--ombra-m: 0 6px 18px rgba(0, 0, 0, .55);
		--ombra-l: 0 14px 40px rgba(0, 0, 0, .65);
	}

	body{
		background-image:
			radial-gradient(900px 500px at 100% -5%, rgba(54,194,176,.10), transparent 60%),
			radial-gradient(800px 500px at -5% 0%, rgba(91,143,214,.12), transparent 55%);
	}

	footer{
		background-color: #0b0f15;
	}

	/* su tema scuro il logo del footer di solito è già chiaro */
	.logo_piede{
		filter: none;
	}

	.bottone{
		color: #0f141b;
	}
}