*{box-sizing:border-box;margin:0;padding:0}
:root{--sostitu-blu:#185FA5;--sostitu-blu-scuro:#123E6B;--sostitu-verde:#3B6D11;--sostitu-verde-chiaro:#8CC63F;--sostitu-viola:#5B21B6;--sostitu-nero:#1A1A1A;--sostitu-sfondo:#F5F5F3}
.logo-header{display:block;height:44px;width:auto}
.logo-login{display:block;width:220px;height:auto;margin:0 auto 18px}
body{font-family:system-ui,sans-serif;background:#f5f5f3;color:#1a1a1a;font-size:14px}
.app{max-width:1400px;width:100%;margin:0 auto;padding:1.2rem 1rem;box-sizing:border-box;overflow-x:hidden}
h1{font-size:19px;font-weight:500;margin-bottom:2px}
.sub{font-size:12px;color:#666;margin-bottom:16px}
.tabs{display:flex;gap:2px;border-bottom:1px solid #ddd;margin-bottom:18px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:7px 11px;cursor:pointer;font-size:12px;color:#666;margin-bottom:-1px;white-space:nowrap;flex-shrink:0}
.tab.active{border-bottom-color:#1a1a1a;color:#1a1a1a;font-weight:600}
.section{display:none}.section.active{display:block}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:500px;}
input,select{width:100%;padding:6px 9px;border:0.5px solid #ccc;border-radius:7px;font-size:13px;background:#fff;font-family:inherit;color:#1a1a1a}
button{padding:6px 13px;border:0.5px solid #bbb;border-radius:7px;background:#fff;cursor:pointer;font-size:12px;font-family:inherit}
button:hover{background:#f0f0f0}
.btn-primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.btn-primary:hover{background:#333}
.btn-green{background:#3B6D11;color:#fff;border-color:#3B6D11}
.btn-red{color:#c00;border-color:#fca5a5}
.btn-purple{color:#5b21b6;border-color:#a78bfa}
.btn-blue{color:#185FA5;border-color:#93c5fd}
.lbl{font-size:11px;color:#666;display:block;margin-bottom:3px}
.card{background:#fff;border:0.5px solid #ddd;border-radius:10px;padding:11px 13px;margin-bottom:6px}
.badge{font-size:10px;border-radius:3px;padding:1px 6px;display:inline-block}
.b-red{background:#fee2e2;color:#7f1d1d}
.b-amber{background:#FAEEDA;color:#854F0B}
.b-green{background:#EAF3DE;color:#3B6D11}.b-pot{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;font-style:italic}
.b-blue{background:#E6F1FB;color:#185FA5}
.b-gray{background:#f0efea;color:#444}
.b-rec{background:#fee2e2;color:#7f1d1d;font-weight:700;outline:1.5px solid #c00}
.metric{background:#f0efea;border:1.5px solid #d8d4c8;border-radius:8px;padding:12px 10px;text-align:center}
.metric .num{font-size:24px;font-weight:500;margin-top:3px}
.metric .lbl2{font-size:11px;color:#666}
.chk-lbl{display:inline-flex;align-items:center;gap:4px;font-size:12px;border:0.5px solid #ccc;border-radius:7px;padding:4px 9px;cursor:pointer;background:#fff}
.chk-lbl input{width:auto}
.chk-tutto{background:#f5f0ff;border-color:#a78bfa}
.blocco{background:#fff;border:0.5px solid #ddd;border-radius:9px;padding:12px;margin-bottom:8px}
.trash{cursor:pointer;color:#999;background:none;border:none;font-size:15px;padding:0 3px}
.trash:hover{color:#c00}
.empty{color:#888;font-size:13px;padding:12px 0}
hr{border:none;border-top:0.5px solid #eee;margin:12px 0}
table{border-collapse:collapse;width:100%;font-size:12px}
th{text-align:left;padding:5px 7px;color:#666;font-weight:400;border-bottom:1px solid #eee;white-space:nowrap}
td{padding:6px 7px;border-bottom:0.5px solid #f0f0f0;vertical-align:middle}
.upload-box{border:2px dashed #ddd;border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:border-color .2s}
.upload-box:hover{border-color:#a78bfa}
.upload-box.ok{border-color:#86efac;background:#f0fdf4}
.upload-box.err{border-color:#fca5a5;background:#fef2f2}
.tag-op{font-size:9px;background:#ede9fe;color:#5b21b6;border-radius:3px;padding:0px 3px;margin-left:2px}
.tag-sos{font-size:9px;background:#fef9c3;color:#854F0B;border-radius:3px;padding:0px 3px;margin-left:2px}
.cfg-stab{padding:7px 14px;font-size:12px;font-weight:600;color:#888;border:none;background:none;border-bottom:2.5px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color .15s}
.cfg-stab.active{color:#185FA5;border-bottom-color:#185FA5}
.cfg-stab:hover:not(.active){color:#1A1A1A}
.cfg-stab-admin.active{color:#5B21B6;border-bottom-color:#5B21B6}

/* ── INFO BUTTON ⓘ ── */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#185FA5;color:#fff;font-size:10px;font-weight:700;cursor:pointer;border:none;padding:0;margin-left:4px;vertical-align:middle;flex-shrink:0;line-height:1}
.info-btn:hover{background:#1a4f8a}
/* Popup info */
.info-popup{position:fixed;z-index:9999;background:#fff;border:1px solid #ddd;border-radius:10px;padding:14px 16px;max-width:280px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:12px;line-height:1.6;color:#333}
.info-popup-title{font-size:13px;font-weight:600;color:#185FA5;margin-bottom:6px}
.info-popup-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:16px;cursor:pointer;color:#999;padding:0;line-height:1}

/* ── MANUALE ── */
.man-section{margin-bottom:24px}
.man-section h2{font-size:15px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1.5px solid #eee;color:#1a1a1a}
.man-section h3{font-size:13px;font-weight:600;margin:12px 0 5px;color:#185FA5}
.man-section p,.man-section li{font-size:12.5px;line-height:1.7;color:#333}
.man-section ul,.man-section ol{padding-left:20px;margin:4px 0 8px}
.man-badge{display:inline-block;font-size:10px;border-radius:4px;padding:1px 7px;margin:0 2px;font-weight:600}
.mb-blu{background:#E6F1FB;color:#185FA5}.mb-green{background:#EAF3DE;color:#3B6D11}
.mb-amber{background:#FAEEDA;color:#854F0B}.mb-red{background:#fee2e2;color:#7f1d1d}
.mb-gray{background:#f0efea;color:#444}.mb-purple{background:#ede9fe;color:#5b21b6}
.man-tip{background:#f0fdf4;border-left:3px solid #3B6D11;padding:7px 11px;border-radius:0 6px 6px 0;font-size:12px;margin:8px 0}
.man-warn{background:#fef9c3;border-left:3px solid #e9c46a;padding:7px 11px;border-radius:0 6px 6px 0;font-size:12px;margin:8px 0}
.man-toc{background:#f5f5f3;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:12px}
.man-toc a{color:#185FA5;text-decoration:none;display:block;padding:2px 0}.man-toc a:hover{text-decoration:underline}
.pri-table{width:100%;font-size:12px;border-collapse:collapse;margin:8px 0}
.pri-table th{background:#f5f5f3;padding:5px 8px;text-align:left;font-weight:600;border:0.5px solid #ddd}
.pri-table td{padding:5px 8px;border:0.5px solid #eee;vertical-align:top}

#login-screen{display:none;position:fixed;inset:0;background:#f5f5f3;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#login-box{background:#fff;border-radius:16px;padding:28px 20px;width:calc(100% - 32px);max-width:380px;box-shadow:0 4px 24px rgba(0,0,0,.10);box-sizing:border-box;}
#login-box h1{font-size:22px;font-weight:700;color:#185FA5;margin-bottom:4px}
#login-box .sub{font-size:13px;color:#888;margin-bottom:24px}
#login-box label{font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px}
#login-box input{width:100%;padding:9px 12px;border:1.5px solid #ddd;border-radius:8px;font-size:14px;margin-bottom:14px;outline:none}
#login-box input:focus{border-color:#185FA5}
#login-btn{width:100%;padding:11px;background:#185FA5;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;margin-top:4px}
#login-btn:hover{background:#1450a3}
#login-err{color:#c00;font-size:12px;margin-top:8px;min-height:18px}
#login-mode{font-size:12px;color:#185FA5;cursor:pointer;text-align:center;margin-top:12px}
#cloud-bar{display:none;background:#E6F1FB;border-radius:8px;padding:6px 14px;margin-bottom:10px;font-size:12px;color:#185FA5;display:flex;align-items:center;justify-content:space-between}
#cloud-bar span{font-weight:500}
#cloud-bar button{font-size:11px;background:none;border:none;color:#c00;cursor:pointer;font-weight:600}

/* ── PANNELLO LATERALE DOCENTE ── */
#pannello-docente{position:fixed;top:0;right:-420px;width:420px;max-width:100vw;height:100vh;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:500;transition:right .3s ease;overflow-y:auto;display:flex;flex-direction:column}
#pannello-docente.aperto{right:0}
#pannello-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:499}
#pannello-overlay.aperto{display:block}
.pann-header{padding:16px 18px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;background:#f5f5f3;flex-shrink:0}
.pann-body{padding:18px;flex:1}
.pann-sez{font-size:10px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.7px;margin:16px 0 8px;padding-bottom:5px;border-bottom:0.5px solid #eee}
.pann-campo{margin-bottom:12px}
.pann-campo label{font-size:11px;color:#666;display:block;margin-bottom:3px}
.pann-campo input{width:100%;padding:7px 10px;border:0.5px solid #ccc;border-radius:7px;font-size:13px;background:#fff}
.pann-stat{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pann-stat-item{flex:1;min-width:80px;background:#f5f5f3;border-radius:7px;padding:8px;text-align:center}
.pann-stat-item .num{font-size:20px;font-weight:600;margin-top:2px}
.pann-stat-item .lbl2{font-size:10px;color:#666}

/* ── MOBILE RESPONSIVE ────────────────────────────── */


/* ── NAVIGAZIONE MOBILE ── */
.mob-nav-item {
  display: block; width: 100%; text-align: left;
  padding: 14px 20px; border: none; background: none;
  font-size: 15px; color: #1a1a1a; cursor: pointer;
  border-bottom: 0.5px solid #f0f0f0;
}
.mob-nav-item:active { background: #f5f5f3; }
.mob-bottom-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; border: none; background: none; cursor: pointer;
  font-size: 10px; color: #666; padding: 4px 8px; min-width: 60px;
}
.mob-bottom-btn.active-mob { color: #185FA5; font-weight: 700; }


/* ══ CARD SOSTITUZIONE MOBILE (non dipendente da breakpoint) ══ */
.sost-mob-card {
  background: #f9f9f9;
  border: 0.5px solid #ddd;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.sost-mob-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  cursor: pointer;
  gap: 6px;
}
.sost-mob-card-header:active { background: #f0f0f0; }
.sost-mob-card-body {
  display: none;
  padding: 10px 12px;
  border-top: 0.5px solid #eee;
  background: #fff;
}
.sost-mob-card-body.aperta { display: block; }
.sost-mob-field { margin-bottom: 10px; }
.sost-mob-field label { font-size: 11px; color: #888; display: block; margin-bottom: 3px; }
.sost-mob-field select, .sost-mob-field input { width: 100%; font-size: 14px; padding: 8px; border-radius: 7px; border: 1px solid #ddd; }

/* ══ RESPONSIVE — MOBILE (max 768px) ══ */
@media (max-width: 768px) {

  /* Base */
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body { overflow-x: hidden !important; width: 100% !important; }
  #sel-data, #sel-giorno { box-sizing: border-box !important; }
  .app { padding: 4px 8px 80px !important; overflow-x: hidden !important; max-width: 100% !important; }
  .section { padding: 6px 6px !important; overflow-x: hidden !important; }

  /* Logo header */
  .logo-header { max-height: 55px !important; }
  #h-plesso, .sub { font-size: 12px !important; margin-bottom: 4px !important; }

  /* Cloud bar */
  #cloud-bar { padding: 5px 8px !important; gap: 4px !important; flex-wrap: nowrap !important; }
  #cloud-email { font-size: 9px !important; max-width: 110px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  #cloud-sync { font-size: 9px !important; white-space: nowrap !important; }
  /* Nascondi "Registra assente" dalla cloud bar — c'è nella bottom bar */
  #cloud-bar > button:first-of-type { display: none !important; }

  /* Tab orizzontali — nascosti su mobile */
  .tabs { display: none !important; }

  /* Bottom bar e menu mobile */
  #mobile-bottom-bar { display: block !important; }

  /* Calendario settimanale */
  #cal-sett-wrap { padding: 8px !important; margin-bottom: 6px !important; }
  #cal-sett-label { min-width: 80px !important; font-size: 11px !important; }
  #cal-sett-griglia > div { font-size: 10px !important; padding: 4px 3px !important; min-height: 55px !important; }

  /* Avviso bozza */
  #avviso-bozza { font-size: 11px !important; padding: 6px 8px !important; margin-bottom: 6px !important; }

  /* Data e giorno — affiancati */
  .sost-data-row { display: flex !important; flex-direction: row !important; gap: 8px !important; flex-wrap: nowrap !important; margin-bottom: 8px !important; }
  .sost-data-row > div { flex: 1 !important; min-width: 0 !important; }
  #sel-data { width: 100% !important; font-size: 14px !important; padding: 7px 6px !important; max-width: 100% !important; }
  #sel-giorno { width: 100% !important; font-size: 14px !important; padding: 7px 6px !important; max-width: 100% !important; }

  /* Classi in gita */
  #sez-gite { margin-bottom: 6px !important; }
  #sez-gite button { font-size: 10px !important; padding: 3px 7px !important; }

  /* Pulsanti azione */
  #btn-undo, #btn-redo { padding: 5px 10px !important; font-size: 11px !important; width: auto !important; flex-shrink: 0 !important; }
  .info-btn { width: 16px !important; height: 16px !important; padding: 0 !important; min-width: unset !important; flex-shrink: 0 !important; }

  /* Storico — layout adattivo */
  .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .card th:nth-child(4), .card td:nth-child(4) { display: none !important; } /* nascondi Compresenti */
  .card table { min-width: unset !important; width: 100% !important; table-layout: fixed !important; }
  .card th, .card td { font-size: 10px !important; padding: 4px 3px !important; word-break: break-word !important; white-space: normal !important; overflow: hidden !important; }
  /* Colonne proporzionali */
  .card th:nth-child(1), .card td:nth-child(1) { width: 22% !important; } /* Assente */
  .card th:nth-child(2), .card td:nth-child(2) { width: 8% !important; }  /* Ora */
  .card th:nth-child(3), .card td:nth-child(3) { width: 12% !important; } /* Classe */
  .card th:nth-child(5), .card td:nth-child(5) { width: 22% !important; } /* Sostituto */
  .card th:nth-child(6), .card td:nth-child(6) { width: 14% !important; } /* Tipo */
  .card th:nth-child(7), .card td:nth-child(7) { width: 8% !important; }  /* Azioni */
  .card select { font-size: 10px !important; padding: 2px !important; width: 100% !important; }
  .card input[type="text"] { font-size: 10px !important; padding: 2px !important; width: 100% !important; }
  .card-header { flex-wrap: wrap !important; gap: 4px !important; }
  .card-header button { font-size: 11px !important; padding: 4px 7px !important; }

  /* Tabella sostituzioni — card al posto della tabella */
  .sost-table-desktop { display: none !important; }
  .sost-cards-mobile { display: block !important; }

  /* Pannello docente */
  #pannello-docente { width: 100vw !important; right: -100vw !important; }
  #pannello-docente.aperto { right: 0 !important; }

  /* Input e select generici */
  input:not(.info-btn), select, textarea { max-width: 100% !important; }

  /* Login */
  #login-box { width: calc(100vw - 32px) !important; padding: 24px 18px !important; margin: 0 16px !important; box-sizing: border-box !important; }
  #login-box h1 { font-size: 18px !important; }
  #login-box input { font-size: 16px !important; } /* evita zoom iOS su input */
  #login-btn { font-size: 16px !important; }
  .logo-login { width: 160px !important; }
}

/* ══ RESPONSIVE — DESKTOP (min 769px) ══ */
@media (min-width: 769px) {
  #mobile-bottom-bar { display: none !important; }
  #mobile-nav { display: none !important; }
  #btn-cerca-sostituti { width: auto !important; }
  #btn-ins-manuale { width: auto !important; }
  .sost-cards-mobile { display: none !important; }
  .sost-table-desktop { display: table !important; }
}

/* ══ STAGING — nav banner e gate ══ */
#staging-nav{display:none;position:fixed;top:0;left:0;right:0;z-index:99999;background:#1a1a2e;padding:8px 16px;align-items:center;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#staging-nav.visible{display:flex}
#staging-nav .stag-label{color:#f59e0b;font-size:11px;font-weight:700;letter-spacing:.05em;white-space:nowrap;margin-right:4px}
#staging-nav .stag-btn{padding:5px 14px;border-radius:6px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block}
#staging-nav .stag-btn:hover{background:rgba(255,255,255,.15)}
#staging-nav .stag-btn.active{background:#185FA5;border-color:#185FA5}
#staging-nav .stag-spacer{flex:1}
body.staging-mode{padding-top:40px !important}
#staging-gate{display:none;position:fixed;inset:0;background:#1a1a2e;z-index:999999;align-items:center;justify-content:center;flex-direction:column;gap:16px}
#staging-gate.visible{display:flex}
#staging-gate .sg-box{background:#fff;border-radius:16px;padding:32px 28px;width:320px;max-width:90vw;text-align:center}
#staging-gate .sg-title{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:4px}
#staging-gate .sg-sub{font-size:13px;color:#888;margin-bottom:20px}
#staging-gate .sg-badge{display:inline-block;background:#f59e0b;color:#1a1a1a;font-size:11px;font-weight:700;border-radius:99px;padding:3px 10px;margin-bottom:16px}
#staging-gate input[type=password]{width:100%;padding:12px;border:1.5px solid #ddd;border-radius:10px;font-size:15px;box-sizing:border-box;margin-bottom:12px;text-align:center;letter-spacing:4px}
#staging-gate input[type=password]:focus{outline:none;border-color:#185FA5}
#staging-gate .sg-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;margin-bottom:16px;justify-content:center}
#staging-gate .sg-btn{width:100%;padding:13px;background:#185FA5;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
#staging-gate .sg-btn:hover{background:#123E6B}
#staging-gate .sg-err{color:#e53e3e;font-size:13px;margin-top:8px;display:none}