@font-face{font-family:'Pixelify Sans';font-weight:400;font-display:swap;src:url(../fuentes/pixelify-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Pixelify Sans';font-weight:600;font-display:swap;src:url(../fuentes/pixelify-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Pixelify Sans';font-weight:700;font-display:swap;src:url(../fuentes/pixelify-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'VT323';font-weight:400;font-display:swap;src:url(../fuentes/vt323-latin-400-normal.woff2) format('woff2')}
/* Repositorio Minecraft Creativo - Creado por Diego Javier Mancera Dávila */
:root{
  --cielo1:#6fb3ff; --cielo2:#b9dcff;
  --pasto:#5ba33a; --pasto-o:#3f7a26; --pasto-c:#7cc24f;
  --tierra:#8a5a36; --tierra-o:#5e3b22; --tierra-c:#a5703f;
  --piedra:#8b8b8b; --piedra-o:#555; --piedra-c:#b4b4b4;
  --gui:#c6c6c6; --gui-c:#ffffff; --gui-o:#555555;
  --tinta:#2b2b2b; --oro:#f2c230; --rojo:#c0392b; --verde:#3c8d2f;
  --px:4px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0;letter-spacing:.3px;
  font-family:'Pixelify Sans',system-ui,sans-serif;
  color:var(--tinta);
  background:linear-gradient(180deg,var(--cielo1) 0,var(--cielo2) 520px,#d9ecff 100%);
  min-height:100vh;
  -webkit-font-smoothing:none;
}
img,svg{image-rendering:pixelated}
.mono{font-family:'VT323',monospace}

/* ---------- Nubes pixeladas ---------- */
.nubes{position:absolute;z-index:0;inset:0 0 auto 0;height:260px;overflow:hidden;pointer-events:none}
.nube{position:absolute;background:#fff;height:24px;box-shadow:
  24px 0 #fff,48px 0 #fff,72px 0 #fff,24px -16px #fff,48px -16px #fff;opacity:.45;width:24px;animation:flota 60s linear infinite}
.nube.n2{top:120px;animation-duration:85s;animation-delay:-30s;transform:scale(1.4)}
.nube.n3{top:70px;animation-duration:110s;animation-delay:-70s}
@keyframes flota{from{left:-160px}to{left:110%}}

/* ---------- Encabezado ---------- */
header.hero{position:relative;padding:28px 16px 0;text-align:center}
.marca{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.marca img.escudo{width:54px;height:54px;image-rendering:auto}
.marca .inst{font-family:'VT323',monospace;font-size:22px;line-height:1;color:#123a6b;text-align:left}
.marca .inst b{display:block;font-size:26px}
h1.titulo{position:relative;z-index:1;
  margin:0 auto;max-width:900px;font-weight:700;
  font-size:clamp(30px,6vw,60px);line-height:1.05;letter-spacing:1px;
  color:#fff;
  text-shadow:4px 4px 0 #3d3d3d, 0 0 0 #000;
}
h1.titulo span{display:block;color:var(--oro);font-size:.55em;margin-top:8px;text-shadow:3px 3px 0 #5a3b00}
.suelo{
  margin-top:30px;height:72px;
  background:
    linear-gradient(180deg,var(--pasto-c) 0 8px,var(--pasto) 8px 20px,var(--pasto-o) 20px 24px,transparent 24px),
    repeating-linear-gradient(90deg,var(--tierra) 0 16px,var(--tierra-c) 16px 24px,var(--tierra-o) 24px 32px,var(--tierra) 32px 48px),
    var(--tierra);
  border-top:4px solid #2f5e1b;
}

/* ---------- Contenedor ---------- */
main{max-width:980px;margin:-24px auto 0;padding:0 16px 40px;position:relative}

/* Panel tipo inventario (bisel) */
.panel{
  background:var(--gui);
  border:var(--px) solid #000;
  box-shadow:inset var(--px) var(--px) 0 var(--gui-c), inset calc(var(--px)*-1) calc(var(--px)*-1) 0 var(--gui-o);
  padding:22px;margin-bottom:22px;
}
.panel h2{margin:0 0 14px;font-size:26px;display:flex;align-items:center;gap:10px}
.panel h2 svg{width:28px;height:28px;flex:0 0 auto}
.panel p{font-size:18px;line-height:1.5;margin:0 0 10px}

/* Mensaje del docente: tipo letrero de madera */
.letrero{
  background:repeating-linear-gradient(180deg,#b5884f 0 18px,#a87b44 18px 20px,#c09358 20px 38px,#a87b44 38px 40px);
  border:var(--px) solid #3b2410;
  box-shadow:inset 4px 4px 0 #d4ad73, inset -4px -4px 0 #6e4a22;
  color:#2a1806;padding:24px 26px;margin-bottom:22px;
}
.letrero h2{margin:0 0 10px;font-size:28px;display:flex;gap:10px;align-items:center}
.letrero p{font-size:20px;line-height:1.6;margin:0 0 10px}
.letrero .firma{text-align:right;font-family:'VT323',monospace;font-size:24px;margin-top:12px}
.recta{display:inline-block;background:var(--rojo);color:#fff;padding:2px 10px;border:3px solid #6d1a11;box-shadow:3px 3px 0 #2a1806}

/* Pasos */
.pasos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0;padding:0;list-style:none}
.paso{background:#8b8b8b;border:4px solid #000;box-shadow:inset 4px 4px 0 #b4b4b4,inset -4px -4px 0 #4a4a4a;padding:14px;color:#fff}
.paso .n{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--pasto);border:3px solid #000;box-shadow:inset 3px 3px 0 var(--pasto-c),inset -3px -3px 0 var(--pasto-o);font-size:22px;font-weight:700;margin-bottom:8px}
.paso b{display:block;font-size:20px;margin-bottom:4px;text-shadow:2px 2px 0 #333}
.paso span{font-size:17px;line-height:1.4;display:block;text-shadow:1px 1px 0 #333}
.reglas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:16px}
.regla{display:flex;gap:10px;align-items:flex-start;background:#dedede;border:3px solid #000;padding:10px;font-size:17px;line-height:1.35}
.regla svg{width:24px;height:24px;flex:0 0 auto;margin-top:2px}

/* Botones de grupo */
.grupos{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:560px){.grupos{grid-template-columns:repeat(3,1fr)}}
.btn{
  font-family:inherit;font-size:20px;font-weight:700;cursor:pointer;color:#fff;
  background:#7d7d7d;border:4px solid #000;padding:12px 10px;
  box-shadow:inset 4px 4px 0 #a9a9a9,inset -4px -4px 0 #4d4d4d;
  text-shadow:2px 2px 0 #333;transition:transform .05s;
}
.btn:hover{background:#7f9f62;box-shadow:inset 4px 4px 0 #a8c98a,inset -4px -4px 0 #4f6b38}
.btn:active{transform:translateY(2px)}
.btn.activo{background:var(--pasto);box-shadow:inset 4px 4px 0 var(--pasto-c),inset -4px -4px 0 var(--pasto-o)}
.btn.verde{background:var(--verde);box-shadow:inset 4px 4px 0 #66b956,inset -4px -4px 0 #24561c}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Buscador */
.buscador{position:relative;margin-top:16px}
.buscador input{
  width:100%;font-family:inherit;font-size:21px;padding:14px 14px 14px 52px;
  background:#000;color:#fff;border:4px solid #a0a0a0;outline:none;
}
.buscador input:focus{border-color:#fff}
.buscador svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px}
.ayuda{font-size:16px;color:#444;margin-top:8px}

.lista{margin-top:14px;display:grid;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.alumno{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;font-size:19px;background:#8b8b8b;color:#fff;border:3px solid #000;
  box-shadow:inset 3px 3px 0 #b4b4b4,inset -3px -3px 0 #4a4a4a;padding:10px 12px;text-shadow:1px 1px 0 #333;
}
.alumno:hover{background:#7f9f62}
.alumno .num{font-family:'VT323',monospace;font-size:22px;background:#000;padding:0 8px;min-width:42px;text-align:center}
.alumno .nom{flex:1}
.estado{font-size:14px;padding:3px 8px;border:2px solid #000;white-space:nowrap}
.estado.si{background:var(--oro);color:#2a1806;text-shadow:none}
.estado.no{background:#555;color:#ddd}

/* Zona de subida */
.ficha{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:#000;color:#fff;padding:14px 16px;border:4px solid #a0a0a0;margin-bottom:16px}
.ficha .avatar{width:56px;height:56px;flex:0 0 auto}
.ficha .quien b{display:block;font-size:22px}
.ficha .quien span{font-family:'VT323',monospace;font-size:20px;color:#bbb}
.ficha .cambiar{margin-left:auto;font-size:16px;padding:8px 12px}

.soltar{
  display:block;border:4px dashed #555;background:#dcdcdc;padding:28px 16px;text-align:center;cursor:pointer;
}
.soltar.sobre{background:#cfe8bf;border-color:var(--pasto-o)}
.soltar svg{width:64px;height:64px;margin-bottom:8px}
.soltar b{display:block;font-size:22px}
.soltar span{font-size:16px;color:#444}
.soltar input{display:none}
.archivo-info{margin-top:12px;font-size:18px;display:none;background:#efefef;border:3px solid #000;padding:10px}

/* Barra de experiencia */
.xp{margin-top:16px;display:none}
.xp .barra{height:26px;background:#1d1d1d;border:4px solid #000;position:relative;overflow:hidden}
.xp .relleno{height:100%;width:0;background:repeating-linear-gradient(90deg,#80ff20 0 10px,#5fd012 10px 12px);transition:width .2s}
.xp .txt{text-align:center;font-family:'VT323',monospace;font-size:26px;color:#3c8d2f;margin-top:4px;text-shadow:1px 1px 0 #fff}

.aviso{padding:12px 14px;border:4px solid #000;font-size:18px;margin-top:14px;display:none;line-height:1.4}
.aviso.ok{background:#cdeec0;border-color:#24561c}
.aviso.err{background:#f5c9c3;border-color:#6d1a11}
.aviso.info{background:#fff4c2;border-color:#7a5c00}

.oculto{display:none!important}

/* Pie */
footer{text-align:center;padding:24px 16px 34px;background:#3b3b3b;color:#ddd;border-top:6px solid #000;font-size:17px}
footer b{color:var(--oro)}
footer img{width:22px;height:22px;vertical-align:-5px;margin-right:6px;image-rendering:auto}
footer .mono{font-size:20px;color:#aaa}
@media (max-width:900px){.pasos{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.pasos{grid-template-columns:1fr}}

/* Banner de fecha límite */
.plazo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#000;color:#fff;border:4px solid #f2c230;
  box-shadow:inset 0 0 0 4px #7a5c00;padding:14px 18px;margin-bottom:22px;position:relative;z-index:1}
.plazo svg{flex:0 0 auto}
.plazo-txt{flex:1;min-width:200px}
.plazo-txt b{display:block;font-size:22px;color:#f2c230}
.plazo-txt span{font-family:'VT323',monospace;font-size:24px}
.plazo-cuenta{display:flex;gap:8px}
.plazo-cuenta div{background:#2b2b2b;border:3px solid #555;min-width:64px;text-align:center;padding:4px 6px;font-size:13px;color:#bbb}
.plazo-cuenta b{display:block;font-family:'VT323',monospace;font-size:34px;line-height:1;color:#80ff20}
.plazo.urgente{border-color:#c0392b;box-shadow:inset 0 0 0 4px #6d1a11}
.plazo.urgente .plazo-cuenta b{color:#ff6b5b}
.marca img.escudo{width:64px;height:64px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}

/* Números siempre en VT323: en Pixelify el 2 y el 5 se confunden con el 8 */
.grupos .btn{font-family:'VT323',monospace;font-size:30px;font-weight:400;letter-spacing:1px;padding:8px 10px}
.paso .n{font-family:'VT323',monospace;font-size:30px;font-weight:400}
.num-px{font-family:'VT323',monospace;font-size:1.25em;letter-spacing:.5px}
.paso b .num-px,.regla .num-px{display:inline;font-size:1.25em;text-shadow:inherit}

/* ---------- Encabezado con escena y escudo ---------- */
.hero-grid{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) auto;align-items:center;gap:22px}
.escena{margin:0;border:4px solid #000;box-shadow:inset 0 0 0 4px #fff,6px 6px 0 rgba(0,0,0,.25);background:#87c0ff;overflow:hidden;position:relative}
.escena img{display:block;width:100%;aspect-ratio:160/84;object-fit:cover;image-rendering:pixelated}
.escena figcaption{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;font-size:14px;padding:3px 8px;border:2px solid #000}
.hero-centro .marca{justify-content:center}
.hero-centro .inst{text-align:center}
.escudo-grande{width:150px;height:150px;image-rendering:auto;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.3))}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr auto;gap:12px}
  .hero-centro{grid-column:1/2;grid-row:1}
  .escudo-grande{grid-column:2/3;grid-row:1;width:96px;height:96px}
  .escena{grid-column:1/3;grid-row:2}
}
@media (max-width:480px){ .escudo-grande{width:74px;height:74px} .hero-centro .inst{font-size:17px} .hero-centro .inst b{font-size:20px} }

/* ---------- El profe habla ---------- */
.mensaje{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start;margin-bottom:22px}
.mensaje .letrero{margin-bottom:0}
.profe-cara{position:sticky;top:12px;background:none;border:0;padding:0;cursor:pointer;text-align:center}
.profe-cara img{width:150px;height:auto;display:block;image-rendering:pixelated;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.35))}
.profe-cara .cara-b{position:absolute;top:0;left:0;opacity:0}
.profe-cara.hablando .cara-b{animation:boca .36s steps(1) infinite}
.profe-cara.hablando .cara-a{animation:asiente .72s steps(2) infinite}
@keyframes boca{0%{opacity:0}50%{opacity:1}}
@keyframes asiente{0%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.profe-nombre{display:inline-block;margin-top:8px;background:#000;color:#f2c230;font-family:'VT323',monospace;font-size:20px;padding:2px 10px;border:3px solid #f2c230}
.burbuja{position:relative}
.burbuja::before,.burbuja::after{content:"";position:absolute;top:44px;width:0;height:0;border-style:solid}
.burbuja::before{left:-26px;border-width:14px 22px 14px 0;border-color:transparent #3b2410 transparent transparent}
.burbuja::after{left:-17px;border-width:10px 16px 10px 0;border-color:transparent #b5884f transparent transparent;margin-top:4px}
@media (max-width:640px){
  .mensaje{grid-template-columns:1fr}
  .profe-cara{position:relative;top:0;margin:0 auto}
  .profe-cara img{width:110px}
  .burbuja::before{left:50%;top:-24px;margin-left:-14px;border-width:0 14px 22px 14px;border-color:transparent transparent #3b2410 transparent}
  .burbuja::after{left:50%;top:-14px;margin-left:-10px;border-width:0 10px 16px 10px;border-color:transparent transparent #b5884f transparent;margin-top:0}
}
@media (prefers-reduced-motion:reduce){.profe-cara.hablando .cara-b,.profe-cara.hablando .cara-a{animation:none}}