/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
:root {
  --dsm-bg: #ffffff;        /* fondo principal */
  --dsm-panel: #020617;    /* sidebar */
  --dsm-card: #020617;
  --dsm-border: #1e293b;
  --dsm-text: #e5e7eb;
  --dsm-muted: #94a3b8;
  --dsm-primary: #2563eb;  /* azul tech */
  --dsm-success: #22c55e;
  --dsm-warning: #f59e0b;
  --dsm-border:#1e293b;
  --dsm-bubble-in:#111827;
  --dsm-bubble-out:#2563eb;
}

body {
  background: var(--dsm-bg);
  color: var(--dsm-text);
}


/* ===== SETTINGS LAYOUT ===== */
.settings-container {
  max-width: 900px;
  margin: 0 auto;
}

/* ===== CARDS ===== */
.card {
  background: var(--dsm-card);
  border: 1px solid var(--dsm-border);
  border-radius: 14px;
  color: var(--dsm-text);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--dsm-border);
  color: var(--dsm-text);
}

.card-body {
  color: var(--dsm-text);
}

/* ===== FORM ===== */
.form-label {
  color: var(--dsm-muted);
  font-size: 13px;
}

.form-control {
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(148,163,184,.25);
  color: var(--dsm-text);
}

.form-control:focus {
  background: rgba(15,23,42,.95);
  border-color: rgba(37,99,235,.6);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.18);
  color: var(--dsm-text);
}

/* textarea igual que input */
textarea.form-control {
  resize: vertical;
}

/* ===== CHECKBOX ===== */
.form-check-input {
  background-color: #020617;
  border: 1px solid var(--dsm-border);
}

.form-check-input:checked {
  background-color: var(--dsm-primary);
  border-color: var(--dsm-primary);
}

.form-check-label {
  color: var(--dsm-muted);
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--dsm-primary);
  border: none;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-success {
  background: var(--dsm-success);
  border: none;
}

.btn-dark {
  background: #020617;
  border: 1px solid var(--dsm-border);
}

.btn-outline-secondary {
  border-color: var(--dsm-border);
  color: var(--dsm-muted);
}

.btn-outline-secondary:hover {
  background: rgba(148,163,184,.1);
  color: #fff;
}

/* ===== TEXT ===== */
.text-muted {
  color: var(--dsm-muted) !important;
}