*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #f8f9fa;
  --srf:     #ffffff;
  --srf2:    #f1f3f4;
  --bdr:     #e0e0e0;
  --txt:     #202124;
  --txt2:    #5f6368;
  --txt3:    #9aa0a6;
  --ink:     #1a73e8;
  --ink-l:   #c5d3f0;
  --ink-ll:  #e8f0fe;
  --amb:     #c47b2a;
  --amb-l:   #fdefd8;
  --red:     #b83232;
  --red-l:   #fde8e8;
  --r:       12px;
  --r-sm:    8px;
  --r-md:    14px;
  --r-xl:    28px;
  --sh:      0 1px 3px rgba(0,0,0,0.08);
  --sh-lg:   0 4px 24px rgba(0,0,0,0.1);

  /* ── Design system v2: warm editorial palette ── */
  /* Alias old tokens → new ones so inline styles pick up the new values */
  --bg:            #FAF9F6;   /* was #f8f9fa — now same as --paper */
  --srf2:          #F4F2EE;   /* was #f1f3f4 — now same as --paper-2 */
  --bdr:           #E6E3DC;   /* was #e0e0e0 — now same as --line */
  --paper:         #FAF9F6;
  --paper-2:       #F4F2EE;
  --surface-2:     #F0EDE8;
  --surface-sunk:  #ECEBE4;
  --line:          #E6E3DC;
  --line-2:        #D9D5CB;
  --line-strong:   #C5BFB2;
  --muted:         #787F93;
  --muted-2:       #B0B5C4;
  --accent:        #C76B3D;
  --accent-soft:   #F3E1D5;
  --accent-ink:    #7A3E1F;
  --success:       #3F9367;
  --success-soft:  #E3F2EC;
  --warning:       #D69540;
  --warning-soft:  #FBF0DC;
  --danger:        #C24D2F;
  --danger-soft:   #FAE6E0;
  --info:          #4D6FA8;
  --info-soft:     #E3EAFA;
  --font-display:  "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui:       "Geist", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

body { font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; background:var(--bg); color:var(--txt); min-height:100vh; display:flex; flex-direction:column; }

