*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f172a; --card:#1e293b; --card-hover:#334155;
  --text:#f1f5f9; --muted:#94a3b8;
  --teal:#14b8a6; --orange:#f97316; --pink:#ec4899; --purple:#a855f7;
  --blue:#3b82f6; --yellow:#eab308; --red:#ef4444; --green:#22c55e;
  --radius:18px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.5; color:var(--text);
  background:radial-gradient(ellipse at top,#1e293b 0%,#0f172a 60%);
  min-height:100vh; padding:0 0 80px;
}

.site-header{ padding:24px 18px 12px; text-align:left; max-width:1100px; margin:0 auto; position:relative; }
.back-link{
  display:inline-block; color:var(--muted); text-decoration:none; font-size:.85rem; font-weight:600;
  padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.05); margin-bottom:14px;
  transition:background .15s;
}
.back-link:hover{ background:rgba(255,255,255,.1); color:var(--text); }
.site-title{
  font-size:1.6rem; font-weight:900; margin-bottom:4px;
  background:linear-gradient(135deg,#14b8a6,#3b82f6,#a855f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.site-sub{ color:var(--muted); font-size:.9rem }

/* ─── Tabs principales ─── */
.tabs{
  display:flex; gap:6px; padding:0 18px 6px; max-width:1100px; margin:0 auto;
  border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap;
}
.tab{
  background:transparent; color:var(--muted); border:none; cursor:pointer;
  padding:10px 16px; font-size:.9rem; font-weight:700; border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tab.active{ color:var(--text); border-bottom-color:var(--teal); }
.tab:hover{ color:var(--text); }
.tab.ghost{ margin-left:auto; color:var(--muted); text-decoration:none; font-size:.8rem; padding:10px 12px; }
.tab.ghost:hover{ color:var(--teal); }
.tab-spacer{ flex:1; }
.tab.ghost.test-link{ margin-left:0; font-size:.75rem; padding:8px 10px; opacity:.7; border:1px dashed rgba(255,255,255,.15); border-radius:8px; }
.tab.ghost.test-link:hover{ opacity:1; border-color:var(--teal); }

.tab-panel{ padding-top:14px; }

.filter-bar{
  display:flex; gap:8px; padding:0 18px 16px; max-width:1100px; margin:0 auto; flex-wrap:wrap;
}
.chip{
  background:rgba(255,255,255,.05); color:var(--text); border:1px solid rgba(255,255,255,.08);
  padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s;
  text-decoration:none;
}
.chip:hover{ background:rgba(255,255,255,.1); }
.chip.active{ background:var(--teal); color:#0f172a; border-color:var(--teal); }
.chip.ghost{ background:transparent; color:var(--muted); border-color:rgba(255,255,255,.06); }

main{ max-width:1100px; margin:0 auto; padding:0 18px; display:flex; flex-direction:column; gap:24px; }

section.loading{
  background:var(--card); border-radius:var(--radius); padding:24px;
  color:var(--muted); text-align:center;
}

h2{ font-size:1.1rem; font-weight:800; margin-bottom:12px; color:var(--text); }
h3{ font-size:1rem; font-weight:700; margin-bottom:8px; }

/* ─── KPI cards ─── */
.kid-block{ margin-bottom:20px; }
.kid-block-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.kid-avatar{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-size:1.1rem; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.kid-avatar.maxi{ background:linear-gradient(135deg,#f97316,#ef4444) }
.kid-avatar.pia{ background:linear-gradient(135deg,#ec4899,#a855f7) }
.kid-name{ font-size:1.15rem; font-weight:800 }
.kid-subline{ font-size:.8rem; color:var(--muted) }

.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px;
}
.kpi-card{
  background:var(--card); border:1px solid rgba(255,255,255,.05);
  border-radius:14px; padding:14px;
}
.kpi-label{ font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700 }
.kpi-value{ font-size:1.6rem; font-weight:900; margin-top:6px; }
.kpi-foot{ font-size:.75rem; color:var(--muted); margin-top:2px }
.kpi-card.warn .kpi-value{ color:var(--yellow) }
.kpi-card.bad .kpi-value{ color:var(--red) }
.kpi-card.good .kpi-value{ color:var(--green) }
.kpi-card.muted .kpi-value{ color:var(--muted); font-size:1rem }

/* ─── Tabla de temas (colapsable con <details>) ─── */
.subject-block{
  background:var(--card); border-radius:var(--radius); padding:14px; margin-top:12px;
}
.subject-block:not([open]){ padding:10px 14px }
.subject-block-head{
  display:flex; align-items:center; gap:8px; padding:0 4px;
  cursor:pointer; user-select:none; list-style:none; outline:none;
}
.subject-block[open] > .subject-block-head{ margin-bottom:8px }
.subject-block-head::-webkit-details-marker{ display:none }
.subject-block-head:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:6px }
.subject-block-chevron{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; color:var(--muted); font-size:1.1rem; line-height:1;
  transition:transform .18s ease; flex-shrink:0;
}
.subject-block[open] > .subject-block-head .subject-block-chevron{ transform:rotate(90deg) }
.subject-block-summary{
  margin-left:auto; display:flex; align-items:center; gap:10px; font-size:.75rem; flex-wrap:wrap;
}
.subject-block-meta{ color:var(--muted); font-variant-numeric:tabular-nums }
.subject-block-pct{
  font-weight:700; font-variant-numeric:tabular-nums; padding:2px 8px; border-radius:6px;
  background:rgba(255,255,255,.04);
}
.subject-tag{
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal);
}
.subject-block.english .subject-tag{ color:var(--orange) }
.subject-block.ciencias .subject-tag{ color:var(--teal) }

.topic-table{
  width:100%; border-collapse:collapse; font-size:.85rem;
}
.topic-table thead th{
  text-align:left; font-size:.7rem; color:var(--muted); font-weight:700;
  padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.05); text-transform:uppercase; letter-spacing:.04em;
}
.topic-table tbody td{
  padding:10px 6px; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle;
}
.topic-table tbody tr:hover{ background:rgba(255,255,255,.02) }
.topic-table .num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700 }
.topic-table .pct{ text-align:right; font-variant-numeric:tabular-nums; }
.pct-good{ color:var(--green) } .pct-mid{ color:var(--yellow) } .pct-bad{ color:var(--red) }
.btn-mini{
  background:rgba(255,255,255,.05); color:var(--text); border:none; border-radius:8px;
  padding:6px 10px; font-size:.75rem; font-weight:700; cursor:pointer;
}
.btn-mini:hover{ background:var(--card-hover) }

.sparkline{ display:inline-block; vertical-align:middle }

/* ─── Inventario: material disponible por hijo ─── */
.inv-section-title{
  font-size:.85rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:24px 4px 10px;
}
.inv-kid{
  background:var(--card); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px;
}
.inv-kid-head{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.inv-kid-info{ flex:1 }
.inv-kid-name{ font-size:1.05rem; font-weight:800 }
.inv-kid-sub{ font-size:.75rem; color:var(--muted); margin-top:2px }

.inv-materia{
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:10px;
  margin-top:8px; overflow:hidden;
}
.inv-materia[open]{ background:rgba(255,255,255,.03) }
.inv-materia-head{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  cursor:pointer; user-select:none; list-style:none; outline:none;
  flex-wrap:wrap;
}
.inv-materia[open] > .inv-materia-head{ border-bottom:1px solid rgba(255,255,255,.04) }
.inv-materia-head::-webkit-details-marker{ display:none }
.inv-materia-head:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:6px }
.inv-materia[open] > .inv-materia-head .subject-block-chevron{ transform:rotate(90deg) }
.inv-materia-icon{ font-size:1.1rem; line-height:1 }
.inv-materia-name{ font-weight:700; font-size:.92rem; flex:1; min-width:120px }
.inv-materia-count{ font-size:.7rem; color:var(--muted); font-weight:700; background:rgba(255,255,255,.06); padding:2px 8px; border-radius:6px }
.inv-share{
  background:rgba(20,184,166,.12); border:1px solid rgba(20,184,166,.25); color:#5eead4;
  font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:7px; cursor:pointer; line-height:1.3;
}
.inv-share:hover{ background:rgba(20,184,166,.22) }

.inv-items{ padding:6px 6px 8px }
.inv-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px 6px 12px; border-radius:8px;
  background:transparent; transition:background .12s, opacity .12s;
}
.inv-item + .inv-item{ margin-top:2px }
.inv-item:hover{ background:rgba(255,255,255,.04) }
.inv-item.is-dimmed{ opacity:.45 }
.inv-item.is-dimmed:hover{ opacity:.7 }
.inv-item-link{
  flex:1; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  text-decoration:none; color:var(--text); min-width:0;
  padding:4px 0;
}
.inv-item-icon{ font-size:1rem; line-height:1; opacity:.8 }
.inv-item-body{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.inv-item-title{ font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.inv-item-meta{ font-size:.7rem; color:var(--muted) }
.inv-item-pct{ font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; min-width:42px; text-align:right }
.inv-item-pct.muted{ color:var(--muted) }
.inv-item-arrow{ color:var(--muted); font-size:1rem; line-height:1 }
.inv-empty{ padding:14px; text-align:center; color:var(--muted); font-size:.8rem; font-style:italic }

.inv-access-chip{
  font-size:.65rem; font-weight:700; padding:3px 8px; border-radius:6px;
  background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.3); color:#c4b5fd;
  cursor:pointer; line-height:1.3; white-space:nowrap;
  transition:background .12s, border-color .12s, transform .12s;
}
.inv-access-chip:hover{ background:rgba(168,85,247,.22); transform:scale(1.04) }
.inv-access-chip:active{ transform:scale(.96) }

.inv-materia.is-dimmed > .inv-materia-head{ opacity:.55 }
.inv-materia.is-dimmed:hover > .inv-materia-head{ opacity:.85 }

.inv-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--teal); color:#fff; padding:10px 18px; border-radius:10px;
  font-weight:700; font-size:.85rem; box-shadow:0 8px 24px rgba(20,184,166,.4);
  transition:transform .25s; z-index:50; pointer-events:none;
}
.inv-toast.show{ transform:translateX(-50%) translateY(0) }

/* ─── Alertas (sin actividad) ─── */
#alertasSection .alert-card{
  background:var(--card); border-left:3px solid var(--yellow);
  border-radius:10px; padding:12px 14px; margin-bottom:8px;
  font-size:.9rem;
}
#alertasSection .alert-card.bad{ border-left-color:var(--red) }
#alertasSection .alert-card .alert-meta{ color:var(--muted); font-size:.75rem; margin-top:2px }

/* ─── Lista últimas sesiones ─── */
.session-row{
  display:grid;
  grid-template-columns:90px 1fr auto auto;
  gap:10px; align-items:center;
  padding:10px 14px;
  background:var(--card);
  border-radius:10px; margin-bottom:6px;
  font-size:.85rem;
}
.session-when{ font-size:.75rem; color:var(--muted) }
.session-topic{ font-weight:600 }
.session-tag{
  font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.04em;
}
.session-tag.completo{ background:rgba(34,197,94,.15); color:var(--green) }
.session-tag.abandonado{ background:rgba(239,68,68,.15); color:var(--red) }
.session-pct{ font-weight:800; font-variant-numeric:tabular-nums }

/* ─── Modal detalle ─── */
.modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.modal[hidden]{ display:none }
.modal-card{
  background:#1e293b; border-radius:18px; max-width:680px; width:100%;
  max-height:90vh; overflow-y:auto; padding:24px 22px; position:relative;
  border:1px solid rgba(255,255,255,.08);
}
.modal-close{
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,.06); color:var(--text); border:none;
  width:32px; height:32px; border-radius:8px; font-size:1rem; cursor:pointer;
}
.modal-close:hover{ background:rgba(255,255,255,.12) }
.curve{ width:100%; height:140px; margin:14px 0; }
.fail-list{ margin-top:14px }
.fail-item{
  padding:10px; background:rgba(255,255,255,.03); border-radius:8px;
  margin-bottom:6px; font-size:.85rem;
  display:flex; justify-content:space-between; gap:10px;
}
.fail-item .qid{ font-family:'JetBrains Mono', ui-monospace, monospace; color:var(--muted); font-size:.75rem }
.fail-item .err-count{ color:var(--red); font-weight:700 }

