:root{
  --bg:#12141c;
  --bg-card:#1b1f2b;
  --bg-elev:#232838;
  --text:#e9e7df;
  --muted:#a8a99f;
  --accent:#d4a437;
  --border:#323947;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
:root[data-tema="claro"]{
  --bg:#f4f0e5;
  --bg-card:#fffdf6;
  --bg-elev:#faf6ea;
  --text:#2b2b30;
  --muted:#61616a;
  --accent:#a4711f;
  --border:#e0dac8;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  transition:background .25s,color .25s;
}
.wrap{width:95%;max-width:95vw;margin:0 auto;padding:0 14px}
header{
  border-bottom:3px solid var(--accent);
  padding:34px 0 22px;
  margin-bottom:26px;
}
.cabecera-fila{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.cabecera-texto{min-width:0}
.controles{
  display:flex;
  gap:10px;
  padding-bottom:4px;
}
h1{
  font-family:var(--serif);
  font-size:2rem;
  margin:.15rem 0 .3rem;
  line-height:1.2;
}
.meta{color:var(--muted);font-size:.9rem}
.btn{
  display:inline-block;
  background:var(--accent);
  color:#14110a;
  font-weight:600;
  text-decoration:none;
  padding:8px 16px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-size:.9rem;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.12)}
.btn-plano{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:40px;
}
@media(max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.asignatura{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:4px solid var(--accent);
  border-radius:12px;
  padding:18px 20px;
}
/* Colores por asignatura (coinciden con las páginas de clase) */
.asignatura.diseno{--accent:#6d9dc5}
.asignatura.ia{--accent:#d4a437}
.asignatura.modelacion{--accent:#5cb87e}
.asignatura.programacion{--accent:#e08a3c}
.asignatura.vision{--accent:#d96fa5}
:root[data-tema="claro"] .asignatura.diseno{--accent:#3f7a9e}
:root[data-tema="claro"] .asignatura.ia{--accent:#a4711f}
:root[data-tema="claro"] .asignatura.modelacion{--accent:#2f8a5b}
:root[data-tema="claro"] .asignatura.programacion{--accent:#b8661e}
:root[data-tema="claro"] .asignatura.vision{--accent:#b74d82}
.asignatura h2{
  font-family:var(--serif);
  font-size:1.3rem;
  margin:0 0 4px;
}
.asignatura .progreso{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
  background:var(--bg-elev);
  border:1px solid var(--border);
  color:var(--accent);
  border-radius:20px;
  padding:3px 12px;
  margin-bottom:12px;
}
.asignatura ul{
  list-style:none;
  margin:0;
  padding:0;
  max-height:10rem;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.asignatura ul::-webkit-scrollbar{width:6px}
.asignatura ul::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.asignatura a.clase{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  color:var(--text);
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 12px;
  margin-bottom:8px;
  transition:border-color .15s,color .15s;
}
.asignatura a.clase:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.asignatura .flecha{
  display:flex;
  align-items:center;
  color:var(--muted);
  transition:color .15s,transform .15s;
}
.asignatura a.clase:hover .flecha{
  color:var(--accent);
  transform:translateX(3px);
}
.sin-clases{color:var(--muted);font-style:italic;font-size:.9rem}
footer{
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  padding:24px 0 44px;
}
@media(max-width:600px){h1{font-size:1.5rem}}

/* ================= CALENDARIO ================= */
.oculto{display:none !important}
#vistaCalendario{
  margin-bottom:40px;
}
.cal-cabecera{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.cal-mes{
  font-family:var(--serif);
  font-size:1.5rem;
  margin:0;
  min-width:200px;
}
.cal-cabecera .btn{
  padding:6px 12px;
  font-size:.85rem;
}
.btn-nav{
  width:38px;
  height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:50%;
  cursor:pointer;
  transition:background .15s,color .15s,transform .15s;
}
.btn-nav:hover{background:var(--accent);color:#14110a}
.btn-nav:active{transform:scale(.92)}
#calSemanas.entra-der{animation:entraDer .3s ease}
#calSemanas.entra-izq{animation:entraIzq .3s ease}
@keyframes entraDer{from{opacity:.2;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes entraIzq{from{opacity:.2;transform:translateX(-48px)}to{opacity:1;transform:none}}
.cal-cuerpo{
  position:relative;
  padding-top:6px;
}
/* Bloque de cada semana */
.cal-semana{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:14px;
  overflow:hidden;
}
.cal-semana.cal-actual{border-left:4px solid var(--accent)}
.cal-semana-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  cursor:pointer;
  user-select:none;
}
.cal-semana-head h3{
  margin:0;
  font-family:var(--serif);
  font-size:1.05rem;
}
.cal-semana-head .cal-conteo{
  font-size:.78rem;
  font-weight:700;
  color:var(--accent);
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:20px;
  padding:2px 10px;
}
.cal-semana-head .cal-chevron{
  margin-left:auto;
  width:28px;
  height:28px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:50%;
  transition:color .15s,border-color .15s,transform .2s,background .15s;
}
.cal-semana-head:hover .cal-chevron{
  color:var(--accent);
  border-color:var(--accent);
}
.cal-semana.colapsado .cal-chevron{transform:rotate(-90deg)}
.cal-cuerpo-semana{
  border-top:1px solid var(--border);
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .3s ease;
}
.cal-cuerpo-semana .cal-grilla-wrap{overflow-x:auto;overflow-y:hidden;min-height:0}
.cal-cuerpo-semana.plegado{grid-template-rows:0fr}
.cal-grilla{
  display:grid;
  grid-template-columns:96px repeat(5, 1fr) 68px 68px;
  min-width:920px;
}
.cal-dia-titulo{
  background:var(--bg-elev);
  padding:8px 10px;
  font-size:.8rem;
  font-weight:600;
  text-align:center;
  border-left:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.cal-dia-titulo .num{display:block;font-size:1.1rem;color:var(--accent);font-weight:700}
.cal-dia-titulo.hoy{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-dia-titulo.fuera .num{opacity:.35}
.cal-hora{
  padding:8px 8px;
  font-size:.74rem;
  color:var(--muted);
  text-align:right;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-elev);
  white-space:nowrap;
}
.cal-celda{
  min-height:54px;
  border-left:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:4px;
  position:relative;
  background:var(--bg-card);
}
.cal-celda.soltar{outline:2px dashed var(--accent);outline-offset:-2px}
.cal-celda.fuera{background:var(--bg-elev);opacity:.72}
.cal-celda .clase-tarjeta{
  display:block;
  width:100%;
  background:var(--bg-elev);
  border:none;
  border-left:4px solid var(--accent);
  border-radius:6px;
  padding:5px 6px;
  font-size:.75rem;
  color:var(--text);
  text-decoration:none;
  font-family:var(--sans);
  text-align:left;
  cursor:grab;
  line-height:1.25;
}
.cal-celda .clase-tarjeta:hover{filter:brightness(1.1)}
.cal-celda .clase-tarjeta .asig{display:block;font-size:.65rem;color:var(--accent);font-weight:700}
/* Paneles deslizantes: la caja se traslada y la pestaña la acompaña */
.cal-panel-caja{
  position:fixed;
  top:0;
  z-index:25;
  width:300px;
  max-width:80vw;
  height:100vh;
  background:transparent;
  pointer-events:none;
  transition:transform .3s ease;
  will-change:transform;
}
.cal-panel-caja.izq{left:0;transform:translateX(-100%)}
.cal-panel-caja.izq.abierto{transform:translateX(0)}
.cal-panel-caja.der{right:0;transform:translateX(100%)}
.cal-panel-caja.der.abierto{transform:translateX(0)}
.cal-panel-caja .cal-panel{
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  pointer-events:auto;
}
.cal-panel-scroll{height:100%;overflow-y:auto}
#panelAsig .cal-panel-scroll{padding-right:48px}
#panelClases .cal-panel-scroll{padding-left:48px}
.cal-panel-toggle{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:30;
  width:44px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#14110a;
  border:none;
  cursor:grab;
  touch-action:none;
  user-select:none;
  transition:left .3s ease,right .3s ease,filter .15s,background .15s;
}
.cal-panel-toggle:hover{filter:brightness(1.12)}
.cal-panel-toggle:active{cursor:grabbing}
.cal-panel-toggle svg{transition:transform .25s}
.cal-panel-toggle.izq{left:0;border-radius:0 12px 12px 0}
.cal-panel-caja.izq.abierto ~ .cal-panel-toggle.izq{left:calc(min(300px,80vw) - 44px);border-radius:12px 0 0 12px}
.cal-panel-toggle.izq svg{transform:rotate(0deg)}
.cal-panel-caja.izq.abierto ~ .cal-panel-toggle.izq svg{transform:rotate(180deg)}
.cal-panel-toggle.der{right:0;border-radius:12px 0 0 12px}
.cal-panel-caja.der.abierto ~ .cal-panel-toggle.der{right:calc(min(300px,80vw) - 44px);border-radius:0 12px 12px 0}
.cal-panel-toggle.der svg{transform:rotate(180deg)}
.cal-panel-caja.der.abierto ~ .cal-panel-toggle.der svg{transform:rotate(0deg)}
.cal-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  font-family:var(--serif);
  font-size:1rem;
  font-weight:700;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--bg-card);
}
.cal-panel-head .badge{
  font-size:.73rem;
  color:var(--accent);
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1px 9px;
  font-family:var(--sans);
}
.cal-panel-head .apagar{
  margin-left:auto;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:8px;
  width:28px;height:28px;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.cal-panel-head .apagar:hover{color:var(--accent);border-color:var(--accent)}
.cal-panel-body{padding:12px 14px}
.nueva-asig{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.nueva-asig input{
  flex:1;
  min-width:0;
  background:var(--bg-elev);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  font-size:.85rem;
  font-family:var(--sans);
  outline:none;
}
.nueva-asig input:focus{border-color:var(--accent)}
/* Elemento de asignatura o clase en los paneles */
.cal-item{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:8px;
  padding:8px 10px;
  margin-bottom:8px;
  cursor:grab;
  font-size:.82rem;
  color:var(--text);
}
.cal-item:hover{filter:brightness(1.08)}
.cal-item .nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-item .detalle{color:var(--muted);font-size:.7rem;flex-shrink:0}
.cal-item .borre{
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  padding:2px 4px;
  flex-shrink:0;
}
.cal-item .borre:hover{color:#e0665f}
.cal-item .borre:disabled{opacity:.35;cursor:not-allowed}
.cal-item.dragover{outline:2px dashed var(--accent);outline-offset:-2px}
.cal-ayuda2{font-size:.72rem;color:var(--muted);margin:6px 0 10px}
.cal-lista{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cal-vacio{color:var(--muted);font-size:.82rem;font-style:italic;margin:4px 0}
.cal-lista.soltar-panel{outline:2px dashed var(--accent);outline-offset:-3px;border-radius:8px}
/* Marcador de asignatura en una celda del calendario (placeholder) */
.clase-tarjeta.asig-marcador{
  border-left-style:dashed;
  opacity:.85;
  cursor:grab;
}
.clase-tarjeta.asig-marcador .asig{font-style:italic}
/* Clase moviéndose */
.cal-arrastrando{opacity:.4}
@media(max-width:700px){
  .cal-panel{width:min(300px, 90vw)}
}