/* SETUP */
#setup { position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px; }
.setup-card { background:var(--srf);border:1px solid var(--bdr);border-radius:20px;padding:40px;max-width:460px;width:100%;box-shadow:var(--sh-lg); }
.setup-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background: var(--ink);
  flex-shrink: 0;
}
.setup-title { font-family:'Fraunces',serif;font-size:26px;font-weight:400;margin-bottom:6px; }
.setup-sub { font-size:14px;color:var(--txt2);line-height:1.6;margin-bottom:28px; }
.setup-field { margin-bottom:14px; }
.setup-label { font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--txt2);margin-bottom:5px;display:block; }
.setup-input { width:100%;padding:11px 14px;border:1.5px solid var(--bdr);border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--txt);background:var(--srf2);outline:none;transition:border-color .15s; }
.setup-input:focus { border-color:var(--ink); }
.setup-hint { font-size:11px;color:var(--txt3);margin-top:4px; }
.setup-btn { width:100%;padding:13px;background:var(--ink);color:#fff;border:none;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .15s;margin-top:8px; }
.setup-btn:hover { opacity:.88; }
.setup-err { font-size:12px;color:var(--red);margin-top:8px;display:none; }
.setup-link { font-size:12px;color:var(--ink);cursor:pointer;text-decoration:underline;margin-top:12px;display:inline-block; }

/* HEADER */
.hdr { background:#ffffff;border-bottom:1px solid #e0e0e0;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100; }
.brand { display:flex;align-items:center;gap:10px; }
.brand-logo {
  width: 140px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: white;
  overflow: hidden;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-name { font-family:'Fraunces',serif;font-size:20px;font-weight:400;color:#202124; }
.brand-sub { font-size:11px;color:var(--txt3); }
.hdr-r { display:flex;align-items:center;gap:10px; }
.ctr-pill { display:flex;align-items:center;gap:7px;background:#f1f3f4;border:none;border-radius:24px;padding:8px 16px;font-size:13px;font-weight:500;color:#3c4043; }
.ctr-dot { width:7px;height:7px;border-radius:50%;background:var(--ink); }
.ctr-sel { background:none;border:none;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:var(--txt2);cursor:pointer;outline:none; }
.role-pill { font-size:11px;font-weight:500;padding:4px 10px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:all .15s;user-select:none; }
.role-pill.fam { background:var(--ink-ll);color:var(--ink);border-color:var(--ink-l); }
.role-pill.pro { background:var(--amb-l);color:var(--amb);border-color:#f5d9a8; }
.est-badge { display:inline-block;border-radius:12px;padding:2px 9px;font-size:11px;font-weight:500;white-space:nowrap; }
.est-activo   { background:#e6f4ea;color:#1e6b3a; }
.est-inactivo { background:#f1f3f4;color:#5f6368; }
.est-pendiente{ background:#fef7e0;color:#b06000; }

/* TABS */
.tabs { background:#ffffff;border-bottom:1px solid #e0e0e0;padding:0 24px;display:flex;gap:0;height:48px;align-items:center; }
.tab { height:48px;display:inline-flex;align-items:center;padding:0 16px;font-size:14px;font-weight:500;color:#5f6368;cursor:pointer;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap; }
.tab:hover { color:#3c4043;background:#f1f3f4; }
.tab.active { color:var(--ink);border-bottom-color:var(--ink); }

/* MAIN */
.main { flex:1;display:flex;overflow:hidden;height:calc(100vh - 64px - 48px); }
.panel { display:none;width:100%; }
.panel.active { display:flex; }

/* CHAT */
#panel-chat { flex-direction:row; }
#panel-chat.active { display:flex; }

.sidebar { width:220px;flex-shrink:0;background:#ffffff;border-right:1px solid #e0e0e0;padding:8px 0;overflow-y:auto;display:flex;flex-direction:column;gap:2px; }
.sb-sec { font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink);text-transform:uppercase;padding:16px 16px 4px; }
.sb-item { padding:8px 16px;border-radius:0 24px 24px 0;margin-right:12px;cursor:pointer;font-size:13px;color:#3c4043;transition:all .12s;display:flex;align-items:center;gap:12px;border:none; }
.sb-item:hover { background:#f1f3f4; }
.sb-item.active { background:#e8f0fe;color:var(--ink);font-weight:500; }

.chat-main { flex:1;display:flex;flex-direction:column;overflow:hidden; }
.chat-msgs { flex:1;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth; }

.welcome { text-align:center;padding:48px 20px;max-width:400px;margin:auto; }
.wlc-ico { width:60px;height:60px;background:var(--ink);border-radius:18px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:28px;color:#fff; }
.wlc-title { font-family:'Fraunces',serif;font-size:22px;font-weight:400;margin-bottom:8px; }
.wlc-sub { font-size:14px;color:var(--txt2);line-height:1.6;margin-bottom:24px; }
.quick-qs { display:flex;flex-direction:column;gap:7px;text-align:left; }
.quick-q { padding:8px 16px;background:white;border:1px solid #dadce0;border-radius:20px;font-size:13px;color:#3c4043;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px; }
.quick-q::before { content:"→";opacity:.5;font-size:12px; }
.quick-q:hover { border-color:var(--ink);color:var(--ink); }

.msg { display:flex;gap:9px;max-width:74%;animation:fu .22s ease; }
@keyframes fu { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.msg.user { align-self:flex-end;flex-direction:row-reverse; }
.msg.bot  { align-self:flex-start; }
.msg-av { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;margin-top:2px; }
.msg.bot  .msg-av { background:var(--ink);color:#fff;font-family:'Fraunces',serif;font-size:15px; }
.msg.user .msg-av { background:var(--amb);color:#fff; }
.msg-body { display:flex;flex-direction:column;gap:3px; }
.msg-bbl { padding:11px 15px;border-radius:var(--r);font-size:14px;line-height:1.65; }
.msg.bot  .msg-bbl { background:var(--srf);border:1px solid var(--bdr);border-bottom-left-radius:4px;box-shadow:var(--sh); }
.msg.user .msg-bbl { background:var(--ink);color:#fff;border-bottom-right-radius:4px; }
.msg-bbl p{margin:0} .msg-bbl p+p{margin-top:6px} .msg-bbl ul{padding-left:16px;margin:6px 0} .msg-bbl li{margin:3px 0} .msg-bbl strong{font-weight:600}
.msg-time { font-size:10px;color:var(--txt3); }
.msg.user .msg-time { text-align:right; }

.typing { display:none;align-self:flex-start;align-items:center;gap:9px; }
.typing.show { display:flex; }
.typ-av { width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-family:'Fraunces',serif;font-size:15px;display:flex;align-items:center;justify-content:center; }
.dots { background:var(--srf);border:1px solid var(--bdr);border-radius:var(--r);border-bottom-left-radius:4px;padding:11px 15px;display:flex;gap:4px;box-shadow:var(--sh); }
.dots span { width:6px;height:6px;background:var(--txt3);border-radius:50%;animation:bn 1.1s infinite; }
.dots span:nth-child(2){animation-delay:.18s} .dots span:nth-child(3){animation-delay:.36s}
@keyframes bn{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

.input-area { padding:14px 18px;background:var(--srf);border-top:1px solid var(--bdr);display:flex;gap:9px;align-items:flex-end; }
.inp-wrap { flex:1; }
.chat-inp { width:100%;padding:12px 20px;border:1px solid #e0e0e0;border-radius:24px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--txt);background:#ffffff;outline:none;resize:none;line-height:1.5;transition:border-color .15s,box-shadow .15s;min-height:46px;max-height:120px;box-shadow:0 1px 3px rgba(0,0,0,.08); }
.chat-inp:focus { border-color:var(--ink);box-shadow:0 1px 6px rgba(0,0,0,.12);background:#ffffff; }
.chat-inp::placeholder { color:var(--txt3); }
.send-btn { width:46px;height:46px;background:var(--ink);border:none;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .1s;flex-shrink:0; }
.send-btn:hover{opacity:.85} .send-btn:active{transform:scale(.94)} .send-btn:disabled{opacity:.35;cursor:not-allowed}
.send-btn svg{width:18px;height:18px;fill:#fff}
.load-bar { height:2px;background:var(--ink-l);position:relative;overflow:hidden;border-radius:1px;margin:0 18px 2px;display:none; }
.load-bar.show { display:block; }
.load-bar::after { content:'';position:absolute;inset:0;background:var(--ink);animation:sl 1.4s ease-in-out infinite; }
@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}

/* ADMIN */
#panel-admin { flex-direction:column;overflow-y:auto;padding:28px;gap:22px;background:var(--bg); }
#panel-admin.active { display:flex; }
.pg-hdr { display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px; }
.pg-title { font-family:'Fraunces',serif;font-size:26px;font-weight:400; }
.pg-sub { font-size:14px;color:var(--muted);margin-top:3px; }
.stats { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.stat { background:var(--srf);border:1px solid var(--bdr);border-radius:var(--r);padding:18px 20px; }
.stat-n { font-family:'Fraunces',serif;font-size:30px; }
.stat-l { font-size:12px;color:var(--txt3);margin-top:2px; }
.stat-ch { font-size:11px;color:var(--ink);font-weight:500;margin-top:5px; }
.banner { background:var(--ink-ll);border:1px solid var(--ink-l);border-radius:var(--r-sm);padding:11px 15px;font-size:13px;color:var(--ink);display:flex;gap:8px;line-height:1.5; }
.grid2 { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.card { background:var(--srf);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px; }
.card-hdr { display:flex;align-items:center;gap:10px; }
.card-ico { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px; }
.card-ico.g{background:var(--ink-ll)} .card-ico.o{background:var(--amb-l)} .card-ico.b{background:#dbeafe} .card-ico.p{background:#ede9fe}
.card-title { font-size:15px;font-weight:600; }
.card-desc { font-size:13px;color:var(--txt2);line-height:1.5; }
.lbl { font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--txt2);margin-bottom:4px;display:block; }
.fi { width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--txt);background:var(--srf2);outline:none;transition:border-color .15s; }
.fi:focus { border-color:var(--ink); }
.fa { width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--txt);background:var(--srf2);outline:none;resize:vertical;min-height:76px;line-height:1.5;transition:border-color .15s; }
.fa:focus { border-color:var(--ink); }
.btn { padding:9px 16px;border:none;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px; }
.btn-p{background:var(--ink);color:#fff} .btn-p:hover{opacity:.86}
.btn-s{background:var(--srf2);color:var(--txt2);border:1px solid var(--bdr)} .btn-s:hover{border-color:var(--ink);color:var(--ink)}
.upload-zone { border:2px dashed var(--bdr);border-radius:var(--r-sm);padding:22px;text-align:center;cursor:pointer;transition:all .15s;background:var(--srf2); }
.upload-zone:hover { border-color:var(--ink);background:var(--ink-ll); }
.doc-list { display:flex;flex-direction:column;gap:7px; }
.doc-item { display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--srf2);border:1px solid var(--bdr);border-radius:var(--r-sm);font-size:13px; }
.doc-nm { flex:1;font-weight:500; } .doc-mt { font-size:11px;color:var(--txt3); }
.bdg { font-size:11px;font-weight:500;padding:2px 8px;border-radius:100px; }
.bdg.ok{background:var(--ink-ll);color:var(--ink)} .bdg.pend{background:var(--amb-l);color:var(--amb)}
.tbl { width:100%;border-collapse:collapse;font-size:13px; }
.tbl th { padding:8px 12px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--bdr); }
.tbl td { padding:10px 12px;border-bottom:1px solid var(--bdr);color:var(--txt2); }
.tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:var(--srf2)}
.spin { animation:sp .8s linear infinite;display:inline-block; }
@keyframes sp{to{transform:rotate(360deg)}}
.unan { padding:11px 14px;background:var(--amb-l);border:1px solid #f5d9a8;border-radius:var(--r-sm);margin-bottom:8px; }
.unan-meta { font-size:11px;font-weight:600;color:var(--amb);margin-bottom:4px; }
.unan-q { font-size:13px;color:var(--txt);margin-bottom:8px; }
@media(max-width:768px){.sidebar{display:none}.grid2{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

/* TOGGLE SWITCH */
.toggle-wrap { display:flex;align-items:center;gap:8px;cursor:pointer; }
.toggle-track { position:relative;width:36px;height:20px;background:var(--bdr);border-radius:10px;transition:background .2s;flex-shrink:0; }
.toggle-track.on { background:var(--ink); }
.toggle-thumb { position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.toggle-track.on .toggle-thumb { transform:translateX(16px); }

/* TOGGLE SWITCH */
.toggle-wrap { display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none; }
.toggle-track { position:relative;width:36px;height:20px;background:var(--bdr);border-radius:10px;transition:background .2s;flex-shrink:0; }
.toggle-track.on { background:var(--ink); }
.toggle-thumb { position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.toggle-track.on .toggle-thumb { transform:translateX(16px); }

/* AUTH EXTRAS */
#form-register select.setup-input { cursor:pointer; }
#logout-btn { cursor:pointer; }
.alumno-card { display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--srf2);border:1.5px solid var(--bdr);border-radius:var(--r-sm);cursor:pointer;transition:all .15s;font-size:13px; }
.alumno-card:hover { border-color:var(--ink); }
.alumno-card.selected { border-color:var(--ink);background:var(--ink-ll); }
.alumno-card .chk { width:18px;height:18px;border-radius:4px;border:1.5px solid var(--bdr);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .15s; }
.alumno-card.selected .chk { background:var(--ink);border-color:var(--ink);color:#fff; }
.alumno-info { flex:1; }
.alumno-nombre { font-weight:500;color:var(--txt); }
.alumno-curso { font-size:11px;color:var(--txt3); }

/* ── MEJORAS V2 ── */
#banner-aviso { display:none; background:#e8f0fe; border-bottom:1px solid #c5d3f0; padding:10px 24px; font-size:13px; color:#1a3461; align-items:center; gap:8px; font-weight:500; }
.mic-btn { width:46px; height:46px; background:var(--srf2); border:1.5px solid var(--bdr); border-radius:var(--r-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; transition:all .15s; }
.mic-btn:hover { border-color:var(--ink); }
.mic-btn.listening { background:var(--red-l); border-color:var(--red); animation:pulse-mic .8s ease-in-out infinite; }
@keyframes pulse-mic { 0%,100%{opacity:1} 50%{opacity:.4} }
.role-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; text-align:left; }
.role-card { padding:16px; background:white; border:1px solid #e0e0e0; border-radius:12px; cursor:pointer; transition:all .15s; display:flex; flex-direction:column; gap:10px; }
.role-card:hover { box-shadow:0 1px 6px rgba(0,0,0,.12); border-color:#c5c5c5; }
.rc-ico { width:40px; height:40px; border-radius:10px; background:#e8f0fe; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.rc-lbl { font-size:13px; font-weight:500; color:var(--txt); }
.rc-sub { font-size:11px; color:var(--txt3); margin-top:1px; }
/* ── OPTIMIZACIÓN MÓVIL ── */
@media (max-width: 768px) {

  /* Header compacto */
  .hdr { padding:0 12px; height:52px; }
  .brand-name { font-size:16px; }
  .brand-sub { display:none; }
  .ctr-pill { padding:4px 8px 4px 6px; font-size:12px; }
  #logout-btn { font-size:11px; padding:3px 8px; }
  .role-pill { font-size:11px; padding:3px 8px; }

  /* Tabs scrollables */
  .tabs { overflow-x:auto; padding:0 12px; gap:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { padding:10px 14px; font-size:12px; white-space:nowrap; flex-shrink:0; }

  /* Main sin sidebar */
  .main { height:calc(100vh - 52px - 48px); }
  .sidebar { display:none !important; }
  .chat-main { width:100%; }

  /* Chat msgs más cómodas */
  .chat-msgs { padding:14px 12px; gap:10px; }
  .msg { max-width:90%; }
  .msg-bbl { font-size:13px; padding:10px 13px; }

  /* Input area móvil */
  .input-area { padding:10px 12px; gap:7px; }
  .chat-inp { font-size:16px; } /* 16px previene zoom en iOS — umbral es <16px */
  .send-btn { width:42px; height:42px; }
  .mic-btn { width:42px; height:42px; }

  /* Welcome centrado y compacto */
  .welcome { padding:24px 16px; }
  .wlc-ico { width:48px; height:48px; font-size:22px; }
  .wlc-title { font-size:18px; }
  .wlc-sub { font-size:13px; }
  .quick-q { font-size:12px; padding:9px 12px; }

  /* Tarjetas rol en móvil: 1 columna */
  .role-cards { grid-template-columns:1fr; }
  .role-card { padding:10px 12px; }

  /* Admin panel */
  #panel-admin { padding:16px 14px; gap:14px; }
  .grid2 { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; gap:10px; }
  .stat { padding:14px 16px; }
  .stat-n { font-size:24px; }
  .pg-title { font-size:20px; }
  .card { padding:16px; }

  /* Comedor panel */
  #panel-comedor > div { padding:16px 14px !important; }

  /* Users panel */
  #panel-users { padding:16px 14px !important; }
  .tbl { font-size:11px; }
  .tbl th, .tbl td { padding:7px 8px; }

  /* Setup (login) */
  .setup-card { padding:28px 20px; }
}

/* Móvil pequeño (iPhone SE, etc.) */
@media (max-width: 375px) {
  .brand-logo { width:100px; height:34px; font-size:13px; }
  .hdr { height:48px; }
  .tab { padding:9px 11px; font-size:11px; }
}

/* PWA: quitar bounce scroll en iOS */
html { height:100%; }
body { height:100%; overflow:hidden; }
.main { overflow:hidden; }
.chat-msgs { -webkit-overflow-scrolling:touch; }
#panel-admin, #panel-comedor > div, #panel-users { -webkit-overflow-scrolling:touch; }

/* ═══════════════════════════════════════════════════════
   SIDEBAR LAYOUT — reemplaza header+tabs horizontales
═══════════════════════════════════════════════════════ */

/* Ocultar header/tabs fuera de pantalla; JS puede seguir seteando display sin problema */
#app-hdr, #app-tabs {
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* App shell: contenedor raíz de la app logueada */
#app-shell {
  display: none; /* mostrado por JS al login */
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Corregir la altura heredada de .main (ya no se usa header+tabs) */
#app-main.main { height: 100% !important; }

/* ── Topbar ── */
#app-topbar {
  height: 56px;
  background: var(--srf);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  flex-shrink: 0;
  z-index: 50;
  gap: 0;
}
#sidebar-toggle-btn {
  width: 52px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt2);
  font-size: 20px;
  flex-shrink: 0;
  transition: color .15s;
}
#sidebar-toggle-btn:hover { color: var(--ink); }
#topbar-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--txt);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.topbar-ctr-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--srf2);
  border-radius: 24px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt2);
}
.topbar-ctr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Fraunces', serif;
  flex-shrink: 0;
  cursor: default;
}

/* ── App body (sidebar + paneles) ── */
#app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Sidebar ── */
#app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--srf);
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .2s ease;
}
#app-sidebar.sb-collapsed { width: 60px; }

/* Logo en el sidebar */
.sb-logo {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  overflow: hidden;
}
#app-sidebar .brand-logo {
  width: 130px;
  height: 38px;
  font-size: 15px;
  transition: width .2s, height .2s, padding .2s;
}
#app-sidebar.sb-collapsed .brand-logo {
  width: 36px;
  height: 36px;
  font-size: 13px;
  padding: 2px;
}

/* Área de nav */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bdr) transparent;
}
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

.sb-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt3);
  padding: 10px 14px 3px;
  white-space: nowrap;
  transition: opacity .15s, max-height .2s, padding .2s;
  overflow: hidden;
  max-height: 30px;
}
#app-sidebar.sb-collapsed .sb-group-label {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  margin: 1px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--txt2);
  transition: background .12s, color .12s;
  border: none;
  background: none;
  width: calc(100% - 12px);
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item:hover { background: var(--srf2); color: var(--txt); }
.nav-item.active { background: var(--ink-ll); color: var(--ink); font-weight: 500; }
.nav-item i { font-size: 18px; flex-shrink: 0; width: 20px; text-align: center; }
.nav-item-label { flex: 1; overflow: hidden; transition: opacity .15s, max-width .2s; max-width: 160px; }
#app-sidebar.sb-collapsed .nav-item-label { opacity: 0; max-width: 0; }
#app-sidebar.sb-collapsed .nav-item { justify-content: center; padding: 9px; }

.nav-badge {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}
#app-sidebar.sb-collapsed .nav-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  font-size: 9px;
  border-radius: 8px;
  padding: 0 2px;
}

/* Footer del sidebar */
.sb-footer {
  border-top: 1px solid var(--bdr);
  padding: 10px 11px;
  flex-shrink: 0;
}
.sb-user { display: flex; align-items: center; gap: 8px; }
.sb-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Fraunces', serif;
  flex-shrink: 0;
}
.sb-user-info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  transition: opacity .15s, max-width .2s;
  max-width: 160px;
}
#app-sidebar.sb-collapsed .sb-user-info { opacity: 0; max-width: 0; }
.sb-user-name { font-size: 13px; font-weight: 500; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role-wrap { margin-top: 2px; }

.sb-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt3);
  font-size: 18px;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.sb-logout-btn:hover { color: var(--red); background: var(--red-l); }

/* ── Bottom Nav (solo móvil) ── */
#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--srf);
  border-top: 1px solid var(--bdr);
  z-index: 60;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bn-inner { display: flex; height: 60px; align-items: stretch; }
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: var(--txt3);
  font-size: 10px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  transition: color .12s;
  position: relative;
  border: none;
  background: none;
  padding: 6px 4px;
}
.bn-item:active, .bn-item.active { color: var(--ink); }
.bn-item i { font-size: 22px; line-height: 1; }
.bn-badge {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: 5px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.bn-badge.show { display: inline-flex; }

/* ── Más drawer ── */
#mas-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}
#mas-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
#mas-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--srf);
  border-radius: 16px 16px 0 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}
#mas-handle { width: 36px; height: 4px; background: var(--bdr); border-radius: 2px; margin: 10px auto 12px; }
#mas-centro-wrap {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.mas-ctr-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
#mas-centro-wrap .ctr-sel {
  width: 100%;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  color: var(--txt);
  min-height: 44px;
}
.mas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 8px 8px; }
.mas-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--txt2);
  font-family: 'DM Sans', sans-serif;
  border: none;
  background: none;
  transition: background .12s, color .12s;
}
.mas-item:hover, .mas-item.active { background: var(--ink-ll); color: var(--ink); }
.mas-item i { font-size: 26px; line-height: 1; }

/* ── Responsive ── */
@media (min-width: 769px) {
  #bottom-nav, #mas-drawer { display: none !important; }
}
@media (max-width: 768px) {
  #app-sidebar { display: none !important; }
  #sidebar-toggle-btn { display: none !important; }
  /* Espacio bajo los paneles para el bottom nav */
  .panel:not(#panel-chat) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important; }
  .chat-main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
  #app-topbar { padding-right: 12px; }
  .topbar-ctr-pill { display: none; }
  /* Dashboard: stack en móvil */
  .dash-layout { flex-direction: column; overflow-y: auto; }
  .dash-left { width: 100%; border-right: none; border-bottom: 1px solid var(--bdr); max-height: none; overflow: visible; }
  .dash-scroll { overflow: visible; padding: 16px 14px 12px; }
  .dash-right { flex: 1; min-height: 300px; }
  .dash-right .chat-main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
}

/* ── Dashboard Layout ────────────────────────────────── */
.dash-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

.dash-left {
  width: 340px;
  flex-shrink: 0;
  background: #f1f5f9;
  border-right: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dash-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 18px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--bdr) transparent;
}
.dash-scroll::-webkit-scrollbar { width: 4px; }
.dash-scroll::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

.dash-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
}
.dash-greeting-word {
  font-size: 12px;
  color: var(--txt3);
  font-weight: 500;
  letter-spacing: .03em;
  margin-bottom: 2px;
}
.dash-user-display {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--txt);
  line-height: 1.2;
  margin-bottom: 4px;
}
.dash-date-display {
  font-size: 12px;
  color: var(--txt3);
  text-transform: capitalize;
}
.dash-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 8px;
}

/* Role cards: una columna en el panel izquierdo */
#panel-chat .role-cards {
  grid-template-columns: 1fr;
  margin-top: 0;
}

/* sb-item en el contexto del dashboard (historial de preguntas) */
#panel-chat .sb-item {
  border-radius: var(--r-sm);
  margin-right: 0;
  font-size: 12px;
  padding: 7px 10px;
}

/* Columna derecha: chat widget (legacy dash-layout, superseded by bento) */
.dash-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--srf);
}
.dash-right .chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-right .welcome {
  padding: 36px 24px 24px;
  max-width: 480px;
}

/* ════════════════════════════════════════════════════
   BENTO DASHBOARD
════════════════════════════════════════════════════ */
:root {
  --bg-app:       #f4f6f8;
  --shadow-soft:  0 4px 20px rgba(0,0,0,0.03);
  --radius-lg:    16px;
  --orange:       #f59e0b;
  --green-accent: #10b981;
  --red-accent:   #ef4444;
}

/* panel-chat: now a grid (content + rail) — overridden in inicio layout section below */
#panel-chat.active {
  overflow: hidden;
  align-items: stretch;
}

/* Bento grid container */
.dashboard-bento {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 24px;
  background: var(--bg-app);
  align-content: start;
}

/* Column spans */
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ── Bento card base ── */
.bento-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--bdr);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* ── Metric cards ── */
.metric-card {
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  transition: box-shadow .15s, transform .12s;
  cursor: pointer;
}
.metric-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.metric-icon {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
}
.metric-number {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
}
.metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-top: 4px;
}
/* Metric colour variants */
.metric-orange::before           { background: var(--orange); }
.metric-orange .metric-number,
.metric-orange .metric-icon      { color: var(--orange); }
.metric-amber::before            { background: var(--amb); }
.metric-amber .metric-number,
.metric-amber .metric-icon       { color: var(--amb); }
.metric-red::before              { background: var(--red-accent); }
.metric-red .metric-number,
.metric-red .metric-icon         { color: var(--red-accent); }
.metric-blue::before             { background: var(--ink); }
.metric-blue .metric-number,
.metric-blue .metric-icon        { color: var(--ink); }

