/* Kuaderno — el panel del apoderado.

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

.resumen-apo{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:6px 0 14px;border:var(--trazo) solid var(--borde);background:var(--tarjeta)}
.resumen-apo .dato{padding:14px 12px;text-align:left}
.resumen-apo .dato + .dato{border-left:var(--trazo) solid var(--borde)}
.resumen-apo .cifra{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.resumen-apo .rot{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin-top:6px}
[data-rango="verde"].cifra{color:var(--verde)}
[data-rango="ambar"].cifra{color:var(--ambar)}
[data-rango="rojo"].cifra{color:var(--malo)}

.tendencia{
  display:flex;gap:10px;align-items:flex-start;
  font-size:15px;font-weight:600;margin:0 0 10px;padding:12px 14px;
  border:var(--trazo) solid var(--borde-suave);background:var(--tarjeta);color:var(--tinta);
}
.tendencia .ic{margin-top:1px}
.tendencia[data-signo="sube"]{border-color:var(--verde);color:var(--verde)}
.tendencia[data-signo="baja"]{border-color:var(--ambar);color:var(--ambar)}

.grafico{
  background:var(--tarjeta);border:var(--trazo) solid var(--borde-suave);
  padding:12px 10px 4px;margin:14px 0;
}
.grafico svg{width:100%;height:auto;display:block}
.grafico .curva{fill:none;stroke:var(--tinta);stroke-width:2;stroke-linejoin:miter;stroke-linecap:butt}
.grafico .guia{stroke:var(--borde-suave);stroke-width:1;stroke-dasharray:3 3}
.grafico .guia.meta{stroke:var(--verde);opacity:.6}
.grafico .guia.piso{stroke:var(--malo);opacity:.4}
.grafico .eje{font-size:8px;fill:var(--tinta-3);font-family:var(--fuente)}
.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(--malo)}

.titulo-bloque{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 8px;color:var(--tinta-2)}
.ramos,.fila-nota{display:flex;flex-direction:column;gap:8px}
.fila-ramo,.fila-nota{
  display:flex;align-items:center;gap:12px;background:var(--tarjeta);
  border:var(--trazo) solid var(--borde-suave);padding:12px 14px;min-height:56px;
}
.fila-nota{margin-bottom:6px}
.fila-ramo .ico{display:grid;place-items:center;flex:none;color:var(--acento)}
.fila-ramo .ico .ic{width:22px;height:22px}
.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:15px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-ramo .txt span,.fila-nota .txt span{font-size:13px;color:var(--tinta-3)}
.fila-ramo .cifra,.fila-nota .cifra{font-size:20px;font-weight:800;flex:none;letter-spacing:-.03em}
.nota-pie{margin-top:22px;line-height:1.5}
.vacio{padding:40px 0}