/* ============================================================
   Programación I — hoja de estilos del sitio (rediseño 2026)
   Estático, sin build: se sirve tal cual, no requiere Node/PHP.
   ============================================================ */

:root{
  --ink:#1A2233;
  --paper:#F3F5F8;
  --surface:#FFFFFF;
  --pine:#1E4C8C;
  --pine-ink:#1E4C8C;
  --amber:#B8790E;
  --line:#DCE1E8;
  --muted:#5C6674;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E7EAF0; --paper:#0E1420; --surface:#161D2B;
    --pine:#6FA3E0; --pine-ink:#8DB9EA; --amber:#E3A83E;
    --line:#232B3A; --muted:#92A0B3;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:Charter,"Iowan Old Style","Georgia","Times New Roman",serif;
  text-wrap:balance;
  margin:0;
  font-weight:700;
}
code,.mono,.badge,.meta,time,.tag,.lang-mark{
  font-family:"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px;}

.icn{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.22em;flex-shrink:0;}

/* ---------------- layout shell ---------------- */
.app{display:flex;min-height:100vh;}

.rail{
  width:210px;flex-shrink:0;
  border-right:1px solid var(--line);
  padding:22px 16px;
  display:none;
}
.rail .brand{
  font-family:Charter,Georgia,serif;font-weight:700;font-size:1.1rem;text-decoration:none;
  display:flex;flex-direction:column;width:100%;margin-bottom:2px;
  background:linear-gradient(135deg, var(--pine), color-mix(in srgb, var(--pine) 55%, black));
  color:#F5F8FF;padding:10px 14px;border-radius:10px;
}
.rail .brand small{display:block;font-family:-apple-system,sans-serif;font-weight:400;font-size:0.72rem;color:rgba(245,248,255,0.8);margin-top:2px;}
.rail nav{margin-top:24px;display:flex;flex-direction:column;gap:2px;}
.rail nav a{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;
  font-size:0.9rem;color:var(--muted);text-decoration:none;
}
.rail nav a.active{background:color-mix(in srgb, var(--pine) 13%, transparent);color:var(--pine-ink);font-weight:600;}
.rail nav a:hover{color:var(--ink);}
.rail .icn{width:1.25rem;height:1.25rem;}

.content{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  display:none;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:1px solid var(--line);
}
.topbar h2{font-size:1.2rem;}
.topbar .role-pill{font-size:0.72rem;color:var(--muted);border:1px solid var(--line);padding:3px 10px;border-radius:999px;}

.mobile-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.mobile-header .brand{
  font-family:Charter,Georgia,serif;font-weight:700;font-size:1.05rem;text-decoration:none;
  display:flex;flex-direction:column;width:100%;
  background:linear-gradient(135deg, var(--pine), color-mix(in srgb, var(--pine) 55%, black));
  color:#F5F8FF;padding:8px 12px;border-radius:9px;
}
.mobile-header .brand small{display:block;font-family:-apple-system,sans-serif;font-weight:400;font-size:0.68rem;color:rgba(245,248,255,0.8);}

.page{padding:18px 16px 90px;flex:1;}

/* ---------------- banner (Inicio) ---------------- */
.banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:16px;
}
.banner-title{display:flex;align-items:center;gap:8px;}
.banner h3{color:var(--ink);font-size:0.92rem;font-family:-apple-system,sans-serif;font-weight:700;}
.career-tags{display:flex;flex-wrap:wrap;gap:5px;}
.career-tags span{font-size:0.63rem;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:2px 7px;border-radius:999px;}

.lang-mark{
  font-weight:700;font-size:0.78rem;letter-spacing:0.02em;color:var(--pine-ink);
  background:color-mix(in srgb, var(--pine) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--pine) 35%, transparent);
  padding:3px 9px;border-radius:7px;flex-shrink:0;
}

.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 10px;}
.section-title h3{font-size:0.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;font-family:-apple-system,sans-serif;font-weight:600;}

/* ---------------- news / action cards ---------------- */
.news-card{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.news-card .date{flex-shrink:0;width:52px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 2px;font-size:0.72rem;color:var(--pine-ink);font-weight:700;}
.news-card .date span{display:block;font-size:0.6rem;color:var(--muted);font-weight:400;}
.news-card p{margin:0;font-size:0.88rem;}
.news-card a{color:var(--pine-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

.action-card{display:flex;gap:12px;align-items:flex-start;background:color-mix(in srgb, var(--amber) 9%, var(--surface));border:1px solid color-mix(in srgb, var(--amber) 45%, var(--line));border-radius:12px;padding:13px 14px;margin-bottom:10px;}
.action-card .glyph{width:38px;height:38px;border-radius:10px;flex-shrink:0;background:color-mix(in srgb, var(--amber) 20%, transparent);color:var(--amber);display:flex;align-items:center;justify-content:center;}
.action-card .glyph .icn{width:1.3em;height:1.3em;}
.action-card strong{display:block;font-size:0.88rem;margin-bottom:2px;}
.action-card p{margin:0;font-size:0.8rem;color:var(--muted);}
.action-card a.cta{display:inline-block;margin-top:6px;font-size:0.78rem;font-weight:700;color:var(--amber);text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--amber) 50%, transparent);}

.link-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.link-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.link-card .glyph{width:36px;height:36px;border-radius:9px;background:color-mix(in srgb, var(--amber) 16%, transparent);display:flex;align-items:center;justify-content:center;color:var(--amber);flex-shrink:0;}
.link-card strong{display:block;font-size:0.88rem;}
.link-card small{color:var(--muted);font-size:0.76rem;}

/* ---------------- horarios ---------------- */
.theory-strip{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.theory-strip .t{font-size:0.85rem;}
.theory-strip .t strong{display:block;font-size:0.95rem;}
.theory-strip time{font-size:0.8rem;color:var(--pine-ink);background:color-mix(in srgb, var(--pine) 13%, transparent);padding:4px 9px;border-radius:8px;}

.comisiones{display:grid;grid-template-columns:1fr;gap:12px;}
.comision-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;}
.comision-card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;}
.comision-card header strong{font-size:0.92rem;}
.comision-card header .tag{font-size:0.68rem;background:var(--paper);border:1px solid var(--line);padding:2px 8px;border-radius:999px;color:var(--muted);white-space:nowrap;}
.comision-card .prof{font-size:0.82rem;color:var(--muted);margin-bottom:8px;}
.comision-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.comision-card li{font-size:0.82rem;display:flex;gap:8px;}
.comision-card li .day{color:var(--pine-ink);font-weight:600;min-width:64px;}