/* ── Welcome banner ── */
.welcome-banner {
  padding: 28px;
  background: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  min-height: 200px;
}
.welcome-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.welcome-banner::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
.wb-date {
  font-size: 11px;
  opacity: .65;
  text-transform: capitalize;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.wb-greeting {
  font-size: 13px;
  opacity: .75;
  margin-bottom: 1px;
  position: relative;
  z-index: 1;
}
.wb-name {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 3px;
  position: relative;
  z-index: 1;
}
.wb-ctr {
  font-size: 12px;
  opacity: .6;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.wb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.wb-btn {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.wb-btn:hover { background: rgba(255,255,255,0.26); }
.wb-btn i     { font-size: 13px; line-height: 1; }

/* ── Chatbot widget card ── */
.chatbot-widget {
  height: 460px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.chatbot-widget .chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.chatbot-widget .chat-msgs {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 18px;
}
.chatbot-widget .welcome {
  padding: 20px 14px 14px;
  max-width: none;
}
.chatbot-widget .wlc-ico   { width:40px;height:40px;border-radius:10px;font-size:17px;margin-bottom:10px; }
.chatbot-widget .wlc-title { font-size:15px;margin-bottom:5px; }
.chatbot-widget .wlc-sub   { font-size:12px;margin-bottom:12px; }
.chatbot-widget .quick-qs  { gap:5px; }
.chatbot-widget .quick-q   { font-size:12px;padding:7px 13px; }

/* ── Bento card inner elements (comedor/hijos/search/historial) ── */
.bento-card-section-hdr {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt3);
  padding: 18px 20px 8px;
}
.bento-card-list {
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#busqueda-alumno-container  { padding: 18px 20px; }
#bento-historial-card       { padding: 16px 18px; min-height: 80px; }
#bento-historial-card .sb-item {
  border-radius: var(--r-sm);
  margin-right: 0;
  font-size: 12px;
  padding: 7px 10px;
}
#busqueda-alumno-container .dash-section-label { margin-bottom: 10px; }

/* ── Bento responsive ── */
@media (max-width: 1200px) {
  .col-5 { grid-column: span 12; }
  .col-7 { grid-column: span 12; }
  .chatbot-widget { height: 400px; }
}
@media (max-width: 900px) {
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
  .col-6 { grid-column: span 12; }
}
@media (max-width: 768px) {
  .dashboard-bento {
    padding: 12px;
    gap: 12px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8 { grid-column: span 12; }
  .chatbot-widget { height: 360px; }
  .welcome-banner { min-height: 160px; }
  .metric-number  { font-size: 32px; }
}

/* ════════════════════════════════════════════════════════════
   DESIGN SYSTEM V2 — warm editorial overrides  (2026-05-25)
   Uses tokens from :root above. Cascade overrides earlier rules.
════════════════════════════════════════════════════════════ */

/* ─ Body & root background ─ */
body { font-family: var(--font-ui); background: var(--paper); }
#setup { background: var(--paper); }
.setup-card { border-color: var(--line); }
.setup-input { background: var(--paper-2); border-color: var(--line-2); }
.setup-input:focus { border-color: var(--ink); background: var(--srf); }

/* ─ Topbar ─ */
#app-topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  height: 60px;
}
#topbar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--txt);
}
.topbar-ctr-pill {
  background: var(--surface-sunk);
  border-radius: 8px;
  padding: 5px 11px;
}
.topbar-ctr-dot { background: var(--ink); }
.topbar-avatar {
  background: linear-gradient(135deg, oklch(0.7 0.08 50), oklch(0.55 0.1 30));
}

/* ─ Sidebar ─ */
#app-sidebar {
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  width: 248px;
}
#app-sidebar.sb-collapsed { width: 68px; }
.sb-logo {
  border-bottom: 1px solid var(--line);
  height: 60px;
}
.sb-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 12px;
  margin: 14px 0 4px;   /* separa visualmente cada grupo */
}
.nav-item {
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--txt2);
  font-family: var(--font-ui);
  gap: 11px;
  padding: 8px 10px;
  margin: 1px 6px;
  width: calc(100% - 12px);
}
/* Icono con color por familia (--nav-color), más peso visual */
.nav-item i {
  font-size: 19px;
  width: 22px; text-align: center; flex-shrink: 0;
  color: var(--nav-color, var(--muted));
}
.nav-item:hover { background: var(--surface-sunk); color: var(--txt); }
/* Activo: fondo tintado + texto/icono en el color de la familia (Inicio/Asistente = info) */
.nav-item.active {
  background: color-mix(in srgb, var(--nav-color, var(--ink)) 13%, transparent);
  color: var(--nav-color, var(--ink));
  font-weight: 600;
}
.nav-item.active i { color: var(--nav-color, var(--ink)); }
.nav-item.active .nav-badge {
  background: color-mix(in srgb, var(--nav-color, var(--ink)) 18%, transparent);
  color: var(--nav-color, var(--ink));
}
.sb-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.sb-user-avatar {
  background: linear-gradient(135deg, oklch(0.7 0.08 50), oklch(0.55 0.1 30));
}
.sb-user-name { color: var(--txt); }
.mas-item:hover, .mas-item.active { background: var(--surface-sunk); color: var(--txt); }
#bottom-nav { background: var(--paper); border-top-color: var(--line); }
#mas-sheet { background: var(--paper); }
#mas-handle { background: var(--line-2); }

/* ─ Bento grid ─ */
.dashboard-bento { background: var(--paper); gap: 16px; }
.bento-card {
  background: var(--srf);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.bento-card-section-hdr {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ─ Metric / stat tiles ─ */
.metric-card { padding: 18px 18px 16px; }
.metric-card:hover {
  box-shadow: none;
  border-color: var(--line-2);
  transform: translateY(-1px);
}
/* Left vertical bar instead of top bar */
.metric-card::before {
  top: 0; bottom: 0; left: 0; right: auto;
  width: 3px;
  height: auto;
  border-radius: 0;
}
/* Icon: top-right absolute */
.metric-icon {
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  border-radius: 8px;
  background: var(--surface-sunk);
  color: var(--muted);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Number: serif, editorial weight */
.metric-number {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Label: softer, no uppercase */
.metric-label {
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}
/* Colour tone overrides */
.metric-orange::before { background: var(--warning); }
.metric-orange .metric-number { color: var(--txt); }
.metric-orange .metric-icon { background: var(--warning-soft); color: oklch(0.45 0.12 75); }
.metric-amber::before  { background: var(--amb); }
.metric-amber .metric-number  { color: var(--txt); }
.metric-amber .metric-icon  { background: var(--warning-soft); color: oklch(0.45 0.12 75); }
.metric-red::before    { background: var(--danger); }
.metric-red .metric-number    { color: var(--txt); }
.metric-red .metric-icon    { background: var(--danger-soft); color: oklch(0.45 0.14 27); }
.metric-blue::before   { background: var(--info); }
.metric-blue .metric-number   { color: var(--txt); }
.metric-blue .metric-icon   { background: var(--info-soft); color: var(--info); }

/* ─ Welcome banner typography ─ */
.wb-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.022em;
}
.wb-date { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.65; }

/* ─ Greeting heading ─ */
h1.greeting, .greeting {
  font-family: var(--font-display) !important;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--txt);
}
.greeting em { font-style: italic; color: var(--ink); font-weight: 400; }
.greeting-sub { font-size: 14px; color: var(--muted); }

/* ─ Eyebrow label (new utility class) ─ */
.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

/* ─ Badge variants (bdg2 = design-v2 badges) ─ */
.bdg2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--surface-sunk);
  color: var(--txt2);
}
.bdg2--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}
.bdg2--success { background: var(--success-soft); color: #1e6b3a; }
.bdg2--warning { background: var(--warning-soft); color: oklch(0.42 0.11 75); }
.bdg2--danger  { background: var(--danger-soft);  color: oklch(0.4 0.14 27); }
.bdg2--info    { background: var(--info-soft);     color: var(--info); }
.bdg2--accent  { background: var(--accent-soft);   color: var(--accent-ink); }

/* ─ Panel backgrounds (--bg is aliased to --paper above, so inline styles cascade) ─ */
.panel { background: var(--paper); }
#panel-admin { background: var(--paper); }

/* ─ Page headers ─ */
.pg-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--txt);
}

/* ─ Cards ─ */
.card {
  background: var(--srf);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.card-title { color: var(--txt); }
.card-desc  { color: var(--muted); }

/* ════════════════════════════════════════════════════════════
   INICIO ADMIN LAYOUT  (2026-05-26)
════════════════════════════════════════════════════════════ */

/* ─ Topbar v2 ─ */
#app-topbar { height: 60px; gap: 8px; padding: 0 16px 0 0; }
.topbar-page { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-page-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--txt); white-space: nowrap;
}
.topbar-brand-mark {
  width: 30px; height: 30px; border-radius: 8px; overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.topbar-brand-mark svg { display: block; border-radius: 8px; }
.topbar-ctr-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 42vw;
}
.topbar-search {
  flex: 1; max-width: 520px;
  display: flex; align-items: center; gap: 8px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 0 12px; height: 38px;
  cursor: text; transition: border-color .15s; margin: 0 16px;
}
.topbar-search:hover { border-color: var(--line-2); }
.topbar-search-icon { font-size: 14px; color: var(--muted-2); flex-shrink: 0; }
.topbar-search-inp {
  flex: 1; border: none; background: transparent;
  font-size: 13px; color: var(--txt2); outline: none;
  font-family: var(--font-ui); min-width: 0; pointer-events: none;
}
.topbar-search-kbd {
  font-size: 11px; color: var(--muted-2);
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 1px 5px; flex-shrink: 0;
}
.topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.topbar-ctr-pill { display: none; }  /* hide old pill */
.topbar-role-switch {
  display: flex; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 2px; gap: 2px; margin-right: 4px;
}
.topbar-role-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px; border: none;
  background: transparent; color: var(--muted); cursor: default;
  transition: background .15s, color .15s;
}
.topbar-role-btn.active {
  background: var(--srf); color: var(--txt);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.topbar-icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: var(--txt2); font-size: 17px; cursor: pointer;
  transition: background .15s, color .15s;
}
.topbar-icon-btn:hover { background: var(--surface-sunk); color: var(--txt); }
.topbar-divider { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.topbar-profile { display: flex; align-items: center; gap: 8px; padding-right: 4px; }
.topbar-profile-meta { line-height: 1.15; }
.topbar-profile-name { font-size: 12.5px; font-weight: 500; color: var(--txt); }
.topbar-profile-role { font-size: 11px; color: var(--muted); }
/* Topbar avatar: override old linear-gradient with flat brand circle */
#app-topbar .topbar-avatar {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; font-size: 12px; font-weight: 600; color: white;
}

