:root{--primary:#0066cc;--accent:#6f42c1;--muted:#6c757d;--card-bg:#fff;--shadow:0 6px 18px rgba(11,22,50,0.06);--radius:10px;--gap:18px}
*{box-sizing:border-box}body{font-family:Inter,Segoe UI,system-ui,Arial;margin:0;background:#f6f8fb;color:#111}
.wrap{max-width:90%;margin:28px auto;padding:20px}
header{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow)}
header h1{margin:0;font-size:1.6rem;display:flex;gap:.6rem;align-items:center}.subtitle{opacity:.9;margin-top:6px;font-size:.95rem}
.layout{display:grid;grid-template-columns:260px 1fr;gap:var(--gap);margin-top:20px}@media(max-width:900px){.layout{grid-template-columns:1fr;padding-bottom:10px}}
.panel{background:var(--card-bg);border-radius:10px;padding:14px;box-shadow:var(--shadow);height:100%}.floors-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}.floor-btn{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid #eef2f7;background:#fbfdff;cursor:pointer;font-weight:600;color:#214a6b}.floor-btn.active{background:linear-gradient(90deg,#e8f4ff,#eef7ff);border-color:rgba(6,78,159,0.12);box-shadow:0 6px 12px rgba(6,78,159,0.06)}.search{margin-top:12px;display:flex;gap:8px}.search input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #e6eef8}
.content-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.content-header h2{margin:0;font-size:1.1rem;color:#0b3b66}.floor-card{background:var(--card-bg);border-radius:10px;padding:12px;box-shadow:var(--shadow);overflow:hidden}.floor-title{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:8px;border-bottom:1px dashed #eef3fa}.institute-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(450px,1fr));gap:12px;padding-top:12px}.institute-card{background:#fff;border-radius:8px;padding:12px;border-left:6px solid var(--primary);box-shadow:0 2px 8px rgba(12,25,60,.04);transition:transform .16s ease}.institute-card:hover{transform:translateY(-6px)}.institute-name{font-weight:700;color:#1b3956;margin-bottom:10px}.personnel-list{display:flex;flex-direction:column;gap:8px}.personnel-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:#f8fbff;border:1px solid #eef7ff}.personnel-role{padding:4px 8px;border-radius:6px;font-weight:700;font-size:.82rem;color:#fff}.role-fire{background:#ff6b6b}.role-first-aid{background:#4cd964}.role-emergency{background:#ffcc00;color:#2b2b2b}.personnel-name{font-weight:600}.personnel-contact{margin-left:auto;color:var(--primary);font-size:.95rem}.count-badge{background:#eef7ff;color:var(--primary);padding:4px 8px;border-radius:999px;font-weight:700;font-size:.85rem}.empty{padding:26px;text-align:center;color:var(--muted);font-style:italic}

.role-fire{background:#ff6b6b}
.role-first-aid{background:#4cd964}
.role-emergency{background:#ffcc00;color:#2b2b2b}
.role-blsd{background:#5ac8fa;color:#2b2b2b}
.role-lab{background:#af52de;color:#2b2b2b}
.role-ass{background:#ffcc00;color:#ffcc00}



.legend{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:8px}
.legend-item{display:flex;align-items:center;gap:8px;color:#445;font-size:0.95rem}
.legend-square{width:14px;height:14px;border-radius:4px;display:inline-block;box-shadow:0 1px 2px rgba(0,0,0,0.08)}


.emergency-subheader-card {
  background-color: #f8fafc;
  border-left: 4px solid #ff6b6b;
  padding: 16px 20px;
  border-radius: 10px;
  margin-top: 12px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: system-ui, sans-serif;
}

.subheader-columns {
  display: flex;
  gap: 40px;
  flex-wrap: wrap; /* rende responsive: le colonne si dispongono verticali su mobile */
}

.subheader-col {
  flex: 1;
  min-width: 200px;
}

.subheader-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap; /* evita overflow se nomi lunghi */
}

.subheader-label {
  font-weight: 600;
  color: #374151;
  margin-right: 8px;
}

.subheader-value {
  color: #111827;
}

.subheader-value.highlight {
  font-size: 1.1rem; /* leggermente più grande */
  font-weight: 600;
}


.personnel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.personnel-name {
  font-weight: 600;
  color: #111827;
  min-width: 150px; /* spazio per allineare i ruoli */
}

.personnel-roles span {
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #fff;
}


.main-header {
  display: flex;
  justify-content: space-between; /* titolo a sinistra, info a destra */
  align-items: flex-start;
  flex-wrap: wrap; /* rende responsive */
  gap: 20px;
  margin-bottom: 20px;
}

.header-left h1 {
  margin: 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-left .subtitle {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: #ffffff;
}

.header-right {
  display: flex;
  flex-direction: column; /* tutto in colonna */
  align-items: flex-end; /* allinea a destra */
}

.emergency-subheader-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: system-ui, sans-serif;
}

.subheader-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.subheader-label {
  font-weight: 600;
  color: #ffffff;
}

.subheader-value {
  font-weight: 600;
  color: #ffffff;
}



.highlight {
  font-size: 1.1rem;
}

.title-emergenza {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size:30px !important;
}

.title-emergenza-small {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    font-size:18px !important;
}

.great-vibes-regular {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}

.delicious-handrawn-regular {
  font-family: "Delicious Handrawn", cursive;
  font-weight: 400;
  font-style: normal;
}