/* ============================================================
MyGenHome — Design System (mygenhome.css)
Sistema visivo condiviso di Clinical / Calendar / Scheduler /
Management / homepage. Riusabile su qualsiasi progetto.
USO MINIMO
----------
1. ...
2. Nel , PRIMA del CSS, lo snippet anti-flash:
3.
4. Logo: 
(in dark si inverte da solo).
5. Toggle tema (JS, ~8 righe):
var r=document.documentElement;
btn.onclick=function(){var d=r.getAttribute('data-theme')!=='dark';
r.setAttribute('data-theme',d?'dark':'light');
localStorage.setItem('mygenhome_theme',JSON.stringify(d));};
KNOBS (attributi su qualsiasi contenitore)
----------
data-theme="light|dark" tema
data-density="compact|comfy" densità spaziature
data-card="flat|elevated" stile card
============================================================ */
:root{
/* Accento brand */
--accent:#6AAED6;
--accent-strong:#3d8cba; /* testo bianco su sfondo colorato */
--accent-ink:#2b6f95; /* testo azzurro su sfondo chiaro */
--accent-soft:rgba(106,174,214,.13);
--accent-line:rgba(106,174,214,.30);
/* Superfici e testo (light) */
--bg:#eef3f7;
--bg-dot:rgba(106,174,214,.16);
--surface:#ffffff;
--surface-2:#f3f7fa;
--surface-3:#eaf1f6;
--text:#1a2630;
--text-muted:#5d6e7a;
--text-faint:#93a4af;
--border:#e2eaf0;
--border-strong:#d2dde5;
/* Stati */
--ok:#2f9e6b; --ok-soft:rgba(47,158,107,.12); --ok-strong:#248055;
--warn:#c8862a; --warn-soft:rgba(200,134,42,.14);
--err:#cf4a4a; --err-soft:rgba(207,74,74,.12);
/* Forma */
--radius:16px;
--radius-md:12px;
--radius-sm:9px;
--shadow-soft:0 1px 2px rgba(24,48,68,.05), 0 6px 22px rgba(24,48,68,.06);
--shadow-elev:0 2px 6px rgba(24,48,68,.07), 0 18px 44px rgba(24,48,68,.12);
--shadow-pop:0 12px 40px rgba(24,48,68,.18);
/* Densità (sovrascritta da data-density) */
--pad-card:22px;
--gap-section:26px;
--row-pad:12px;
/* Larghezza max contenuti */
--container-w:1080px;
--mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
--bg:#0e151d;
--bg-dot:rgba(106,174,214,.12);
--surface:#18222d;
--surface-2:#141d27;
--surface-3:#1f2b38;
--text:#e8eff4;
--text-muted:#9bacba;
--text-faint:#6c7e8c;
--border:#28343f;
--border-strong:#34434f;
--accent-soft:rgba(106,174,214,.16);
--accent-ink:#8ec3e2;
--ok-soft:rgba(47,158,107,.18);
--warn-soft:rgba(200,134,42,.20);
--err-soft:rgba(207,74,74,.18);
--shadow-soft:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.32);
--shadow-elev:0 2px 8px rgba(0,0,0,.35), 0 22px 50px rgba(0,0,0,.45);
--shadow-pop:0 16px 48px rgba(0,0,0,.55);
}
[data-density="compact"]{ --pad-card:16px; --gap-section:18px; --row-pad:8px; }
[data-density="comfy"] { --pad-card:28px; --gap-section:34px; --row-pad:15px; }
[data-card="flat"] { --shadow-soft:none; --border:var(--border-strong); }
[data-card="elevated"] { --shadow-soft:var(--shadow-elev); }
/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
font-family:var(--sans);
color:var(--text);
background-color:var(--bg);
background-image:radial-gradient(var(--bg-dot) 1px, transparent 1px);
background-size:22px 22px;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
line-height:1.5;
min-height:100vh;
}
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
::selection{ background:var(--accent-soft); }
a{ color:var(--accent-ink); }
/* focus visibile coerente su tutto ciò che è interattivo */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.tab:focus-visible, .mod:focus-visible, .icon-btn:focus-visible,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible{
outline:none; border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft);
}
/* ---------- Layout ---------- */
.container{ max-width:var(--container-w); margin:0 auto; padding:0 20px; }
@media (max-width:640px){ .container{ padding:0 13px; } }
/* ---------- Header ---------- */
.site-header{
position:sticky; top:0; z-index:30;
background:color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter:saturate(1.4) blur(12px);
-webkit-backdrop-filter:saturate(1.4) blur(12px);
border-bottom:1px solid var(--border);
}
.site-header__inner{
max-width:var(--container-w); margin:0 auto; padding:13px 20px;
display:flex; align-items:center; gap:14px;
}
@media (max-width:640px){ .site-header__inner{ padding:11px 13px; } }
.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand__logo{ height:30px; width:auto; display:block; }
[data-theme="dark"] .brand__logo{ filter:brightness(0) invert(1) brightness(1.05); opacity:.94; }
.brand__sub{
font-style:italic; font-weight:700; font-size:19px;
color:var(--accent-ink); letter-spacing:-.01em;
border-left:1px solid var(--border-strong); padding-left:12px;
}
@media (max-width:480px){ .brand__sub{ font-size:16px; padding-left:9px; } }
.header__spacer{ flex:1; }
.header__date{
font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
color:var(--text-faint); white-space:nowrap; font-weight:600;
}
@media (max-width:560px){ .header__date{ display:none; } }
.icon-btn{
width:38px; height:38px; border-radius:50%;
display:grid; place-items:center;
background:var(--surface); border:1px solid var(--border);
color:var(--text-muted); font-size:16px; transition:.15s;
}
.icon-btn:hover{ background:var(--surface-3); color:var(--text); border-color:var(--border-strong); }
.icon-btn svg{ width:17px; height:17px; }
/* ---------- Tab nav ---------- */
.tabs{
position:sticky; top:57px; z-index:20;
background:color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
}
.tabs__inner{
max-width:var(--container-w); margin:0 auto; padding:0 20px;
display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.tabs__inner::-webkit-scrollbar{ display:none; }
@media (max-width:640px){ .tabs__inner{ padding:0 13px; } }
.tab{
appearance:none; background:none; border:none;
padding:14px 16px 13px; font-size:14.5px; font-weight:600;
color:var(--text-muted); white-space:nowrap;
border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:.15s;
display:flex; align-items:center; gap:8px;
}
.tab:hover{ color:var(--text); }
.tab--active{ color:var(--accent-ink); border-bottom-color:var(--accent); }
.tab__dot{
font-size:11px; font-family:var(--mono); color:var(--text-faint);
background:var(--surface-3); border-radius:5px; padding:2px 5px; font-weight:600;
}
.tab--active .tab__dot{ color:var(--accent-strong); background:var(--accent-soft); }
/* ---------- Hero / intro pagina ---------- */
.page-intro{ max-width:var(--container-w); margin:0 auto; padding:30px 20px 8px; }
.page-intro__eyebrow{
font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--accent-ink); margin:0 0 8px;
}
.page-intro h1{
font-size:clamp(26px,5vw,38px); font-weight:800; letter-spacing:-.02em;
margin:0; line-height:1.08;
}
.page-intro h1 em{ color:var(--accent-ink); font-style:italic; }
.page-intro p{ color:var(--text-muted); margin:10px 0 0; max-width:60ch; font-size:15.5px; }
/* ---------- Card ---------- */
.card{
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow-soft);
}
.card__pad{ padding:var(--pad-card); }
/* ---------- Sezione numerata ---------- */
.section{ max-width:var(--container-w); margin:var(--gap-section) auto 0; padding:0 20px; }
.section__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.section__num{
flex:none; width:30px; height:30px; border-radius:9px;
display:grid; place-items:center; font-family:var(--mono);
font-size:13px; font-weight:700; color:var(--accent-strong);
background:var(--accent-soft); border:1px solid var(--accent-line);
}
.section__titles{ min-width:0; flex:1; }
.section__title{ font-size:18px; font-weight:700; margin:3px 0 0; letter-spacing:-.01em; }
.section__sub{ font-size:13.5px; color:var(--text-muted); margin:3px 0 0; }
/* ---------- Module launcher (griglia + card-modulo) ---------- */
.modules{
max-width:var(--container-w); margin:0 auto; padding:10px 20px 60px;
display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px;
}
.mod{
display:flex; flex-direction:column;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow-soft);
padding:20px 20px 18px; text-decoration:none; color:inherit;
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mod:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-elev); }
.mod__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mod__ic{
width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-ink);
}
.mod__ic svg{ width:23px; height:23px; }
.mod__k{
font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em;
color:var(--accent-strong); background:var(--accent-soft);
border:1px solid var(--accent-line); border-radius:7px; padding:4px 8px;
}
.mod__brand{
font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--text-faint); margin:0 0 2px;
}
.mod__name{
font-size:24px; font-weight:800; font-style:italic; letter-spacing:-.015em;
color:var(--accent-ink); margin:0; line-height:1.1;
}
.mod__role{ font-size:14px; color:var(--text-muted); margin:8px 0 0; line-height:1.45; }
.mod__foot{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:auto; padding-top:16px; border-top:1px dashed var(--border-strong);
}
.mod__url{
font-family:var(--mono); font-size:11.5px; color:var(--text-faint);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mod__go{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--accent-ink); white-space:nowrap; }
.mod__go svg{ width:15px; height:15px; transition:transform .18s ease; }
.mod:hover .mod__go svg{ transform:translateX(3px); }
/* ---------- Bottoni ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
border-radius:var(--radius-sm); border:1px solid var(--border-strong);
background:var(--surface); color:var(--text); font-weight:600; font-size:14px;
padding:9px 15px; transition:.15s; white-space:nowrap;
}
.btn:hover{ background:var(--surface-3); border-color:var(--text-faint); }
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:7px 12px; font-size:13px; }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
[data-theme="dark"] .btn--accent{ color:#0c1620; }
.btn--accent:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
.btn--ok{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn--ok:hover{ background:var(--ok-strong); border-color:var(--ok-strong); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--accent-ink); padding-left:6px; padding-right:6px; }
.btn--ghost:hover{ background:var(--accent-soft); }
.btn--danger{ color:var(--err); border-color:transparent; background:transparent; }
.btn--danger:hover{ background:var(--err-soft); }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }
/* ---------- Badge ---------- */
.badge{
display:inline-flex; align-items:center; gap:5px;
font-size:12px; font-weight:700; letter-spacing:.01em;
padding:3px 9px; border-radius:999px; line-height:1.4; white-space:nowrap; flex:none;
}
.badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge--neutral{ color:var(--text-muted); background:var(--surface-3); }
.badge--accent{ color:var(--accent-strong); background:var(--accent-soft); }
.badge--ok{ color:var(--ok-strong); background:var(--ok-soft); }
.badge--warn{ color:var(--warn); background:var(--warn-soft); }
.badge--err{ color:var(--err); background:var(--err-soft); }
[data-theme="dark"] .badge--accent{ color:#8ec3e2; }
/* ---------- Pill ---------- */
.pill{
display:inline-flex; align-items:center; gap:8px;
background:var(--surface); border:1px solid var(--border);
border-radius:999px; padding:6px 14px; font-size:13px; color:var(--text-muted);
box-shadow:var(--shadow-soft); font-weight:600;
}
.pill__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* ---------- Stat / totali ---------- */
.totals{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
.total-card{
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-soft);
}
.total-card--accent{ background:linear-gradient(170deg, var(--accent) 0%, var(--accent-strong) 100%); border-color:transparent; }
.total-card--accent .total-card__value, .total-card--accent .total-card__label{ color:#fff; }
[data-theme="dark"] .total-card--accent .total-card__value, [data-theme="dark"] .total-card--accent .total-card__label{ color:#08121b; }
.total-card__label{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:0 0 6px; }
.total-card__value{ font-size:25px; font-weight:800; letter-spacing:-.02em; margin:0; font-variant-numeric:tabular-nums; }
.total-card__hint{ font-size:12px; color:var(--text-muted); margin:4px 0 0; }
.total-card--accent .total-card__hint{ color:rgba(255,255,255,.85); }
/* ---------- Form ---------- */
.field{ display:block; }
.field__label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.field__hint{ font-size:12px; color:var(--text-muted); margin-top:5px; }
.input,.select,.textarea{
width:100%; background:var(--surface); border:1px solid var(--border-strong);
border-radius:var(--radius-sm); padding:10px 12px; font-size:14.5px; color:var(--text);
transition:.15s; -webkit-appearance:none; appearance:none;
}
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.textarea{ resize:vertical; min-height:120px; font-family:var(--mono); font-size:13px; line-height:1.6; }
.select{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6e7a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px; gap:3px; flex-wrap:wrap; }
.seg__opt{ appearance:none; border:none; background:none; padding:7px 13px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text-muted); transition:.12s; white-space:nowrap; }
.seg__opt:hover{ color:var(--text); }
.seg__opt.is-on{ background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow-soft); }
.check{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.check input{ margin-top:2px; width:17px; height:17px; accent-color:var(--accent); flex:none; }
.check__txt{ font-size:13.5px; color:var(--text); }
.check__txt small{ display:block; color:var(--text-muted); font-size:12px; margin-top:1px; }
/* ---------- Messaggi di stato ---------- */
.status{ display:flex; gap:11px; align-items:flex-start; border-radius:var(--radius-md); padding:12px 15px; font-size:13.5px; border:1px solid; }
.status__icon{ flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; margin-top:1px; }
.status--ok{ background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 35%, transparent); }
.status--ok .status__icon{ background:var(--ok); }
.status--warn{ background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 35%, transparent); }
.status--warn .status__icon{ background:var(--warn); }
.status--err{ background:var(--err-soft); border-color:color-mix(in srgb, var(--err) 35%, transparent); }
.status--err .status__icon{ background:var(--err); }
.status__title{ font-weight:700; }
.status__body{ color:var(--text-muted); }
/* ---------- Tabelle dati ---------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:420px; }
table.data th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:700; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); }
table.data td{ padding:11px 14px; border-bottom:1px solid var(--border); }
table.data tr:last-child td{ border-bottom:none; }
table.data .num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
table.data tfoot td{ font-weight:700; background:var(--surface-2); border-top:2px solid var(--border-strong); }
/* ---------- Footer ---------- */
.site-footer{
max-width:var(--container-w); margin:0 auto; padding:24px 20px 48px;
border-top:1px solid var(--border); color:var(--text-faint); font-size:12.5px;
display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center;
}
.site-footer .sep{ color:var(--border-strong); }
/* ---------- Utility ---------- */
.muted{ color:var(--text-muted); }
.mono{ font-family:var(--mono); }
.divider-text{ display:flex; align-items:center; gap:14px; color:var(--text-faint); font-size:12.5px; font-weight:600; letter-spacing:.04em; margin:6px 0; }
.divider-text::before,.divider-text::after{ content:""; height:1px; background:var(--border); flex:1; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.stack-sm{ display:grid; gap:8px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hide{ display:none !important; }
.fade-in{ animation:mgh-fade .35s ease; }
@keyframes mgh-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
*{ transition:none !important; animation:none !important; }
.mod:hover{ transform:none; }
}