/* ─ Sidebar brand v2 ─ */
.sb-logo { display: none !important; }
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; height: 60px;
  border-bottom: 1px solid var(--line); flex-shrink: 0; cursor: pointer;
}
.sb-brand-mark { flex-shrink: 0; line-height: 0; }
.sb-brand-text { min-width: 0; }
.sb-wordmark {
  font-family: var(--font-ui); font-size: 15.5px; font-weight: 700;
  color: #1F2C4F; letter-spacing: -0.02em; line-height: 1.1;
}
.sb-wordmark-ia { color: #2D5BDE; }
.sb-school {
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 170px; line-height: 1.3; margin-top: 1px;
}
#app-sidebar.sb-collapsed .sb-brand-text { display: none; }
#app-sidebar.sb-collapsed .sb-brand { justify-content: center; padding: 12px; }

/* ─ Stat tiles v2 (.stat2) ─ */
.stat2 {
  position: relative; padding: 18px 18px 12px;
  background: var(--srf); border: 1px solid var(--line);
  border-radius: 14px; transition: border-color .15s, transform .15s; overflow: hidden;
}
.stat2:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.stat2__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--muted-2);
}
.stat2[data-tone="warning"] .stat2__bar { background: var(--warning); }
.stat2[data-tone="success"] .stat2__bar { background: var(--success); }
.stat2[data-tone="danger"]  .stat2__bar { background: var(--danger); }
.stat2[data-tone="info"]    .stat2__bar { background: var(--info); }
.stat2__icon {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--surface-sunk);
  font-size: 14px; color: var(--muted);
}
.stat2[data-tone="warning"] .stat2__icon { background: var(--warning-soft); color: oklch(0.45 0.12 75); }
.stat2[data-tone="success"] .stat2__icon { background: var(--success-soft); color: oklch(0.38 0.1 155); }
.stat2[data-tone="danger"]  .stat2__icon { background: var(--danger-soft);  color: oklch(0.42 0.16 27); }
.stat2[data-tone="info"]    .stat2__icon { background: var(--info-soft);    color: var(--info); }
.stat2__num {
  font-family: var(--font-display) !important;
  font-size: 38px; font-weight: 400; letter-spacing: -0.03em;
  line-height: 1; color: var(--txt); margin-top: 4px;
}
.stat2__label { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.stat2__delta { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.stat2__spark { display: block; width: 100%; height: 28px; margin-top: 8px; }

/* ─ Panel-chat: home full-width (el asistente vive en overlay flotante) ─ */
#panel-chat.active {
  display: flex !important;
  flex-direction: column;
  overflow: hidden; height: 100%;
}
.inicio-content {
  flex: 1;
  overflow-y: auto; padding: 32px 36px 40px;
  display: flex; flex-direction: column; gap: 20px; min-height: 0;
}
.inicio-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}
.inicio-hdr-left { display: flex; flex-direction: column; gap: 4px; }
.inicio-subline { font-size: 13px; color: var(--muted); }
.inicio-hdr-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; padding-top: 6px; }
.inicio-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.inicio-mid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.inicio-card {
  background: var(--srf); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px;
}
.card-eyebrow {
  font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 4px;
}
.inicio-card > .card-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--txt); margin-bottom: 14px;
}

/* Timeline */
.tl-list { display: flex; flex-direction: column; gap: 12px; }
.tl-item { display: flex; gap: 12px; align-items: flex-start; }
.tl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong); flex-shrink: 0; margin-top: 5px;
}
.tl-dot--warning { background: var(--warning); }
.tl-dot--success { background: var(--success); }
.tl-dot--danger  { background: var(--danger); }
.tl-dot--info    { background: var(--info); }
.tl-time { font-size: 11px; color: var(--muted-2); }
.tl-label { font-size: 13px; color: var(--txt2); margin-top: 1px; }

/* Shortcuts */
.shortcuts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shortcut-btn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 12px 8px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 10px; font-size: 11.5px; color: var(--txt2);
  cursor: pointer; font-family: var(--font-ui);
  transition: background .15s, border-color .15s;
}
.shortcut-btn:hover { background: var(--surface-sunk); border-color: var(--line-2); color: var(--txt); }
.shortcut-btn i { font-size: 17px; color: var(--muted); }
.shortcut-btn:hover i { color: var(--ink); }

/* Search */
.search-inp {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-family: var(--font-ui);
  background: var(--paper-2); color: var(--txt); outline: none;
  margin-top: 10px; transition: border-color .15s; display: block;
}
.search-inp:focus { border-color: var(--ink); background: var(--srf); }

/* ─ Asistente IA: burbuja flotante + overlay (Cambio 1) ─ */
.rail-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.rail-hdr-logo { line-height: 0; }
.rail-hdr-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--txt); }
.rail-hdr-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.asist-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  transition: background .15s, color .15s;
}
.asist-close:hover { background: var(--surface-sunk); color: var(--txt); }

/* Burbuja flotante (FAB) */
.asist-fab {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0));
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ink); color: #fff;     /* color de marca del centro (applyTheme → --ink) */
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 6px 22px rgba(0,0,0,0.10);
  z-index: 8000; transition: transform .15s, box-shadow .15s, opacity .2s;
}
.asist-fab i { font-size: 25px; }
.asist-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.asist-fab.hidden { opacity: 0; pointer-events: none; transform: scale(0.6); }

/* Globo de invitación junto a la burbuja */
.asist-hint {
  position: fixed; right: 22px; bottom: calc(86px + env(safe-area-inset-bottom, 0));
  max-width: 250px; background: var(--paper); color: var(--txt);
  border: 1px solid var(--line); border-radius: 14px; border-bottom-right-radius: 4px;
  padding: 11px 34px 11px 14px; font-size: 13px; line-height: 1.4;
  box-shadow: var(--sh-lg); z-index: 8001;
  opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.asist-hint.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.asist-hint-x {
  position: absolute; top: 6px; right: 8px; border: none; background: none;
  color: var(--muted-2); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px;
}
.asist-hint-x:hover { color: var(--txt); }

/* Overlay del panel del asistente */
.asist-overlay { position: fixed; inset: 0; z-index: 8500; display: none; }
.asist-overlay.open { display: block; }
.asist-backdrop {
  position: absolute; inset: 0; background: rgba(20,22,30,.34);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  opacity: 0; transition: opacity .2s;
}
.asist-overlay.open .asist-backdrop { opacity: 1; }
.asist-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 420px; max-width: 92vw;
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: -8px 0 28px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.asist-overlay.open .asist-panel { transform: translateX(0); }
.asist-panel .chat-main { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.asist-panel .chat-msgs { padding: 16px; flex: 1; overflow-y: auto; }
.asist-panel .input-area { padding: 12px; }

/* ─ Responsive ─ */
@media (max-width: 1100px) {
  .inicio-stats { grid-template-columns: repeat(2, 1fr); }
  .inicio-mid   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .asist-panel { width: 100vw; max-width: 100vw; border-left: none; }
  .asist-fab { right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0)); } /* sobre la bottom-nav móvil */
  .asist-hint { right: 16px; bottom: calc(140px + env(safe-area-inset-bottom, 0)); }
}
@media (max-width: 768px) {
  .inicio-content { padding: 16px 14px 80px; }
  .greeting { font-size: 26px; }
  .inicio-stats { grid-template-columns: repeat(2, 1fr); }
  .topbar-search { display: none; }
  .topbar-role-switch { display: none; }
}

/* ─ Admin stat tiles ─ */
#panel-admin .stat {
  position: relative;
  overflow: hidden;
  background: var(--srf);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 18px 16px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
#panel-admin .stat:hover { border-color: var(--line-strong); transform: translateY(-1px); }
#panel-admin .stat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ink);
}
#panel-admin .stat-n {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--txt);
}
#panel-admin .stat-l { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
#panel-admin .stat-ch { font-size: 11px; color: var(--txt3); }

/* ─ Tables ─ */
.tbl thead th {
  background: var(--paper-2);
  border-bottom-color: var(--line);
  color: var(--muted);
}
.tbl tbody td { border-bottom-color: var(--line); color: var(--txt2); }
.tbl tbody tr:hover td { background: var(--paper-2); }

/* ─ Inputs and selects ─ */
.fi, .fa {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--txt);
}
.fi:focus, .fa:focus { border-color: var(--ink); background: var(--srf); }

/* ─ Secondary buttons ─ */
.btn-s {
  background: var(--srf);
  border: 1px solid var(--line-2);
  color: var(--txt2);
}
.btn-s:hover { border-color: var(--line-strong); color: var(--txt); background: var(--paper-2); }

/* ─ Banner (info box) ─ */
.banner {
  background: var(--info-soft);
  border: 1px solid var(--info-soft);
  color: var(--info);
  border-radius: var(--r-sm);
}

/* ─ Filter pills (sust/incidencias) ─ */
button[id^="sust-btn-"], button[id^="inc-btn-"] {
  background: var(--srf);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--txt2);
  font-family: var(--font-ui);
  transition: all .12s;
}
button[id^="sust-btn-"]:hover, button[id^="inc-btn-"]:hover {
  border-color: var(--line-strong);
  color: var(--txt);
}
button[id^="sust-btn-"].active, button[id^="inc-btn-"].active {
  background: var(--txt);
  border-color: var(--txt);
  color: var(--paper);
}

/* ─ Bolsa / progress bars ─ */
.guardia-row { border-bottom-color: var(--line) !important; }
.guardia-bar-track { background: var(--surface-sunk) !important; }

/* ─ Chat: refresh chat feel inside widget ─ */
.msg.bot  .msg-bbl { background: var(--srf); border-color: var(--line); }
.chat-inp { border-color: var(--line-2); background: var(--srf); }
.chat-inp:focus { border-color: var(--ink); }
.input-area { background: var(--srf); border-top-color: var(--line); }
.dots { background: var(--srf); border-color: var(--line); }

/* ─ Quick questions ─ */
.quick-q { background: var(--srf); border-color: var(--line); color: var(--txt2); }
.quick-q:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }

/* ─ Load bar ─ */
.load-bar { background: var(--surface-sunk); }

/* ─ Mobile bento responsive (keep warm bg) ─ */
@media (max-width: 768px) {
  .metric-number { font-size: 30px; }
  .wb-name { font-size: 26px; }
}

/* ══════════════════════════════════════
   PLANNER — generador de horarios
   Dirección visual: "mesa de trabajo técnica".
   El lienzo del grid se hunde (track cálido más oscuro), las sesiones son
   tarjetas blancas elevadas con lavado del color de materia. El color de
   atención queda reservado: ámbar = sin asignar, rojo = conflicto,
   verde solo como confirmación transitoria de drop.
══════════════════════════════════════ */
#panel-planner {
  --pl-card:      #FFFFFF;  /* tarjeta de sesión (elevada sobre el track) */
  --pl-track:     #EFEDE7;  /* celda vacía = hueco disponible (hundido) */
  --pl-chrome:    #E8E5DE;  /* cabeceras y etiquetas de hora del grid */
  --pl-grid-line: #DCD8CD;  /* retícula */
  --pl-shadow:    0 1px 2px rgba(62, 55, 40, .10);
  --pl-shadow-up: 0 3px 10px rgba(62, 55, 40, .16);
  --pl-focus:     var(--info);
  /* Tintas de estado con contraste AA sobre blanco (los tokens --warning/--success fallan en texto pequeño) */
  --pl-ok-ink:    #2E7A52;
  --pl-warn-ink:  #8A5A16;
}
/* Foco de teclado visible en toda la interacción del módulo */
#panel-planner .planner-tab:focus-visible,
#panel-planner .btn-ink:focus-visible,
#panel-planner .btn-ghost:focus-visible,
#panel-planner .icon-btn-sm:focus-visible,
#panel-planner .planner-select:focus-visible,
#panel-planner .class-card:focus-visible {
  outline: 2px solid var(--pl-focus);
  outline-offset: 2px;
}
#panel-planner .planner-input:focus-visible {
  border-color: var(--pl-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pl-focus) 25%, transparent);
}
.planner-wrap { padding: 24px 28px 28px; overflow-y: auto; flex: 1; min-height: 0; }
.planner-tabs { display: flex; gap: 4px; padding: 0 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
/* Tabs dentro del header fijo del planner/analisis — sin borde ni margen propios */
.planner-tabs.tabs-in-hdr { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.planner-tab  { padding: 7px 16px; border-radius: 20px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 13px; color: var(--muted); font-family: var(--font-ui); transition: all .15s; }
.planner-tab:hover  { border-color: var(--line-2); color: var(--txt); }
.planner-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pt-panel { display: none; }
.planner-section-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.planner-add-inline  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planner-form-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planner-input   { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-family: var(--font-ui); background: var(--srf); color: var(--txt); outline: none; }
.planner-input:focus { border-color: var(--ink); }
.planner-select  { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-family: var(--font-ui); background: var(--srf); color: var(--txt); cursor: pointer; }
.planner-list    { display: flex; flex-direction: column; gap: 6px; }
.planner-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--srf); border: 1px solid var(--line); border-radius: var(--r-sm); }
.planner-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.planner-empty   { color: var(--muted); font-size: 14px; padding: 24px 0; }
.planner-table   { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.planner-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--line); font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.planner-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.planner-table tr:last-child td { border-bottom: none; }

