:root{
  --pbs-azul:#1C3055;
  --pbs-navy:#142133;
  --pbs-gris:#EDEDED;
  --pbs-turquesa:#217D8C;
  --pbs-dorado:#D6A338;
  --white:#ffffff;
  --radius:12px;
  --shadow:0 2px 10px rgba(20,33,51,0.08);
  --shadow-lg:0 8px 30px rgba(20,33,51,0.16);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Poppins',sans-serif;background:var(--pbs-gris);color:var(--pbs-navy);}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;font-weight:600;color:var(--pbs-azul);margin:0 0 8px;}
a{color:var(--pbs-turquesa);}
button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#c4cbd6;border-radius:4px;}

/* ---------- LOGIN ---------- */
#loginScreen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pbs-navy) 0%,var(--pbs-azul) 60%,var(--pbs-turquesa) 130%);
}
.login-card{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:40px 36px;width:400px;max-width:92vw;text-align:center;
}
.pbs-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;}
.login-card p.subtitle{color:#5b6b82;font-size:13.5px;margin:0 0 22px;}
.field{text-align:left;margin-bottom:14px;}
.field label{font-size:12.5px;font-weight:600;color:var(--pbs-azul);display:block;margin-bottom:5px;}
.field select,.field input{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid #d7dde6;font-family:inherit;font-size:14px;background:#fafbfc;
}
.field select:focus,.field input:focus{outline:2px solid var(--pbs-turquesa);outline-offset:1px;}
.btn{border:none;border-radius:8px;padding:11px 18px;font-weight:600;font-size:14px;transition:.15s;}
.btn-primary{background:var(--pbs-azul);color:#fff;width:100%;}
.btn-primary:hover{background:var(--pbs-navy);}
.login-hint{margin-top:16px;font-size:12px;color:#8b97a8;line-height:1.5;}
.login-error{color:#b3312c;font-size:12.5px;margin:-6px 0 12px;display:none;}
.login-info{color:#1a6673;background:#e6f2f0;padding:8px 10px;border-radius:8px;font-size:12px;margin:-6px 0 12px;display:none;}
.switch-mode{margin-top:14px;font-size:12.5px;}
.switch-mode a{cursor:pointer;font-weight:600;}

/* ---------- APP SHELL ---------- */
#app{display:none;min-height:100vh;flex-direction:column;}
header.topbar{
  background:var(--pbs-azul);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;box-shadow:var(--shadow);position:sticky;top:0;z-index:50;
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.topbar-title{font-weight:700;font-size:16px;color:#fff;}
.topbar-title small{display:block;font-weight:400;font-size:10.5px;color:#9fb3cc;letter-spacing:1.5px;}
.topbar-right{display:flex;align-items:center;gap:14px;font-size:13px;}
.role-badge{
  background:var(--pbs-dorado);color:var(--pbs-navy);font-weight:700;font-size:10.5px;padding:3px 10px;
  border-radius:20px;text-transform:uppercase;letter-spacing:.5px;
}
.live-dot{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#9fe6b8;}
.live-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:#2f9e5e;display:inline-block;animation:pulse 1.6s infinite;}
@keyframes pulse{0%{opacity:1;}50%{opacity:.3;}100%{opacity:1;}}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);padding:7px 14px;border-radius:8px;font-size:12.5px;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}

nav.tabs{
  display:flex;gap:4px;background:#fff;padding:0 20px;box-shadow:var(--shadow);position:sticky;top:60px;z-index:40;overflow-x:auto;
}
nav.tabs button{
  background:none;border:none;padding:14px 16px;font-size:13.5px;font-weight:600;color:#6b7789;border-bottom:3px solid transparent;white-space:nowrap;
}
nav.tabs button.active{color:var(--pbs-azul);border-bottom-color:var(--pbs-turquesa);}
nav.tabs button:hover{color:var(--pbs-azul);}

main{flex:1;padding:22px 24px 60px;max-width:1500px;width:100%;margin:0 auto;}
.view{display:none;}
.view.active{display:block;}

/* ---------- FILTER BAR ---------- */
.filterbar{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:18px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
}
.filterbar .field{margin:0;min-width:150px;flex:1;}
.filterbar .field.grow2{flex:2;}
.filterbar .field label{font-size:11px;color:#6b7789;text-transform:uppercase;letter-spacing:.4px;}
.filterbar select,.filterbar input{padding:8px 10px;font-size:13px;}
.filter-actions{display:flex;gap:8px;}
.btn-sm{padding:8px 14px;font-size:12.5px;border-radius:8px;}
.btn-secondary{background:var(--pbs-gris);color:var(--pbs-azul);border:1px solid #d7dde6;}
.btn-secondary:hover{background:#e2e6ea;}
.btn-accent{background:var(--pbs-turquesa);color:#fff;}
.btn-accent:hover{background:#1a6673;}
.btn-gold{background:var(--pbs-dorado);color:var(--pbs-navy);}
.btn-gold:hover{filter:brightness(0.95);}

/* ---------- KPI CARDS ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.kpi-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;border-left:4px solid var(--pbs-turquesa);}
.kpi-card .kpi-label{font-size:11.5px;color:#6b7789;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.kpi-card .kpi-value{font-size:26px;font-weight:700;color:var(--pbs-azul);margin-top:4px;}
.kpi-card.gold{border-left-color:var(--pbs-dorado);}
.kpi-card.navy{border-left-color:var(--pbs-navy);}

.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;}
.chart-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;}
.chart-card canvas{max-height:280px;}
.chart-card.wide{grid-column:1/-1;}

/* ---------- TABLE ---------- */
.table-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{
  background:var(--pbs-azul);color:#fff;text-align:left;padding:11px 12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;
  position:sticky;top:0;white-space:nowrap;
}
tbody td{padding:10px 12px;border-bottom:1px solid #eef0f3;white-space:nowrap;}
tbody tr:hover{background:#f7f9fb;}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-bachelor{background:#e3edf7;color:var(--pbs-azul);}
.badge-master{background:#e6f2f0;color:var(--pbs-turquesa);}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;}
.dot-yes{background:#2f9e5e;}
.dot-no{background:#d0d6dd;}
.icon-btn{border:none;background:var(--pbs-gris);border-radius:6px;padding:5px 8px;font-size:12px;margin-right:4px;}
.icon-btn:hover{background:#dfe4e9;}
.table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;flex-wrap:wrap;gap:10px;}
.count-pill{font-size:12.5px;color:#6b7789;}

/* ---------- MODAL ---------- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(20,33,51,.55);z-index:100;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:40px 16px;
}
.modal-overlay.active{display:flex;}
.modal{background:#fff;border-radius:var(--radius);width:720px;max-width:100%;box-shadow:var(--shadow-lg);}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #eef0f3;}
.modal-header h3{margin:0;}
.modal-close{background:none;border:none;font-size:20px;color:#8b97a8;}
.modal-body{padding:20px 22px;max-height:70vh;overflow-y:auto;}
.modal-footer{padding:14px 22px;border-top:1px solid #eef0f3;display:flex;justify-content:flex-end;gap:10px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .full{grid-column:1/-1;}
.section-title{
  font-size:12px;font-weight:700;color:var(--pbs-turquesa);text-transform:uppercase;letter-spacing:.5px;
  margin:18px 0 10px;padding-top:14px;border-top:1px dashed #e2e6ea;
}
.section-title:first-child{border-top:none;margin-top:0;padding-top:0;}
.checklist-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 14px;}
.chk-row{display:flex;align-items:center;gap:8px;font-size:13px;}
.onboarding-block{background:#f7f9fb;border-radius:10px;padding:14px;margin-bottom:12px;}
.onboarding-block .row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.onboarding-block .row-top strong{font-size:13.5px;color:var(--pbs-azul);}
.comment-list{max-height:150px;overflow-y:auto;margin:8px 0;}
.comment-item{background:#fff;border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:6px;border-left:3px solid var(--pbs-turquesa);}
.comment-item .meta{color:#8b97a8;font-size:10.5px;margin-bottom:2px;}
.comment-add{display:flex;gap:8px;}
.comment-add textarea{flex:1;resize:vertical;min-height:38px;border-radius:8px;border:1px solid #d7dde6;padding:8px;font-family:inherit;font-size:12.5px;}
textarea.template-editor{width:100%;min-height:160px;border-radius:8px;border:1px solid #d7dde6;padding:10px;font-family:'Poppins',monospace;font-size:13px;}
.tag{display:inline-block;background:var(--pbs-gris);color:var(--pbs-azul);font-size:11px;padding:2px 8px;border-radius:6px;margin:2px 4px 2px 0;font-family:monospace;}
.empty-state{text-align:center;padding:50px 20px;color:#8b97a8;}
.perm-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;}

#toast{position:fixed;bottom:24px;right:24px;background:var(--pbs-navy);color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;box-shadow:var(--shadow-lg);z-index:200;display:none;max-width:320px;}
#toast.show{display:block;animation:fadein .2s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.small-muted{font-size:11.5px;color:#8b97a8;}
.disabled-note{background:#fff8e8;border:1px solid #f1dfa8;color:#8a6d1c;padding:10px 14px;border-radius:8px;font-size:12.5px;margin-bottom:14px;}