/* ============================================================
   dissolve.css — Herramienta Dissolve (bg-primary)
   ARQUITECTURA: ver ARQUITECTURA_CSS.md + GUIA_DARK_MODE_ARQUITECTURA.md
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------ */
:root {
  --dissolve-primary: #0056b3;
  --dissolve-primary-hover: #0068d6;
  --dissolve-surface: #f0f5ff;
  --dissolve-border: #9ec5fe;
  --dissolve-on-primary: #fff;
}

/* ------------------------------------------------------------
   2. BOTÓN PRINCIPAL
   ------------------------------------------------------------ */
.btn-tool-primary {
  background: var(--dissolve-primary);
  color: var(--dissolve-on-primary);
  border: 2px solid var(--dissolve-primary);
}
.btn-tool-primary:hover,
.btn-tool-primary:focus {
  background: var(--dissolve-primary-hover);
  border-color: var(--dissolve-primary-hover);
  color: var(--dissolve-on-primary);
}

.dissolve-options {
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------
   3. DARK MODE
   ------------------------------------------------------------ */
[data-bs-theme='dark'] {
  --dissolve-primary: #4d94ff;
  --dissolve-primary-hover: #6ba3ff;
  --dissolve-surface: #0a1a2e;
  --dissolve-border: #0056b3;
  --dissolve-on-primary: #fff;
}

[data-bs-theme='dark'] .btn-tool-primary {
  box-shadow: 0 0 20px rgba(77, 148, 255, 0.3);
}
[data-bs-theme='dark'] .btn-tool-primary:hover {
  box-shadow: 0 0 28px rgba(77, 148, 255, 0.5);
}

[data-bs-theme='dark'] .tool-card {
  background-color: var(--color-surface-variant);
  border-color: var(--dissolve-border);
}

[data-bs-theme='dark'] .card-header.bg-primary {
  background-color: #0a2a52 !important;
  color: var(--dissolve-primary) !important;
}

[data-bs-theme='dark'] .dissolve-options .form-label {
  color: var(--color-on-surface);
}