:root{
  --bg:#F5F5F7; --surface:#FFFFFF; --surface-2:#FAFAFA; --surface-3:#F0F0F2;
  --border:rgba(0,0,0,0.07); --border-strong:rgba(0,0,0,0.13);
  --text:#1D1D1F; --text-dim:#6E6E73; --text-faint:#98989D;
  --accent:#8000B0; --accent-ink:#FFFFFF;
  --accent-soft:rgba(128,0,176,0.07); --accent-soft-strong:rgba(128,0,176,0.13);
  --ciclo1:#2C6C94; --ciclo2:#1F8A8A; --ciclo3:#C22A20; --ciclo4:#9A36D9;
  --saved:#1E8E3E; --warn:#B2560A;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.045);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.16);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --nav-w: 280px; --nav-w-collapsed: 68px;
  color-scheme: light;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.5; letter-spacing:-0.012em; min-height:100vh;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:#fff; }
a{ color:var(--accent); }
h1,h2,h3,h4{ font-family:var(--font); font-weight:700; letter-spacing:-0.02em; text-wrap:balance; margin:0; }
button{ font-family:var(--font); cursor:pointer; -webkit-tap-highlight-color:transparent; }
textarea, input{ font-family:var(--font); color:var(--text); letter-spacing:-0.012em; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.16); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,0.26); background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }

.app{ display:grid; grid-template-columns: var(--nav-w) 1fr; min-height:100vh; transition:grid-template-columns .22s var(--ease); }
.app.nav-collapsed{ grid-template-columns: var(--nav-w-collapsed) 1fr; }
.nav{ order:1; } .main{ order:2; }
@media (max-width: 880px){
  .app{ grid-template-columns: 1fr; }
  .nav{ order:2; max-height:none; border-right:none; border-top:1px solid var(--border); position:static; }
  .main{ order:1; }
}

