/* ============================================================================= Nazarko Nails · Dashboard admin CSS scritto a mano, nessun framework, nessuna build. Mobile-first: l'admin la apre spesso dal telefono mentre risponde su WhatsApp. ========================================================================= */ /* --- Design tokens --------------------------------------------------------- */ :root { --font-testo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-titolo: var(--font-testo); /* niente serif da nessuna parte */ /* Palette: rosa cipria + lavanda, tono curato da nail salon (non infantile) */ --colore-primario: #ec4899; --colore-primario-scuro: #be185d; --colore-secondario: #f9a8d4; --colore-accento: #8b5cf6; --colore-sfondo: #fdf2f85e; --colore-superficie: #ffffff; --colore-testo: #000000; --colore-testo-soft: #6b7280; --colore-muted: #f6eef4; --colore-bordo: #f3d9e6; --colore-successo: #15803d; --colore-successo-bg: #ecfdf3; --colore-successo-bordo: #a7e3bd; --colore-pericolo: #dc2626; --colore-pericolo-bg: #fef2f2; --colore-pericolo-bordo: #f3b4b4; /* Stato "in attesa": ambra caldo per righe/card/flash (come prima); SOLO il badge "In attesa" e il pallino del calendario sono gialli. */ --colore-attesa: #b45309; --colore-attesa-bg: #fef6e7; --colore-attesa-bordo: #f3c778; --colore-attesa-badge: #eab308; /* giallo pieno: solo il badge */ --colore-attesa-badge-testo: #422006; --raggio-sm: 8px; --raggio-md: 14px; --raggio-lg: 22px; /* Tinta delle ombre e sfondo pagina: li ridefiniscono i temi colore (vedi in fondo al blocco "Temi colore"). */ --ombra-tinta: 131, 24, 67; --header-bg: rgba(255, 250, 253, 0.72); --sfondo-body: radial-gradient(70rem 55rem at 12% -12%, rgba(244, 114, 182, 0.11), transparent 62%), radial-gradient(60rem 50rem at 105% 5%, rgba(167, 139, 250, 0.09), transparent 58%), radial-gradient(55rem 45rem at 50% 115%, rgba(251, 207, 232, 0.16), transparent 60%), #fefafc; --ombra-sm: 0 1px 3px rgba(var(--ombra-tinta), 0.08); --ombra-md: 0 6px 20px rgba(var(--ombra-tinta), 0.10); --ombra-lg: 0 16px 40px rgba(var(--ombra-tinta), 0.14); --spazio-1: 4px; --spazio-2: 8px; --spazio-3: 12px; --spazio-4: 16px; --spazio-5: 24px; --spazio-6: 32px; --spazio-7: 48px; color-scheme: light; } /* --- Temi colore ---------------------------------------------------------- L'admin sceglie il tema dai pallini in alto a destra: la scelta finisce in localStorage (per-dispositivo) e mette data-tema="..." su . Ogni tema ridefinisce solo i token: nessun'altra regola cambia. "rosa" = default (nessun attributo). */ :root[data-tema="blu"] { --colore-primario: #2563eb; --colore-primario-scuro: #1d4ed8; --colore-secondario: #93c5fd; --colore-accento: #0891b2; --colore-sfondo: #f2f7ff5e; --colore-muted: #eef3fb; --colore-bordo: #d7e3f5; --ombra-tinta: 30, 58, 138; --header-bg: rgba(248, 251, 255, 0.74); --sfondo-body: radial-gradient(70rem 55rem at 12% -12%, rgba(59, 130, 246, 0.10), transparent 62%), radial-gradient(60rem 50rem at 105% 5%, rgba(14, 165, 233, 0.08), transparent 58%), radial-gradient(55rem 45rem at 50% 115%, rgba(191, 219, 254, 0.16), transparent 60%), #fbfcff; } :root[data-tema="grigio"] { --colore-primario: #475569; --colore-primario-scuro: #334155; --colore-secondario: #cbd5e1; --colore-accento: #0d9488; --colore-sfondo: #f8fafc5e; --colore-muted: #f1f5f9; --colore-bordo: #e2e8f0; --ombra-tinta: 30, 41, 59; --header-bg: rgba(250, 251, 252, 0.78); --sfondo-body: radial-gradient(70rem 55rem at 12% -12%, rgba(100, 116, 139, 0.10), transparent 62%), radial-gradient(60rem 50rem at 105% 5%, rgba(148, 163, 184, 0.08), transparent 58%), radial-gradient(55rem 45rem at 50% 115%, rgba(203, 213, 225, 0.16), transparent 60%), #fbfcfd; } :root[data-tema="verde"] { --colore-primario: #059669; --colore-primario-scuro: #047857; --colore-secondario: #6ee7b7; --colore-accento: #0d9488; --colore-sfondo: #f0fdf95e; --colore-muted: #ecfdf5; --colore-bordo: #cdeede; --ombra-tinta: 6, 78, 59; --header-bg: rgba(247, 254, 251, 0.74); --sfondo-body: radial-gradient(70rem 55rem at 12% -12%, rgba(16, 185, 129, 0.10), transparent 62%), radial-gradient(60rem 50rem at 105% 5%, rgba(45, 212, 191, 0.08), transparent 58%), radial-gradient(55rem 45rem at 50% 115%, rgba(167, 243, 208, 0.16), transparent 60%), #fafefb; } :root[data-tema="viola"] { --colore-primario: #7c3aed; --colore-primario-scuro: #6d28d9; --colore-secondario: #c4b5fd; --colore-accento: #db2777; --colore-sfondo: #f6f4ff5e; --colore-muted: #f5f3ff; --colore-bordo: #e6e0fb; --ombra-tinta: 76, 29, 149; --header-bg: rgba(250, 249, 255, 0.74); --sfondo-body: radial-gradient(70rem 55rem at 12% -12%, rgba(139, 92, 246, 0.10), transparent 62%), radial-gradient(60rem 50rem at 105% 5%, rgba(219, 39, 119, 0.07), transparent 58%), radial-gradient(55rem 45rem at 50% 115%, rgba(196, 181, 253, 0.16), transparent 60%), #fdfbff; } /* Scelta tema: iconcina "tavolozza" nell'header che apre un mini pannello */ .tema-menu { position: relative; display: inline-flex; } .tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--colore-testo); border-radius: var(--raggio-sm); -webkit-appearance: none; appearance: none; } .tema-toggle:hover { color: var(--colore-primario); background: rgba(0, 0, 0, 0.04); } .tema-toggle .icona { width: 20px; height: 20px; } .tema-pop[hidden] { display: none; } .tema-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: flex; gap: 8px; padding: 10px; background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md); box-shadow: var(--ombra-md); } .tema-dot { width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); padding: 0; cursor: pointer; transition: transform .12s ease; -webkit-appearance: none; appearance: none; } .tema-dot:hover { transform: scale(1.15); } .tema-dot.attivo { box-shadow: 0 0 0 2px var(--colore-primario); transform: scale(1.1); } .tema-rosa { background: #ec4899; } .tema-blu { background: #2563eb; } .tema-grigio { background: #64748b; } .tema-verde { background: #059669; } .tema-viola { background: #7c3aed; } /* --- Reset minimo ----------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: #ffffff; } /* base opaca sotto lo sfondo semi-trasparente */ body { /* sfondo "liquido": fa da sfondo all'effetto vetro delle card. Lo colora il tema scelto (--sfondo-body). */ background: var(--sfondo-body); background-attachment: fixed; color: var(--colore-testo); font-family: var(--font-testo); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3 { font-family: var(--font-testo); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--spazio-2); color: var(--colore-testo); } p { margin: 0 0 var(--spazio-3); } /* Le scritte (link compresi) restano sempre nere: non seguono il tema colore scelto. Bottoni, icone e stati attivi hanno le loro regole piu' specifiche e restano colorati come prima. */ a { color: var(--colore-testo); } img, svg { max-width: 100%; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--colore-muted); padding: 1px 5px; border-radius: var(--raggio-sm); } /* --- Icone --- */ .icona { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; } /* --- Header / navigazione --------------------------------------------------- */ .header-app { background: var(--header-bg); backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7); border-bottom: 1px solid rgba(255, 255, 255, 0.6); position: sticky; top: 0; z-index: 20; box-shadow: 0 4px 20px rgba(var(--ombra-tinta), 0.09); } .header-riga { display: flex; align-items: center; justify-content: space-between; padding: var(--spazio-3) var(--spazio-4); } .brand { display: flex; align-items: center; gap: var(--spazio-2); font-family: var(--font-titolo); font-weight: 700; font-size: 1.25rem; color: var(--colore-testo); text-decoration: none; } .brand-icona { color: var(--colore-primario); width: 1.3em; height: 1.3em; } .brand-emoji { font-size: 1.15rem; line-height: 1; } .link-logout { display: flex; align-items: center; gap: var(--spazio-1); color: var(--colore-testo); text-decoration: none; font-size: 0.9rem; padding: var(--spazio-1) var(--spazio-2); border-radius: var(--raggio-sm); border: 1px solid var(--colore-bordo); background: var(--colore-superficie); } .link-logout .icona { color: var(--colore-primario); } .link-logout:hover { background: var(--colore-muted); border-color: var(--colore-primario); color: var(--colore-primario); } .nav-app { display: flex; gap: var(--spazio-1); padding: 0 var(--spazio-2) var(--spazio-2); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-app::-webkit-scrollbar { display: none; } .nav-app a { display: flex; align-items: center; gap: var(--spazio-1); white-space: nowrap; flex: 0 0 auto; /* niente restringimento: i voci non si accavallano */ padding: var(--spazio-2) var(--spazio-3); border-radius: var(--raggio-md); color: var(--colore-testo-soft); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background 150ms ease, color 150ms ease; } .nav-app a:hover { background: var(--colore-muted); color: var(--colore-testo); } .nav-app a.attivo { background: var(--colore-primario); color: #ffffff; } /* --- Contenuto principale ---------------------------------------------------- */ .contenuto { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: var(--spazio-5) var(--spazio-4) var(--spazio-7); } .contenuto-login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spazio-4); min-height: calc(100vh - 60px); max-width: 460px; } /* pagina login: il messaggio (es. "Sessione terminata") va SOTTO la scheda */ .contenuto-login .scheda-login { order: 1; } .contenuto-login .flash-pila { order: 2; margin: 0; width: 100%; } .footer-app { text-align: center; font-size: 0.8rem; color: var(--colore-testo-soft); padding: var(--spazio-5); } .solo-desktop { display: none; } @media (min-width: 640px) { .solo-desktop { display: inline; } } /* --- Messaggi flash ----------------------------------------------------------- */ .flash-pila { display: flex; flex-direction: column; gap: var(--spazio-2); margin-bottom: var(--spazio-5); } .flash { padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio-md); font-size: 0.92rem; border: 1px solid transparent; } .flash-success { background: var(--colore-successo-bg); color: var(--colore-successo); border-color: var(--colore-successo-bordo); } .flash-error { background: var(--colore-pericolo-bg); color: var(--colore-pericolo); border-color: var(--colore-pericolo-bordo); } .flash-warning { background: var(--colore-attesa-bg); color: var(--colore-attesa); border-color: var(--colore-attesa-bordo); } /* --- Sezioni ------------------------------------------------------------------ */ .sezione { margin-bottom: var(--spazio-7); } .titolo-sezione { display: flex; align-items: center; gap: var(--spazio-2); font-family: var(--font-testo); font-weight: 700; letter-spacing: -0.01em; font-size: 1.15rem; margin-bottom: var(--spazio-4); } .titolo-icona { color: var(--colore-primario); } .sottotitolo { font-family: var(--font-testo); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--colore-testo-soft); margin: var(--spazio-5) 0 var(--spazio-3); } .stato-vuoto { background: var(--colore-superficie); border: 1px dashed var(--colore-bordo); border-radius: var(--raggio-md); padding: var(--spazio-5); text-align: center; color: var(--colore-testo-soft); } .nota-piccola { font-size: 0.82rem; color: var(--colore-testo-soft); } .nota-piccola-inline { font-size: 0.85em; color: var(--colore-testo-soft); } /* --- Statistiche in alto -------------------------------------------------------- */ .stat-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spazio-3); margin-bottom: var(--spazio-3); } .stat-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(253, 244, 249, 0.5)); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.78); border-radius: var(--raggio-lg); padding: var(--spazio-4); box-shadow: 0 8px 24px rgba(190, 24, 93, 0.07), inset 0 1px 0 rgba(255,255,255,0.8); display: flex; flex-direction: column; gap: var(--spazio-1); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .stat-card { background: var(--colore-superficie); } } .stat-numero { font-family: var(--font-titolo); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--colore-testo); } .stat-numero-piccolo { font-size: 1rem; line-height: 1.3; } /* Scheda cliente: statistiche minimal — una riga di numeri, niente card */ .stat-minimal { list-style: none; margin: var(--spazio-3) 0 var(--spazio-5); padding: var(--spazio-3) 0; border-top: 1px solid var(--colore-bordo); border-bottom: 1px solid var(--colore-bordo); display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-5); font-size: 0.88rem; color: var(--colore-testo-soft); } .stat-minimal li { white-space: nowrap; } .stat-minimal b { color: var(--colore-testo); font-weight: 700; font-size: 1.05rem; } /* la data "Ultimo": un filo più piccola dei numeri e non in grassetto */ .stat-minimal .stat-data { color: var(--colore-testo); font-weight: 400; font-size: 0.95rem; } .stat-etichetta { font-size: 0.82rem; color: var(--colore-testo-soft); } .stat-card.stat-attenzione { background: var(--colore-attesa-bg); border-color: var(--colore-attesa-bordo); } .stat-card.stat-attenzione .stat-numero { color: var(--colore-attesa); } /* --- Sezione prioritaria: richieste in attesa ---------------------------------- Deve saltare all'occhio più di tutto il resto della pagina: colore caldo dedicato, bordo spesso, ombra più marcata delle altre card. */ .sezione-priorita .titolo-sezione { color: var(--colore-attesa); } .contatore-urgente { background: var(--colore-attesa); color: #ffffff; font-size: 0.8rem; font-weight: 700; min-width: 1.6em; height: 1.6em; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--spazio-1); } /* Icone canale (Telegram / WhatsApp) usate in più punti */ .ico-canale-grande { width: 34px; height: 34px; flex-shrink: 0; } .contatto-riga { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; font-weight: 600; margin: var(--spazio-1) 0; } .contatto-riga .ico-canale-grande { width: 22px; height: 22px; } .contatto-riga a { color: var(--colore-testo); } .ico-tg { color: #229ED9; } .ico-wa { color: #25D366; } .ico-canale { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; } .cella-contatto .icona, .contatto .icona { width: 1em; height: 1em; vertical-align: -0.15em; } .cella-contatto, .contatto { display: inline-flex; align-items: center; gap: 0.35em; } .link-cliente { font-weight: 800; color: var(--colore-testo); text-decoration: none; } .link-cliente:hover { text-decoration: underline; } /* --- Badge di stato ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: var(--spazio-1); font-size: 0.75rem; font-weight: 600; padding: 3px var(--spazio-2); border-radius: 999px; white-space: nowrap; } .badge-attesa { background: var(--colore-attesa-badge); color: var(--colore-attesa-badge-testo); } .badge-confermato { background: var(--colore-successo); color: #ffffff; } .badge-oggi { background: var(--colore-accento); color: #ffffff; } .badge-giorno { background: var(--colore-testo); color: #ffffff; } .badge-slot { background: var(--colore-testo-soft); color: #ffffff; } .badge-annullato { background: var(--colore-pericolo); color: #ffffff; } .badge-negativo { background: var(--colore-pericolo); color: #ffffff; } /* Storico cliente: righe rifiutate / annullate in rosso */ .tabella tbody tr.riga-negativa td { color: var(--colore-pericolo); } .tabella tbody tr.riga-negativa .nota-piccola { color: var(--colore-pericolo); opacity: 0.8; } /* Elenco clienti: nome e logo del canale (WhatsApp/Telegram) vicini. Il nome resta sempre nero/neutro: niente colore del tema (rosa/blu/...). */ .cella-cliente { display: flex; align-items: center; gap: var(--spazio-2); } .cella-cliente a { color: var(--colore-testo); } /* Colonna "Cliente" piu' larga: nomi lunghi + 2 icone ci stanno senza sconfinare nella colonna "Prossimo appuntamento" accanto. */ .tabella-clienti th:first-child, .tabella-clienti td:first-child { min-width: 210px; } .ico-canale-nome { width: 15px; height: 15px; flex-shrink: 0; } /* Badge "ha una nota" (es. debito in sospeso): solo se la nota c'e' */ .ico-nota-badge { display: inline-flex; color: var(--colore-pericolo); flex-shrink: 0; } .ico-nota-badge .icona { width: 15px; height: 15px; flex-shrink: 0; } /* Nell'elenco clienti il bollino sta appiccicato al logo WhatsApp/Telegram (1-2px), non al gap normale della riga: su iPhone la riga intera e' stretta e altrimenti sconfina nella colonna "Prossimo appuntamento". */ .cella-cliente .ico-nota-badge { margin-left: -6px; } /* Nota privata sulla scheda cliente */ .form-nota { display: flex; flex-direction: column; gap: var(--spazio-2); align-items: flex-start; } .form-nota textarea { resize: vertical; } /* --- Elenco compatto (appuntamenti confermati, agenda) -------------------------- */ .elenco-compatto { display: flex; flex-direction: column; gap: var(--spazio-2); } .riga-appuntamento { background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md); padding: var(--spazio-3) var(--spazio-4); display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-3); flex-wrap: wrap; } .riga-appuntamento.riga-in-attesa { border-color: var(--colore-attesa-bordo); background: var(--colore-attesa-bg); } .riga-appuntamento-info { display: flex; align-items: center; gap: var(--spazio-2); flex-wrap: wrap; font-size: 0.92rem; } .riga-appuntamento-azioni { display: flex; gap: var(--spazio-2); } .riga-nota { font-style: italic; color: var(--colore-testo-soft); } /* --- Agenda: navigazione giorno -------------------------------------------------- */ .agenda-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-2); margin-bottom: var(--spazio-5); } .agenda-nav-sola-data { justify-content: center; } /* giorno + "Oggi" + "torna a oggi" tutto su UNA riga per risparmiare spazio */ .agenda-titolo { text-align: center; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--spazio-1) var(--spazio-2); } .agenda-titolo h2 { margin: 0; font-size: 1.05rem; text-transform: capitalize; } .agenda-titolo .badge-oggi { align-self: center; } .link-oggi { font-size: 0.8rem; } .chip-riga { display: flex; flex-wrap: wrap; gap: var(--spazio-2); } .chip-orario { background: var(--colore-muted); border: 1px solid var(--colore-bordo); border-radius: 999px; padding: var(--spazio-1) var(--spazio-3); font-size: 0.85rem; font-weight: 500; color: var(--colore-testo); } /* --- Tabelle (servizi, blocchi, clienti) ----------------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raggio-md); border: 1px solid var(--colore-bordo); } /* min-width invece di width: se le colonne non ci stanno (nomi lunghi + icone su schermi stretti), la tabella scorre di lato invece di stringere le colonne fino a far sconfinare il contenuto in quella accanto. */ .tabella { width: auto; min-width: 100%; border-collapse: collapse; background: var(--colore-superficie); font-size: 0.92rem; } .tabella th, .tabella td { text-align: left; padding: var(--spazio-3) var(--spazio-4); white-space: nowrap; } .tabella thead th { background: var(--colore-muted); color: var(--colore-testo-soft); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .tabella tbody tr { border-top: 1px solid var(--colore-bordo); } .tabella tbody tr.riga-disattiva { opacity: 0.55; } .cella-azioni { display: flex; gap: var(--spazio-2); } .cella-check { text-align: center; } /* --- Form --------------------------------------------------------------------- */ label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--colore-testo-soft); margin-bottom: var(--spazio-1); } input, select, textarea, button { margin: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"] { width: 100%; min-width: 0; /* iOS: senza questo i campi ora/data non si restringono */ max-width: 100%; font: inherit; padding: 10px var(--spazio-3); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-sm); background: var(--colore-superficie); color: var(--colore-testo); min-height: 44px; /* area di tocco comoda da telefono */ } input:focus { outline: 2px solid var(--colore-primario); outline-offset: 1px; border-color: var(--colore-primario); } input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; } /* iOS/Safari: i campi data e ora hanno una larghezza "nativa" larga e, quando c'è un valore selezionato, mostrano testo + pulsantino che sbordano dal contenitore. Togliendo l'aspetto nativo e bloccando la larghezza restano dentro il blocco. */ input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; overflow: hidden; text-overflow: ellipsis; } input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; } input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; flex-shrink: 0; } select, textarea { width: 100%; font: inherit; padding: 10px var(--spazio-3); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-sm); background: var(--colore-superficie); color: var(--colore-testo); min-height: 44px; } select:focus, textarea:focus { outline: 2px solid var(--colore-primario); outline-offset: 1px; border-color: var(--colore-primario); } select:disabled { opacity: 0.6; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .agenda-azione-nuovo { margin: var(--spazio-4) 0 var(--spazio-5); } .form-riga { background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-lg); padding: var(--spazio-4); display: flex; flex-wrap: wrap; gap: var(--spazio-3) var(--spazio-4); align-items: flex-end; } .campo { display: flex; flex-direction: column; gap: var(--spazio-1); min-width: 140px; } .campo label { margin-bottom: 0; } /* "Nuovo appuntamento" dentro una card leggera. Telefono: lista in colonna singola — Cliente, Servizio, Giorno, Orario libero, Minuti extra, Nota. Web/tablet (≥700px): due per riga — (Cliente | Servizio), (Giorno | Orario libero), (Minuti extra | Nota) — e card più grande. */ .form-verticale { display: grid; grid-template-columns: 1fr; gap: var(--spazio-3); align-items: start; padding: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md); background: var(--colore-superficie); max-width: 460px; } .form-verticale .campo { min-width: 0; gap: var(--spazio-1); } /* Nota: sempre a tutta larghezza, sotto "Minuti extra" */ .form-verticale .campo-nota, .form-verticale .form-azioni { grid-column: 1 / -1; } .form-verticale .campo label { font-size: 0.8rem; line-height: 1.2; margin: 0; } .form-verticale .campo .nota-piccola { margin-top: 2px; line-height: 1.25; } .form-verticale select, .form-verticale input[type="number"], .form-verticale input[type="date"], .form-verticale input[type="text"] { min-height: 42px; } .form-verticale .btn { width: 100%; } /* i due bottoni finali (Crea / Annulla), staccati dai campi. Telefono: impilati a tutta larghezza (il testo lungo non sbatte fuori dal blocco). Da 560px in su: affiancati. */ .form-azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-2); margin-top: var(--spazio-2); } .form-verticale .form-azioni .btn { width: auto; flex: 1 1 100%; min-width: 0; white-space: normal; } @media (min-width: 560px) { .form-verticale .form-azioni .btn { flex: 1 1 140px; white-space: nowrap; } } @media (min-width: 700px) { .form-verticale { grid-template-columns: 1fr 1fr; max-width: 720px; gap: var(--spazio-4) var(--spazio-5); padding: var(--spazio-6) var(--spazio-5); } .form-verticale .campo label { font-size: 0.82rem; } .form-verticale select, .form-verticale input[type="number"], .form-verticale input[type="date"], .form-verticale input[type="text"] { min-height: 44px; } .form-verticale .form-azioni { justify-content: flex-start; } .form-verticale .form-azioni .btn { flex: 0 1 200px; } } .campo-cresce { flex: 1 1 220px; } .campo-checkbox { flex-direction: row; align-items: center; gap: var(--spazio-2); } .campo-checkbox label { display: flex; align-items: center; gap: var(--spazio-2); margin: 0; } /* --- Bottoni -------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-1); font: inherit; font-weight: 600; font-size: 0.9rem; padding: 10px var(--spazio-4); min-height: 44px; border-radius: var(--raggio-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: filter 150ms ease, background 150ms ease, transform 100ms ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primario { background: var(--colore-primario); color: #ffffff; } .btn-primario:hover { filter: brightness(0.94); } .btn-secondario { background: var(--colore-superficie); color: var(--colore-testo); border-color: var(--colore-bordo); } .btn-secondario:hover { background: var(--colore-muted); } .btn-successo { background: var(--colore-successo); color: #ffffff; } .btn-successo:hover { filter: brightness(0.94); } .btn-pericolo { background: var(--colore-pericolo); color: #ffffff; } .btn-pericolo:hover { filter: brightness(0.94); } .btn-testo { background: transparent; color: var(--colore-testo-soft); } .btn-testo:hover { background: var(--colore-muted); color: var(--colore-testo); } .btn-testo-pericolo { background: transparent; color: var(--colore-pericolo); } .btn-testo-pericolo:hover { background: var(--colore-pericolo-bg); } .btn-piccolo { min-height: 36px; padding: var(--spazio-1) var(--spazio-3); font-size: 0.82rem; } .btn-blocco { width: 100%; } form { margin: 0; } /* --- Login ----------------------------------------------------------------------- */ .scheda-login { background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-lg); box-shadow: var(--ombra-lg); padding: var(--spazio-7) var(--spazio-5); width: 100%; } .scheda-login-testata { text-align: center; margin-bottom: var(--spazio-6); } .login-icona { color: var(--colore-primario); width: 2.2em; height: 2.2em; margin-bottom: var(--spazio-2); } .login-emoji { display: block; font-size: 2.4rem; line-height: 1; margin-bottom: var(--spazio-2); } .scheda-login-testata h1 { font-family: var(--font-titolo); font-weight: 600; font-size: 1.6rem; margin-bottom: var(--spazio-1); } .scheda-login-testata p { color: var(--colore-testo-soft); font-size: 0.9rem; margin: 0; } .form-login { display: flex; flex-direction: column; gap: var(--spazio-4); } .pagina-login { background: linear-gradient(160deg, var(--colore-sfondo), #f3e8fb 70%); } /* --- Respiro extra su schermi larghi --------------------------------------------- */ @media (min-width: 768px) { .contenuto { padding-top: var(--spazio-6); } .header-riga { padding: var(--spazio-4) var(--spazio-6); } .nav-app { padding: 0 var(--spazio-5) var(--spazio-3); } } /* --- Rispetto delle preferenze di movimento ridotto ------------------------------ */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.001ms !important; } } /* --- Agenda: striscia dei giorni e aperture straordinarie --- */ .giorni-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .25rem .75rem; margin-bottom: 1.25rem; scrollbar-width: thin; } .giorno-card { flex: 0 0 auto; min-width: 7.5rem; display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem; border: 1px solid var(--colore-bordo, #f0d9e6); border-radius: .7rem; background: var(--colore-superficie, #fff); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .giorno-card:hover { border-color: var(--colore-primario, #ec4899); transform: translateY(-1px); } .giorno-card-attivo { border-color: var(--colore-primario, #ec4899); box-shadow: 0 0 0 1px var(--colore-primario, #ec4899); } .giorno-card-pieno { opacity: .6; } .giorno-card-data { font-weight: 600; font-size: .82rem; text-transform: capitalize; } .giorno-card-appt { font-size: .78rem; color: var(--colore-primario, #ec4899); font-weight: 600; } .giorno-card-attesa { font-size: .72rem; color: var(--colore-attesa); font-weight: 600; } .giorno-card-vuoto, .giorno-card-liberi { font-size: .72rem; color: var(--colore-testo-soft, #9b8792); } .chip-apertura { display: inline-flex; align-items: center; gap: .35rem; background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .chip-apertura form { display: inline; margin: 0; } .chip-x { border: 0; background: none; cursor: pointer; padding: 0; color: #065f46; opacity: .6; line-height: 1; display: inline-flex; } .chip-x:hover { opacity: 1; } .form-inline { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-top: .75rem; min-width: 0; } .form-inline label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; min-width: 0; flex: 1 1 8rem; /* i due campi ora si dividono lo spazio e si restringono */ } .form-inline input[type="time"] { min-width: 0; max-width: 100%; } /* Telefono e tablet piccolo: campi ora "Dalle/Alle" in colonna, non escono più dal riquadro dell'apertura straordinaria / chiusura fascia. */ @media (max-width: 560px) { .form-inline { flex-direction: column; align-items: stretch; gap: var(--spazio-3); } .form-inline label { width: 100%; flex: none; } .form-inline .btn { width: 100%; } } .chip-bloccato { background: var(--colore-pericolo); border-color: var(--colore-pericolo); color: #ffffff; font-weight: 700; letter-spacing: .02em; } .chip-bloccato .chip-x { color: #ffffff; opacity: .85; } .chip-bloccato .chip-x:hover { opacity: 1; } .chip-bloccato form { display: inline; margin: 0; } /* riga della tabella Chiusure: fascia bloccata ben visibile */ .riga-bloccata td:first-child { border-left: 4px solid var(--colore-pericolo); font-weight: 600; } /* etichetta "solo tu" accanto a funzioni riservate all'admin */ .tag-solo-admin { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 999px; background: var(--colore-pericolo); color: #ffffff; vertical-align: middle; } /* --- Gestione del giorno (agenda) ------------------------------------------- */ .gestione-giorno { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spazio-4); } .gestione-blocco { background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-lg); padding: var(--spazio-4); min-width: 0; /* la card può restringersi: niente overflow su iPhone */ overflow-wrap: anywhere; } /* blocco "Chiudi" spostato in fondo: un po' staccato, tono di allerta */ .gestione-blocco-fondo { margin-top: var(--spazio-6); border-color: var(--colore-pericolo-bordo); background: var(--colore-pericolo-bg); } .gestione-blocco h4 { font-family: var(--font-testo); font-size: 0.9rem; font-weight: 700; margin: 0 0 var(--spazio-2); display: flex; align-items: center; gap: var(--spazio-2); } /* "Chiudi tutto il giorno": azione più drastica, staccata sotto la fascia oraria */ .gestione-chiudi-tutto { margin-top: var(--spazio-3); padding-top: var(--spazio-3); border-top: 1px dashed var(--colore-pericolo-bordo); } .gestione-chiudi-tutto .btn { width: 100%; } /* --- Calendario del mese --------------------------------------------------- */ .cal-testata { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-3); margin-bottom: var(--spazio-3); } .cal-titolo { text-align: center; } .cal-titolo h2 { margin: 0; font-size: 1.2rem; } .cal-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-3); margin-bottom: var(--spazio-4); flex-wrap: wrap; } .cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: transparent; border: none; border-radius: var(--raggio-md); } .cal-intestazione { background: transparent; text-align: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b6a6b0; padding: 0 0 var(--spazio-1); } .cal-cella { background: rgba(253, 242, 248, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 12px; min-height: 76px; padding: var(--spazio-2); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: var(--colore-testo); position: relative; transition: background 120ms ease, transform 120ms ease; } .cal-cella:hover { background: #ffffff; transform: translateY(-1px); } /* giorno con appuntamenti: un filo di rosa in più */ .cal-pieno { background: rgba(249, 168, 212, 0.28); border-color: rgba(249, 168, 212, 0.5); } /* giorno con richieste da confermare: tocco giallo */ .cal-attesa { background: rgba(234, 179, 8, 0.20); border-color: rgba(234, 179, 8, 0.45); } .cal-numero { font-size: 0.95rem; font-weight: 700; } .cal-fuori { background: transparent; border-color: transparent; } .cal-fuori .cal-numero { color: #cbbcc5; font-weight: 500; } .cal-passato { opacity: 0.55; } .cal-oggi { border-color: var(--colore-primario); box-shadow: 0 0 0 2px rgba(236,72,153,0.25); } .cal-oggi .cal-numero { background: var(--colore-primario); color: #fff; border-radius: 999px; min-width: 1.6em; text-align: center; padding: 0 .2em; } .cal-chiuso { background: rgba(246, 238, 244, 0.55); } .cal-conteggio { background: var(--colore-accento); color: #fff; font-size: 0.75rem; font-weight: 700; min-width: 1.5em; height: 1.5em; padding: 0 .25em; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .cal-punto-attesa { width: 9px; height: 9px; border-radius: 999px; background: var(--colore-attesa-badge); /* giallo: richieste da confermare */ border: 1px solid rgba(120, 90, 0, 0.35); display: inline-block; position: absolute; top: 6px; right: 6px; } .cal-tag { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 1px 5px; border-radius: var(--raggio-sm); background: var(--colore-muted); color: var(--colore-testo-soft); } .cal-tag-chiuso { background: var(--colore-pericolo-bg); color: var(--colore-pericolo); } .cal-tag-extra { background: #ecfdf5; color: #065f46; } .cal-legenda { display: flex; flex-wrap: wrap; gap: var(--spazio-3); margin-top: var(--spazio-3); } .cal-legenda-voce { display: inline-flex; align-items: center; gap: var(--spazio-1); } .cal-legenda-voce .cal-punto-attesa { position: static; } @media (max-width: 560px) { .cal-cella { min-height: 58px; } .cal-tag { font-size: 0.58rem; } .cal-legenda { font-size: 0.75rem; } } /* Telefono (iPhone 12/13 Pro ≈ 390px): la griglia a 7 colonne non deve schiacciarsi. Le etichette testuali "chiuso/+orario" diventano pallini, ma il CONTEGGIO appuntamenti resta un numero dentro il cerchio viola e le richieste in attesa restano un pallino giallo. Il funzionamento non cambia: ogni cella resta un link al giorno. */ @media (max-width: 480px) { .cal-griglia { gap: 4px; } .cal-cella { min-height: 48px; padding: 4px 2px; align-items: center; gap: 3px; } .cal-numero { font-size: 0.82rem; font-weight: 600; } /* conteggio appuntamenti: cerchio viola col numero dentro */ .cal-conteggio { font-size: 0.66rem; min-width: 1.35em; height: 1.35em; padding: 0 0.18em; } /* "chiuso" -> pallino rosso, "apertura extra" -> pallino verde */ .cal-tag { font-size: 0; line-height: 0; letter-spacing: 0; padding: 0; border: 0; background: transparent; } .cal-tag-chiuso { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--colore-pericolo); } .cal-tag-extra { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: #10b981; } /* il tag "—" (giorno di chiusura normale) sparisce: basta lo sfondo grigio */ .cal-tag:not(.cal-tag-chiuso):not(.cal-tag-extra) { display: none; } .cal-punto-attesa { position: static; top: auto; right: auto; } .cal-oggi .cal-numero { min-width: 1.4em; } } /* --- Bottone "Annulla" (azione distruttiva, ma leggibile come pulsante) --- */ .btn-annulla { background: rgba(220, 38, 38, 0.10); border: 1px solid rgba(220, 38, 38, 0.32); color: var(--colore-pericolo); } .btn-annulla:hover { background: rgba(220, 38, 38, 0.18); } /* --- Riga appuntamento (Agenda "del giorno" + Dashboard "Confermati 7gg") --- Struttura identica nelle due sezioni: riga 1 : [badge stato] [ora / data-ora] riga 2 : Nome Cognome (bold) riga 3 : servizio riga 4 : bottoni Sposta / Annulla (stessa taglia, sotto) */ .riga-appuntamento.riga-giorno { align-items: flex-start; } .appt-g { display: flex; flex-direction: column; gap: 5px; min-width: 0; width: 100%; } .appt-g-riga1 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spazio-2); } /* ora / data dell'appuntamento: discreta (non in grassetto) e spinta a destra */ .appt-g-ora { font-size: 0.92rem; font-weight: 400; line-height: 1.1; color: var(--colore-testo); margin-left: auto; text-align: right; } .appt-g-nome { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 1.05rem; font-weight: 800; color: var(--colore-testo); text-decoration: none; } a.appt-g-nome:hover { text-decoration: underline; } .appt-g-nome .icona { width: 15px; height: 15px; flex-shrink: 0; } .appt-g-servizio { margin: 0; font-weight: 500; } .appt-g-servizio .riga-nota { font-weight: 400; } .appt-g-meta { margin: 0; font-size: 0.78rem; color: var(--colore-testo-soft); } /* Agenda: avviso "giorno chiuso / fasce chiuse" sotto gli appuntamenti. Compare solo se c'è davvero una chiusura, se no non si vede niente. */ .avviso-chiusura { margin: var(--spazio-4) 0 var(--spazio-5); padding: var(--spazio-3) var(--spazio-4); background: var(--colore-pericolo-bg); border: 1px solid var(--colore-pericolo-bordo); border-left: 4px solid var(--colore-pericolo); border-radius: var(--raggio-md); } .avviso-chiusura-riga { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em; font-size: 0.92rem; color: var(--colore-pericolo); } .avviso-chiusura-riga + .avviso-chiusura-riga { margin-top: var(--spazio-2); } .avviso-chiusura .icona { color: var(--colore-pericolo); } .avviso-fascia { font-weight: 700; background: var(--colore-pericolo); color: #ffffff; border-radius: 999px; padding: 1px 8px; font-size: 0.85em; } /* azioni: tutti i bottoni su una riga; "Sposta" va a capo da solo se non entra */ .appt-g-azioni { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--spazio-2); margin-top: 4px; } .appt-g-azioni form { display: flex; margin: 0; } /* niente stretch: i bottoni restano della loro taglia naturale */ .appt-g-azioni .btn { flex: 0 0 auto; } /* riga di un appuntamento annullato / rifiutato: compatta e spenta */ .riga-appuntamento.riga-annullata { opacity: 0.6; padding-top: var(--spazio-2); padding-bottom: var(--spazio-2); } .riga-annullata .appt-g { gap: 3px; } .riga-annullata .appt-g-nome { text-decoration: line-through; } /* riga "chiuso": una chiusura (fascia oraria o giorno intero) mostrata in agenda come se fosse una prenotazione, col motivo. Solo l'admin la vede. */ .riga-appuntamento.riga-chiusura { border-color: var(--colore-pericolo-bordo); background: var(--colore-pericolo-bg); border-left: 4px solid var(--colore-pericolo); } .riga-chiusura .appt-g-nome { color: var(--colore-pericolo); font-weight: 700; } .riga-chiusura .appt-g-ora { color: var(--colore-pericolo); font-weight: 700; } /* campo "Motivo" nei form di chiusura fascia/giorno dell'agenda */ .form-inline .campo-motivo { flex: 1 1 100%; } .form-inline .campo-motivo input[type="text"] { width: 100%; } /* --- Scheda cliente ------------------------------------------------------- */ .cliente-testata { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spazio-4); flex-wrap: wrap; margin: var(--spazio-3) 0 var(--spazio-4); } .riga-con-prossimo { background: var(--colore-successo-bg); } /* ============================================================================= Selettore lingua (header + login) + rifiniture per telefoni piccoli (iPhone 12 Pro: 390 x 844 CSS px) ========================================================================= */ .header-azioni { display: flex; align-items: center; gap: var(--spazio-2); } .scelta-lingua { display: inline-flex; gap: 2px; } .scelta-lingua a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--raggio-sm); font-size: 1.05rem; text-decoration: none; line-height: 1; filter: grayscale(1) opacity(.55); transition: filter 120ms ease, background 120ms ease; } .scelta-lingua a:hover { background: var(--colore-muted); } .scelta-lingua a.attivo { filter: none; background: var(--colore-muted); } .login-lingua { text-align: center; margin: var(--spazio-4) 0 0; } .login-lingua a { display: inline-block; padding: 4px 10px; margin: 0 2px; font-size: 0.82rem; text-decoration: none; border-radius: 999px; color: var(--colore-testo-soft); } .login-lingua a.attivo { background: var(--colore-muted); color: var(--colore-testo); font-weight: 600; } /* Notch / barra inferiore su iPhone (viewport-fit=cover) */ .header-riga { padding-top: max(var(--spazio-3), env(safe-area-inset-top)); } .contenuto { padding-left: max(var(--spazio-4), env(safe-area-inset-left)); padding-right: max(var(--spazio-4), env(safe-area-inset-right)); } .footer-app { padding-bottom: max(var(--spazio-5), env(safe-area-inset-bottom)); } @media (max-width: 430px) { .contenuto { padding: var(--spazio-4) var(--spazio-3) var(--spazio-6); } .header-riga { padding: var(--spazio-3); gap: var(--spazio-2); } .brand { font-size: 1.05rem; min-width: 0; } .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-app { gap: 2px; padding-bottom: var(--spazio-3); } .nav-app a { padding: var(--spazio-2); font-size: 0.86rem; } /* le tre statistiche: due sopra, una sotto, senza schiacciarsi */ .stat-griglia { grid-template-columns: 1fr 1fr; } .stat-numero { font-size: 1.5rem; } /* i form a colonna unica: niente campi da 140px affiancati stretti, e poco spazio verticale tra un campo e l'altro. .form-verticale (Nuovo appuntamento) ha già i suoi spazi stretti: esclusa. */ .form-riga:not(.form-verticale), .form-inline { flex-direction: column; align-items: stretch; gap: var(--spazio-3); } /* Nuovo appuntamento: su telefono una colonna sola, campi ravvicinati */ .form-verticale { grid-template-columns: 1fr; gap: var(--spazio-2); padding: var(--spazio-3); } .campo, .campo-cresce { min-width: 0; width: 100%; } .form-inline label { width: 100%; } .btn { width: 100%; } .btn-piccolo { width: auto; } .form-riga .btn-secondario, .form-riga .btn-successo, .form-riga .btn-primario { width: 100%; } /* righe appuntamento: azioni sotto, a tutta larghezza */ .riga-appuntamento { flex-direction: column; align-items: stretch; } .riga-appuntamento-azioni { justify-content: flex-start; flex-wrap: wrap; } .cella-azioni { flex-wrap: wrap; } .titolo-sezione { font-size: 1.1rem; } .stat-card { border-radius: var(--raggio-md); padding: var(--spazio-3); } code { overflow-wrap: anywhere; } .tabella th, .tabella td { padding: var(--spazio-2) var(--spazio-3); } } /* --- Cliente bloccata --- */ .avviso-bloccato { background: #fdecec; border: 1px solid #f5b5b5; border-left: 4px solid #c0392b; color: #7d2018; border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .92rem; } .cliente-azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .cliente-azioni form { margin: 0; } .riga-cliente-bloccata td:first-child::after { content: "· bloccata"; color: #c0392b; font-size: .82rem; margin-left: .4rem; } /* Sezione in fondo alla scheda cliente: azioni da fare con attenzione. */ .sezione-pericolo { border: 1px solid #f0cfcf; background: #fffafa; border-radius: var(--raggio-lg); padding: var(--spazio-4); } .sezione-pericolo .sottotitolo { color: #a03228; } /* Il titolo (primo elemento) porta il suo margine sopra oltre al padding della cornice: raddoppiava lo spazio in alto rispetto al basso. Azzerato solo quello, cosi' sopra e sotto restano uguali. */ .sezione-pericolo .sottotitolo:first-child { margin-top: 0; } .sezione-pericolo .nota-piccola { margin-bottom: .75rem; max-width: 52ch; } /* Totale della seduta accanto ai minuti extra, per non confermare a caso. */ .nota-extra { display: inline-block; margin-top: .3rem; font-size: .82rem; font-weight: 600; color: #a03228; }