/* Estudia — el panel del apoderado.

   Aparte, igual que resultado.js: es una pantalla nueva que se va a iterar harto,
   y así se puede rediseñar entera sin tocar el CSS del resto de la app. */

/* ---------- panel del apoderado ---------- */
.enlace{
  display:block;width:100%;margin:22px 0 0;padding:12px;border:0;background:none;
  color:var(--tinta-3);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.enlace:active{color:var(--morado)}

.resumen-apo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px}
.resumen-apo .dato{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:13px;
  padding:14px 8px;text-align:center;box-shadow:var(--sombra);
}
.resumen-apo .cifra{display:block;font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.resumen-apo .rot{display:block;font-size:12px;color:var(--tinta-3);margin-top:4px}
[data-rango="verde"].cifra{color:var(--verde)}
[data-rango="ambar"].cifra{color:var(--ambar)}
[data-rango="rojo"].cifra{color:var(--rojo)}

.tendencia{
  font-size:14.5px;font-weight:600;margin:0 0 10px;padding:11px 13px;border-radius:12px;
  background:var(--morado-claro);color:var(--morado-osc);
}
.tendencia[data-signo="sube"]{background:var(--verde-claro);color:var(--verde)}
.tendencia[data-signo="baja"]{background:var(--ambar-claro);color:var(--ambar)}

.grafico{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);
  padding:12px 10px 4px;margin:14px 0;box-shadow:var(--sombra);
}
.grafico svg{width:100%;height:auto;display:block}
.grafico .curva{fill:none;stroke:var(--morado);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.grafico .guia{stroke:var(--borde);stroke-width:1;stroke-dasharray:3 3}
.grafico .guia.meta{stroke:var(--verde);opacity:.5}
.grafico .guia.piso{stroke:var(--rojo);opacity:.35}
.grafico .eje{font-size:8px;fill:var(--tinta-3)}
.grafico .punto{stroke:var(--tarjeta);stroke-width:1.5}
.grafico .punto[data-rango="verde"]{fill:var(--verde)}
.grafico .punto[data-rango="ambar"]{fill:var(--ambar)}
.grafico .punto[data-rango="rojo"]{fill:var(--rojo)}

.titulo-bloque{font-size:15px;margin:20px 0 8px;color:var(--tinta-2)}
.ramos,.fila-nota{display:flex;flex-direction:column;gap:6px}
.fila-ramo,.fila-nota{
  display:flex;align-items:center;gap:11px;background:var(--tarjeta);
  border:1px solid var(--borde);border-radius:12px;padding:11px 13px;
}
.fila-nota{margin-bottom:6px}
.fila-ramo .ico{font-size:20px;line-height:1;flex:none}
.fila-ramo .txt,.fila-nota .txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fila-ramo .txt b,.fila-nota .txt b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-ramo .txt span,.fila-nota .txt span{font-size:12.5px;color:var(--tinta-3)}
.fila-ramo .cifra,.fila-nota .cifra{font-size:19px;font-weight:800;flex:none;letter-spacing:-.5px}
.nota-pie{margin-top:22px;line-height:1.5}
.vacio{text-align:center;padding:40px 10px}