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

:root {
  --bg:      #f5f4f0;
  --surface: #ffffff;
  --border:  #e2e0d8;
  --text:    #1a1a18;
  --muted:   #7a7870;
  --accent:  #2a5cff;
  --accentH: #1a44d4;
  --danger:  #d63e3e;
  --success: #1a8a4a;
  --warn:    #c77a00;
  --r:       10px;
  --shadow:  0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --bloque-tema-bg: #eef4fc;
}

body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.55; min-height:100vh; }

/* LOGIN */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2.5rem; width:100%; max-width:360px; box-shadow:var(--shadow); }
.login-logo { font-size:1.7rem; font-weight:600; letter-spacing:-.04em; margin-bottom:.2rem; }
.login-logo span { color:var(--accent); }
.login-sub { color:var(--muted); font-size:.875rem; margin-bottom:2rem; }
.login-err { color:var(--danger); font-size:.84rem; margin-bottom:.75rem; display:none; }

/* LAYOUT */
.layout { display:flex; min-height:100vh; }
.sidebar { width:220px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:1.5rem 0; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar-logo { font-size:1.1rem; font-weight:600; letter-spacing:-.02em; padding:0 1.25rem 1.25rem; border-bottom:1px solid var(--border); margin-bottom:.75rem; }
.sidebar-logo span { color:var(--accent); }
.sidebar-section { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:.75rem 1.25rem .25rem; }
.nav-item { display:flex; align-items:center; gap:.6rem; padding:.55rem 1.25rem; cursor:pointer; font-size:.9rem; color:var(--text); transition:background .15s; border:none; background:none; width:100%; text-align:left; font-family:inherit; }
.nav-item:hover { background:var(--bg); }
.nav-item.active { background:#eef2ff; color:var(--accent); font-weight:500; }
.nav-item .icon { font-size:1rem; width:20px; text-align:center; }
.nav-item.nav-item-materiales:not(.active) { background:rgba(251,146,60,.16); color:#9a3412; }
.nav-item.nav-item-pruebas:not(.active) { background:rgba(59,130,246,.14); color:#1e40af; }
.nav-item.nav-item-agenda:not(.active) { background:rgba(250,204,21,.20); color:#854d0e; }
.sidebar-footer { margin-top:auto; padding:1rem 1.25rem 0; border-top:1px solid var(--border); }
.user-pill { display:flex; align-items:center; gap:.6rem; font-size:.85rem; }
.avatar { width:32px; height:32px; border-radius:50%; background:#eef2ff; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; flex-shrink:0; }
.user-name { font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-role { font-size:.72rem; color:var(--muted); }
.main { flex:1; overflow-y:auto; }
.page { padding:2rem; max-width:960px; }
.page.page-ancho-completo { max-width: none; }

/* CARDS */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem; margin-bottom:1.25rem; }
.page-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap; }
.page-title { font-size:1.4rem; font-weight:600; letter-spacing:-.02em; }
.page-sub { font-size:.875rem; color:var(--muted); margin-top:.15rem; }

/* FORMS */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.8rem; font-weight:500; color:var(--muted); margin-bottom:.35rem; text-transform:uppercase; letter-spacing:.04em; }
input[type=text],input[type=password],input[type=number],input[type=url],select,textarea { width:100%; padding:.6rem .85rem; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:.95rem; color:var(--text); background:var(--surface); outline:none; transition:border-color .15s; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; border-radius:8px; font-family:inherit; font-size:.9rem; font-weight:500; cursor:pointer; border:none; transition:all .15s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accentH); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg); }
.btn-danger { background:transparent; color:var(--danger); border:1px solid #f0c0c0; }
.btn-danger:hover { background:#fff0f0; }
.btn-locked { background:transparent; color:var(--muted); border:1px solid var(--border); opacity:.6; cursor:not-allowed; }
.btn-criterios-ok { border-color:var(--success); color:var(--success); }
.btn-sm { padding:.35rem .75rem; font-size:.82rem; }
.btn-xs { padding:clamp(.15rem,.3vw,.3rem) clamp(.3rem,.8vw,.55rem); font-size:clamp(.65rem,1.1vw,.75rem); gap:.2rem; }
.btn-full { width:100%; justify-content:center; }

/* TABLE */
.table-wrap { overflow-x:auto; } .table-wrap table { width:100%; table-layout:auto; } .table-wrap table th, .table-wrap table td { white-space:normal; word-break:break-word; min-width:50px; padding:.4rem .3rem; }
.table-compact table { font-size:clamp(.68rem,1.1vw,.82rem); }
.table-compact th, .table-compact td { white-space:nowrap; word-break:normal; padding:.35rem .5rem; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th { text-align:left; padding:.6rem .85rem; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-bottom:1px solid var(--border); }
td { padding:.7rem .85rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg); }

/* BADGES */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:20px; font-size:.75rem; font-weight:500; }
.badge-blue  { background:#eef2ff; color:var(--accent); }
.badge-green { background:#e8f8ef; color:var(--success); }
.badge-gray  { background:#f0ede8; color:var(--muted); }

/* TABS */
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.tab { padding:.6rem 1rem; font-size:.9rem; cursor:pointer; border:none; background:none; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; font-family:inherit; transition:all .15s; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:500; }
.tab:hover:not(.active) { color:var(--text); }

/* NOTA GRID */
.nota-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.nota-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:1.2rem; }
.nota-card h4 { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.85rem; }
.nota-field { margin-bottom:.65rem; }
.nota-field label { font-size:.78rem; color:var(--muted); display:block; margin-bottom:.25rem; }
.nota-field input { padding:.45rem .7rem; font-family:'DM Mono',monospace; }

/* MATERIALES */
.mat-list { display:flex; flex-direction:column; gap:.6rem; }
.mat-item { position:relative; display:flex; align-items:center; gap:.85rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; }
.mat-icon { font-size:1.2rem; flex-shrink:0; }
.mat-info { flex:1; min-width:0; }
.mat-title { font-weight:500; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mat-meta { font-size:.78rem; color:var(--muted); margin-top:.1rem; }
.mat-actions { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.mat-item.mat-dado { opacity:.55; }
.mat-item.mat-dado .mat-title { text-decoration:line-through; }
.mat-item.mat-dado::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom right, transparent calc(50% - 1px), var(--muted) 50%, transparent calc(50% + 1px)); border-radius:inherit; pointer-events:none; }
.btn-marcar-dado, .btn-marcar-dado-apunte { font-size:.72rem; line-height:1; padding:.25rem .45rem; opacity:.55; white-space:nowrap; }
.btn-marcar-dado.is-dado, .btn-marcar-dado-apunte.is-dado { opacity:.8; color:#16a34a; }
.mat-dado-fecha { font-size:.6rem; margin-left:.15rem; color:var(--muted); font-weight:400; vertical-align:middle; }
.banco-apunte-row.apunte-dado { opacity:.55; }
.banco-apunte-row.apunte-dado::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom right, transparent calc(50% - 1px), var(--muted) 50%, transparent calc(50% + 1px)); border-radius:inherit; pointer-events:none; }

/* TOAST */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--text); color:#fff; padding:.75rem 1.25rem; border-radius:8px; font-size:.875rem; z-index:9999; animation:slideUp .25s ease; max-width:320px; }
.toast.success { background:var(--success); }
.toast.error   { background:var(--danger); }
@keyframes slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* MODAL */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.modal { background:var(--surface); border-radius:14px; padding:1.75rem; width:100%; max-width:500px; box-shadow:0 8px 40px rgba(0,0,0,.18); max-height:90vh; overflow-y:auto; }
.modal h3 { font-size:1.1rem; font-weight:600; margin-bottom:1.25rem; }
.modal-footer { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.25rem; }

/* GRUPO GRID */
.grupo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; }
.grupo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.25rem; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.grupo-card:hover { border-color:var(--accent); box-shadow:0 2px 12px rgba(42,92,255,.1); }
.grupo-card h3 { font-size:1rem; font-weight:600; margin-bottom:.25rem; }
.grupo-card .curso { font-size:.82rem; color:var(--muted); margin-bottom:.75rem; }
.grupo-card .stats { font-size:.82rem; color:var(--muted); }

/* MISC */
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); font-size:.9rem; }
.empty-icon { font-size:2rem; margin-bottom:.5rem; }
.gap-1 { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.loading { text-align:center; padding:2rem; color:var(--muted); }
.text-mono { font-family:'DM Mono',monospace; }

/* FILE DROP */
.file-drop { border:2px dashed var(--border); border-radius:8px; padding:1.5rem; text-align:center; cursor:pointer; color:var(--muted); font-size:.875rem; transition:border-color .15s,background .15s; }
.file-drop:hover,.file-drop.over { border-color:var(--accent); background:#f0f4ff; }

@media(max-width:640px){
  .sidebar{width:100%;height:auto;position:relative;}
  .layout{flex-direction:column;}
  .form-row{grid-template-columns:1fr;}
  .nota-grid{grid-template-columns:1fr;}
  .grupo-grid{grid-template-columns:1fr;}
  #eia-secciones-grid{grid-template-columns:1fr!important;}
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* ── Tippy tooltips tema Aula ── */
.tippy-box[data-theme~='aula'] {
  background-color: #2d3748;
  color: #f7fafc;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  font-size: .78rem;
  font-family: 'DM Sans', sans-serif;
  max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.tippy-box[data-theme~='aula'] .tippy-arrow {
  color: #2d3748;
}

/* ── TipTap editor ── */
.tiptap {
  outline: none;
  padding: .5rem;
}
.tiptap table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
.tiptap table td,
.tiptap table th {
  border: 1px solid #ccc;
  padding: .4rem .6rem;
  min-width: 80px;
  vertical-align: top;
}
.tiptap table th {
  background: #f1f5f9;
  font-weight: 700;
}
.tiptap table .selectedCell {
  /* !important: una celda con color de fondo propio (style="background-color:...", ver
     backgroundColor de TableCell/TableHeader en app-core.js) tiene un estilo INLINE, que sin
     !important siempre gana a esta clase por especificidad CSS — la selección quedaba
     invisible "detrás" del color de la celda (bug real reportado en uso). */
  background: #dbeafe !important;
}
.tiptap p { margin: 0 0 .5rem; }
.tiptap h1 { font-size: 1.6rem; font-weight: 700; margin: .75rem 0 .4rem; }
.tiptap h2 { font-size: 1.3rem; font-weight: 700; margin: .65rem 0 .35rem; }
.tiptap h3 { font-size: 1.1rem; font-weight: 700; margin: .55rem 0 .3rem; }
.tiptap ul, .tiptap ol { padding-left: 1.5rem; margin: .4rem 0; }
.tiptap blockquote { border-left: 3px solid var(--accent); padding-left: .75rem; color: var(--muted); }
/* ── Toggle switch ───────────────────────────────────────────────── */
.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:20px; transition:.2s; }
.toggle-slider:before { content:""; position:absolute; width:14px; height:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle-switch input:checked + .toggle-slider { background:var(--accent,#2563eb); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(16px); }

/* ── Distribución de aula ───────────────────────────────────────── */
.dist-grid {
  display: grid; width: 100%; gap: 0;
}
.dist-celda {
  border: 2px solid var(--border, #e2e8f0); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3px 2px; cursor: pointer; position: relative; transition: background .15s;
  min-width: 0; box-sizing: border-box; overflow: hidden;
}
.dist-mesa { background: var(--surface, #fff); }
.dist-mesa:hover { background: #eff6ff; }
.dist-ocupada { background: #f0fdf4; }
.dist-ocupada:hover { background: #dcfce7; }
.dist-pasillo {
  background: #e5e7eb; border-color: #d1d5db;
  padding: 0 !important; font-size: 0; line-height: 0;
}
.dist-pasillo:hover { background: #d1d5db; }
.dist-profe-box {
  background: #14532d; color: #fff; text-align: center; padding: 10px 28px;
  border-radius: 8px; font-weight: 700; font-size: .9rem;
  border: 2px solid #166534; min-width: 140px;
}
.dist-num {
  font-size: .65rem; color: var(--muted, #999); line-height: 1; flex-shrink: 0;
}
.dist-nombre {
  font-size: .7rem; font-weight: 600; line-height: 1.15; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; width: 100%; color: var(--text, #1a1a18);
}
.dist-quitar {
  position: absolute; top: 1px; right: 2px; background: none; border: none;
  color: #ef4444; cursor: pointer; font-size: .75rem; padding: 0 2px; line-height: 1;
}
.dist-quitar:hover { color: #dc2626; }
.dist-drag-over {
  outline: 2px dashed #3b82f6; outline-offset: -2px; background: #eff6ff !important;
}
/* Drag & drop de Apuntes entre Bloque/Apartado (Fase B) — mismo lenguaje visual que .dist-drag-over */
.teoria-drag-over {
  outline: 2px dashed #3b82f6; outline-offset: -2px; background: #eff6ff !important;
}
/* Panel lateral alumnos */
.dist-panel-alumnos { color: #1e293b; }
.dist-alumno-chip {
  background: #dbeafe; color: #1e40af; padding: 5px 8px; border-radius: 6px;
  font-size: .8rem; font-weight: 600; cursor: grab; user-select: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; border: 1px solid #93c5fd;
  line-height: 1.3;
}
.dist-alumno-chip:hover { background: #bfdbfe; }
.dist-alumno-chip:active { cursor: grabbing; }
/* Ventana activa en borde */
.dist-ventana-lateral {
  writing-mode: vertical-rl; text-orientation: mixed;
  background: #3b82f6; color: #fff; padding: 8px 6px;
  font-size: .7rem; font-weight: 600; text-align: center;
  border-radius: 4px; letter-spacing: 1px; flex-shrink: 0;
}
.dist-ventana-top {
  background: #3b82f6; color: #fff; padding: 5px;
  font-size: .7rem; font-weight: 600; text-align: center;
  border-radius: 4px; letter-spacing: 1px;
}

@media (max-width: 640px) {
  .dist-celda { padding: 2px 1px; }
  .dist-nombre { font-size: .6rem; }
  .dist-num { font-size: .55rem; }
  .dist-panel-alumnos { min-width: 110px !important; max-width: 140px !important; }
  .dist-alumno-chip { font-size: .72rem; padding: 4px 6px; }
}