/* Componentes específicos de Padrón Services.
   La base (identidad Blueorange) vive en blueorange.css y se sincroniza desde mcp_service:
   no editar esa base acá, solo agregar lo propio de este servicio en este archivo. */


/* La alerta necesita ser contenedor para el botón de cierre absoluto. */
.bo-alert { position: relative; }
.bo-alert__close {
  position: absolute; top: 8px; right: 10px; border: none; background: none;
  font-size: 1.3rem; line-height: 1; color: inherit; opacity: .6; cursor: pointer;
}
.bo-alert__close:hover { opacity: 1; }
.bo-error-detail { margin-top: 10px; }
.bo-error-detail > summary { cursor: pointer; font-weight: 600; }
.bo-error-detail .bo-code { margin: 10px 0; max-height: 280px; overflow: auto; white-space: pre; font-size: .8rem; }

/* Acciones en fila (botones chicos) en tablas. */
.bo-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Callout con borde izquierdo (nota dentro de formularios). */
.bo-callout {
  border-left: 4px solid var(--bo-purple); background: #f7f1f9;
  padding: 12px 14px; border-radius: 6px; font-size: .88rem;
}
.bo-callout--info { border-left-color: var(--bo-purple); }

/* Estado de las cargas de padrón en segundo plano. */
.bo-job {
  display: flex; align-items: center; gap: 10px; font-size: .85rem;
  border-radius: 10px; padding: 10px 12px; margin-top: 10px;
}
.bo-job--running { background: #f0ecf6; color: #5b3a78; border: 1px solid #d9cde8; }
.bo-job--error { background: #fdecef; color: #b3243b; border: 1px solid #f5c3cd; }
.bo-spinner {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid rgba(123, 47, 138, 0.25); border-top-color: var(--bo-purple);
  border-radius: 50%; animation: bo-spin 0.7s linear infinite;
}
@keyframes bo-spin { to { transform: rotate(360deg); } }

/* Filtros en línea (form de estadísticas). */
.bo-filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 20px; }
.bo-filters label { flex: 1 1 150px; }
.bo-filters .bo-actions { flex: 0 0 auto; }

/* Gráfico de líneas (SVG) de consultas. */
.bo-chart-wrap { width: 100%; overflow-x: auto; }
.bo-chart { width: 100%; min-width: 480px; height: auto; display: block; }
.bo-chart__axis { stroke: var(--bo-border); stroke-width: 1; }
.bo-chart__grid { stroke: var(--bo-border); stroke-width: 1; stroke-dasharray: 3 4; opacity: .8; }
.bo-chart__ylabel { fill: var(--bo-muted); font-size: 13px; }
.bo-chart__area { fill: url(#bo-chart-fill); stroke: none; }
.bo-chart__line { fill: none; stroke: var(--bo-coral); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bo-chart__dot { fill: var(--bo-purple); }
.bo-chart__xlabel { fill: var(--bo-muted); font-size: 13px; }


@media (max-width: 560px) {
  .bo-search .bo-btn { width: 100%; }
}