/* Grid tablero — lienzo hundido: la celda vacía se lee como hueco disponible */
.planner-grid { display: grid; gap: 1px; background: var(--pl-grid-line, var(--line)); border: 1px solid var(--pl-grid-line, var(--line)); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 16px; min-width: 560px; }
.planner-hdr-cell  { background: var(--pl-chrome, var(--paper-2)); padding: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; }
.planner-hdr-hora  { text-align: left; }
.planner-row-label { background: var(--pl-chrome, var(--paper-2)); padding: 8px; font-size: 11px; color: var(--muted); display: flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planner-cell      { background: var(--pl-track, var(--srf)); min-height: 78px; padding: 4px; position: relative; transition: background .12s; }
.planner-cell.drag-over  { background: var(--success-soft); outline: 2px solid var(--success); outline-offset: -2px; }
.planner-cell.drag-error { background: var(--danger-soft);  outline: 2px solid var(--danger);  outline-offset: -2px; }
/* Durante un arrastre, los huecos vacíos se marcan como destinos posibles */
.planner-grid.is-dragging .planner-cell:empty { outline: 1.5px dashed var(--line-strong); outline-offset: -5px; }
/* Confirmación visual tras soltar con éxito */
@keyframes plDropFlash {
  0%   { background: var(--success-soft); box-shadow: inset 0 0 0 2px var(--success); }
  100% { background: var(--pl-track, var(--srf)); box-shadow: inset 0 0 0 2px transparent; }
}
.planner-cell.drop-flash { animation: plDropFlash .7s ease-out; }
@keyframes plPoolFlash {
  0%   { border-color: var(--success); background: var(--success-soft); }
  100% { border-color: var(--warning); background: color-mix(in srgb, var(--warning-soft) 60%, var(--paper-2)); }
}
.unassigned-pool.pool-flash { animation: plPoolFlash .7s ease-out; }
.planner-break-row  { font-style: italic; font-size: 10px; color: var(--muted-2); }
.planner-break-cell { background: var(--pl-chrome, var(--surface-sunk)); grid-column: span 5; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); font-style: italic; padding: 5px; min-height: 24px; }

/* Fichas arrastrables — jerarquía en 3 niveles: materia > profesor > meta.
   El JS inyecta el color de materia como custom property inline (--mat);
   de ahí salen borde y lavado de fondo al 7%. */
