@charset "UTF-8";
@media (min-width: 768px) {
  .card { width: 420px; }
  #showbtn { right: 10px; }
}
#notifica {
		  position: fixed;
		  top: 20px;
		  right: 20px;
		  background-color: #333;
		  color: #fff;
		  padding: 12px 20px;
		  border-radius: 8px;
		  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
		  font-family: sans-serif;
		  display: none;
		  z-index: 9999;
		  animation: fadein 0.5s, fadeout 0.5s 2.5s;
		}

body {
	margin: 0;
	padding: 0;
	background-color: rgb(255, 255, 255);
	background-image: url('../img/login.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	height: 100vh;
	overflow: hidden;
}

.card {
  /* Dimensioni fluide */
  --p: clamp(16px, 2.5vw, 22px);
  --w-form: clamp(280px, 92vw, 380px);
  --h-form: auto;
  --input-px: 0.75rem;
  --input-py: 0.65rem;
  --submit-h: 38px;
  --blind-w: 64px;
  --space-y: 0.5rem;

  width: min(100%, var(--w-form));
  height: var(--h-form);
  max-width: 100%;
  max-height: min(90vh, 100dvh - 32px); /* evita overflow su mobile */
  border-radius: 16px;

  /* Glass effect */
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);

  /* Centro su desktop */
  position: fixed;
  inset: 50% auto auto 50%; /* top/left 50% */
  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;

  padding: var(--p);
  overflow: auto; /* scroll interno se serve */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;

  overscroll-behavior: contain; /* niente bounce */
}
.card::-webkit-scrollbar { display: none; }

/* Tablet: un filo più ampio/alto */

/* Accessibilità: meno movimento se l’utente lo preferisce */


.avatar {
	pointer-events: none;
	--sz-avatar: 166px;
	order: 0;
	width: var(--sz-avatar);
	min-width: var(--sz-avatar);
	max-width: var(--sz-avatar);
	height: var(--sz-avatar);
	min-height: var(--sz-avatar);
	max-height: var(--sz-avatar);
	border: 1px solid #707070;
	border-radius: 9999px;
	overflow: hidden;
	cursor: pointer;
	z-index: 2;
	perspective: 80px;
	position: relative;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	--sz-svg: calc(var(--sz-avatar) - 10px);
}

.avatar svg {
	position: absolute;
	transition:
		transform 0.2s ease-in,
		opacity 0.1s;
	transform-origin: 50% 100%;
	height: var(--sz-svg);
	width: var(--sz-svg);
	pointer-events: none;
}

.avatar svg#monkey {
	z-index: 1;
}

.avatar svg#monkey-hands {
	z-index: 2;
	transform-style: preserve-3d;
	transform: translateY(calc(var(--sz-avatar) / 1.25)) rotateX(-21deg);
}

.avatar::before {
	content: "";
	border-radius: 45%;
	width: calc(var(--sz-svg) / 3.889);
	height: calc(var(--sz-svg) / 5.833);
	border: 0;
	border-bottom: calc(var(--sz-svg) * (4 / 100)) solid #3c302a;
	bottom: 20%;

	position: absolute;
	transition: all 0.2s ease;
	z-index: 3;
}

.blind-check:checked~.avatar::before {
	width: calc(var(--sz-svg) * (9 / 100));
	height: 0;
	border-radius: 50%;
	border-bottom: calc(var(--sz-svg) * (10 / 100)) solid #3c302a;
}

.avatar svg#monkey .monkey-eye-r,
.avatar svg#monkey .monkey-eye-l {
	animation: blink 10s 1s infinite;
	transition: all 0.2s ease;
}

@keyframes blink {

	0%,
	2%,
	4%,
	26%,
	28%,
	71%,
	73%,
	100% {
		ry: 4.5;
		cy: 31.7;
	}

	1%,
	3%,
	27%,
	72% {
		ry: 0.5;
		cy: 30;
	}
}

.blind-check:checked~.avatar svg#monkey .monkey-eye-r,
.blind-check:checked~.avatar svg#monkey .monkey-eye-l {
	ry: 0.5;
	cy: 30;
}

.blind-check:checked~.avatar svg#monkey-hands {
	transform: translate3d(0, 0, 0) rotateX(0deg);
}