/* ---------------- material ---------------- */
.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tabs button{background:none;border:none;padding:8px 4px;margin-right:14px;font-size:0.85rem;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;}
.tabs button.active{color:var(--pine-ink);border-bottom-color:var(--pine);font-weight:600;}

.material-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.material-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;}
.material-item .num{font-size:0.75rem;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--paper);border:1px solid var(--line);color:var(--muted);}
.material-item.available .num{background:var(--pine);border-color:var(--pine);color:#fff;}
.material-item .body{flex:1;min-width:0;}
.material-item strong{display:block;font-size:0.86rem;}
.material-item small{color:var(--muted);font-size:0.76rem;}
.material-item .status{font-size:0.66rem;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.material-item.available .status{background:color-mix(in srgb, var(--pine) 15%, transparent);color:var(--pine-ink);}
.material-item.pending .status{background:var(--paper);color:var(--muted);border:1px solid var(--line);}
.material-item.pending{opacity:0.72;}
.material-item a.dl{color:var(--pine-ink);text-decoration:none;font-size:0.78rem;font-weight:600;flex-shrink:0;}

.apuntes-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:6px;}

.video-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;}
.video-card strong{display:block;font-size:0.88rem;margin-bottom:8px;}
.video-card video,.video-card iframe{max-width:100%;border-radius:8px;border:1px solid var(--line);}

/* ---------------- cronograma ---------------- */
.timeline{position:relative;padding-left:20px;}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line);}
.week{position:relative;padding-bottom:16px;}
.week::before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--pine);border:2px solid var(--surface);}
.week time{color:var(--pine-ink);font-size:0.76rem;}
.week strong{display:block;font-size:0.9rem;margin-top:2px;}
.week.exam::before{background:var(--amber);border-radius:3px;width:11px;height:11px;transform:rotate(45deg);top:5px;}
.week.exam .exam-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:color-mix(in srgb, var(--amber) 9%, var(--surface));border:1px solid color-mix(in srgb, var(--amber) 45%, var(--line));border-radius:10px;padding:9px 12px;margin-top:4px;}
.week.exam .exam-card strong{margin:0;color:var(--ink);}
.week.exam .exam-card .tag{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.03em;color:var(--amber);background:color-mix(in srgb, var(--amber) 16%, transparent);border:1px solid color-mix(in srgb, var(--amber) 40%, transparent);padding:2px 8px;border-radius:999px;white-space:nowrap;}

.placeholder-card{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);font-size:0.85rem;}

/* ---------------- equipo ---------------- */
.team-group{margin-bottom:20px;}
.team-group h4{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);margin-bottom:8px;font-weight:600;}
.team-people{display:flex;flex-direction:column;gap:6px;}
.person{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:0.85rem;}
.person .avatar{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb, var(--amber) 18%, transparent);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;flex-shrink:0;}
.person-mail{align-items:center;}
.person-mail > span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0;}
.person-mail strong{font-size:0.85rem;font-weight:600;}
.person-mail a{font-size:0.74rem;color:var(--pine-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.person-mail a:hover{text-decoration:underline;}

/* ---------------- bottom tab bar (mobile) ---------------- */
.tabbar{display:flex;border-top:1px solid var(--line);background:var(--surface);position:fixed;left:0;right:0;bottom:0;}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;color:var(--muted);font-size:0.62rem;text-decoration:none;}
.tabbar a .icn{width:1.1rem;height:1.1rem;}
.tabbar a.active{color:var(--pine-ink);}

/* ---------------- responsive: rail nav from 760px up ---------------- */
@media (min-width:760px){
  .rail{display:flex;flex-direction:column;}
  .topbar{display:flex;}
  .mobile-header,.tabbar{display:none;}
  .page{padding:26px 32px 40px;}
  .comisiones{grid-template-columns:1fr 1fr;}
  .link-grid{grid-template-columns:1fr 1fr;}
  .apuntes-grid{grid-template-columns:1fr 1fr;}
  .team-people{flex-direction:row;flex-wrap:wrap;}
  .person{flex:1 1 220px;}
}

.footer-legal{max-width:65ch;color:var(--muted);font-size:0.75rem;margin-top:30px;}

@media (prefers-reduced-motion: no-preference){
  .material-item,.news-card,.action-card{transition:transform .1s ease;}
}