/* ADEPROGRUV — pantalla de tareas del alumno (entregables editables + PDF) */
:root{
  --crema:#F7F2E8;--papel:#FFFDF8;--tinta:#101C18;--tinta-2:#3C4A44;
  --menta:#1F6B5A;--menta-2:#2E8A73;--menta-claro:#BFE6D8;--azul:#14314F;
  --linea:rgba(16,28,24,.14);--linea-2:rgba(16,28,24,.07);
  --rojo:#A6372B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--crema);color:var(--tinta);font-family:'Inter',system-ui,sans-serif;font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--menta);text-decoration:none}
a:hover{text-decoration:underline}

.page{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,34px)}

/* ── barra superior ── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--linea-2);flex-wrap:wrap}
.brand{font-family:'Archivo Black',sans-serif;font-size:14px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;color:var(--tinta)}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--menta);display:inline-block;
  box-shadow:0 0 0 4px rgba(46,138,115,.16)}
.tb-links{display:flex;gap:18px;flex-wrap:wrap}
.tb-links a{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-2)}
.tb-links a:hover{color:var(--menta);text-decoration:none}

/* ── cabecera ── */
.head{padding:clamp(28px,6vw,54px) 0 26px}
.kicker{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--menta);margin-bottom:10px}
.head h1{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(2rem,6vw,3.1rem);
  text-transform:uppercase;letter-spacing:-.02em;line-height:.95;margin-bottom:12px}
.head p{max-width:640px;color:var(--tinta-2);font-size:.96rem;margin-bottom:20px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.st{background:var(--papel);border:1px solid var(--linea);border-radius:6px;
  padding:11px 16px;min-width:96px}
.st b{display:block;font-family:'Anton',sans-serif;font-size:1.5rem;line-height:1;color:var(--tinta)}
.st span{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2);margin-top:6px}
.btn-new{background:var(--tinta);color:var(--crema);border:none;border-radius:5px;
  padding:12px 18px;cursor:pointer;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;transition:.18s}
.btn-new:hover{background:var(--menta)}

/* ── disposicion ── */
.layout{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start;padding-bottom:40px}
@media (max-width:860px){.layout{grid-template-columns:1fr}}

/* ── lista ── */
.list{background:var(--papel);border:1px solid var(--linea);border-radius:6px;overflow:hidden;
  position:sticky;top:16px}
@media (max-width:860px){.list{position:static}}
.list-head{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-2);padding:14px 16px;border-bottom:1px solid var(--linea-2);
  display:flex;justify-content:space-between}
#items{max-height:62vh;overflow:auto}
.it{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--linea-2);
  padding:13px 16px;cursor:pointer;transition:.15s;border-left:3px solid transparent}
.it:hover{background:rgba(31,107,90,.05)}
.it.on{background:rgba(31,107,90,.08);border-left-color:var(--menta)}
.it-mod{display:block;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--menta);margin-bottom:5px}
.it-title{display:block;font-weight:600;font-size:.92rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it-meta{display:block;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2);margin-top:5px}
.none{padding:20px 16px;color:var(--tinta-2);font-size:.88rem}

/* ── editor ── */
.editor{background:var(--papel);border:1px solid var(--linea);border-radius:6px;padding:clamp(18px,3vw,26px)}
.empty{color:var(--tinta-2);font-size:.94rem;padding:36px 4px;text-align:center}
.meta{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-2);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--linea-2)}
.meta b{color:var(--menta)}
.title{width:100%;font-family:'Anton',sans-serif;font-weight:400;font-size:1.5rem;
  text-transform:uppercase;letter-spacing:-.01em;background:transparent;border:0;border-bottom:1px solid var(--linea);
  padding:8px 0 12px;color:var(--tinta);outline:none}
.title:focus{border-bottom-color:var(--menta)}
.title::placeholder{color:rgba(16,28,24,.28)}
.content{width:100%;min-height:340px;margin-top:14px;background:var(--crema);border:1px solid var(--linea);
  border-radius:5px;padding:14px 15px;font-family:'Inter',sans-serif;font-size:14px;line-height:1.65;
  color:var(--tinta);outline:none;resize:vertical}
.content:focus{border-color:var(--menta);box-shadow:0 0 0 3px rgba(31,107,90,.10)}
.content::placeholder{color:rgba(16,28,24,.32)}

.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:16px}
.btn-main,.btn-sec,.btn-del{display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;padding:10px 15px;cursor:pointer;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;transition:.18s;border:1px solid transparent}
.btn-main{background:var(--tinta);color:var(--crema)}
.btn-main:hover{background:var(--menta)}
.btn-sec{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn-sec:hover{border-color:var(--menta);color:var(--menta);text-decoration:none}
.btn-sec.ok{border-color:var(--menta);color:var(--menta);background:rgba(31,107,90,.08)}
.btn-del{background:transparent;color:var(--rojo);border-color:rgba(166,55,43,.35)}
.btn-del:hover{background:#FBEDEA}
.hint{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2)}

/* Recompensa al marcar revisada.
   Se anima el box-shadow del boton, NO su transform: animar el transform del
   propio control lo deja inestable (el boton salta y el cursor pierde el foco). */
@keyframes adpPop{
  0%{box-shadow:0 0 0 0 rgba(31,107,90,.55)}
  60%{box-shadow:0 0 0 12px rgba(31,107,90,0)}
  100%{box-shadow:0 0 0 0 rgba(31,107,90,0)}
}
.btn-sec.pop{animation:adpPop .85s ease-out}

.footer-note{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-2);text-align:center;padding:20px 0 34px;opacity:.8}