/* ============================================================
   Estilo del sitio — Yamil Sagurie
   Colores y tipografía se definen una sola vez aquí (variables --...).
   Para cambiar el color de acento, edita --accent (claro y oscuro).
   ============================================================ */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --ink: #141a26;
  --muted: #5d6675;
  --line: #e3e6ec;
  --accent: #1a4a8e;
  --accent-soft: #e9eff9;
  --ok: #1d7f55; --ok-soft: #e3f4ec;
  --low: #b5461b; --low-soft: #fbeae2;
  --pend: #7d889b; --pend-soft: #eef1f5;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1218; --surface: #161b23; --ink: #e8ebf0; --muted: #9aa3b2; --line: #262d38;
  --accent: #8db4ff; --accent-soft: #1b2638; --ok: #56c995; --ok-soft: #143326; --low: #f29a72; --low-soft: #3a2018;
  --pend: #8d98ab; --pend-soft: #1c2430; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f1218; --surface: #161b23; --ink: #e8ebf0; --muted: #9aa3b2; --line: #262d38;
  --accent: #8db4ff; --accent-soft: #1b2638; --ok: #56c995; --ok-soft: #143326; --low: #f29a72; --low-soft: #3a2018;
  --pend: #8d98ab; --pend-soft: #1c2430; color-scheme: dark; }

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
p { margin: 0; }
img { max-width: 100%; }
.wrap { max-width: 46rem; margin: 0 auto; padding-inline: 20px; }