.class-card {
  --mat: var(--line-strong);
  border: 1px solid var(--pl-grid-line, var(--line));
  border-left: 3px solid var(--mat);
  border-radius: 5px;
  background: var(--pl-card, var(--srf));
  background: color-mix(in srgb, var(--mat) 7%, var(--pl-card, #fff));
  box-shadow: var(--pl-shadow, var(--sh));
  padding: 6px 8px;
  cursor: grab;
  height: calc(100% - 8px);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  user-select: none;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.class-card:hover  { box-shadow: var(--pl-shadow-up, var(--sh-lg)); transform: translateY(-1px); border-color: var(--line-strong); border-left-color: var(--mat); }
.class-card:active { cursor: grabbing; transform: none; }
.class-card__mat  { font-size: 12px; font-weight: 600; color: var(--txt); line-height: 1.25; letter-spacing: -0.01em; }
.class-card__prof { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.class-card__prof--warn { color: var(--pl-warn-ink, #8A5A16); font-weight: 600; }
/* Meta de tarjeta: puntuación, co-docencia, grupo (aparcados) */
.cc-meta          { font-size: 9px; font-weight: 700; margin-top: 2px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cc-score--ok     { color: var(--pl-ok-ink, var(--success)); }
.cc-score--mid    { color: var(--pl-warn-ink, var(--warning)); }
.cc-score--low    { color: var(--danger); }
.cc-codoc         { color: var(--info); }
.cc-grupo         { color: var(--muted); }
/* Vista por profesor (cross-grupo): materia + grupo/aula dentro de la ficha */
.cc-name          { font-size: 12px; font-weight: 600; color: var(--txt); line-height: 1.25; letter-spacing: -0.01em; }
.cc-info          { font-size: 10.5px; color: var(--muted); }
/* Tarjeta de solo lectura (vista por profesor) — sin affordance de arrastre */
.class-card--static { cursor: default; }
.class-card--static:hover { box-shadow: var(--pl-shadow, var(--sh)); transform: none; border-color: var(--pl-grid-line, var(--line)); border-left-color: var(--mat); }
/* Clase sin profesor asignado — estado de atención: rayado ámbar suave + clic para asignar */
.class-card--sin-prof {
  cursor: pointer;
  border-left-style: dashed;
  background: repeating-linear-gradient(45deg, var(--warning-soft), var(--warning-soft) 6px, var(--pl-card, #fff) 6px, var(--pl-card, #fff) 12px);
}
/* ── Zona "Aparcados" — bandeja de atención pendiente ──
   Neutra y silenciosa cuando está vacía; en ámbar cuando hay sesiones
   sin colocar (mismo lenguaje que el estado "sin asignar" del tablero). */
.unassigned-pool  { border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); padding: 14px 16px; background: var(--paper-2); margin-top: 8px; transition: border-color .15s, background .15s; }
.unassigned-pool--alert { border-color: var(--warning); background: color-mix(in srgb, var(--warning-soft) 60%, var(--paper-2)); }
.unassigned-pool.drag-over { border-color: var(--warning); border-style: solid; background: var(--warning-soft); }
.up-hdr   { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.up-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.unassigned-pool--alert .up-title { color: var(--pl-warn-ink, #8A5A16); }
.up-count { font-size: 11px; font-weight: 700; color: var(--pl-warn-ink, #8A5A16); background: var(--pl-card, #fff); border: 1px solid var(--warning); padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.up-hint  { font-size: 12px; color: var(--muted-2); }
/* Tarjeta aparcada (hereda .class-card) */
.aparcado-card { position: relative; cursor: grab; min-width: 128px; }
.aparcado-card .icon-btn-sm { position: absolute; top: 2px; right: 2px; line-height: 1; background: var(--pl-card, #fff); }
/* Sesión aparcada automáticamente porque el motor no la pudo colocar (conflicto de plantilla) */
.aparcado-card--auto { border: 1px dashed var(--danger); border-left: 3px solid var(--mat); background: color-mix(in srgb, var(--danger) 6%, var(--pl-card, #fff)); }
.aparcado-flag { font-size: 8.5px; color: var(--danger); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px; }

/* Publicar */
.planner-publish-summary { background: var(--srf); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.planner-stat-row { display: flex; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.planner-stat     { text-align: center; min-width: 80px; }
.planner-stat-n   { font-family: var(--font-display); font-size: 36px; font-weight: 400; color: var(--txt); line-height: 1; font-variant-numeric: tabular-nums; }
.planner-stat-l   { font-size: 12px; color: var(--muted); margin-top: 4px; }
.planner-warning  { background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--r-sm); padding: 12px 16px; font-size: 13px; color: var(--txt2); margin-bottom: 20px; }

/* Toast del planner — neutro oscuro con acento de severidad (icono + borde izq).
   Texto claro sobre oscuro cálido: legible en cualquier estado del tablero. */
.pl-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 9500;
  display: flex; align-items: flex-start; gap: 10px;
  background: #34312A; color: #F6F4EF;
  padding: 11px 16px; border-radius: 10px; border-left: 3px solid var(--line-strong);
  font-size: 13px; font-family: var(--font-ui); line-height: 1.4; text-align: left;
  box-shadow: var(--sh-lg); max-width: min(560px, 90vw);
  animation: plToastIn .18s ease-out;
}
.pl-toast__icon { font-weight: 700; flex-shrink: 0; line-height: 1.4; }
.pl-toast--ok    { border-left-color: var(--success); } .pl-toast--ok    .pl-toast__icon { color: #8FD9B0; }
.pl-toast--warn  { border-left-color: var(--warning); } .pl-toast--warn  .pl-toast__icon { color: #F4C57E; }
.pl-toast--error { border-left-color: var(--danger); }  .pl-toast--error .pl-toast__icon { color: #F5A893; }
@keyframes plToastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Botones planner */
.btn-ink          { padding: 8px 18px; background: var(--ink); color: #fff; border: none; border-radius: var(--r-sm); font-size: 13px; font-family: var(--font-ui); cursor: pointer; font-weight: 500; transition: opacity .15s; white-space: nowrap; }
.btn-ink:hover    { opacity: .88; }
.btn-ink:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost        { padding: 8px 16px; background: transparent; color: var(--txt); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 13px; font-family: var(--font-ui); cursor: pointer; font-weight: 500; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn-ghost:hover  { background: var(--surface-sunk); border-color: var(--line-strong); }
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.btn-danger       { background: var(--danger) !important; }
.icon-btn-sm      { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; font-size: 12px; color: var(--muted); }
.icon-btn-sm:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* ══════════════════════════════════════════
   CMI — Cuadro de Mando Integral (analytics.js)
══════════════════════════════════════════ */

/* Layout */
#panel-analytics { flex-direction:column; overflow-y:auto; background:var(--bg); }
.cmi-hdr { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; padding:28px 28px 0; margin-bottom:20px; }
.cmi-title { font-family:var(--font-display); font-size:26px; font-weight:400; margin:0; color:var(--txt); }
.cmi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:0 28px 28px; }
/* Con el nuevo shell header del panel-analisis, el .cmi-hdr solo necesita los botones de acción */
#analytics-container .cmi-hdr > div:first-child { display: none; }
#analytics-container .cmi-hdr { padding: 12px 28px 0; margin-bottom: 8px; justify-content: flex-end; }
@media(max-width:900px) { .cmi-grid { grid-template-columns:1fr; } }

/* Cards */
.cmi-card {
  background:var(--srf); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; display:flex; flex-direction:column; gap:14px; position:relative;
  border-left:4px solid var(--line-strong);
}
.cmi-card--full { grid-column:1/-1; }
.cmi-card--ok     { border-left-color:var(--success); }
.cmi-card--warn   { border-left-color:var(--warning); }
.cmi-card--danger { border-left-color:var(--danger); }
.cmi-card--skeleton { opacity:.6; pointer-events:none; }

/* Semáforo dot */
.cmi-sem { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.cmi-sem--ok     { background:var(--success); box-shadow:0 0 6px color-mix(in srgb,var(--success) 50%,transparent); }
.cmi-sem--warn   { background:var(--warning); box-shadow:0 0 6px color-mix(in srgb,var(--warning) 50%,transparent); }
.cmi-sem--danger { background:var(--danger);  box-shadow:0 0 6px color-mix(in srgb,var(--danger)  50%,transparent); }

/* Card header */
.cmi-card-hdr { display:flex; align-items:flex-start; gap:10px; }
.cmi-ico { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.cmi-ico--sust  { background:var(--warning-soft); color:var(--warning); }
.cmi-ico--com   { background:var(--info-soft);    color:var(--info); }
.cmi-ico--conv  { background:var(--danger-soft);  color:var(--danger); }
.cmi-ico--alert { background:color-mix(in srgb,var(--accent-soft) 60%,transparent); color:var(--accent); }
.cmi-card-titles { flex:1; }
.cmi-dim-eyebrow { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px; }
.cmi-dim-name { font-size:15px; font-weight:600; color:var(--txt); display:flex; align-items:center; gap:8px; }

/* Metrics row */
.cmi-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cmi-metric { background:var(--paper-2); border-radius:var(--r-sm); padding:10px 12px; }
.cmi-metric-num { font-family:var(--font-display); font-size:24px; font-weight:500; color:var(--txt); line-height:1; }
.cmi-metric-sub { font-size:14px; color:var(--muted); }
.cmi-metric-lbl { font-size:11px; color:var(--muted); margin-top:4px; }
.cmi-num--ok     { color:var(--success) !important; }
.cmi-num--warn   { color:var(--warning) !important; }
.cmi-num--danger { color:var(--danger)  !important; }

/* Subsections */
.cmi-subsec { display:flex; flex-direction:column; gap:8px; }
.cmi-subsec-lbl { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }

/* Charts */
.cmi-chart-wrap { position:relative; height:160px; }
.cmi-chart-wrap--sm { height:140px; }

/* Tables */
.cmi-table { width:100%; border-collapse:collapse; font-size:13px; }
.cmi-th { padding:6px 10px; text-align:left; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); }
.cmi-th--r, .cmi-td--r { text-align:right; }
.cmi-td { padding:8px 10px; border-bottom:1px solid var(--line); color:var(--txt2); }
.cmi-td--empty { text-align:center; color:var(--muted-2); padding:12px; }

/* Pills and badges */
.cmi-row-pill { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:var(--paper-2); border-radius:var(--r-sm); font-size:13px; color:var(--txt2); }
.cmi-pill { font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; }
.cmi-pill--warn   { background:var(--warning-soft); color:var(--warning); }
.cmi-pill--danger { background:var(--danger-soft);  color:var(--danger);  }
.cmi-pill--muted  { background:var(--surface-sunk); color:var(--muted); }
.cmi-badge-n { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:99px; font-size:11px; font-weight:700; padding:0 6px; }
.cmi-badge-n--danger { background:var(--danger-soft);  color:var(--danger); }
.cmi-badge-n--warn   { background:var(--warning-soft); color:var(--warning); }

/* Alerts list */
.cmi-alertas-list { display:flex; flex-direction:column; gap:10px; }
.cmi-alerta { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px; background:var(--paper-2); border-radius:var(--r-sm); border:1px solid var(--line); flex-wrap:wrap; }
.cmi-alerta--alto   { border-left:3px solid var(--danger); }
.cmi-alerta--medio  { border-left:3px solid var(--warning); }
.cmi-alerta-body { flex:1; min-width:180px; display:flex; flex-direction:column; gap:4px; }
.cmi-alerta-name { font-size:14px; font-weight:600; color:var(--txt); }
.cmi-alerta-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cmi-nivel { font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; letter-spacing:.05em; }
.cmi-nivel--alto  { background:var(--danger-soft);  color:var(--danger); }
.cmi-nivel--medio { background:var(--warning-soft); color:var(--warning); }
.cmi-dias { font-size:11px; color:var(--muted-2); }
.cmi-conds-wrap { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.cmi-cond { font-size:11px; background:var(--surface-sunk); color:var(--muted); padding:2px 8px; border-radius:99px; }
.cmi-alerta-btns { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.cmi-btn-resolve { background:var(--success-soft) !important; border-color:var(--success) !important; color:var(--success) !important; }
.cmi-btn-resolve:hover { background:var(--success) !important; color:#fff !important; }

/* Empty states */
.cmi-empty-msg { font-size:13px; color:var(--muted); padding:12px 0; }
.cmi-empty-msg--lg { padding:20px 0; font-size:14px; display:flex; align-items:center; gap:8px; }

/* Multicentro block */
.cmi-multicentro { background:var(--srf); border:1px solid var(--line); border-radius:var(--r); padding:20px 28px; margin:0 28px 18px; }

/* Skeleton shimmer */
.cmi-skel-title  { height:18px; width:40%; background:var(--line); border-radius:4px; animation:cmi-shimmer 1.4s infinite; }
.cmi-skel-metrics { display:flex; gap:10px; margin:4px 0; }
.cmi-skel-num   { flex:1; height:48px; background:var(--line); border-radius:var(--r-sm); animation:cmi-shimmer 1.4s infinite; }
.cmi-skel-chart { height:120px; background:var(--line); border-radius:var(--r-sm); margin-top:4px; animation:cmi-shimmer 1.4s infinite; }
@keyframes cmi-shimmer {
  0%,100% { opacity:.5; }
  50%      { opacity:1; }
}

/* ============================================================
   MOBILE RESPONSIVE — max-width 768px
   ============================================================ */

/* Planner grid wrapper — desktop: scrollable; mobile: hidden */
.planner-grid-outer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Planner mobile list — hidden on desktop, shown on mobile */
.planner-mobile-list { display: none; }

@media (max-width: 768px) {
  /* Planner: hide grid, show list */
  .planner-grid-outer  { display: none; }
  .planner-mobile-list { display: block; padding-bottom: 12px; }

  .planner-ml-day { margin-bottom: 14px; }
  .planner-ml-day-hdr {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .planner-ml-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 5px;
  }
  .planner-ml-hora {
    font-size: 11px;
    color: var(--muted);
    min-width: 72px;
    padding-top: 6px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .planner-ml-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-left: 4px solid var(--muted);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    min-height: 44px;
    justify-content: center;
  }
  .planner-ml-mat  { font-size: 13px; font-weight: 600; color: var(--txt); }
  .planner-ml-prof { font-size: 11px; color: var(--muted); }

  /* Forms — min 44px touch targets, font-size 16px prevents iOS zoom */
  .fi,
  .fa,
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  select,
  textarea,
  .planner-input,
  .planner-select {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Analytics charts — shorter on mobile */
  .cmi-chart-wrap     { height: 130px !important; }
  .cmi-chart-wrap--sm { height: 110px !important; }

  /* CMI panel spacing */
  .cmi-hdr  { padding: 14px 16px 10px; }
  .cmi-grid { padding: 0 12px 12px; gap: 10px; }
  .cmi-card { padding: 14px 14px 10px; }
  .cmi-multicentro { margin: 0 12px 14px; padding: 14px 16px; }
}

/* ── Tool confirmation card (chat agent) ── */
.tool-confirm-card {
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  max-width: 360px;
}
.tool-confirm-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.tool-confirm-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.tool-confirm-title { font-size: 14px; font-weight: 600; color: var(--txt); line-height: 1.3; }
.tool-confirm-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tool-confirm-params {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-param {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.tool-param-lbl { color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.tool-param-val { color: var(--txt); text-align: right; word-break: break-word; }
.tool-confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--line);
}
.tool-btn-cancel {
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: none;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-ui);
  transition: background .15s;
}
.tool-btn-cancel:hover  { background: var(--surface-sunk); }
.tool-btn-confirm {
  padding: 6px 16px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-ui);
  transition: opacity .15s;
}
.tool-btn-confirm:hover   { opacity: .85; }
.tool-btn-confirm:disabled,
.tool-btn-cancel:disabled { opacity: .45; cursor: default; }

/* ══════════════════════════════════════════════════════
   MOBILE FIXES — comprehensive pass (2026-05-29)
   Cubre: filtros, modales, grids, charts, safe-area,
   planner, toasts, tablas con scroll.
   ══════════════════════════════════════════════════════ */

/* ── Filtro de sustituciones: scroll horizontal en lugar de wrap ── */
#sust-filter-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  padding-bottom: 2px;
}
#sust-filter-bar::-webkit-scrollbar { display: none; }
#sust-filter-bar button { flex-shrink: 0; }

/* ── Tablas con overflow horizontal ── */
.tbl-wrap          { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guardias-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── CMI charts: width constraint siempre ── */
.cmi-chart-wrap { max-width: 100%; width: 100%; box-sizing: border-box; }

/* ── Modales HTML (app.html): clamp en small phones via CSS !important ── */
@media (max-width: 480px) {
  #modal-invitar > div,
  #modal-editar > div {
    max-width: calc(100vw - 24px) !important;
    padding: 18px 16px !important;
  }

  /* Incidencias modal generado por JS — targetable por ID */
  #inc-tip-modal > div {
    max-width: calc(100vw - 24px) !important;
    padding: 16px 14px !important;
  }

  /* CMI metrics: 2 columnas en teléfonos pequeños */
  .cmi-metrics { grid-template-columns: repeat(2, 1fr) !important; }

  /* Inicio stats: 1 columna en 480px */
  .inicio-stats { grid-template-columns: 1fr !important; }

  /* Planner hora más corta */
  .planner-ml-hora { min-width: 60px; font-size: 10px; }

  /* Topbar: título más corto */
  #topbar-title { font-size: 15px; }
}

@media (max-width: 768px) {
  /* Planner: padding reducido en móvil */
  .planner-wrap { padding: 14px 12px; }
  .planner-tabs { gap: 4px; padding-bottom: 14px; margin-bottom: 16px; }

  /* Filtros incidencias: asegurar que pills no se cortan */
  #panel-incidencias .card > div[style*="flex"] {
    flex-wrap: wrap;
  }

  /* Comedor date nav: botones se expanden */
  #comedor-date-nav button { flex: 1; min-width: 0; white-space: nowrap; }
  #comedor-date-nav #comedor-fecha { min-width: 80px; }

  /* Panel sust y panel comedor: contenido interno con padding correcto */
  #panel-sust .card,
  #panel-incidencias .card,
  #panel-comedor > div > div { padding: 16px 14px; }

  /* Guardias tabla: scroll horizontal */
  #bolsa-guardias-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Espacios tabla: scroll horizontal */
  #espacios-tabla-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Planner tablero zona libre: text ajustado */
  .unassigned-pool { padding: 10px 12px; }

  /* Analytics: padding interior en móvil */
  #analytics-container { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }

  /* Users tabla: scroll horizontal */
  #users-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #users-table-wrap .tbl { min-width: 480px; }

  /* RRHH tabla: scroll horizontal */
  #rrhh-lista-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Comunicados form: ancho completo en móvil */
  #com-form-wrap .card { padding: 14px; }

  /* Tool confirm card: ancho completo en móvil */
  .tool-confirm-card { max-width: 100%; }

  /* Chat input: mínimo 44px táctil */
  .chat-inp { min-height: 44px; }

  /* Send/mic button: mínimo 44px */
  .send-btn, .mic-btn { min-width: 44px; min-height: 44px; }
}

/* ══════════════════════════════════════════════
   CLASSROOM DASHBOARD
   ══════════════════════════════════════════════ */

/* ── Cabecera compacta de la home (Cambio 1) + buscador protagonista (Cambio 2) ── */
.home-head { margin-bottom: 22px; }
.home-greeting {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--txt); margin: 0; line-height: 1.2;
}
.home-greeting em { font-style: normal; font-weight: 600; color: var(--ink); }
.home-subline { font-size: 13px; color: var(--muted); margin-top: 4px; }
.home-search { position: relative; margin-top: 16px; max-width: 720px; }
.home-search-inp {
  width: 100%; height: 46px; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--paper); color: var(--txt);
  padding: 0 64px 0 42px; font-size: 14px; font-family: var(--font-ui);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.home-search-inp::placeholder { color: var(--muted-2); }
.home-search-inp:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-ll); }
.home-search-ico {
  position: absolute; left: 15px; top: 23px; transform: translateY(-50%);
  color: var(--muted-2); font-size: 17px; pointer-events: none;
}
.home-search-kbd {
  position: absolute; right: 12px; top: 23px; transform: translateY(-50%);
  font-size: 11px; color: var(--muted-2);
  background: var(--surface-sunk); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 2px 7px; pointer-events: none;
}
/* Barra "Habla con tu centro" — comandos de ejemplo que abren el asistente IA */
.home-ai-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-width: 720px; }
.home-ai-lbl { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.home-ai-chip {
  font-size: 12.5px; color: var(--accent-ink, #7A3E1F); background: var(--accent-soft, #F3E1D5);
  border: 1px solid transparent; border-radius: 999px; padding: 5px 13px; cursor: pointer;
  transition: background .12s, transform .12s;
}
.home-ai-chip:hover { background: var(--accent, #C76B3D); color: #fff; transform: translateY(-1px); }
.home-search-res {
  position: absolute; left: 0; right: 0; top: 52px; z-index: 40;
}
.home-search-res:not(:empty) {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sh-lg); padding: 7px; margin-top: 0;
  max-height: 50vh; overflow-y: auto;
}

/* ── Tarjeta "Mi horario de hoy" (Cambio 3) ── */
.home-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 22px;
}
.home-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.home-card-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--txt); display: flex; align-items: center; gap: 8px;
}
.home-card-title i { color: var(--ink); font-size: 18px; }
.home-horario-count {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--surface-sunk); border-radius: 999px; padding: 3px 11px; white-space: nowrap;
}
.home-horario-body { display: flex; flex-direction: column; gap: 7px; }
.home-horario-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper-2); transition: background .15s;
}
.home-horario-row.is-now {
  background: var(--ink-ll); border-color: var(--ink);
}
.hh-tramo {
  flex-shrink: 0; width: 92px; font-size: 12px; font-weight: 600; color: var(--muted-2);
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.home-horario-row.is-now .hh-tramo { color: var(--ink); }
.hh-now {
  font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #fff;
  background: var(--ink); border-radius: 4px; padding: 1px 6px;
}
.hh-main { flex: 1; min-width: 0; }
.hh-asig { font-size: 13.5px; font-weight: 500; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.home-horario-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 26px 16px; color: var(--muted); font-size: 13px; text-align: center;
}
.home-horario-empty i { font-size: 18px; color: var(--muted-2); }

/* ── Métricas accionables (Cambio 4) ── */
.home-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px;
}
.home-metric {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; width: 100%; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; font-family: var(--font-ui);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.home-metric:hover { border-color: var(--line-strong); box-shadow: var(--sh); }
.home-metric:active { transform: translateY(1px); }
.home-metric-val {
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  line-height: 1; color: var(--txt); letter-spacing: -0.02em;
}
.home-metric-val.is-alert { color: var(--danger); }
.home-metric-lbl { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.home-metric-chev { font-size: 18px; color: var(--muted-2); flex-shrink: 0; }
.home-metric:hover .home-metric-chev { color: var(--ink); }
@media (max-width: 640px) {
  .home-metrics { grid-template-columns: 1fr; }
}

/* ── Inicio profesor: horario hero + acciones rápidas ── */
.home-horario--hero { border-left: 3px solid var(--ink); }
.home-quick-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 4px 0 10px;
}
.home-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px;
}
.home-quick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-align: left; width: 100%; cursor: pointer; font-family: var(--font-ui);
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; color: var(--txt);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.home-quick-btn i {
  font-size: 20px; color: var(--ink); line-height: 1;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--ink-ll); border-radius: 11px; flex-shrink: 0;
}
.home-quick-btn span { font-size: 13px; font-weight: 500; color: var(--txt); }
.home-quick-btn:hover { border-color: var(--line-strong); box-shadow: var(--sh); }
.home-quick-btn:active { transform: translateY(1px); }
@media (max-width: 760px) {
  .home-quick { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .home-quick { grid-template-columns: 1fr; }
}

/* ── Command palette global ⌘K (Cambio 6) ── */
.home-search-inp[readonly] { cursor: pointer; }
.cmdp-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 22, 30, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.cmdp {
  width: 100%; max-width: 580px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg);
  overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.cmdp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdp-ico { font-size: 18px; color: var(--muted-2); flex-shrink: 0; }
.cmdp-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; font-family: var(--font-ui); color: var(--txt); min-width: 0;
}
.cmdp-input::placeholder { color: var(--muted-2); }
.cmdp-esc {
  font-size: 11px; color: var(--muted-2); background: var(--surface-sunk);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 7px; flex-shrink: 0;
}
.cmdp-results { overflow-y: auto; padding: 6px; }
.cmdp-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.cmdp-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); padding: 10px 10px 4px;
}
.cmdp-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.cmdp-item:hover { background: var(--surface-sunk); }
.cmdp-item-ico { font-size: 17px; color: var(--ink); flex-shrink: 0; }
.cmdp-item-main { flex: 1; min-width: 0; }
.cmdp-item-title { font-size: 13.5px; font-weight: 500; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdp-item-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.cmdp-item-go { font-size: 13px; color: var(--muted-2); opacity: 0; flex-shrink: 0; }
.cmdp-item:hover .cmdp-item-go { opacity: 1; }
@media (max-width: 640px) { .cmdp-overlay { padding: 8vh 10px 10px; } }

/* Banner */
.cls-banner {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}
.cls-greeting {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 6px;
}
.cls-greeting em { font-style: italic; color: rgba(255,255,255,0.88); font-weight: 400; }
.cls-banner .cls-subline { font-size: 13px; color: rgba(255,255,255,0.6); }
.cls-banner-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-end; }
.cls-banner-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12); color: #fff;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.cls-banner-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
.cls-banner-btn--primary {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
}
.cls-banner-btn--primary:hover { background: rgba(255,255,255,0.32); }

/* Metrics row */
.cls-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.cls-metrics--3 { grid-template-columns: repeat(3, 1fr); }
.cls-metric {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 12px 14px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--line); text-align: center;
  transition: border-color 0.15s, transform 0.12s;
}
.cls-metric[onclick]:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.cls-metric[onclick]:active { transform: scale(0.98); }
.cls-metric-icon { font-size: 20px; margin-bottom: 4px; color: var(--muted); }
.cls-metric-val {
  font-family: var(--font-display); font-size: 28px; font-weight: 400;
  line-height: 1; color: var(--txt);
}
.cls-metric-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.cls-metric--warning .cls-metric-icon { color: oklch(0.55 0.14 60); }
.cls-metric--warning .cls-metric-val  { color: oklch(0.45 0.12 75); }
.cls-metric--info    .cls-metric-icon { color: var(--info); }
.cls-metric--info    .cls-metric-val  { color: var(--info); }
.cls-metric--danger  .cls-metric-icon { color: var(--danger); }
.cls-metric--danger  .cls-metric-val  { color: var(--danger); }
.cls-metric--success .cls-metric-icon { color: var(--success); }
.cls-metric--success .cls-metric-val  { color: oklch(0.38 0.1 155); }

/* Section label */
.cls-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px;
}

/* Module cards */
.cls-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cls-mc {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  user-select: none;
}
.cls-mc:hover {
  border-color: var(--mc-color, var(--ink));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.cls-mc:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.cls-mc-hdr {
  background: var(--mc-color, var(--ink));
  padding: 18px 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.cls-mc-ico { font-size: 26px; color: rgba(255,255,255,0.92); }
.cls-mc-badge {
  background: rgba(255,255,255,0.25); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 2px 7px; min-width: 20px; text-align: center;
}
.cls-mc-body { padding: 10px 14px 14px; }
.cls-mc-name { font-size: 13px; font-weight: 600; color: var(--txt); margin-bottom: 3px; }
.cls-mc-desc { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Sidebar: module-color soft tint on active, hide group labels */
.sb-group-label { display: none !important; }
.nav-item.active {
  background: color-mix(in srgb, var(--nav-color, var(--ink)) 13%, transparent) !important;
  color: var(--nav-color, var(--ink)) !important;
  font-weight: 500;
}
.nav-item.active .nav-badge {
  background: color-mix(in srgb, var(--nav-color, var(--ink)) 18%, transparent) !important;
  color: var(--nav-color, var(--ink)) !important;
}
.nav-item:hover { background: var(--surface-sunk) !important; color: var(--txt) !important; }

/* Responsive */
@media (max-width: 1100px) {
  .cls-metrics { grid-template-columns: repeat(2, 1fr); }
  .cls-metrics--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .cls-banner {
    flex-direction: column; align-items: flex-start;
    gap: 14px; padding: 18px 20px;
  }
  .cls-greeting { font-size: 24px; }
  .cls-banner-actions { width: 100%; }
  .cls-banner-btn { flex: 1; justify-content: center; }
  .cls-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cls-metrics--3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cls-modules-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 400px) {
  .cls-metrics--3 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cls-metric { padding: 12px 6px 10px; }
  .cls-metric-val { font-size: 22px; }
  .cls-metric-lbl { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   REDESIGN VISUAL — 4 paneles (2026-06-14)
   Sustituciones · Incidencias · Asistente IA
   Solo CSS; ningún ID existente se rompe.
══════════════════════════════════════════════════════════════ */

/* ── Eyebrow shared ── */
.pg-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}

/* ── Botón IA filled (terracota) ── */
.btn-ia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
  line-height: 1;
}
.btn-ia:hover { opacity: .88; }
.btn-ia:active { transform: scale(.97); }

/* ── Botón IA outlined ── */
.btn-ia-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.btn-ia-outline:hover { background: var(--accent-soft); }

/* ═══════════════════════════════════════════════════════
   SUSTITUCIONES — Admin view
═══════════════════════════════════════════════════════ */

.sust-admin-view {
  flex-direction: column;
  gap: 20px;
}

.sust-page-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.sust-page-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--txt);
  margin: 0 0 4px;
  line-height: 1.1;
}

.sust-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sust-ts {
  font-size: 12px;
  color: var(--muted-2);
  flex-shrink: 0;
}

/* Table wrapper */
.sust-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* IA banner */
.sust-ia-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  flex-wrap: wrap;
}
.sust-ia-logo { flex-shrink: 0; line-height: 0; }
.sust-ia-copy {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.5;
}
.sust-ia-copy strong { color: var(--txt); font-weight: 600; }

/* Collapsible form */
.sust-form-details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.sust-form-details > summary {
  padding: 12px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background .12s;
}
.sust-form-details > summary::-webkit-details-marker { display: none; }
.sust-form-details > summary::after {
  content: '▸';
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  transition: transform .2s;
}
.sust-form-details[open] > summary::after { transform: rotate(90deg); }
.sust-form-details > summary:hover { background: var(--surface-sunk); }
.sust-form-details > .card {
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--line) !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   INCIDENCIAS — Split view
═══════════════════════════════════════════════════════ */

/* Strip panel padding from incidencias panel so split reaches the edges,
   then restore it only for the professor view */
#panel-incidencias { padding: 0 !important; overflow: hidden !important; gap: 0 !important; }
#inc-vista-profesor { padding: 28px; gap: 22px; overflow-y: auto; }

/* JS sets display:flex → row split */
.inc-split-view {
  flex-direction: row !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left list panel */
.inc-list-panel {
  display: flex;
  flex-direction: column;
  width: 350px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}

.inc-list-topbar {
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.inc-list-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--txt);
  margin: 0;
  line-height: 1.1;
}

.inc-filters {
  padding: 8px 12px;
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper);
}

.inc-grupo-sel {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--srf);
  color: var(--txt2);
  cursor: pointer;
  outline: none;
  font-family: var(--font-ui);
  flex-shrink: 0;
}

.inc-csv-btn {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: color .12s;
  margin-left: auto;
}
.inc-csv-btn:hover { color: var(--txt); }

.inc-lista-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* ── Table → cards in incident list ── */
#inc-lista .tbl                 { display: block; width: 100%; }
#inc-lista .tbl thead           { display: none; }
#inc-lista .tbl tbody           { display: flex; flex-direction: column; gap: 6px; }
#inc-lista .tbl tbody tr {
  display: block;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
#inc-lista .tbl tbody tr:hover  {
  border-color: var(--line-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  background: var(--paper-2) !important;
}
#inc-lista .tbl tbody td        { display: block; padding: 0; border: none !important; background: none !important; color: var(--txt); }
#inc-lista .tbl tbody tr:last-child td { border-bottom: none !important; }
/* fecha */
#inc-lista .tbl tbody td:nth-child(1) { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
/* tipo — hidden */
#inc-lista .tbl tbody td:nth-child(2) { display: none; }
/* gravedad badge — top right */
#inc-lista .tbl tbody td:nth-child(3) { position: absolute; top: 10px; right: 10px; }
/* descripción — main text, 2-line clamp */
#inc-lista .tbl tbody td:nth-child(4) {
  font-size: 13px; font-weight: 500; color: var(--txt); line-height: 1.35;
  max-width: calc(100% - 90px); white-space: normal !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 5px;
}
/* alumno/grupo */
#inc-lista .tbl tbody td:nth-child(5) { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
/* estado + acciones */
#inc-lista .tbl tbody td:nth-child(6) { display: inline-block; margin-right: 6px; }
#inc-lista .tbl tbody td:nth-child(7) { display: inline-block; white-space: normal !important; }
#inc-lista .tbl tbody td:nth-child(7) button { font-size: 11px !important; padding: 2px 6px !important; }

/* Right detail panel */
.inc-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper-2);
  min-width: 0;
}

/* Collapsible form in detail panel */
.inc-form-details {
  margin: 16px 16px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.inc-form-details > summary {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  transition: background .12s;
}
.inc-form-details > summary::-webkit-details-marker { display: none; }
.inc-form-details > summary::after {
  content: '▸'; margin-left: auto; font-size: 11px; color: var(--muted); transition: transform .2s;
}
.inc-form-details[open] > summary::after { transform: rotate(90deg); }
.inc-form-details > summary:hover { background: var(--surface-sunk); }
.inc-form-details > .card { border: none !important; border-radius: 0 !important; border-top: 1px solid var(--line) !important; margin: 0 !important; }

/* Placeholder when no incident selected */
.inc-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}
.inc-empty-ico { font-size: 40px; color: var(--muted-2); }
.inc-empty-txt { font-size: 14px; color: var(--muted); max-width: 220px; line-height: 1.5; }

/* Selected row in incident list */
#inc-lista .tbl tbody tr.inc-row-sel {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
  border-color: color-mix(in srgb, var(--ink) 35%, var(--line)) !important;
}

/* Detail content state (replaces inc-detail-empty class on #inc-panel-der) */
.inc-detail-content {
  flex: 1;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════
   CALIFICACIONES — split layout (vista admin)
═══════════════════════════════════════════════════════ */

/* Panel lista (izquierda) */
.cal-list-panel {
  display: flex;
  flex-direction: column;
  width: 58%;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}

/* Cabecera del panel lista */
.cal-list-hdr {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Barra de filtros */
.cal-filtros-wrap {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--paper);
}

/* Zona scrollable de la tabla */
.cal-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 16px;
}

/* Panel detalle (derecha) */
.cal-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper-2);
  min-width: 0;
}

/* Estado vacío del detalle */
.cal-alumno-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
}

/* Estado con contenido */
.cal-alumno-content { /* padding y layout propios del innerHTML */ }

/* Fila seleccionada en la tabla de calificaciones */
#cal-admin-tabla .tbl tbody tr { cursor: pointer; }
#cal-admin-tabla .tbl tbody tr:hover { background: var(--surface-sunk) !important; }
#cal-admin-tabla .tbl tbody tr.cal-row-sel {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
}

