/* ---------- Reportes (solo Administrador) ---------- */
.rep-rango { margin: 0 0 10px; font-weight: 700; color: var(--suave); }

/* Pestañas para que la página no se haga eterna */
.rep-pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.rep-pestana { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 12px; font-weight: 700; color: var(--suave); }
.rep-pestana:hover { color: var(--azul); }
.rep-pestana[aria-selected="true"] { color: var(--azul); border-bottom-color: var(--azul); }

/* Tarjetas del resumen: el color va arriba; el texto siempre explica qué mide */
.rep-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; margin-bottom: 20px; }
.rep-tarjeta {
  --c: var(--azul);
  display: grid; gap: 2px; align-content: start; min-width: 0;
  background: #fff; border: 1px solid var(--borde); border-top: 6px solid var(--c);
  border-radius: var(--radio); padding: 12px 14px;
}
.rep-tarjeta-titulo { font-weight: 700; }
/* break-word: un importe largo se parte en dos líneas en vez de desbordar la tarjeta */
.rep-tarjeta-valor { font-size: 1.6rem; font-weight: 800; line-height: 1.15; overflow-wrap: break-word; }
.rep-tarjeta-frase { font-size: .8rem; color: var(--suave); }
.rep-verde { --c: var(--verde); }
.rep-rojo { --c: var(--rojo); }
.rep-amarillo { --c: var(--amarillo); }

/* Gráficas de barras en SVG: si no caben, se desplazan en horizontal */
.rep-graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 0 20px; }
.rep-grafica { margin: 0 0 20px; min-width: 0; }
.rep-grafica h2 { font-size: 1.15rem; margin-bottom: 8px; }
.rep-lienzo { overflow-x: auto; }
.rep-lienzo svg { display: block; }
.rep-valor { font-size: 12px; font-weight: 700; }
.rep-mes { font-size: 12px; }

.rep-nota { font-size: .85rem; color: var(--suave); margin-bottom: 8px; }
.tabla .rep-largo { white-space: normal; min-width: 260px; }

/* Tablet y móvil (menos de 1024 px): tarjetas de dos en dos y pestañas con
   desplazamiento propio; las tablas se desplazan en horizontal (.tabla-envoltura) */
@media (max-width: 1023px) {
  .rep-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-tarjeta-valor { font-size: 1.35rem; }
  .rep-pestanas { flex-wrap: nowrap; overflow-x: auto; }
  .rep-pestana { white-space: nowrap; min-height: 44px; }
}
/* Móvil muy estrecho (menos de 360 px): una tarjeta por fila */
@media (max-width: 359px) {
  .rep-tarjetas { grid-template-columns: minmax(0, 1fr); }
}