.avatar svg#monkey,
.avatar::before,
.avatar svg#monkey .monkey-eye-nose,
.avatar svg#monkey .monkey-eye-r,
.avatar svg#monkey .monkey-eye-l {
	transition: all 0.2s ease;
}

.blind-check:checked~.form:focus-within~.avatar svg#monkey,
.blind-check:checked~.form:focus-within~.avatar::before,
.blind-check:checked~.form:focus-within~.avatar svg#monkey .monkey-eye-nose,
.blind-check:checked~.form:focus-within~.avatar svg#monkey .monkey-eye-r,
.blind-check:checked~.form:focus-within~.avatar svg#monkey .monkey-eye-l {
	animation: none;
}

.form:focus-within~.avatar svg#monkey {
	animation: slick 3s ease infinite 1s;
	--center: rotateY(0deg);
	--left: rotateY(-4deg);
	--right: rotateY(4deg);
}

.form:focus-within~.avatar::before,
.form:focus-within~.avatar svg#monkey .monkey-eye-nose,
.blind-check:not(:checked)~.form:focus-within~.avatar svg#monkey .monkey-eye-r,
.blind-check:not(:checked)~.form:focus-within~.avatar svg#monkey .monkey-eye-l {
	ry: 3;
	cy: 35;
	animation: slick 3s ease infinite 1s;
	--center: translateX(0);
	--left: translateX(-0.5px);
	--right: translateX(0.5px);
}

@keyframes slick {

	0%,
	100% {
		transform: var(--center);
	}

	25% {
		transform: var(--left);
	}

	75% {
		transform: var(--right);
	}
}

.card label.blind_input {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  display: contents !important; 
}

.card label.blind_input:before {
	content: "";
	position: absolute;
	left: calc((var(--input-px) / 2) * -1);
	top: 0;
	height: 100%;
	width: 1px;
	background: #8f8f8f;
}

.card label.blind_input:hover {
	color: #262626;
	background-color: #f2f2f2;
}

.blind-check~label.blind_input span.show,
.blind-check:checked~label.blind_input span.hide {
	display: none;
}

.blind-check~label.blind_input span.hide,
.blind-check:checked~label.blind_input span.show {
	display: block;
}

.form {
  order: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;   
  gap: 0.75rem;         
  width: 100%;
}

.form .title {
	width: 100%;
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 1rem;
	padding-top: 0;
	padding-bottom: 1rem;
	color: #fff;
	border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.form .label_input {
    white-space: nowrap;
    font-size: 1rem;
    margin-top: calc(var(--space-y) / 2);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    display: inline;
    text-align: left;
    margin-right: auto;
    position: relative;
    z-index: 99;
    -webkit-user-select: none;
    user-select: none;
}

.form .input {
    resize: vertical;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    outline: none;
    padding: var(--input-py) var(--input-px);
    font-size: 1rem;
    width: 100%;
    color: #fff;
    margin: var(--space-y) 0;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.form .input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form .input:focus {
    border: 1px solid rgba(255, 255, 255, 0.6);
    outline: 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.form .frg_pss a {
    background-color: transparent;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.25s ease;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    float: right;
}

.form .frg_pss a:hover {
    color: #fff;
}

.form .submit {
    height: var(--submit-h);
    width: 100%;
    outline: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    letter-spacing: 0.25px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    margin: var(--space-y) 0 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.form .submit:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}


.form .submit:hover {
	background-image: linear-gradient(-180deg,
			rgba(255, 255, 255, 0.18) 0%,
			rgba(17, 17, 17, 0.08) 100%);
	border: 1px solid rgba(22, 22, 22, 0.2);
	color: #111;
}

#showbtn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.2s ease;
}

#showbtn:hover {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.btn-home {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.link-forgot {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.link-forgot:hover {
  color: #fff;
}
.field {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.form .input,
.form .submit {
  width: 100%;
  box-sizing: border-box; /* include padding e border nei 100% */
  display: block;
}



.btn-home:hover {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}


.blind-check:checked~.form .input[type="text"] {
	/* text-emphasis: circle; */
	-webkit-text-security: disc;
}
  .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }

  .brand-logo {
    height: 48px;              /* regola l’altezza del logo */
    width: auto;
    object-fit: contain;
    position: static !important;
    max-width: 240px;          /* evita che esploda in larghezza */
  }