/* ══════════════════════════════════════════
   BOTONES · Digital Core (SSOT)
   Una sola definición para todos los botones de las tres apps y del Hub.
   - Texto: .btn-primary · .btn-secondary · .btn-danger · .btn-link
     (+ .btn-table-action compacto, .btn-sm / .btn-lg).
   - Icono: .btn-icon (32 px, icono 16 px, un único hover: borde y fondo de
     acento). Los botones de icono de las barras de herramientas
     (.filter-toggle, .views-toggle, .columns-toggle, .favorite-filter-btn,
     .io-btn, los de Tareas…) son alias de .btn-icon: se ven igual en
     Portfolio IA, Portfolio Data y Hub Presupuestario.
   - Estados comunes: :disabled, [aria-busy="true"] (guardando…),
     :focus-visible, .active / [aria-pressed="true"] / [aria-expanded="true"].
   Alturas: --control-h-sm / --control-h / --control-h-lg (tokens.css).
══════════════════════════════════════════ */

.btn-primary,
.btn-secondary,
.btn-danger {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}

.btn-primary { background: var(--accent); border: none; color: var(--on-accent); }
.btn-secondary { background: transparent; border: 1px solid var(--border2); color: var(--text2); font-weight: 400; }
.btn-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:where(:not(:disabled)) { background: var(--accent2); }
  .btn-secondary:hover:where(:not(:disabled)) { background: var(--bg3); color: var(--text); }
  .btn-danger:hover:not(:disabled) { background: var(--red-soft); }
}

.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled) { transform: scale(0.97); }

.btn-primary svg,
.btn-secondary svg,
.btn-danger svg { width: 14px; height: 14px; }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary[aria-busy="true"],
.btn-secondary[aria-busy="true"],
.btn-danger[aria-busy="true"] { opacity: 0.75; cursor: progress; }

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-link:focus-visible,
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-sm { min-height: var(--control-h-sm); padding: 0 10px; font-size: 12px; }
.btn-lg { min-height: var(--control-h-lg); padding: 0 20px; font-size: 14px; }

.btn-table-action {
  justify-content: center; padding: 6px 10px; font-size: 12px;
  white-space: nowrap;
}

.btn-table-action svg { width: 13px; height: 13px; }

/* Enlace con aspecto de texto (acciones dentro de tablas, fichas y listas). */
.btn-link {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  background: none; border: none; padding: 0; color: var(--accent); cursor: pointer;
  font: inherit; text-align: left;
}
.btn-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
.btn-link:hover { text-decoration: underline; }

/* ── Botón de icono (y sus alias de barra de herramientas) ── */
.btn-icon,
.filter-toggle,
.views-toggle,
.columns-toggle,
.favorite-filter-btn,
.initiative-edit-table-btn,
.io-btn,
.epics-btn,
.editmode-btn,
.collapse-btn,
.group-btn,
.hide-done-btn,
.scale-btn,
.pd-icon-btn,
.hp-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: var(--control-h); min-width: var(--control-h); height: var(--control-h);
  padding: 0; gap: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out;
}

.btn-icon svg,
.filter-toggle svg,
.views-toggle svg,
.columns-toggle svg,
.favorite-filter-btn svg,
.initiative-edit-table-btn svg,
.io-btn svg,
.epics-btn svg,
.editmode-btn svg,
.collapse-btn svg,
.group-btn svg,
.pd-icon-btn svg,
.hp-icon-btn svg { width: var(--icon-size); height: var(--icon-size); }

.btn-icon.btn-sm { width: var(--control-h-sm); min-width: var(--control-h-sm); height: var(--control-h-sm); min-height: 0; padding: 0; }
.btn-icon.btn-lg { width: var(--control-h-lg); min-width: var(--control-h-lg); height: var(--control-h-lg); min-height: 0; padding: 0; }

@media (hover: hover) and (pointer: fine) {
  .btn-icon:hover:not(:disabled),
  .filter-toggle:hover,
  .views-toggle:hover,
  .columns-toggle:hover,
  .favorite-filter-btn:hover,
  .initiative-edit-table-btn:hover,
  .io-btn:hover:not(:disabled),
  .epics-btn:hover,
  .editmode-btn:hover,
  .collapse-btn:hover,
  .group-btn:hover,
  .hide-done-btn:hover:not(.active),
  .scale-btn:hover,
  .pd-icon-btn:hover:not(:disabled),
  .hp-icon-btn:hover:not(:disabled) {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
  }
}

/* Estado activo / abierto / con valor: mismo aspecto que el hover. */
.btn-icon.active,
.btn-icon[aria-pressed="true"],
.btn-icon[aria-expanded="true"],
.filter-toggle.is-open,
.filter-toggle.has-active-filters,
.views-toggle[aria-expanded="true"],
.views-toggle.has-views,
.columns-toggle[aria-expanded="true"],
.columns-toggle.has-hidden,
.initiative-edit-table-btn[aria-pressed="true"],
.editmode-btn.active,
.group-btn.active {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

.btn-icon:active:not(:disabled) { transform: scale(0.97); }

.btn-icon:disabled,
.io-btn[disabled],
.pd-icon-btn:disabled,
.hp-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-icon[aria-busy="true"],
.io-btn[aria-busy="true"] { cursor: progress; }

/* Acción destructiva con icono (borrar una fila, un adjunto…). */
@media (hover: hover) and (pointer: fine) {
  .btn-icon.is-danger:hover:not(:disabled),
  .pd-icon-btn.is-danger:hover:not(:disabled) {
    color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--border2)); background: var(--red-soft);
  }
}

/* Botón «Reintentar» de la pantalla de error de arranque (las tres apps). */
.boot-retry,
.bootstrap-error-retry,
.pd-error-retry,
.hp-error-retry {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
  padding: 12px 20px;
  font-size: 14px;
}