/* ============================================================
   LHSI · ficha del alumno y gráficos.
   Dos columnas: quién es a la izquierda, cómo va a la derecha.
   En el celular se apilan y la izquierda queda arriba.
   ============================================================ */
.ficha-alu{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.ficha-alu .f-izq{display:grid;gap:12px;align-content:start;position:sticky;top:0}
.ficha-alu .f-der{display:grid;gap:14px;min-width:0}

/* ---------- foto ---------- */
.f-foto{position:relative;width:100%;aspect-ratio:1;border-radius:var(--radio);background:var(--alta);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.f-foto img{width:100%;height:100%;object-fit:cover;display:block}
.f-foto .f-inicial{font-size:56px;font-weight:700;color:var(--mute);letter-spacing:.02em}
.f-foto.click{cursor:pointer;transition:border-color var(--dur)}
.f-foto.click:hover,.f-foto.click:focus-visible{border-color:var(--acc)}
.f-foto .f-foto-pie{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--fg) 62%,transparent);
  color:var(--bg);font-size:11px;font-weight:600;text-align:center;padding:5px 6px}

/* ---------- datos ---------- */
.f-nombre{font-size:18px;margin:0 0 6px;line-height:1.2}
.f-datos{background:var(--panel);border:1px solid var(--line);border-radius:var(--radio);padding:12px 14px}
.f-dato{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:3px 0;font-size:13px;flex-wrap:wrap}
.f-dato span{color:var(--mute);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.f-dato b{text-align:right;overflow-wrap:anywhere}
.f-desc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radio);padding:12px 14px}
.f-desc p{margin:0 0 8px;font-size:13px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.f-kpis{grid-template-columns:1fr 1fr;margin:0}
.f-acciones{margin-top:2px}

/* ---------- secciones y gráficos ---------- */
.f-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--radio);padding:14px 16px;display:grid;gap:10px}
.f-sec>.rotulo{margin:0}
.f-grafs{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:end}
.f-graf{min-width:0;display:grid;gap:4px}
.f-graf h5{margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.g-svg{display:block;width:100%;height:auto;overflow:visible}
.g-svg text{font-family:var(--f)}
.g-svg text.num{font-family:var(--mono)}
.g-vacio{display:grid;place-items:center;min-height:110px;padding:14px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radio-b);color:var(--mute);font-size:13px}
.f-frase{margin:0;font-size:12.5px;line-height:1.5;color:var(--mute)}
.f-lista{padding:2px 12px}
.f-lista .it time{white-space:nowrap}

/* ---------- selector de ramo ---------- */
.f-selector{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f-selector select{max-width:100%;flex:0 1 280px}
.f-cuerpo{display:grid;gap:14px}

/* ---------- celular: una columna, la ficha arriba ---------- */
@media (max-width:760px){
  .ficha-alu{grid-template-columns:1fr;gap:14px}
  .ficha-alu .f-izq{position:static}
  .f-foto{max-width:190px;justify-self:center}
  .f-grafs{grid-template-columns:1fr;align-items:stretch}
  .f-kpis{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}
@media (max-height:500px) and (orientation:landscape){
  .ficha-alu{grid-template-columns:200px minmax(0,1fr)}
  .f-foto{max-width:140px}
}