@media (max-width: 900px) {
  .cal-list-panel { width: 100%; border-right: none; }
  .cal-detail-panel { display: none; }
}

/* ═══════════════════════════════════════════════════════
   ASISTENTE IA — Full-panel split layout
═══════════════════════════════════════════════════════ */

/* Panel root: row layout */
#panel-asistente {
  flex-direction: row !important;
  background: var(--paper);
  overflow: hidden;
}

/* Left: conversation history sidebar */
.chat-history-col {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  overflow: hidden;
  padding: 16px 12px;
  box-sizing: border-box;
  gap: 0;
}

.chat-new-conv {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--txt);
  color: var(--paper);
  border: none;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
  margin-bottom: 20px;
  text-align: left;
}
.chat-new-conv:hover { opacity: .82; }

.chat-hist-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 4px;
  margin-bottom: 8px;
}

.chat-hist-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Right: full chat area */
.chat-full-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

/* Chat header */
.chat-full-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}

.chat-full-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--txt);
  line-height: 1.2;
}

.chat-full-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

/* "En línea" badge */
.chat-online-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--success);
  background: var(--success-soft);
  border-radius: 999px;
  padding: 3px 10px;
  flex-shrink: 0;
  font-weight: 500;
  margin-left: auto;
}
.chat-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: onlinePulse 2.2s ease infinite;
}
@keyframes onlinePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* Main chat area fills remaining space */
#panel-asistente .chat-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
#panel-asistente .chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
#panel-asistente .input-area {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* Welcome state: left-aligned in the panel */
#panel-asistente .welcome {
  text-align: left;
  padding: 0;
  max-width: 520px;
  margin: 0;
}
#panel-asistente .wlc-ico {
  margin: 0 0 16px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-radius: 12px;
}
#panel-asistente .wlc-title {
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--txt2);
  line-height: 1.55;
  margin-bottom: 0;
}

/* Suggestion chips */
.chat-suggestions-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 22px 0 10px;
}
.chat-suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chat-suggestion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  text-align: left;
}
.chat-suggestion:hover { border-color: var(--line-strong); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.chat-suggestion strong { font-size: 13px; color: var(--txt); font-weight: 600; display: block; }
.chat-suggestion span { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════
   Responsive
═══════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Incidencias: stack on narrow screens */
  .inc-split-view {
    flex-direction: column !important;
    overflow-y: auto;
  }
  .inc-list-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 45vh;
  }
  .inc-detail-panel { min-height: 240px; overflow-y: auto; }
}

@media (max-width: 768px) {
  /* Sust page header: stack */
  .sust-page-hdr { flex-direction: column; align-items: flex-start; }
  .sust-page-title { font-size: 24px; }
  /* IA banner: stack */
  .sust-ia-banner { flex-direction: column; align-items: flex-start; }

  /* Asistente: hide history col, full-width chat */
  .chat-history-col { display: none; }
  #panel-asistente .chat-msgs { padding: 16px 18px; }
  .chat-suggestions { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAL FAMILIA — hero alumno + nav rápido + tarjetas (2026-06-15)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero alumno ── */
.fam-child-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 16px;
}
.fam-child-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.fam-child-info { flex: 1; min-width: 0; }
.fam-child-name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fam-child-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Nav rápido 4 accesos ── */
.fam-quick-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.fam-qnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 8px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
  line-height: 1.2;
  text-align: center;
}
.fam-qnav-btn:hover, .fam-qnav-btn:focus-visible {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--txt);
  transform: translateY(-1px);
  outline: none;
}
.fam-qnav-icon {
  font-size: 22px;
  color: var(--ink);
  display: block;
}