.topbar{
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 22px; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.78); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  position:sticky; top:0; z-index:30;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand .mark{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(160deg, #9A1FD1, var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 1px 2px rgba(128,0,176,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
.brand h1{ font-size:14.5px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; }
.brand .sub{ color:var(--text-faint); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; }
.topbar-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.icon-btn{
  width:30px; height:30px; border-radius:8px; border:none; background:transparent; display:flex;
  align-items:center; justify-content:center; color:var(--text-dim); transition:background .12s var(--ease);
  font-size:13px;
}
.icon-btn:hover{ background:var(--surface-3); }
.back-link{
  font-size:12.5px; font-weight:500; color:var(--text-dim); text-decoration:none;
  background:var(--surface-3); border-radius:999px; padding:6px 13px;
  display:flex; align-items:center; gap:6px; transition:background .15s var(--ease), color .15s var(--ease);
}
.back-link:hover{ background:var(--accent-soft); color:var(--accent); }
.status-pill{ font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px; display:flex; align-items:center; gap:5px; }
.status-pill.online{ background:rgba(30,142,62,0.1); color:var(--saved); }
.status-pill.offline{ background:rgba(178,86,10,0.1); color:var(--warn); }
.status-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.nav{
  border-right:1px solid var(--border); background:var(--surface-2); display:flex; flex-direction:column;
  max-height:calc(100vh - 53px); position:sticky; top:53px; overflow:hidden;
}
.nav-scroll{ overflow-y:auto; overflow-x:hidden; flex:1; padding:12px 10px 10px; }
.nav-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:14px 10px 6px; white-space:nowrap; }
.app.nav-collapsed .nav-eyebrow{ opacity:0; height:0; padding:0; overflow:hidden; }
.nav-home-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  padding:8px 10px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:2px;
  transition:background .12s var(--ease); white-space:nowrap; overflow:hidden;
}
.nav-home-btn:hover{ background:rgba(0,0,0,0.04); }
.nav-home-btn .ico{ width:24px; height:24px; border-radius:7px; background:var(--surface-3); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; }
.app.nav-collapsed .nav-home-btn .label{ display:none; }
.nav-escuela{ margin-bottom:1px; }
.nav-escuela-head{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  padding:7px 10px; border-radius:var(--r-sm); font-size:13px; font-weight:500; color:var(--text);
  transition:background .12s var(--ease); white-space:nowrap; overflow:hidden;
}
.nav-escuela-head:hover{ background:rgba(0,0,0,0.04); }
.nav-escuela-head.active{ background:var(--accent-soft-strong); color:var(--accent); font-weight:600; }
.nav-escuela-head .badge-n{
  width:22px; height:22px; border-radius:7px; background:var(--surface-3); color:var(--text-dim); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700;
}
.nav-escuela-head.active .badge-n{ background:var(--accent); color:#fff; }
.nav-escuela-head .label{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.nav-escuela-head .chev{ font-size:9px; color:var(--text-faint); transition:transform .2s var(--ease); flex-shrink:0; }
.nav-escuela-head.active .chev{ color:var(--accent); }
.nav-escuela-head.open .chev{ transform:rotate(90deg); }
.app.nav-collapsed .nav-escuela-head .label,
.app.nav-collapsed .nav-escuela-head .chev{ display:none; }
.app.nav-collapsed .nav-escuela-head{ justify-content:center; padding:7px; }
.nav-materias{ padding-left:6px; }
.app.nav-collapsed .nav-materias{ display:none; }
.nav-materia-btn{
  display:block; width:calc(100% - 20px); margin-left:20px; text-align:left; background:none; border:none;
  padding:6px 10px; border-radius:8px; font-size:12.8px; color:var(--text-dim);
  margin-top:1px; margin-bottom:1px; transition:background .12s var(--ease), color .12s var(--ease);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-materia-btn:hover{ background:rgba(0,0,0,0.04); color:var(--text); }
.nav-materia-btn.active{ background:var(--accent-soft-strong); color:var(--accent); font-weight:600; }

.nav-collapse-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px;
  background:none; border:none; border-top:1px solid var(--border); color:var(--text-faint); font-size:12px;
  font-weight:500; transition:background .12s var(--ease), color .12s var(--ease);
}
.nav-collapse-btn:hover{ background:var(--surface-3); color:var(--text-dim); }
.nav-collapse-btn .chev{ transition:transform .2s var(--ease); }
.app.nav-collapsed .nav-collapse-btn .chev{ transform:rotate(180deg); }
.app.nav-collapsed .nav-collapse-btn .label{ display:none; }

.nav-log{ border-top:1px solid var(--border); }
.app.nav-collapsed .nav-log{ display:none; }
.nav-log summary{ list-style:none; cursor:pointer; padding:11px 16px; font-size:12px; font-weight:600; color:var(--text-dim); display:flex; align-items:center; gap:6px; }
.nav-log summary::-webkit-details-marker{ display:none; }
.nav-log[open] summary{ border-bottom:1px solid var(--border); }
.log-list{ max-height:180px; overflow-y:auto; padding:8px 16px 12px; }
.log-item{ font-size:11.5px; color:var(--text-dim); padding:6px 0; border-bottom:1px solid var(--border); }
.log-item:last-child{ border-bottom:none; }
.log-item b{ color:var(--text); font-weight:600; }
.log-empty{ font-size:11.5px; color:var(--text-faint); padding:4px 0; }

.main{ padding:36px 40px 90px; max-width:860px; }
@media (max-width:600px){ .main{ padding:22px 18px 60px; } }

.crumb{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-faint); margin-bottom:22px; flex-wrap:wrap; }
.crumb a{ color:var(--text-faint); text-decoration:none; transition:color .12s; }
.crumb a:hover{ color:var(--accent); }
.crumb .sep{ color:var(--border-strong); }
.crumb b{ color:var(--text-dim); font-weight:600; }

.hero-block{ margin-bottom:36px; }
.hero-block .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--accent); margin-bottom:10px; text-transform:uppercase; }
.hero-block h2{ font-size:30px; font-weight:700; letter-spacing:-0.025em; margin-bottom:10px; }
.hero-block p{ color:var(--text-dim); max-width:60ch; font-size:14.5px; line-height:1.55; }

.ciclos-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0 32px; }
@media (max-width:700px){ .ciclos-row{ grid-template-columns:repeat(2,1fr); } }
.ciclo-card{ border-radius:var(--r-lg); padding:16px 15px; background:var(--surface); box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease), transform .2s var(--ease); }
.ciclo-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.ciclo-card .icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--c); color:#fff; margin-bottom:10px; }
.ciclo-card .nombre{ font-weight:600; font-size:13.5px; letter-spacing:-0.01em; }
.ciclo-card .rango{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }

.transform-note{ border-radius:var(--r-md); padding:14px 18px; background:var(--surface); font-size:13px; color:var(--text-dim); margin-bottom:28px; box-shadow:var(--shadow-xs); border-left:3px solid var(--accent); }
.transform-note b{ color:var(--text); font-weight:600; }
.escuelas-flat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:700px){ .escuelas-flat-grid{ grid-template-columns:1fr; } }
.escuela-flat-card{ border-radius:var(--r-md); padding:14px 16px; background:var(--surface); box-shadow:var(--shadow-xs); cursor:pointer; text-align:left; width:100%; font-family:inherit; transition:box-shadow .18s var(--ease), transform .18s var(--ease); }
.escuela-flat-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.escuela-flat-card .num{ font-size:10.5px; font-weight:600; color:var(--text-faint); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.escuela-flat-card .nombre{ font-size:13.5px; font-weight:600; margin:3px 0 1px; color:var(--text); }
.escuela-flat-card .rol{ font-size:11.8px; color:var(--text-faint); }

.overview-hero{ border-radius:var(--r-xl); padding:30px 28px; background:var(--surface); box-shadow:var(--shadow-sm); margin-bottom:28px; }
.overview-hero .kicker{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.overview-hero h2{ font-size:27px; margin-bottom:4px; letter-spacing:-0.025em; }
.overview-hero .rol{ color:var(--text-dim); font-size:14px; margin-bottom:8px; }
.overview-hero .verse-tag{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:500; color:var(--accent); background:var(--accent-soft); padding:6px 13px; border-radius:999px; margin-top:14px; }

.materias-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:8px; }
@media (max-width:640px){ .materias-grid{ grid-template-columns:1fr; } }
.materia-pick-card{ background:var(--surface); border-radius:var(--r-md); padding:15px 17px; cursor:pointer; transition:box-shadow .18s var(--ease), transform .18s var(--ease); text-align:left; width:100%; font-family:inherit; box-shadow:var(--shadow-xs); }
.materia-pick-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.materia-pick-card .nombre{ font-weight:600; font-size:14px; margin-bottom:3px; color:var(--text); }
.materia-pick-card .tag{ font-size:12px; color:var(--text-faint); }

.cards-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0 8px; }
@media (max-width:760px){ .cards-row{ grid-template-columns:1fr; } }
.overview-card{ background:var(--surface); border-radius:var(--r-md); padding:16px 17px; box-shadow:var(--shadow-xs); }
.overview-card .ov-label{ font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--oc); margin-bottom:8px; }
.overview-card textarea.edit-field{ font-size:13px; padding:0; }

.hint-box{ margin-top:24px; padding:14px 18px; border-radius:var(--r-md); background:var(--surface); font-size:13px; color:var(--text-dim); box-shadow:var(--shadow-xs); border-left:3px solid var(--border-strong); }

.materia-head{ margin-bottom:20px; }
.materia-head .escuela-eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; color:var(--text-faint); }
.materia-head h2{ font-size:25px; margin-bottom:6px; letter-spacing:-0.025em; }
.materia-head .tagline{ color:var(--text-dim); font-size:13.8px; max-width:60ch; line-height:1.5; }

