/* =========================================================
   Versión: 1.3.0
   Cambios:
   - He centralizado la paleta en 6 variables de marca para alinear el
     formulario 1:1 con los colores reales del sitio techdinecom.net.
   - TODO: reemplacé dorados/negros previos por variables de marca.
   - Solo tenés que editar las 6 variables de abajo con tus HEX reales.
   ========================================================= */

/* ========== PALETA DE MARCA: EDITAR SOLO ESTAS 6 VARIABLES ========== */
:root {
  --tdc-primary: #2f6eff;
  /* TODO: color primario de tu web */
  --tdc-secondary: #00c2a8;
  /* TODO: color secundario/acento */
  --tdc-bg: #ffffff;
  /* TODO: fondo principal (modo claro) */
  --tdc-text: #111827;
  /* TODO: texto principal (modo claro) */
  --tdc-bg-dark: #0f1115;
  /* TODO: fondo principal (modo oscuro) */
  --tdc-text-dark: #e5e7eb;
  /* TODO: texto principal (modo oscuro) */
}

/* Derivados (no tocar): mezclas/variantes a partir de la paleta */
:root {
  --tdc-border: color-mix(in srgb, var(--tdc-text) 10%, var(--tdc-bg));
  --tdc-surface: color-mix(in srgb, var(--tdc-bg) 96%, #000);
  --tdc-surface-2: color-mix(in srgb, var(--tdc-bg) 92%, #000);
  --tdc-primary-weak: color-mix(in srgb, var(--tdc-primary) 15%, #fff);
  --tdc-primary-strong: color-mix(in srgb, var(--tdc-primary) 90%, #000);
  --tdc-secondary-weak: color-mix(in srgb, var(--tdc-secondary) 15%, #fff);
  --tdc-secondary-strong: color-mix(in srgb, var(--tdc-secondary) 90%, #000);
}

html[data-theme="dark"] {
  --tdc-border: color-mix(in srgb, var(--tdc-text-dark) 10%, var(--tdc-bg-dark));
  --tdc-surface: color-mix(in srgb, var(--tdc-bg-dark) 96%, #fff);
  --tdc-surface-2: color-mix(in srgb, var(--tdc-bg-dark) 92%, #fff);
  --tdc-primary-weak: color-mix(in srgb, var(--tdc-primary) 25%, #000);
  --tdc-primary-strong: color-mix(in srgb, var(--tdc-primary) 80%, #000);
  --tdc-secondary-weak: color-mix(in srgb, var(--tdc-secondary) 25%, #000);
  --tdc-secondary-strong: color-mix(in srgb, var(--tdc-secondary) 80%, #000);
}

/* ========== Mapeo a variables Bootstrap (LIGHT) ========== */
:root,
[data-theme="light"] {
  --bs-body-bg: var(--tdc-bg);
  --bs-body-color: var(--tdc-text);
  --bs-border-color: var(--tdc-border);
  --bs-tertiary-bg: var(--tdc-surface);
  --bs-card-bg: var(--tdc-surface);
  --bs-card-border-color: var(--tdc-border);

  --bs-primary: var(--tdc-primary);
  --bs-primary-rgb: 47, 110, 255;
  /* no crítico, solo para sombras; opcional actualizar */

  --bs-secondary: var(--tdc-secondary);
  --bs-secondary-rgb: 0, 194, 168;

  --bs-info: color-mix(in srgb, var(--tdc-primary) 65%, #00bfff);
  --bs-success: #22c55e;
  --bs-warning: #f59e0b;
  --bs-danger: #ef4444;

  --bs-primary-text-emphasis: var(--tdc-primary-strong);
  --bs-primary-bg-subtle: var(--tdc-primary-weak);
  --bs-primary-border-subtle: color-mix(in srgb, var(--tdc-primary) 40%, #fff);
}

/* ========== Mapeo a variables Bootstrap (DARK) ========== */
[data-theme="dark"] {
  --bs-body-bg: var(--tdc-bg-dark);
  --bs-body-color: var(--tdc-text-dark);
  --bs-border-color: var(--tdc-border);
  --bs-tertiary-bg: var(--tdc-surface);
  --bs-card-bg: var(--tdc-surface);
  --bs-card-border-color: var(--tdc-border);

  --bs-primary: var(--tdc-primary);
  --bs-secondary: var(--tdc-secondary);

  --bs-info: color-mix(in srgb, var(--tdc-primary) 75%, #24b3ff);
  --bs-success: #34d399;
  --bs-warning: #ffd166;
  --bs-danger: #f87171;

  --bs-primary-text-emphasis: var(--tdc-primary);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--tdc-primary) 15%, var(--tdc-bg-dark));
  --bs-primary-border-subtle: color-mix(in srgb, var(--tdc-primary) 40%, var(--tdc-bg-dark));
}

/* ========== Transiciones sutiles ========== */
body,
.card,
.navbar,
.app-sidebar,
.app-footer,
.input-group-text,
.bg-body-tertiary {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ========== Layout (header/sidebar/footer) ========== */
.app-header.navbar {
  background: var(--bs-tertiary-bg) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.app-sidebar {
  background: var(--bs-tertiary-bg) !important;
}

.app-footer {
  background: var(--bs-tertiary-bg) !important;
  border-top: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color);
}

/* ========== Cards / Modals ========== */
.card {
  background: var(--bs-card-bg) !important;
  border-color: var(--bs-card-border-color) !important;
}

.card-header {
  background: var(--bs-tertiary-bg) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.card-footer {
  background: var(--bs-tertiary-bg) !important;
  border-top: 1px solid var(--bs-border-color) !important;
}

/* ========== Formularios / Input groups ========== */
.form-control,
.form-select {
  background: color-mix(in srgb, var(--bs-body-bg) 98%, #000);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.form-control:focus,
.form-select:focus {
  border-color: color-mix(in srgb, var(--tdc-primary) 45%, var(--bs-border-color));
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tdc-primary) 20%, transparent);
}

.input-group-text {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* feedback valid/invalid */
:root {
  --ga-valid: #22c55e;
  --ga-invalid: #ef4444;
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--ga-valid) !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--ga-invalid) !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ga-valid) 25%, transparent) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ga-invalid) 25%, transparent) !important;
}

.input-group:has(.form-control.is-valid),
.input-group:has(.form-select.is-valid) .input-group-text {
  color: var(--ga-valid);
  border-color: var(--ga-valid) !important;
}

.input-group:has(.form-control.is-invalid),
.input-group:has(.form-select.is-invalid) .input-group-text {
  color: var(--ga-invalid);
  border-color: var(--ga-invalid) !important;
}

/* ========== Botones (usan primario/secundario reales) ========== */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, #000);
  color: color-mix(in srgb, #000 85%, #fff);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 88%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 78%, #000);
  color: color-mix(in srgb, #000 75%, #fff);
}

/* ========== Enlaces / Badges / Pagination ========== */
a {
  color: var(--bs-primary);
}

a:hover {
  color: color-mix(in srgb, var(--bs-primary) 80%, #000);
}

.badge.bg-primary {
  background: var(--bs-primary) !important;
}

.badge.bg-secondary {
  background: var(--bs-secondary) !important;
}

.page-item.active .page-link,
.list-group-item.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: color-mix(in srgb, #000 85%, #fff) !important;
}

/* ========== SweetAlert2 tint ========== */
.swal2-styled.swal2-confirm {
  background-color: var(--bs-primary) !important;
}

.swal2-styled.swal2-cancel {
  background-color: var(--bs-secondary) !important;
}

/* ========== Utilitarios ========== */
.bg-brand {
  background: var(--bs-primary) !important;
  color: color-mix(in srgb, #000 85%, #fff) !important;
}

.text-brand {
  color: var(--bs-primary) !important;
}

.border-brand {
  border-color: var(--bs-primary) !important;
}

.bg-accent {
  background: var(--bs-secondary) !important;
  color: color-mix(in srgb, #000 75%, #fff) !important;
}

.text-accent {
  color: var(--bs-secondary) !important;
}

.border-accent {
  border-color: var(--bs-secondary) !important;
}