/* ── Tarjetas del portal familia ── */
/* Action button grande dentro del card comedor */
.fam-comedor-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 16px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
}
.fam-comedor-action:hover { opacity: .88; }

/* Badge salida pendiente autorización */
.fam-salida-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.fam-salida-pending.authed {
  background: var(--success-soft);
  color: var(--success);
}

/* Fila horario familia — algo más generoso que la vista staff */
#fh-horario .home-horario-row {
  padding: 9px 0;
  gap: 10px;
}
#fh-horario .hh-asig {
  font-size: 14px;
}
#fh-horario .hh-meta {
  font-size: 12px;
}

/* Comunicado no leído — botón ver todos */
.fam-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  text-decoration: none;
}
.fam-ver-mas:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .fam-quick-nav { gap: 6px; }
  .fam-qnav-btn { padding: 11px 4px 9px; font-size: 10px; }
  .fam-qnav-icon { font-size: 20px; }
  .fam-child-card { padding: 12px 14px; }
  .fam-child-avatar { width: 40px; height: 40px; font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDISEÑO MÓVIL COMPLETO — 2026-06-15
   Solo media queries ≤768px. No afecta desktop.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── P1: Globo de invitación (#asistente-hint) — ocultar en móvil ──
   El FAB solo ya invita claramente al uso del asistente. El globo
   solapaba métricas, tarjetas y grids en viewport estrecho. */
@media (max-width: 768px) {
  .asist-hint { display: none !important; }
}

/* ── P2: FAB oculto cuando el drawer "Más" está abierto ──
   Usa :has() (Chrome 105+, Firefox 121+, Safari 15.4+) para detectar
   el estado del drawer sin tocar JS. El display:block lo fija el JS inline. */
@media (max-width: 768px) {
  body:has(#mas-drawer[style*="display: block"]) #asistente-fab,
  body:has(#mas-drawer[style*="display:block"])  #asistente-fab {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.5) !important;
  }
}

/* ── P3: Tablas → scroll horizontal suave ──
   JS genera tablas dinámicamente en estos contenedores; sin tocar JS
   la única solución portable es overflow-x:auto + min-width fija en
   el .tbl para que el navegador no comprima columnas. */
@media (max-width: 768px) {
  /* Contenedores de tabla generados por JS */
  #users-list,
  #sust-container,
  .sust-table-wrap,
  #inc-lista,
  .inc-lista-wrap,
  #cal-container,
  #comedor-historico,
  #guardias-cont,
  #espacios-cont,
  #nc-lista,
  #fb-lista,
  #com-lista,
  #alumnos-list,
  #rrhh-list,
  #salidas-lista {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Indicador visual de scroll: fade en el borde derecho */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
  /* Tablas dentro: evitar colapso de columnas */
  #users-list .tbl,
  #sust-container .tbl,
  .sust-table-wrap .tbl,
  #inc-lista .tbl,
  #cal-container .tbl,
  #rrhh-list .tbl {
    min-width: 580px;
  }

  /* Celdas: padding reducido; solo thead con nowrap para evitar que textos largos rompan el layout */
  .tbl th         { padding: 6px 7px !important; white-space: nowrap; }
  .tbl td         { padding: 6px 7px !important; }
  .tbl            { font-size: 11px !important; }
}

/* ── P4: Espacio vertical — home más compacta en móvil ── */
@media (max-width: 768px) {
  /* Métricas accionables: gap y padding reducidos */
  .home-metrics { gap: 10px; margin-bottom: 14px; }
  .home-metric  { padding: 11px 13px; }
  .home-metric-val { font-size: 26px; }
  .home-metric-lbl { font-size: 11.5px; margin-top: 4px; }
  .home-metric-chev { font-size: 16px; }

  /* Tarjeta "Mi horario de hoy" y cards en general */
  .home-card { padding: 14px 16px; margin-bottom: 14px; }

  /* Buscador protagonista: más compacto */
  .home-search { margin-bottom: 14px; }
}

/* ── P5: Ocultar badge ⌘K en móvil ──
   El buscador ya es tappable y abre el command palette. */
@media (max-width: 768px) {
  .home-search-kbd { display: none !important; }
}

/* ── P6: Pulido general móvil ── */
@media (max-width: 768px) {
  /* Touch targets — bottom nav ya tiene height:60px (OK), reforzar .bn-item */
  .bn-item {
    min-height: 44px;
    padding: 6px 2px;  /* más espacio táctil horizontal */
  }
  .bn-item i { font-size: 20px; }
  .bn-item span { font-size: 9.5px; }

  /* Drawer "Más": items con target suficiente */
  .mas-item { min-height: 52px; min-width: 52px; }

  /* Botones genéricos: target mínimo 40px */
  .btn, .btn-p, .btn-s { min-height: 40px; }

  /* Pills filtro usuarios: scroll horizontal (override el flex-wrap:wrap inline) */
  #users-filtros-rol {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    gap: 6px;
    /* Fade en borde derecho como indicador de scroll */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
  }
  #users-filtros-rol::-webkit-scrollbar { display: none; }
  #users-filtros-rol button { flex-shrink: 0; }

  /* Pills filtro sustituciones: scroll horizontal */
  #sust-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
  }
  #sust-filter-bar::-webkit-scrollbar { display: none; }
  #sust-filter-bar button { flex-shrink: 0; }

  /* Pills filtro incidencias */
  .inc-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
  }
  .inc-filters::-webkit-scrollbar { display: none; }
  .inc-filters button, .inc-filters select { flex-shrink: 0; }

  /* Safe-area + bottom-nav clearance — refuerza la regla existente */
  #app-main > .panel {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Panel chat usa .chat-main que ya tiene clearance; reforzar por si acaso */
  #panel-chat { padding-bottom: 0 !important; }
}

/* ── prefers-reduced-motion: quitar transiciones del FAB y drawer ── */
@media (prefers-reduced-motion: reduce) {
  .asist-fab, #mas-sheet, #mas-backdrop {
    transition: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ONBOARDING FAMILIA — Wizard primer acceso
   ══════════════════════════════════════════════════════════════ */

#onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: onbFadeIn .25s ease;
}

@keyframes onbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#onb-panel {
  position: relative;
  width: min(420px, 94vw);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: onbSlideUp .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes onbSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.onb-step { width: 100%; display: flex; flex-direction: column; align-items: center; }

.onb-skip {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .15s;
}
.onb-skip:hover { color: var(--ink); }

.onb-logo-wrap {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.onb-brand-logo { max-height: 36px; max-width: 120px; object-fit: contain; }

.onb-icon {
  font-size: 44px;
  margin-bottom: 14px;
  line-height: 1;
}

.onb-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
  animation: onbCheckPop .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes onbCheckPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.onb-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.2;
}

.onb-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 320px;
}

.onb-btn-primary {
  width: 100%;
  max-width: 280px;
  height: 46px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  margin-top: 4px;
  transition: opacity .15s, transform .1s;
}
.onb-btn-primary:hover { opacity: .9; }
.onb-btn-primary:active { transform: scale(.98); }
.onb-btn-primary:disabled { opacity: .6; cursor: default; }

/* Paso 2: hijo card */
.onb-hijo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%;
  box-sizing: border-box;
}

.onb-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.onb-hijo-nombre {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.onb-hijo-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

/* Paso 3: notif items */
.onb-notif-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.onb-notif-item {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}

/* Progress dots */
.onb-dots {
  display: flex;
  gap: 7px;
  margin-top: 24px;
}

.onb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background .2s, transform .2s;
}

.onb-dot-active {
  background: var(--ink);
  transform: scale(1.25);
}

@media (max-width: 480px) {
  #onb-panel { padding: 28px 20px 22px; border-radius: 16px 16px 0 0; position: fixed; bottom: 0; width: 100%; max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  #onb-overlay { align-items: flex-end; }
}

/* ══════════════════════════════════════════════════════════════
   MÓDULO ALUMNOS — Split layout (lista + drawer de perfil)
   ══════════════════════════════════════════════════════════════ */

#panel-alumnos {
  padding: 0 !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

.al-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Columna lista ── */
.al-list-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--paper);
}

.al-list-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.al-count {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.al-search-row {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.al-search-wrap {
  position: relative;
  margin-bottom: 10px;
}

.al-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
}

.al-search-input {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-sunk);
  border: 1px solid transparent;
  padding: 0 12px 0 32px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.al-search-input:focus {
  background: var(--paper);
  border-color: var(--line-2);
}

.al-pills {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.al-pills::-webkit-scrollbar { display: none; }
/* Chips de filtro por grupo (Alumnos). Antes faltaba la regla y salían como
   botones por defecto del navegador. Tokens del design system v2. */
.al-pills .pill {
  flex: 0 0 auto;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-family: var(--font-ui);
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  background: var(--paper-2);
  color: var(--txt);
  border: 1px solid var(--line);
  transition: background .15s, color .15s, border-color .15s;
}
.al-pills .pill:hover { background: var(--surface-sunk); }
.al-pills .pill.pill-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.al-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.al-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.al-tbl thead th {
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  text-align: left;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
}

.al-row {
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.al-row:hover { background: var(--paper-2); }
.al-row-selected { background: color-mix(in srgb, var(--ink) 6%, var(--paper)) !important; }
.al-row-selected .al-cell-name { color: var(--ink); font-weight: 600; }

.al-td-name { padding: 10px 16px; }
.al-td-curso { padding: 10px 16px; color: var(--muted); font-size: 12px; white-space: nowrap; }

.al-cell-avatar { display: flex; align-items: center; gap: 10px; }
.al-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}
.al-cell-stack { display: flex; flex-direction: column; min-width: 0; }
.al-cell-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-cell-sub  { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Drawer perfil ── */
.al-drawer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper-2);
  overflow: hidden;
}

.al-drawer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.al-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.al-drw-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper);
}

.al-drw-avatar-lg {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}

.al-drw-meta { flex: 1; min-width: 0; }
.al-drw-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 3px;
  line-height: 1.2;
}

.al-drw-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  padding: 0 16px;
  background: var(--paper);
}
.al-drw-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.al-drw-tab:hover { color: var(--ink); }
.al-drw-tab-active { color: var(--ink) !important; border-bottom-color: var(--ink) !important; }

.al-drw-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.al-drw-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--paper);
}

/* ── Contenido del drawer ── */
.al-drw-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.al-drw-section { margin-bottom: 4px; }

.al-drw-fam-row {
  font-size: 13px;
  color: var(--ink);
  padding: 4px 0;
}

.al-comedor-dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.al-inc-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.al-inc-row:last-child { border-bottom: none; }

.al-tbl-cal {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.al-tbl-cal th {
  padding: 6px 8px;
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.al-tbl-cal th:first-child { text-align: left; }
.al-tbl-cal td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.al-tbl-cal tr:last-child td { border-bottom: none; }

/* ── Horario mini grid ── */
.al-hor-grid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.al-hor-col { flex: 1; min-width: 52px; }
.al-hor-dia {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
  margin-bottom: 6px;
}
.al-hor-cell {
  padding: 5px 4px;
  border-radius: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 4px;
  text-align: center;
}
.al-hor-materia { font-size: 10px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.al-hor-hora    { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* ── Responsive: stack vertical en móvil ── */
@media (max-width: 768px) {
  .al-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }
  .al-list-col { border-right: none; border-bottom: 1px solid var(--line); max-height: 45vh; }
  .al-drawer { min-height: 50vh; }
  .al-drw-head { padding: 14px 16px 12px; }
  .al-drw-avatar-lg { width: 40px; height: 40px; font-size: 15px; }
  .al-drw-name { font-size: 17px; }
}

/* ══ BRIEFING MATUTINO — "Tu día en 60 segundos" (js/briefing.js) ══ */
.brf-card {
  border-left: 3px solid var(--accent);
  background: linear-gradient(120deg, var(--accent-soft) 0%, var(--paper) 38%);
}
.brf-meta { font-size: 11px; color: var(--muted); }
.brf-txt {
  font-size: 14px;
  line-height: 1.65;
  color: var(--txt);
  margin-top: 6px;
  white-space: pre-wrap;
}
.brf-loading { color: var(--muted); animation: brf-pulse 1.4s ease-in-out infinite; }
@keyframes brf-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.brf-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.brf-btn { font-size: 12.5px; padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; }
.brf-btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.brf-btn-ghost:hover { border-color: var(--line-strong); color: var(--txt); }

/* Fila IA del command palette */
.cmdp-item-ia { background: var(--accent-soft); }
.cmdp-item-ia:hover { background: var(--accent-soft); filter: brightness(.97); }
.cmdp-item-ia .cmdp-item-title { color: var(--accent-ink); }

/* Botón modo voz (conversación manos libres) activo */
#voz-btn.voz-on { background: var(--accent); color: #fff; border-color: var(--accent); animation: voz-pulse 1.6s ease-in-out infinite; }
@keyframes voz-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(199,107,61,.35); } 50% { box-shadow: 0 0 0 7px rgba(199,107,61,0); } }