/* ==========================================================
   Estilo limpio y minimalista inspirado en Notion.
   Color de acento: azul.
   ========================================================== */
:root{
  --azul:#2383e2;
  --azul-oscuro:#1a6fc4;
  --texto:#37352f;
  --texto-suave:#787774;
  --fondo:#ffffff;
  --fondo-suave:#f7f7f5;
  --borde:#e9e9e7;
  --radio:8px;
  --sombra:0 1px 3px rgba(15,15,15,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--texto);background:var(--fondo);line-height:1.5;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* Barra superior */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid var(--borde);
  position:sticky;top:0;background:var(--fondo);z-index:10;flex-wrap:wrap;gap:10px;
}
.brand{font-weight:700;font-size:18px;color:var(--texto)}
.brand:hover{text-decoration:none}
.topbar nav a{margin-left:18px;color:var(--texto-suave);font-weight:500}
.topbar nav a:hover{color:var(--azul);text-decoration:none}

.container{max-width:900px;margin:0 auto;padding:32px 24px}
h1{font-size:30px;margin:0 0 6px}
h2{font-size:22px;margin:34px 0 12px}
.muted{color:var(--texto-suave)}
code{background:var(--fondo-suave);padding:1px 6px;border-radius:4px;font-size:.9em}
.volver{display:inline-block;margin-bottom:12px;color:var(--texto-suave)}

/* Tarjetas (asignaturas) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:20px}
.card{
  display:block;padding:18px;border:1px solid var(--borde);border-radius:var(--radio);
  background:var(--fondo);box-shadow:var(--sombra);transition:.15s;color:var(--texto)
}
.card:hover{border-color:var(--azul);text-decoration:none;transform:translateY(-1px)}
.card h3{margin:0 0 8px;font-size:16px}
.badge{display:inline-block;background:var(--fondo-suave);border:1px solid var(--borde);
  border-radius:20px;padding:2px 10px;font-size:12px;color:var(--texto-suave)}

/* Formularios */
.panel{background:var(--fondo-suave);border:1px solid var(--borde);border-radius:var(--radio);padding:20px;margin:20px 0}
label{display:block;font-weight:600;font-size:14px;margin:12px 0 6px}
input[type=text],input[type=file],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--borde);border-radius:6px;
  font-size:14px;font-family:inherit;background:#fff
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(35,131,226,.15)}
textarea{min-height:80px;resize:vertical}
.btn{
  display:inline-block;background:var(--azul);color:#fff;border:none;border-radius:6px;
  padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;margin-top:16px
}
.btn:hover{background:var(--azul-oscuro);text-decoration:none}
.btn.secundario{background:#fff;color:var(--texto);border:1px solid var(--borde);margin-top:0}

/* Materiales */
.material{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border:1px solid var(--borde);border-radius:6px;margin-bottom:8px;background:#fff}
.tipo{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  padding:2px 8px;border-radius:4px;background:rgba(35,131,226,.1);color:var(--azul);margin-right:8px}

/* Visor PDF */
.visor{width:100%;height:80vh;border:1px solid var(--borde);border-radius:var(--radio);margin-top:12px}

/* Test */
.pregunta{border:1px solid var(--borde);border-radius:var(--radio);padding:16px;margin-bottom:14px;background:#fff}
.pregunta .opcion{display:block;padding:9px 12px;border:1px solid var(--borde);border-radius:6px;margin:6px 0;cursor:pointer}
.pregunta .opcion:hover{border-color:var(--azul)}
.pregunta .opcion input{width:auto;margin-right:8px}
.opcion.correcta{border-color:#0f9d58;background:rgba(15,157,88,.08)}
.opcion.incorrecta{border-color:#e5484d;background:rgba(229,72,77,.08)}
.resultado{font-size:18px;font-weight:700;margin:16px 0;padding:14px;border-radius:8px;background:var(--fondo-suave)}

/* Avisos */
.aviso{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px}
.aviso.ok{background:rgba(15,157,88,.1);color:#0f7a44}
.aviso.error{background:rgba(229,72,77,.1);color:#c0292e}

.footer{text-align:center;color:var(--texto-suave);font-size:13px;padding:30px;border-top:1px solid var(--borde);margin-top:40px}

@media(max-width:600px){.container{padding:20px 16px}h1{font-size:24px}}