@media(min-width:760px){
  .site-title{ font-size:2rem }
  .session-row{ grid-template-columns:120px 1fr 100px 100px auto }
}

/* ─── Tab Configurar ─── */
.config-section{
  max-width:1100px; margin:0 auto 24px; padding:0 18px;
}
.section-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; flex-wrap:wrap; gap:10px;
}
.btn-primary{
  background:var(--teal); color:#0f172a; border:none; cursor:pointer;
  padding:10px 18px; border-radius:10px; font-size:.85rem; font-weight:700;
}
.btn-primary:hover{ background:#0d9488; }
.btn-primary.inline{ display:inline-block; padding:4px 10px; font-size:.75rem; }
.btn-ghost{
  background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,.1);
  padding:10px 18px; border-radius:10px; font-size:.85rem; font-weight:600; cursor:pointer;
}
.btn-ghost:hover{ background:rgba(255,255,255,.05); color:var(--text); }

.config-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px;
}
.config-grid.loading{ color:var(--muted); padding:14px; }
.config-grid .empty{
  background:var(--card); border-radius:14px; padding:20px; text-align:center;
  color:var(--muted); grid-column:1/-1;
}
.config-grid .empty.bad{ color:var(--red); }

.config-card{
  background:var(--card); border-radius:14px; padding:14px;
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid rgba(255,255,255,.05); position:relative;
  border-left:4px solid var(--teal);
}
.config-card.orange{ border-left-color:var(--orange); }
.config-card.teal{ border-left-color:var(--teal); }
.config-card.pink{ border-left-color:var(--pink); }
.config-card.purple{ border-left-color:var(--purple); }
.config-card.blue{ border-left-color:var(--blue); }
.config-card.yellow{ border-left-color:var(--yellow); }
.config-card.red{ border-left-color:var(--red); }
.config-card.green{ border-left-color:var(--green); }
.config-card.coming-soon{ opacity:.55; }

