/* ============================================================
   DMS Converter — estilos específicos de la herramienta
   Variables: --dms-converter-primary (info / cyan)
   ============================================================ */

:root {
  --dms-converter-primary: #0dcaf0;
  --dms-converter-primary-dark: #0ba4c6;
  --dms-converter-glow: rgba(13, 202, 240, 0.25);
}

[data-bs-theme='dark'] {
  --dms-converter-primary: #20d9f3;
  --dms-converter-primary-dark: #0dcaf0;
  --dms-converter-glow: rgba(32, 217, 243, 0.2);
}

/* ── Hero ─────────────────────────────────────────────────── */
.dms-hero {
  background: linear-gradient(135deg, var(--dms-converter-primary) 0%, #0891b2 100%);
}

/* ── Mode tabs ────────────────────────────────────────────── */
.dms-mode-tabs .btn {
  border-radius: var(--radius-md, 0.5rem);
  transition: all 0.2s ease;
}

.dms-mode-tabs .btn.active {
  box-shadow: 0 2px 12px var(--dms-converter-glow);
}

/* ── Result boxes ─────────────────────────────────────────── */
.dms-input-box {
  background: var(--color-surface-variant, #f8f9fa);
  border: 1px solid var(--color-outline-variant, #dee2e6);
}

.dms-output-box {
  background: rgba(13, 202, 240, 0.08);
  border: 1px solid var(--dms-converter-primary);
}

[data-bs-theme='dark'] .dms-output-box {
  background: rgba(32, 217, 243, 0.1);
}

/* ── Button primary override ──────────────────────────────── */
.btn-tool-primary {
  background: var(--dms-converter-primary);
  border-color: var(--dms-converter-primary);
  color: #fff;
}

.btn-tool-primary:hover,
.btn-tool-primary:focus {
  background: var(--dms-converter-primary-dark);
  border-color: var(--dms-converter-primary-dark);
  box-shadow: 0 0 0 0.25rem var(--dms-converter-glow);
}

/* ── Dark mode table ──────────────────────────────────────── */
[data-bs-theme='dark'] .dms-input-box {
  background: var(--color-surface-variant, #2a2d2f);
  border-color: var(--color-outline-variant, #495057);
}

[data-bs-theme='dark'] .table-info th {
  color: var(--bs-dark);
}