/* ---------- Barra superior ---------- */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar .wrap { max-width: 64rem; display: flex; align-items: center; gap: 18px; padding-block: 12px; flex-wrap: wrap; }
.brand { font: 500 19px var(--serif); color: var(--ink); text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14.5px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.btn-est { font: 600 14px var(--sans); color: var(--accent); background: transparent; border: 1.5px solid var(--accent); border-radius: 99px; padding: 6px 16px; cursor: pointer; text-decoration: none; }
.btn-est:hover, .btn-est.on { background: var(--accent); color: var(--surface); }
.live { background: var(--ok-soft); color: var(--ok); font-size: 14.5px; font-weight: 600; }
.live .wrap { max-width: 64rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.live a { color: inherit; }

/* ---------- Perfil ---------- */
.hero { padding-block: 72px 56px; }
.hero .wrap { max-width: 64rem; display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 48px; align-items: center; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero h1 { font-size: clamp(46px, 9vw, 84px); line-height: 1; margin-top: 14px; letter-spacing: -.02em; }
.hero .tag { font: italic 400 clamp(19px, 2.6vw, 23px)/1.45 var(--serif); color: var(--muted); margin-top: 20px; max-width: 34rem; }
.links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.pill { font-size: 14px; font-weight: 500; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); text-decoration: none; background: var(--surface); }
.pill:hover { border-color: var(--accent); }
.pill.soon { color: var(--muted); border-style: dashed; }
.bruhat { color: var(--muted); margin: 0; }
.bruhat figcaption { font: italic 14px var(--serif); text-align: center; margin-top: 6px; }
@media (max-width: 720px) { .hero .wrap { grid-template-columns: 1fr; gap: 28px; } .bruhat { max-width: 12rem; } .hero { padding-block: 48px 36px; } }

section.s { padding-block: 56px; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.s h2 { font-size: 34px; margin-bottom: 22px; }
.s h3 { font-size: 22px; margin: 34px 0 12px; }
.s p + p { margin-top: 14px; }
.lede { font: 400 20px/1.55 var(--serif); }
.hint { font-size: 13.5px; color: var(--muted); }

.about { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 32px; align-items: start; }
.portrait { width: 9rem; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); font: 500 34px var(--serif); object-fit: cover; }
@media (max-width: 560px) { .about { grid-template-columns: 1fr; } }
dl.facts { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 10px 20px; margin: 28px 0 0; font-size: 15.5px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; gap: 2px; } dl.facts dd { margin-bottom: 10px; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 14px; padding: 5px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.math { font-family: var(--serif); font-style: italic; white-space: nowrap; }

.list { display: flex; flex-direction: column; }
.item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item .yr { font: 500 15px var(--serif); color: var(--muted); font-variant-numeric: tabular-nums; }
.item b { font-weight: 600; }
.item .where { color: var(--muted); font-size: 15px; }
.item a { font-size: 14px; }
.soon-t { font-size: 13px; color: var(--muted); font-style: italic; }

.notes { display: flex; flex-direction: column; }
.note-row { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding-block: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.note-row:first-child { border-top: 0; }
.note-row .tx { flex: 1 1 18rem; min-width: 0; }
.note-row .tx span { display: block; font-size: 14.5px; color: var(--muted); }
.st { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 2px 9px; border-radius: 99px; white-space: nowrap; text-decoration: none; }
.st.av { color: var(--ok); background: var(--ok-soft); }
.st.pr { color: var(--accent); background: var(--accent-soft); }
.st.so { color: var(--pend); background: var(--pend-soft); }

.callout { margin-top: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.callout p { flex: 1 1 18rem; }
.callout small { display: block; color: var(--muted); font-size: 14px; }

/* ---------- Animaciones de investigación (bloque plegable en Research) ---------- */
details.anim { margin-top: 38px; border-block: 1px solid var(--line); scroll-margin-top: 64px; }
details.anim > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; padding: 16px 2px; }
details.anim > summary::-webkit-details-marker { display: none; }
.an-tt { font: 500 22px var(--serif); }
.an-n { font-size: 13.5px; color: var(--muted); }
.an-chev { margin-left: auto; align-self: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: transform .2s; }
details.anim > summary:hover .an-chev { border-color: var(--accent); color: var(--accent); }
details.anim[open] .an-chev { transform: rotate(180deg); }
.an-intro { font-size: 15.5px; color: var(--muted); margin-bottom: 14px; max-width: 40rem; }
.an-list { display: flex; flex-direction: column; padding-bottom: 12px; }
.an-row { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 22px; padding-block: 18px; border-top: 1px solid var(--line); align-items: start; }
.an-row:first-child { border-top: 0; padding-top: 4px; }
.an-img { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.an-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.an-row:hover .an-img img { transform: scale(1.04); }
.an-row.soon .an-img { border-style: dashed; background: transparent; display: grid; place-items: center; color: var(--muted); font: italic 15px var(--serif); }
.an-row.soon h4, .an-row.soon p { color: var(--muted); }
.an-tx { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.an-tx h4 { font: 500 20px/1.3 var(--serif); margin: 0; }
.an-tx h4 a { color: var(--ink); text-decoration: none; }
.an-tx h4 a:hover { color: var(--accent); }
.an-tx p { font-size: 15.5px; }
.an-tx p i, .an-tx p sub { font-family: var(--serif); }
.an-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.an-tag { font-size: 12.5px; padding: 2px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.an-tag.an-m { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.an-go { font-size: 14.5px; font-weight: 600; text-decoration: none; width: fit-content; }
.an-go:hover { text-decoration: underline; }
@media (max-width: 600px) { .an-row { grid-template-columns: 1fr; gap: 12px; } .an-img { max-width: 22rem; } }
@media (prefers-reduced-motion: reduce) { .an-chev, .an-img img { transition: none; } .an-row:hover .an-img img { transform: none; } }

.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; cursor: zoom-in; }
.photos figcaption { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ph { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 8px; border: 1px dashed var(--line); background: linear-gradient(135deg, var(--accent-soft), var(--surface)); }
@media (max-width: 560px) { .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zoom { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .85); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.zoom img { max-height: 90vh; border-radius: 6px; }

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 24px; }
.contact .lbl { font-size: 13px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.mail { font: 500 20px var(--serif); user-select: all; word-break: break-all; }
.copy, .ghost { font: 500 13px var(--sans); background: none; border: 1px solid var(--line); border-radius: 99px; padding: 5px 13px; color: var(--ink); cursor: pointer; }
.copy { margin-top: 8px; }
footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.go { font: 600 15px var(--sans); padding: 12px 20px; border-radius: 10px; border: 0; background: var(--accent); color: var(--surface); cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.go:hover { filter: brightness(1.08); }
.go[disabled] { opacity: .6; cursor: wait; }

/* ---------- Portal de estudiantes ---------- */
.portal { padding-block: 44px 64px; }
.portal .wrap { max-width: 56rem; display: flex; flex-direction: column; gap: 22px; }
.portal h1 { font-size: clamp(34px, 6vw, 46px); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.login { max-width: 30rem; display: flex; flex-direction: column; gap: 14px; }
.login label { font-weight: 600; font-size: 14px; }
.field { display: flex; gap: 10px; flex-wrap: wrap; }
.field input { flex: 1 1 13rem; min-width: 0; font: 500 22px var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.field input:focus { outline: none; border-color: var(--accent); }
.field .go { flex: 1 0 auto; }
.err { background: var(--low-soft); color: var(--low); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.cargando { color: var(--muted); padding: 8px 0; }

.who { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.who .sub { color: var(--muted); font-size: 15px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { font: 600 15px var(--sans); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }

.mat { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 720px) { .mat { grid-template-columns: 1fr; } }
.courses { display: flex; flex-direction: column; gap: 4px; }
.courses .grp { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
.courses .grp:first-child { margin-top: 0; }
.cbtn { text-align: left; font: 500 15px var(--sans); background: none; border: 0; border-radius: 8px; padding: 8px 10px; color: var(--ink); cursor: pointer; }
.cbtn:hover { background: var(--accent-soft); }
.cbtn.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.unit { border-top: 1px solid var(--line); }
.unit:first-child { border-top: 0; }
.unit summary { cursor: pointer; padding: 14px 0; font: 500 19px var(--serif); display: flex; justify-content: space-between; gap: 10px; list-style: none; }
.unit summary::-webkit-details-marker { display: none; }
.unit summary span { font: 400 13.5px var(--sans); color: var(--muted); }
.res { display: flex; flex-direction: column; padding-bottom: 12px; }
.r { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.r .k { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 5.2rem; flex: none; }
.r .t { flex: 1 1 12rem; min-width: 0; }
.r .t span { color: var(--muted); font-size: 14px; }
.r .acc { display: flex; gap: 12px; font-size: 14px; font-weight: 500; }
.r .pend { font-size: 13px; color: var(--pend); }

.grades { display: flex; flex-direction: column; }
.sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.big { font: 600 48px/1 var(--serif); font-variant-numeric: tabular-nums; }
.big.ok { color: var(--ok); } .big.low { color: var(--low); }
.bar2 { height: 6px; border-radius: 99px; background: var(--pend-soft); overflow: hidden; margin-top: 12px; }
.bar2 span { display: block; height: 100%; background: var(--accent); }
.msg { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 15px; }
.msg.ok { background: var(--ok-soft); } .msg.low { background: var(--low-soft); }
.g { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.g .nm { font-weight: 600; }
.g .sb { font-size: 13.5px; color: var(--muted); grid-column: 1; }
.g .v { grid-row: 1 / span 3; grid-column: 2; font: 600 34px var(--serif); font-variant-numeric: tabular-nums; text-align: right; }
.g .v.ok { color: var(--ok); } .g .v.low { color: var(--low); }
.g .v.pend { font: 600 14px var(--sans); color: var(--pend); background: var(--pend-soft); padding: 5px 11px; border-radius: 99px; }
.nueva { font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 99px; margin-left: 8px; vertical-align: 2px; }
.plus { color: var(--accent); font-weight: 600; }
.lbl2 { font-size: 13px; color: var(--muted); }
.dec { margin-top: 10px; }
.dec .r .k { width: auto; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 14px; }
.two .card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pend); }
.dot.on { background: var(--ok); }