.config-card-icon{
  width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; background:rgba(255,255,255,.05); border-radius:10px;
  font-weight:800; color:#fff;
}
.config-card-icon.avatar-orange{ background:linear-gradient(135deg,#f97316,#ef4444); }
.config-card-icon.avatar-pink{ background:linear-gradient(135deg,#ec4899,#a855f7); }
.config-card-icon.avatar-teal{ background:linear-gradient(135deg,#14b8a6,#0891b2); }
.config-card-icon.avatar-purple{ background:linear-gradient(135deg,#a855f7,#6366f1); }
.config-card-icon.avatar-blue{ background:linear-gradient(135deg,#3b82f6,#0ea5e9); }
.config-card-icon.avatar-yellow{ background:linear-gradient(135deg,#eab308,#f97316); }
.config-card-icon.avatar-red{ background:linear-gradient(135deg,#ef4444,#a855f7); }
.config-card-icon.avatar-green{ background:linear-gradient(135deg,#22c55e,#14b8a6); }

.config-card-body{ flex:1; min-width:0; }
.config-card-label{ font-weight:800; font-size:1rem; }
.config-card-slug{ font-size:.78rem; color:var(--muted); font-family:'JetBrains Mono', ui-monospace, monospace; margin-top:2px; }
.config-card-tag{
  display:inline-block; margin-top:6px; font-size:.65rem; padding:2px 8px;
  background:rgba(234,179,8,.15); color:var(--yellow); border-radius:999px;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.config-card-actions{
  display:flex; flex-direction:column; gap:4px; align-items:flex-end;
}
.config-card-actions .btn-mini{ width:88px; }
.btn-mini.warn{ color:var(--yellow); }
.btn-mini.bad{ color:var(--red); }
.btn-mini.good{ color:var(--green); }

.hint{ color:var(--muted); font-size:.8rem; margin-top:10px; padding:0 4px; }
.hint-list{
  list-style:decimal; padding-left:22px; color:var(--muted); font-size:.85rem; line-height:1.7;
}
.hint-list code{
  background:rgba(255,255,255,.05); padding:1px 5px; border-radius:4px;
  font-family:'JetBrains Mono', ui-monospace, monospace; color:var(--text); font-size:.85em;
}
.hint-list em{ color:var(--text); font-style:normal; }

/* ─── Dialog editor ─── */
dialog#editor{
  background:#1e293b; color:var(--text); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; max-width:480px; width:90%; padding:0;
}
dialog#editor::backdrop{ background:rgba(0,0,0,.7); backdrop-filter:blur(6px); }
dialog#editor form{ padding:24px 22px; }
dialog#editor h3{ margin-bottom:18px; font-size:1.1rem; }
.field{ display:block; margin-bottom:14px; }
.field[hidden]{ display:none !important; }
.field span{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:4px; font-weight:600; }
.field span em{ font-style:normal; opacity:.7; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,.05); color:var(--text);
  border:1px solid rgba(255,255,255,.08); border-radius:8px;
  padding:10px 12px; font-size:.9rem; font-family:inherit;
  resize:vertical; box-sizing:border-box;
}
.field textarea{ font-family:'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size:.82rem; line-height:1.5 }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); }
.field input[readonly]{ opacity:.6; cursor:not-allowed; }
.field span code{
  background:rgba(20,184,166,.12); color:#5eead4; padding:1px 5px;
  border-radius:4px; font-family:'JetBrains Mono', monospace; font-size:.72rem;
}
.field-check{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; cursor:pointer; }
.field-check input{ margin-top:3px; }
.field-check span{ font-size:.85rem; }
.field-check em{ display:block; color:var(--muted); font-style:normal; font-size:.75rem; margin-top:2px; }
.dialog-actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:20px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.06);
}

/* ─── Resumen compacto: chips de inventario ─── */
.inv-section-link{ font-size:.78rem; font-weight:600; color:var(--teal); text-decoration:none; margin-left:10px; }
.inv-section-link:hover{ text-decoration:underline; }
.inv-kid-compact{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:14px; padding:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.inv-mini-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.inv-mini-chip{
  font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  color:var(--text); white-space:nowrap;
}
.inv-mini-chip.muted{ color:var(--muted) }
.inv-mini-chip.good{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); color:#86efac }
.inv-mini-chip.mid{ background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.25); color:#fde047 }
.inv-mini-chip.bad{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.25); color:#fca5a5 }

/* ─── Contenido tree (Materia → Tema → Decks) ─── */
.cont-materia{
  margin-bottom:14px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden;
}
.cont-materia-head{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  padding:14px 16px; user-select:none;
}
.cont-materia-head::-webkit-details-marker{ display:none }
.cont-chevron{ font-size:1rem; color:var(--muted); transition:transform .2s; flex-shrink:0; }
.cont-materia[open] > .cont-materia-head .cont-chevron{ transform:rotate(90deg); color:var(--teal) }
.cont-materia-icon{ font-size:1.3rem; flex-shrink:0 }
.cont-materia-name{ font-weight:800; font-size:1.05rem; flex:1; min-width:0 }
.cont-materia-counts{ font-size:.75rem; color:var(--muted); font-weight:600; background:rgba(255,255,255,.05); padding:4px 10px; border-radius:6px; flex-shrink:0 }
.cont-materia-body{ padding:0 16px 16px; }
details.cont-tema{ margin-top:12px; padding:0; border-radius:10px; border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.04); }
details.cont-tema > summary{ cursor:pointer; list-style:none; }
details.cont-tema > summary::-webkit-details-marker{ display:none; }
details.cont-tema > summary.cont-tema-head{ padding:12px; }
details.cont-tema > .cont-decks,
details.cont-tema > .cont-decks-empty{ margin:0 12px 12px 12px; }
.cont-tema-head{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.cont-tema-info{ flex:1; min-width:200px }
.cont-tema-title{ font-weight:700; font-size:.95rem; margin-bottom:3px }
.cont-tema-meta{ font-size:.75rem; color:var(--muted); line-height:1.4 }
.cont-tema-actions{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.cont-decks{
  display:flex; flex-direction:column; gap:6px;
  margin-top:10px; padding:10px; padding-left:14px;
  border-left:2px solid rgba(20,184,166,.25);
}
.cont-decks-empty{ margin-top:10px; padding:8px 10px; font-size:.78rem; color:var(--muted); font-style:italic; }
.cont-deck-row{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center;
  padding:8px 10px; background:rgba(255,255,255,.03); border-radius:8px;
  font-size:.85rem;
}
.cont-deck-row.inactivo{ opacity:.5 }
.cont-deck-kind{ font-weight:700; color:var(--teal); font-size:.78rem; white-space:nowrap }
.cont-deck-title{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cont-deck-meta{ font-size:.72rem; color:var(--muted); white-space:nowrap }
.cont-deck-actions{ display:flex; gap:4px; flex-wrap:wrap }
.cont-deck-chip{
  background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.3); color:#c4b5fd;
  font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:6px;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background .12s, transform .12s;
}
.cont-deck-chip:hover{ background:rgba(168,85,247,.22); transform:scale(1.04) }
.cont-deck-chip:active{ transform:scale(.96) }

/* ─── Student picker popup ─── */
.student-picker{
  position:absolute; z-index:900;
  background:var(--card, #1e1e2e); border:1px solid rgba(168,85,247,.4);
  border-radius:8px; padding:4px; min-width:130px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:2px;
}
.student-picker button{
  background:none; border:none; color:var(--fg, #cdd6f4);
  font-size:.78rem; font-weight:600; padding:7px 12px;
  border-radius:5px; cursor:pointer; text-align:left;
  font-family:inherit; white-space:nowrap;
}
.student-picker button:hover{ background:rgba(168,85,247,.18) }
.student-picker button.active{ background:rgba(168,85,247,.28); color:#c4b5fd }

/* ─── Editor banner (modal de deck): aviso de dónde editar el contenido ─── */
.editor-banner{
  display:flex; gap:14px; align-items:flex-start;
  margin:0 0 22px; padding:16px 18px;
  background:linear-gradient(135deg, rgba(20,184,166,.14), rgba(59,130,246,.10));
  border:1px solid rgba(20,184,166,.35);
  border-radius:12px;
}
.editor-banner-icon{ font-size:1.8rem; line-height:1; flex-shrink:0; }
.editor-banner-body{ flex:1; min-width:0; }
.editor-banner-title{
  font-size:.95rem; font-weight:800; color:#5eead4; margin-bottom:6px;
}
.editor-banner-text{
  font-size:.85rem; color:#cbd5e1; line-height:1.55;
}
.editor-banner-text code{
  background:rgba(20,184,166,.18); color:#7dd3fc; padding:1px 6px;
  border-radius:4px; font-family:'JetBrains Mono', monospace; font-size:.78rem;
}
.editor-banner-text strong{ color:var(--text); }
.cont-orphans{ margin-top:14px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.08) }
.cont-orphans-title{ font-size:.75rem; color:var(--muted); font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em }
/* ─── Groups section (prominent, above topics) ─── */
.cont-groups-section{ margin-bottom:16px }
.cont-groups-section-title{
  font-size:.75rem; color:var(--teal); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:10px; padding-bottom:6px;
  border-bottom:1px solid rgba(20,184,166,.2);
}
.cont-group-card{
  margin-bottom:8px; padding:0;
  background:rgba(20,184,166,.06);
  border:1px solid rgba(20,184,166,.18);
  border-radius:10px; overflow:hidden;
}
.cont-group-card > summary{ cursor:pointer; list-style:none }
.cont-group-card > summary::-webkit-details-marker{ display:none }
.cont-group-card-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; flex-wrap:wrap; user-select:none;
}
.cont-group-card-title{ font-weight:700; font-size:.92rem; flex:1; min-width:150px }
.cont-group-card-count{
  font-size:.72rem; color:var(--muted); font-weight:600;
  background:rgba(255,255,255,.06); padding:3px 8px; border-radius:5px;
}
.cont-group-mode{
  font-family:inherit; font-size:.8rem; padding:5px 8px; border-radius:6px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  color:var(--fg,#e2e8f0); cursor:pointer;
}
.cont-group-mode:focus{ border-color:var(--teal); outline:none }
.cont-group-previews{ display:flex; gap:4px; flex-wrap:wrap }
.btn-mini.preview{
  text-decoration:none; color:var(--teal);
  border-color:rgba(20,184,166,.3); font-size:.72rem;
}
.btn-mini.preview:hover{ background:rgba(20,184,166,.15) }
.cont-group-card-body{ padding:4px 14px 12px }
.cont-group-deck{
  font-size:.78rem; padding:4px 0;
  color:var(--muted); display:flex; gap:8px; align-items:center;
}
.cont-group-deck span{ color:var(--text); font-weight:500 }
.cont-group-deck small{ color:var(--muted); font-size:.7rem }
.cont-group-card[open] > .cont-group-card-head{ border-bottom:1px solid rgba(20,184,166,.12) }
.cont-group-chevron{ font-size:.85rem; color:var(--muted); transition:transform .2s; flex-shrink:0 }
.cont-group-card[open] > .cont-group-card-head .cont-group-chevron{ transform:rotate(90deg); color:var(--teal) }
.empty-mini{ padding:14px; color:var(--muted); font-size:.85rem; font-style:italic; text-align:center }

/* ═══════════════════════════════════════════════════════════════════════════
   POLISH + RESPONSIVE (laptop look & feel + mobile layout)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Container ancho mayor en laptop/desktop ─── */
/* En laptop+ usamos TODO el ancho de pantalla con padding lateral fluido,
   en lugar de centrar en una columna estrecha. Solo el modal se mantiene
   acotado para que el form no se vuelva ilegible. */
@media (min-width: 900px) {
  .site-header,
  .tabs,
  .filter-bar,
  main,
  .config-section {
    max-width: none !important;
    padding-left: clamp(20px, 4vw, 56px) !important;
    padding-right: clamp(20px, 4vw, 56px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site-header { padding-top: 36px; padding-bottom: 18px; }
  .site-title { font-size: 2.2rem; letter-spacing:-.02em; }
  .site-sub { font-size: 1rem; }

  main { gap: 32px; }

  .tabs { gap: 8px; padding-top: 10px; }
  .tab { padding: 12px 20px; font-size:.95rem; }

  /* KPIs llenan el ancho disponible — más cards por fila en pantallas anchas */
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
  .kpi-card { padding: 18px 20px; }
  .config-card { padding: 16px 18px; }

  /* Config grid de materias/alumnos: más columnas en ancho */
  .config-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
}

/* Pantallas extra anchas (≥1600px): topes generosos para no parecer estirado */
@media (min-width: 1600px) {
  .site-header,
  .tabs,
  .filter-bar,
  main,
  .config-section {
    padding-left: clamp(40px, 5vw, 80px) !important;
    padding-right: clamp(40px, 5vw, 80px) !important;
  }
}

/* ─── Tabs sticky para no perder navegación al hacer scroll en Contenido largo ─── */
.tabs {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #0f172a 0%, rgba(15,23,42,.95) 100%);
  backdrop-filter: blur(8px);
  padding-top: 10px;
}

/* ─── Contenido tree refinado en laptop ─── */
@media (min-width: 900px) {
  .cont-materia { margin-bottom: 18px; }
  .cont-materia-head { padding: 16px 22px; }
  .cont-materia-name { font-size: 1.15rem; }
  .cont-materia-body { padding: 0 22px 20px; }
  .cont-tema { padding: 14px 18px; margin-top: 14px; }
  .cont-tema-title { font-size: 1rem; }
  .cont-deck-row { padding: 10px 14px; font-size: .9rem; }
  .cont-deck-kind { min-width: 90px; }
}

/* ─── Tabs móvil: scroll horizontal limpio si no entran ─── */
@media (max-width: 640px) {
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 12px 6px; gap: 4px;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0; padding: 10px 14px; font-size: .85rem;
    min-height: 42px; display: inline-flex; align-items: center;
  }
  .tab.ghost { margin-left: 0; }

  .site-header { padding: 18px 14px 8px; }
  .site-title { font-size: 1.4rem; }
  .site-sub { font-size: .82rem; }
  .back-link { font-size: .8rem; padding: 5px 10px; }

  main { padding: 0 12px; gap: 18px; }

  /* Filter chips: touch-friendly */
  .filter-bar { padding: 0 12px 12px; gap: 6px; }
  .chip { padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; }

  /* KPI grid: 2 cols mobile */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 1.4rem; }

  /* Buttons mínimo 40px height (touch target) */
  .btn-primary { padding: 11px 18px; min-height: 42px; }
  .btn-mini { min-height: 36px; padding: 8px 12px; font-size: .78rem; }

  /* Section heads: stack vertical */
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-head h2 { font-size: 1rem; }
}

/* ─── Contenido tree: layout mobile ─── */
@media (max-width: 640px) {
  .cont-materia-head {
    padding: 12px 14px; gap: 8px;
    flex-wrap: wrap;
  }
  .cont-materia-name { font-size: 1rem; min-width: 0; }
  .cont-materia-counts { font-size: .7rem; padding: 3px 8px; order: 3; }
  .cont-materia-body { padding: 0 12px 14px; }
  .cont-tema { padding: 12px; margin-top: 10px; }
  .cont-tema-head { flex-direction: column; gap: 8px; }
  .cont-tema-info { width: 100%; }
  .cont-tema-actions { width: 100%; gap: 6px; }
  .cont-tema-actions .btn-mini { flex: 1; min-width: 0; text-align: center; }

  /* Deck rows: stack en lugar de grid */
  .cont-decks { padding: 8px; padding-left: 10px; gap: 8px; }
  .cont-deck-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kind"
      "title"
      "meta"
      "actions";
    gap: 6px; padding: 10px 12px;
  }
  .cont-deck-kind { grid-area: kind; font-size: .72rem; }
  .cont-deck-title { grid-area: title; white-space: normal; font-size: .92rem; }
  .cont-deck-meta { grid-area: meta; font-size: .72rem; }
  .cont-deck-actions {
    grid-area: actions; gap: 4px;
    display: grid; grid-template-columns: 1fr 1fr;
  }
  .cont-deck-actions .btn-mini { padding: 8px 6px; font-size: .72rem; text-align: center; }
}

/* ─── Modal/dialog: responsive ─── */
dialog#editor {
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
dialog#editor form { padding: 28px 26px; }
dialog#editor h3 { font-size: 1.2rem; margin-bottom: 22px; }

/* ─── Modal laptop/desktop: más ancho que default, single column, textarea grande ─── */
/* (Probamos grid 2 columnas y dejaba la derecha vacía. Volvemos a single column
   pero el modal usa más ancho del laptop y el textarea queda generoso vertical.) */
@media (min-width: 900px) {
  dialog#editor {
    max-width: 800px;
    width: min(800px, 92vw);
    max-height: 90vh;
  }
  dialog#editor form {
    padding: 36px 40px 28px;
  }
  dialog#editor h3 { font-size: 1.4rem; margin-bottom: 24px; }
  .field { margin-bottom: 16px; }
  .field input, .field select, .field textarea {
    padding: 11px 14px; font-size: .95rem;
  }
  /* Textareas (pares, preguntas, ítems) más altos en desktop */
  .field textarea { min-height: 320px; font-size: .88rem; line-height: 1.6; }
  #pairsBlock textarea,
  #questionsBlock textarea { min-height: 360px; }
  .dialog-actions button { padding: 12px 24px; font-size: .95rem; }
}

/* Pantallas más anchas: modal sube un poco */
@media (min-width: 1400px) {
  dialog#editor {
    max-width: 920px;
    width: 920px;
  }
  .field textarea { min-height: 400px; }
  #pairsBlock textarea,
  #questionsBlock textarea { min-height: 440px; }
}

@media (max-width: 640px) {
  dialog#editor {
    width: 96vw; max-width: 96vw;
    max-height: calc(100vh - 20px);
    border-radius: 14px;
  }
  dialog#editor form { padding: 20px 18px; }
  dialog#editor h3 { font-size: 1.05rem; margin-bottom: 16px; }
  .field { margin-bottom: 12px; }
  .field input, .field select, .field textarea {
    padding: 11px 12px; font-size: .95rem; /* evita zoom iOS */
  }
  .field textarea { font-size: .85rem; min-height: 120px; }
  .dialog-actions { flex-direction: column-reverse; gap: 8px; }
  .dialog-actions button { width: 100%; min-height: 44px; }
}

/* ─── Resumen compacto: chips mejor en mobile ─── */
@media (max-width: 640px) {
  .inv-kid-compact { padding: 12px; gap: 8px; }
  .inv-mini-chips { gap: 6px; }
  .inv-mini-chip { font-size: .72rem; padding: 5px 10px; }
}

/* ─── Toques de polish desktop sutiles ─── */
@media (min-width: 900px) {
  .cont-materia:hover { background: rgba(255,255,255,.045); }
  .cont-tema:hover { background: rgba(255,255,255,.055); }
  details.cont-materia { transition: background .2s; }
}

/* ─── Scroll suave dentro de contenido ─── */
#contenidoTree { padding-bottom: 60px; }
#contenidoMain { padding-top: 4px; }

/* ─── Botones del dialog: estilo más alto en desktop ─── */
.dialog-actions .btn-ghost {
  background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,.1);
  padding: 10px 18px; border-radius: 10px; font-size: .9rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.dialog-actions .btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--text); }

/* ── Generar material con IA (EST.ADMIN.GEN-IA-MATERIAL) ── */
.genia-btn { background: linear-gradient(90deg, var(--teal), #6366f1); }
.genia h3 { margin: 0 0 8px; font-size: 1.1rem; }
.genia-intro { font-size: .85rem; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.genia-banner {
  background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.35);
  color: var(--text); border-radius: 10px; padding: 10px 12px;
  font-size: .85rem; margin-bottom: 14px;
}
.genia-banner-note { margin-top: 4px; color: var(--muted); font-size: .8rem; }

/* ── Contenido: secciones por niño + chips de archivos (EST.ADMIN.CONTENIDO-POR-NINO) ── */
.cont-child { margin: 0 0 18px; }
.cont-child:last-child { margin-bottom: 0; }
.cont-child-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: 10px 0 8px;
  border-left: 3px solid var(--teal);
  background: rgba(20,184,166,.08);
  border-radius: 0 8px 8px 0;
}
.cont-child-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; }
.cont-child-name { font-weight: 800; font-size: .95rem; color: var(--text); letter-spacing: .01em; }
.cont-child-count { font-size: .75rem; color: var(--muted); }
.cont-tema-files { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 0; }
.cont-file-chip {
  background: rgba(255,255,255,.06); color: var(--muted);
  text-decoration: none; font-size: 11px; padding: 2px 8px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
}
.cont-file-chip:hover { color: var(--text); border-color: var(--teal); }

/* Acciones por juego dentro del grupo (ver/editar directo) */
.cont-group-deck { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.cont-group-deck-label { flex: 1; min-width: 120px; font-size: .85rem; color: var(--text); }
.cont-group-deck-actions { display: flex; gap: 4px; flex: none; }