:root{
  --paper:#F7F5F0; --panel:#FFFFFF; --ink:#1B2430; --ink-soft:#5B6472;
  --teal:#2F6F62; --teal-dark:#1E4A41; --teal-bg:#E7F0EE;
  --line:#E3DFD3;
  --green:#3F8F5F; --green-bg:#E7F3EC;
  --amber:#B9791F; --amber-bg:#FBF0DD;
  --red:#B84C3E; --red-bg:#FBE9E6;
  --blue-profesor:#3F6FA8; --pink-profesor:#C25B8E;
  --mono:'IBM Plex Mono', monospace; --sans:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--sans); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;}

/* Auth pages */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--ink);}
.auth-card{width:360px; max-width:90vw; background:#fff; border-radius:8px; padding:32px 28px; border-top:4px solid var(--teal);}
.auth-card h1{margin:0 0 4px; font-size:20px;}
.auth-card p{color:var(--ink-soft); font-size:13px; margin:0 0 20px;}
.auth-error{background:var(--red-bg); color:var(--red); font-size:13px; padding:8px 10px; border-radius:5px; margin-bottom:14px;}
.auth-ok{background:var(--green-bg); color:var(--green); font-size:13px; padding:8px 10px; border-radius:5px; margin-bottom:14px;}

#root{display:flex; min-height:100vh;}
.sidebar{width:224px; flex:none; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.brand{padding:20px 18px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;}
.brand .mark{width:34px; height:34px; background:var(--ink); border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden;}
.brand .mark img{width:100%; height:100%; object-fit:cover;}
.brand h1{font-size:14.5px; margin:0; font-weight:700;}
.brand span{font-size:11px; color:var(--ink-soft);}
nav{flex:1; padding:14px 10px; overflow-y:auto;}
.navlink{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 12px; border-radius:7px; background:none; border:none; color:#4B5563; font-family:var(--sans); font-size:13.5px; cursor:pointer; margin-bottom:2px;}
.navlink:hover{background:#F1EFE8;}
.navlink.active{background:var(--ink); color:#fff;}
.sidebar-foot{padding:14px 20px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);}

main{flex:1; min-width:0;}
header.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:5;}
header.topbar h2{font-size:19px; margin:0; font-weight:600;}
header.topbar .sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.content{padding:26px 32px 60px;}

.grid{display:grid; gap:18px;}
.cols-2{grid-template-columns:1.4fr 1fr;}
.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.cols-2{grid-template-columns:1fr;} .cols-4{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.cols-4{grid-template-columns:1fr;}}

.card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px 20px;}
.card h3{margin:0 0 14px; font-size:13.5px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.stat{font-family:var(--mono); font-size:30px; font-weight:600; line-height:1;}
.stat-label{font-size:12px; color:var(--ink-soft); margin-top:6px;}
.stat-card{display:flex; align-items:flex-start; justify-content:space-between;}
.icon-box{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
.icon-grey{background:#EEECE3; color:var(--ink-soft);}
.icon-teal{background:var(--teal-bg); color:var(--teal);}
.icon-amber{background:var(--amber-bg); color:var(--amber);}
.icon-red{background:var(--red-bg); color:var(--red);}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-weight:600; color:var(--ink-soft); font-size:11.5px; padding:8px 10px; border-bottom:1px solid var(--line);}
td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.mono{font-family:var(--mono);}

.btn{font-family:var(--sans); font-size:12.5px; font-weight:600; cursor:pointer; border-radius:5px; padding:8px 14px; border:1px solid var(--line); background:#fff; color:var(--ink);}
.btn:hover{border-color:var(--ink-soft);}
.btn-primary{background:var(--teal); border-color:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-dark);}
.btn-danger{color:var(--red); border-color:var(--red-bg);}
.btn-danger:hover{background:var(--red-bg);}
.btn-sm{padding:5px 10px; font-size:12px;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap;}
.btn-lg{padding:16px; font-size:15px; width:100%; border-radius:8px;}

input,select,textarea{font-family:var(--sans); font-size:13.5px; padding:8px 10px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); width:100%;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
label{font-size:12px; color:var(--ink-soft); display:block; margin-bottom:5px; font-weight:500;}
.field{margin-bottom:14px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.pill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600; font-family:var(--mono);}
.pill-green{background:var(--green-bg); color:var(--green);}
.pill-amber{background:var(--amber-bg); color:var(--amber);}
.pill-red{background:var(--red-bg); color:var(--red);}
.pill-grey{background:#EEECE3; color:var(--ink-soft);}

.empty{color:var(--ink-soft); font-size:13px; padding:22px 4px; text-align:center;}
.bar-wrap{background:#EEECE3; border-radius:20px; height:8px; overflow:hidden; margin-top:8px;}
.bar-fill{height:100%; border-radius:20px;}

.modal-bg{position:fixed; inset:0; background:rgba(27,36,48,.45); display:flex; align-items:center; justify-content:center; z-index:40;}
.modal{background:#fff; border-radius:8px; padding:24px 26px; width:440px; max-width:92vw; max-height:88vh; overflow-y:auto;}
.modal h3{margin:0 0 16px; font-size:16px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

.scanner-box{background:var(--ink); color:#fff; border-radius:8px; padding:34px; text-align:center; margin-bottom:22px;}
.scanner-box input{font-family:var(--mono); font-size:22px; text-align:center; padding:14px; border-radius:6px; border:none; background:#28323F; color:#fff; letter-spacing:1px;}
.scanner-box input:focus{outline:2px solid var(--teal);}
.scanner-box label{color:#9BA3AF;}
.scan-msg{margin-top:16px; font-size:14px; min-height:20px; font-weight:500;}
.scan-msg.ok{color:#7FD9A3;} .scan-msg.warn{color:#F2B25A;} .scan-msg.err{color:#F08174;}

.out-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); gap:10px;}
.out-row:last-child{border-bottom:none;}
.out-name{font-weight:600; font-size:13.5px;}
.out-meta{font-size:11.5px; color:var(--ink-soft);}
.out-time{font-family:var(--mono); font-weight:600;}
.freq-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line);}
.freq-row:last-child{border-bottom:none;}

.professor-bathrooms-grid{align-items:stretch;}
.prof-bathroom-card{min-width:0;}
.prof-bathroom-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;}
.prof-bathroom-title{display:flex; align-items:center; gap:10px;}
.prof-bathroom-label{font-size:13.5px; font-weight:600;}
.prof-bathroom-count{font-size:20px; font-weight:600; margin-top:1px;}
.prof-bathroom-subtitle{font-size:11.5px; color:var(--ink-soft); margin-bottom:4px;}
.prof-bathroom-people{min-height:64px;}
.prof-person-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line);}
.prof-person-row:last-child{border-bottom:none;}
.prof-person-time{font-family:var(--mono); font-size:11.5px; font-weight:600; white-space:nowrap;}
.prof-empty{font-size:12px; color:var(--ink-soft); padding:14px 0;}
.prof-bathroom-bar{margin-top:10px;}
.prof-bathroom-footer{display:flex; justify-content:space-between; gap:10px; font-size:10.5px; color:var(--ink-soft); margin-top:6px;}
.prof-send-btn{width:100%; color:#fff; margin-top:12px; font-weight:600;}

.legend{display:flex; gap:16px; font-size:12px; color:var(--ink-soft); margin-bottom:14px; flex-wrap:wrap;}
.legend .ldot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px;}
.group-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:10px;}
.group-card{border-radius:7px; padding:10px 12px; border:1px solid var(--line); background:#fff;}
.group-card .gname{font-weight:600; font-size:13px;}
.group-card .gcode{font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:1px;}
.group-card .gcount{margin-top:8px; display:flex; justify-content:flex-end;}
.gc-green{background:var(--green-bg); border-color:#CFE8D8;}
.gc-amber{background:var(--amber-bg); border-color:#F1DDB0;}
.gc-red{background:var(--red-bg); border-color:#F2CFC9;}

.trend-chart{display:flex; align-items:flex-end; gap:8px; height:110px; padding-top:10px;}
.trend-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px;}
.trend-bar{width:100%; max-width:34px; border-radius:4px 4px 0 0; background:var(--teal); min-height:3px;}
.trend-label{font-size:10.5px; color:var(--ink-soft);}
.trend-val{font-size:10.5px; font-family:var(--mono); color:var(--ink-soft);}

.logo-upload{display:flex; align-items:center; gap:14px;}
.logo-preview{width:56px; height:56px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; background:#F4F2EA; flex:none;}
.logo-preview img{width:100%; height:100%; object-fit:cover;}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
.toolbar select, .toolbar input{width:auto; min-width:150px;}

.badge-card{width:280px; border:1px solid var(--line); border-radius:8px; padding:20px; text-align:center; margin:0 auto;}
.badge-card .qr-holder{margin:14px auto; width:150px;}
.badge-name{font-weight:700; font-size:16px; margin-top:6px;}
.badge-group{font-size:12.5px; color:var(--ink-soft);}
.badge-code{font-family:var(--mono); font-size:14px; margin-top:8px; letter-spacing:1px;}

@media print{
  body *{visibility:hidden;}
  #print-area, #print-area *{visibility:visible;}
  #print-area{position:absolute; top:0; left:0; width:100%;}
}

/* ---------- Vista móvil ---------- */
.mobile-body #root{display:block; min-height:auto;}
.mobile-body{background:var(--paper); min-height:100vh;}
.mobile-header{position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; z-index:5;}
.mobile-header .brand-mini{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px;}
.mobile-header .mark{width:28px; height:28px; background:var(--ink); border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden;}
.mobile-header .mark img{width:100%; height:100%; object-fit:cover;}
.mobile-content{padding:16px; max-width:520px; margin:0 auto;}
.bathroom-btns{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px;}
.bathroom-btn{padding:22px 12px; border-radius:12px; border:3px solid transparent; color:#fff; font-family:var(--sans); font-weight:700; font-size:16px; text-align:center; cursor:pointer; box-shadow:0 4px 10px rgba(27,36,48,.15); transition:transform .08s;}
.bathroom-btn:active{transform:scale(.97);}
.bathroom-btn.selected{border-color:var(--ink); box-shadow:0 0 0 3px #fff inset, 0 4px 10px rgba(27,36,48,.25);}
.bathroom-btn .bsub{display:block; font-weight:600; font-size:12.5px; opacity:.9; margin-top:4px;}
.mobile-tabs{display:flex; gap:8px; margin-bottom:16px;}
.mobile-tab{flex:1; text-align:center; padding:10px; border-radius:7px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:600; cursor:pointer;}
.mobile-tab.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.student-btn{width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 16px; border-radius:10px; border:1px solid var(--line); background:#fff; margin-bottom:10px; font-family:var(--sans); box-shadow:0 2px 6px rgba(27,36,48,.06);}
.student-btn .sname{font-weight:600; font-size:15px; text-align:left;}
.student-btn .scode{font-size:11.5px; color:var(--ink-soft); font-family:var(--mono);}
.bottom-nav{position:fixed; bottom:0; left:0; right:0; max-width:520px; margin:0 auto; background:#fff; border-top:1px solid var(--line); display:flex; z-index:10; padding-bottom:env(safe-area-inset-bottom, 0);}
.bottom-nav-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px 10px; color:var(--ink-soft); font-size:10.5px; font-weight:600; cursor:pointer; background:none; border:none; font-family:var(--sans);}
.bottom-nav-item.active{color:var(--teal);}
#qr-reader{border-radius:10px; overflow:hidden; margin-bottom:16px;}

/* ============================= VISTA PC PROFESOR ============================= */
body.role-profesor .sidebar nav .navlink:not([data-tab="panel"]):not([data-tab="escaner"]){display:none !important;}
body.role-profesor .sidebar{width:224px;}
body.role-profesor .topbar{background:#F7F5F0;}
body.role-profesor .professor-bathrooms-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.prof-gender-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;background:#eef2f4;}
.prof-blue .prof-gender-icon{background:#e7eef7;}
.prof-pink .prof-gender-icon{background:#f8e7ef;}
.prof-bathroom-card{padding:18px 20px 16px;}
.prof-bathroom-card.prof-blue{border-top:3px solid var(--blue-profesor);}
.prof-bathroom-card.prof-pink{border-top:3px solid var(--pink-profesor);}
.prof-bathroom-title{gap:12px;}
.prof-bathroom-label{font-size:14px;}
.prof-bathroom-count{font-size:22px;line-height:1.1;}
.prof-bathroom-people{min-height:76px;margin-top:3px;}
.prof-person-main{display:flex;align-items:center;gap:9px;min-width:0;}
.prof-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef1f2;color:var(--teal-dark);font:600 10px var(--mono);flex:none;}
.prof-blue .prof-avatar{background:#e7eef7;color:var(--blue-profesor);}
.prof-pink .prof-avatar{background:#f8e7ef;color:var(--pink-profesor);}
.prof-progress-track{height:9px;background:#eeeae1;border-radius:999px;overflow:hidden;margin-top:12px;}
.prof-progress-fill{height:100%;border-radius:999px;background:var(--progress-color);transition:width .2s ease;}
.prof-progress-fill.is-full{background:var(--amber) !important;}
.prof-progress-fill.is-over{background:var(--red) !important;width:100% !important;}
.prof-bathroom-footer{font-size:10.5px;margin-top:6px;}
.prof-send-btn{background:var(--button-color);border-color:var(--button-color);color:#fff;box-shadow:none;}
.prof-send-btn:hover{filter:brightness(.94);border-color:var(--button-color);}
.prof-group-filters{display:flex;gap:8px;min-width:360px;}
.prof-group-filters select{width:auto;min-width:150px;}
@media(max-width:980px){
  body.role-profesor .professor-bathrooms-grid{grid-template-columns:1fr;}
  .prof-group-filters{min-width:0;}
}
@media(max-width:640px){
  body.role-profesor .sidebar{width:100%;height:auto;position:relative;}
}