/* ══════════════════════════════════════════
   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,
     los de Tareas…) comparten el aspecto 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,
.btn-warning,
.btn-success {
  display: flex; align-items: center; justify-content: 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); }
/* Aviso (p. ej. «Ver alertas» en la cabecera de una ficha): amarillo de aviso con su tinta legible. */
.btn-warning { background: var(--warning); border: none; color: var(--warning-ink); }
/* Éxito / valor corporativo (p. ej. acciones sobre entidades aprobadas o confirmadas). */
.btn-success { background: var(--green); border: none; color: var(--on-accent); }

@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-warning:hover:where(:not(:disabled)) { background: color-mix(in srgb, var(--warning) 85%, var(--text)); }
  .btn-success:hover:where(:not(:disabled)) { background: color-mix(in srgb, var(--green) 85%, var(--text)); }
}

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

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

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

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

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-success: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) ── */
.filter-toggle,
.views-toggle,
.columns-toggle,
.favorite-filter-btn,
.epics-btn,
.editmode-btn,
.collapse-btn,
.group-btn,
.hide-done-btn,
.scale-btn,
.btn-icon {
  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;
}

.filter-toggle svg,
.views-toggle svg,
.columns-toggle svg,
.favorite-filter-btn svg,
.epics-btn svg,
.editmode-btn svg,
.collapse-btn svg,
.group-btn svg,
.btn-icon 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) {
  .filter-toggle:hover,
  .views-toggle:hover,
  .columns-toggle:hover,
  .favorite-filter-btn:hover,
  .epics-btn:hover,
  .editmode-btn:hover,
  .collapse-btn:hover,
  .group-btn:hover,
  .hide-done-btn:hover:not(.active),
  .scale-btn:hover,
  .btn-icon: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,
.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],
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-icon[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) {
    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;
}

/* Botón «+» de acción de Digital Core (añadir registro en la ficha de Portfolio IA,
   nuevo presupuesto en Hub Presupuestario): azul (.btn-primary), misma silueta
   que los controles de filtro (32px de alto, radio pequeño), pero alargado en
   horizontal para leerse como un botón de acción. */
.detail-add-btn.detail-add-icon {
  width: auto;
  min-width: 52px;
  height: 32px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.detail-add-btn.detail-add-icon svg {
  width: 15px;
  height: 15px;
}

/* Conmutador (p. ej. «Editar tabla») activo: el mismo botón azul, hundido. */
.detail-add-btn.detail-add-icon[aria-pressed="true"] {
  background: var(--accent-hover, var(--accent));
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

/* «Editar tabla» de la barra de herramientas: en móvil, el mismo cuadrado que el resto de
   botones de la barra (--control-h); en escritorio conserva su silueta alargada. */
@media (max-width: 768px), (pointer: coarse) {
  .detail-add-btn.detail-add-icon.initiative-edit-table-btn {
    width: var(--control-h);
    min-width: var(--control-h);
    height: var(--control-h);
    padding: 0;
  }
}

/* Botones de icono «Eliminar» (papelera): al pasar el ratón, rojo
   (borde, icono y fondo rojo pastel; el rojo es solo de eliminar, «Cancelar» es amarillo), nunca el azul de los
   botones de icono. */
@media (hover: hover) and (pointer: fine) {
  [data-dc-tipo="eliminar"]:is(.btn-icon, .btn-secondary):hover:not(:disabled) {
    border-color: var(--red);
    color: var(--red);
    background: color-mix(in srgb, var(--red) 8%, transparent);
  }
}

/* ── Acciones de gobierno de los flujos IA Act y Seguridad (Anular, Guardar,
   Devolver): violeta pastel con un destello sutil en el icono. Mismo estilo en
   la pestaña IA Act, el popup del estudio de seguridad y el portal. ── */
.btn-gobierno {
  position: relative;
  background: color-mix(in srgb, var(--accion-gobierno) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accion-gobierno) 48%, transparent);
  color: color-mix(in srgb, var(--accion-gobierno) 62%, var(--text));
  font-weight: 500;
}
.btn-gobierno:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accion-gobierno) 24%, transparent);
  border-color: var(--accion-gobierno);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accion-gobierno) 18%, transparent);
}
.btn-gobierno:hover:not(:disabled) svg { animation: dcDestelloIcono 1.2s ease-in-out 1; }
.btn-gobierno::after {
  content: '✦'; position: absolute; top: -7px; right: -5px; font-size: 11px; line-height: 1;
  color: var(--accion-gobierno); opacity: 0; transform: scale(.4); pointer-events: none;
}
.btn-gobierno:hover:not(:disabled)::after { animation: dcChispaGobierno .9s ease-out; }
/* Guardar en verde y Devolver en naranja (mismo componente, otro tono); Anular sigue en violeta. */
.btn-gobierno[data-gobierno="guardar"] { --accion-gobierno: var(--accion-guardar); }
.btn-gobierno[data-gobierno="devolver"], .btn-gobierno[data-gobierno="devolver-revisor"], .btn-gobierno[data-gobierno="copiar-anterior"] { --accion-gobierno: var(--accion-devolver); }
/* Decisión final del CISO: cada opción con su color (verde / amarillo de aviso / rojo). */
.btn-gobierno[data-gobierno="favorable"] { --accion-gobierno: var(--green); }
.btn-gobierno[data-gobierno="condiciones"] { --accion-gobierno: var(--warning); }
.btn-gobierno[data-gobierno="desfavorable"] { --accion-gobierno: var(--red); }
@keyframes dcDestelloIcono {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: .85; }
  50% { filter: drop-shadow(0 0 3px var(--accion-gobierno)); opacity: 1; }
}
@keyframes dcChispaGobierno {
  0% { opacity: 0; transform: scale(.4) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(25deg); }
  100% { opacity: 0; transform: scale(.6) rotate(70deg); }
}

/* Botón de rechazo («No»): neutro en reposo; al pasar el ratón, borde y texto rojos sobre rojo
   suave y la X gira y tiembla (un «no»). Lo usa el diálogo común (extraButton). */
.btn-rechazo { display: inline-flex; align-items: center; gap: 6px; }
.btn-rechazo > svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .25s ease; }
.btn-rechazo:hover, .btn-rechazo:focus-visible { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.btn-rechazo:hover > svg, .btn-rechazo:focus-visible > svg { animation: dc-rechazo-x .6s ease both; }
.btn-rechazo:active > svg { transform: scale(.8) rotate(90deg); }
@keyframes dc-rechazo-x {
  0% { transform: rotate(0); }
  35% { transform: rotate(90deg) scale(1.15); }
  55% { transform: rotate(90deg) translateX(-2px); }
  70% { transform: rotate(90deg) translateX(2px); }
  85% { transform: rotate(90deg) translateX(-1px); }
  100% { transform: rotate(90deg); }
}

/* Icono que motion.js añade a los botones de solo texto (todo botón de acción lleva icono). */
:is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-gobierno) > svg:first-child { width: 14px; height: 14px; flex: 0 0 auto; }