/* ¿Te lo aprendiste? · Identidad 2.0.0.
   La marca conserva su paleta; los controles respetan el acento elegido.
   Los colores de asignatura (--course) y las fuentes existentes se conservan. */
body{
  --brand-petroleum:#173847;
  --brand-teal:#087987;
  --brand-mint:#2EC4B6;
  --brand-amber:#FFB547;
  --brand-warm:#F7F7F2;
  --brand-feature:#087987;
  --bg:var(--brand-warm);
  --paper:#fff;
  --ink:var(--brand-petroleum);
  --muted:#526873;
  --line:#d7e1df;
  --accent:var(--brand-teal);
  --soft:#e7f4f2;
}
body[data-theme=dark]{
  --bg:#10272f;
  --paper:#18333e;
  --ink:#eff6f5;
  --muted:#b6c9ce;
  --line:#35545d;
  --accent:var(--brand-mint);
  --soft:#173f43;
  --brand-feature:#124e5a;
}

/* No se redefine display: presentación y pizarra mantienen el encabezado oculto. */
.topbar{
  background:var(--brand-petroleum);color:var(--brand-warm);
  border-bottom:3px solid var(--brand-mint);box-shadow:0 3px 14px #17384718;
}
.topbar button{
  background:#254a59;color:var(--brand-warm);border-color:#647e88;
}
.topbar button:hover{background:#315b69;color:#fff;border-color:var(--brand-mint)}
.topbar .search-trigger{background:#0f2c3a;color:#e3efed;border-color:#647e88}
.topbar .search-trigger kbd{color:inherit;border-color:#647e88}
.topbar :focus-visible{outline-color:var(--brand-amber)}
.brand{min-width:252px;gap:10px;color:var(--brand-warm);flex-shrink:0}
.brand-copy{min-width:0}
.brand-name{display:block;letter-spacing:-.025em}
.brand small{color:#d5e4e3;letter-spacing:.025em;font-weight:500}
.brand-mark{
  display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;
  background:var(--brand-warm);box-shadow:0 0 0 2px var(--brand-mint);
}
.brand-avatar{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.brand:hover{color:var(--brand-mint);text-decoration:none}
.brand:focus-visible{border-radius:4px}
#sidebar .nav-link.active{box-shadow:inset 3px 0 var(--brand-mint)}
.course-card .card-bottom .button{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.course-card .card-bottom .button:hover{box-shadow:0 0 0 2px var(--soft);text-decoration:underline}
body[data-theme=dark] .course-card .card-bottom .button{color:#10212b}
.footer-brand{font-weight:650;color:var(--ink)}
.site-footer .brand-domain{color:var(--accent);overflow-wrap:anywhere}

/* Dos superficies de marca: encabezado petróleo y bienvenida turquesa.
   La lectura, los diagramas y las asignaturas conservan superficies neutrales. */
.brand-home{
  display:block;max-width:none;padding:30px 34px;margin-bottom:22px;
  background:var(--brand-feature);color:#fff;
  border:0;border-left:6px solid var(--brand-mint);border-radius:16px;
}
.brand-home-copy{min-width:0;max-width:760px}
.brand-home .brand-home-kicker{
  display:inline-block;padding:5px 10px;border-radius:6px;
  background:var(--brand-amber);color:var(--brand-petroleum);
  font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
}
.brand-home h1{color:#fff;margin-top:16px;margin-bottom:14px}
.brand-home .muted{color:#effbf8}
.brand-home .home-count{
  display:inline-block;margin-top:3px;padding:5px 11px;border-radius:6px;
  background:var(--brand-petroleum);color:var(--brand-warm);font-size:13px;
}
.brand-home-copy>p:last-child{margin-bottom:0}
.brand-home-domain{color:var(--accent)}

/* El avatar grande acompaña la información del profesor, debajo de las asignaturas. */
.teacher-profile .teacher-media{display:block}
.teacher-profile .teacher-portrait{margin:0}
.teacher-profile .teacher-portrait img{
  display:block;width:180px;height:180px;max-width:100%;margin:0 auto;
  aspect-ratio:1;object-fit:contain;object-position:center;
  border-radius:20px;border:3px solid var(--brand-warm);
  box-shadow:0 0 0 1px var(--line);background:var(--brand-warm);
}
.teacher-profile .teacher-contact{margin-top:16px}

@media(max-width:1100px){
  .brand{min-width:236px;font-size:18px}
}
@media(max-width:980px){
  .teacher-profile .teacher-portrait img{width:164px;height:164px}
}
@media(max-width:820px){
  .brand{min-width:0;flex:1;gap:8px;font-size:17px}
  .brand small{font-size:10px}
  .top-actions{flex:0 0 auto;margin-left:0}
  .topbar>.mobile-toggle,.topbar>.search-trigger{flex-shrink:0}
  .brand-home{padding:26px}
}
@media(max-width:600px){
  .teacher-profile .teacher-media{
    display:grid;grid-template-columns:125px minmax(0,1fr);gap:16px;align-items:start;
  }
  .teacher-profile .teacher-portrait img{width:125px;height:125px;border-radius:16px}
  .teacher-profile .teacher-contact{margin-top:0}
}
@media(max-width:560px){
  .brand-home{padding:22px 20px;border-radius:12px;border-left-width:5px}
  .brand-home .brand-home-kicker{font-size:10px}
  .brand-home h1{font-size:28px}
}
@media(max-width:420px){
  .topbar{padding-inline:10px;gap:6px}
  .brand{gap:6px;font-size:15px;line-height:1.1}
  .brand-name{max-width:106px}
  .top-actions{gap:0}
}
@media(max-width:400px){
  .teacher-profile .teacher-media{grid-template-columns:minmax(0,1fr);gap:16px}
  .teacher-profile .teacher-portrait img{margin:0;width:145px;height:145px}
}
@media print{
  body,body[data-theme],body[data-accent],body[data-theme][data-accent]{
    --bg:#fff;--paper:#fff;--ink:#111;--muted:#444;--line:#ccc;
    --accent:#222;--soft:#f4f4f4;
    background:#fff;color:#111;
  }
  .brand-home{
    display:block;background:none;color:#111;padding:0 0 12px;
    border:0;border-bottom:1px solid #ccc;border-radius:0;
  }
  .brand-home h1,.brand-home .muted{color:#111}
  .brand-home .brand-home-kicker,.brand-home .home-count{
    background:none;color:#111;padding:0;
  }
  .teacher-profile .teacher-portrait img{width:105px;height:105px;box-shadow:none;border:0}
  .course-card .card-bottom .button{background:#fff;color:#111;border-color:#ccc;box-shadow:none}
}