/* ============================================================
   centroid.css — Herramienta Centroide (bg-warning)
   ARQUITECTURA: ver ARQUITECTURA_CSS.md + GUIA_DARK_MODE_ARQUITECTURA.md
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------ */
:root {
  --centroid-primary: #ffc107;
  --centroid-primary-hover: #ffca2c;
  --centroid-surface: #fffcf0;
  --centroid-border: #ffe69c;
  --centroid-on-primary: #000;
}

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

.centroid-info {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------
   3. DARK MODE
   ------------------------------------------------------------ */
[data-bs-theme='dark'] {
  --centroid-primary: #ffd940;
  --centroid-primary-hover: #ffe066;
  --centroid-surface: #2a2010;
  --centroid-border: #ffc107;
  --centroid-on-primary: #000;
}

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

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

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