.grado-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:22px 0 24px; }
.grado-chip{
  border:none; background:var(--surface); border-radius:999px; padding:6.5px 13px 6.5px 10px; font-size:12.5px;
  font-weight:500; color:var(--text-dim); display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow-xs);
  transition:background .15s var(--ease), color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
}
.grado-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cc); flex-shrink:0; }
.grado-chip:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.grado-chip.active{ background:var(--text); color:#fff; box-shadow:var(--shadow-sm); }
.grado-chip.active::before{ background:#fff; }

.detail-badges{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.badge{ font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px; }
.badge.ciclo{ color:#fff; }
.badge.bloom{ background:var(--surface-3); color:var(--text-dim); }
.badge.solo{ background:var(--surface-2); color:var(--text-faint); box-shadow:inset 0 0 0 1px var(--border); }

/* Acordeón genérico */
.accordion{ border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-xs); margin-bottom:12px; overflow:hidden; transition:box-shadow .2s var(--ease); }
.accordion.open{ box-shadow:var(--shadow-sm); }
.accordion-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 17px; cursor:pointer; user-select:none; }
.accordion-head .title-wrap{ display:flex; align-items:center; gap:10px; min-width:0; }
.accordion-head h3{ font-size:14px; font-weight:600; }
.accordion-head .sub{ font-size:11.5px; color:var(--text-faint); font-weight:400; }
.accordion-head .chev{ font-size:10px; color:var(--text-faint); transition:transform .25s var(--ease); flex-shrink:0; }
.accordion.open .chev{ transform:rotate(90deg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .32s var(--ease); }
.accordion-body > .inner{ padding:0 17px 16px; border-top:1px solid var(--border); margin-top:0; padding-top:14px; }

.field{ margin-bottom:12px; }
.field:last-child{ margin-bottom:0; }
.field-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px; flex-wrap:wrap; }
.field-label{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); }
.field-caption{ font-size:11.5px; color:var(--text-faint); margin-bottom:4px; }
.field-meta{ font-size:11px; color:var(--text-faint); }
.field-meta.saved{ color:var(--saved); }
textarea.edit-field{
  width:100%; resize:none; overflow:hidden; border:none; border-radius:8px; background:var(--surface-2);
  padding:7px 9px; font-size:14px; line-height:1.55; color:var(--text); transition:background .15s var(--ease);
}
textarea.edit-field:focus{ outline:none; background:var(--surface-3); }
textarea.edit-field::placeholder{ color:var(--text-faint); }

.periodos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .periodos-grid{ grid-template-columns:1fr; } }
.period-field{ margin-bottom:10px; }
.period-field .pf-label{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); display:block; margin-bottom:3px; }
.period-field textarea.edit-field{ padding:6px 8px; font-size:13px; }
.period-caption{ font-size:11px; color:var(--text-faint); margin:-4px 0 10px; }

.clases-wrap{ max-height:0; overflow:hidden; transition:max-height .32s var(--ease); }
.clases-wrap > .inner{ border-top:1px solid var(--border); margin-top:10px; padding-top:10px; }
.clase-card{ border-radius:10px; margin-bottom:5px; background:var(--surface-2); overflow:hidden; transition:background .15s var(--ease); }
.clase-card.open{ background:var(--surface); box-shadow:var(--shadow-xs); }
.clase-head{ display:flex; align-items:center; gap:9px; padding:8px 10px; cursor:pointer; user-select:none; }
.clase-head .num-badge{
  font-size:10.5px; font-weight:600; width:19px; height:19px; border-radius:50%; flex-shrink:0;
  background:var(--surface-3); color:var(--text-dim); display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; transition:background .15s var(--ease), color .15s var(--ease);
}
.clase-card.open .num-badge{ background:var(--accent); color:#fff; }
.clase-head input.tema-input{ flex:1; border:none; background:transparent; font-size:12.8px; font-weight:500; color:var(--text); padding:2px 0; }
.clase-head input.tema-input::placeholder{ color:var(--text-faint); font-weight:400; }
.clase-head input.tema-input:focus{ outline:none; }
.clase-head .chev{ font-size:9px; color:var(--text-faint); transition:transform .22s var(--ease); flex-shrink:0; }
.clase-card.open .chev{ transform:rotate(90deg); }
.clase-body{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.clase-body > .inner{ padding:2px 10px 11px 38px; border-top:1px solid var(--border); margin-top:1px; padding-top:9px; }
.clase-field{ margin-bottom:7px; }
.clase-field .cf-label{ font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); display:block; margin-bottom:1px; }
.clase-field textarea{ width:100%; border:none; border-radius:6px; background:transparent; padding:1px 0; font-size:12.4px; color:var(--text); resize:none; overflow:hidden; font-family:var(--font); }
.clase-field textarea:focus{ outline:none; }
.clase-field textarea::placeholder{ color:var(--text-faint); }

.toast{
  position:fixed; bottom:22px; right:22px; z-index:50; background:rgba(29,29,31,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font-size:12.8px; font-weight:500;
  padding:10px 18px; border-radius:999px; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(8px) scale(.98);
  transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0) scale(1); }

.skel{ height:16px; background:var(--surface-3); border-radius:6px; margin-bottom:8px; animation:pulse 1.3s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }