/* ============================================================
   intersect.css — Herramienta Intersección (bg-danger)
   ARQUITECTURA: ver ARQUITECTURA_CSS.md + GUIA_DARK_MODE_ARQUITECTURA.md
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------ */
:root {
  --intersect-primary: #dc3545;
  --intersect-primary-hover: #e0505f;
  --intersect-surface: #fff5f5;
  --intersect-border: #f5c6cb;
  --intersect-on-primary: #fff;
}

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

.intersect-layers {
  margin-bottom: var(--space-3);
}

/* ------------------------------------------------------------
   3. DARK MODE
   ------------------------------------------------------------ */
[data-bs-theme='dark'] {
  --intersect-primary: #ff6b7a;
  --intersect-primary-hover: #ff8591;
  --intersect-surface: #2a0a10;
  --intersect-border: #dc3545;
  --intersect-on-primary: #fff;
}

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

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

[data-bs-theme='dark'] .card-header.bg-danger {
  background-color: #3d0a15 !important;
  color: var(--intersect-primary) !important;
}

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