:root {
  --spacing-base: 8px;
  --border: 2px; /* grosor del borde */
  --radius: 999px; /* redondeado (cámbialo si quieres esquinas) */
  --angle: 0deg; /* se anima en @keyframes */
  --txt: #ffffff; /* color del texto */
  --bs-dark-bg: #000;
  --bs-dark-bg-2: #0b0b0b;
  --bs-dark-border: #2a2a2a;
  --bs-dark-border-2: #3a3a3a;
  --bs-dark-text: #fff;
  --bs-dark-text-muted: #bdbdbd;
  --bs-dark-placeholder: #8a8a8a;
  --bs-dark-focus-ring: rgba(255, 255, 255, 0.25);
  --bs-dark-success: #19c37d;
  --bs-dark-danger: #ff5b5b;
  --bs-dark-warning: #ffc107;
  --bs-dark-info: #0dcaf0;
}

.form-label,
.col-form-label,
.form-floating>label {
  color: var(--bs-dark-text) !important;
}

/* texto de ayuda */
.form-text {
  color: var(--bs-dark-text-muted) !important;
}

/* -------- Inputs base -------- */
.form-control,
.form-select,
.form-control-plaintext {
  background-color: var(--bs-dark-bg) !important;
  color: var(--bs-dark-text) !important;
  border-color: var(--bs-dark-border) !important;
}

/* placeholder */
.form-control::placeholder {
  color: var(--bs-dark-placeholder) !important;
  opacity: 1;
}

/* hover */
.form-control:hover,
.form-select:hover {
  border-color: var(--bs-dark-border-2) !important;
}

/* focus (bootstrap usa box-shadow) */
.form-control:focus,
.form-select:focus {
  background-color: var(--bs-dark-bg) !important;
  color: var(--bs-dark-text) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 0.25rem var(--bs-dark-focus-ring) !important;
}

/* active (útil en algunos inputs tipo button-like) */
.form-control:active,
.form-select:active {
  background-color: var(--bs-dark-bg-2) !important;
  color: var(--bs-dark-text) !important;
}

/* disabled / readonly */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: #111 !important;
  color: #777 !important;
  border-color: #222 !important;
  opacity: 1;
  cursor: not-allowed;
}

/* -------- Input group -------- */
.input-group-text {
  background-color: var(--bs-dark-bg) !important;
  color: var(--bs-dark-text) !important;
  border-color: var(--bs-dark-border) !important;
}

/* si hay foco en un input dentro del group, resalta el addon */
.input-group:focus-within .input-group-text {
  border-color: #fff !important;
  color: #fff !important;
}

/* -------- Floating labels -------- */
.form-floating>.form-control,
.form-floating>.form-select {
  background-color: var(--bs-dark-bg) !important;
  color: var(--bs-dark-text) !important;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  color: var(--bs-dark-text-muted) !important;
}

/* -------- Checks / radios / switches -------- */
.form-check-label {
  color: var(--bs-dark-text) !important;
}

.form-check-input {
  background-color: var(--bs-dark-bg) !important;
  border-color: var(--bs-dark-border) !important;
}

.form-check-input:hover {
  border-color: var(--bs-dark-border-2) !important;
}

/* checked */
.form-check-input:checked {
  background-color: #fff !important;
  border-color: #fff !important;
}

/* focus ring */
.form-check-input:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 0.25rem var(--bs-dark-focus-ring) !important;
}

/* disabled */
.form-check-input:disabled {
  background-color: #111 !important;
  border-color: #222 !important;
}

.form-check-input:disabled~.form-check-label {
  color: #777 !important;
}

/* switch (Bootstrap usa background-image) */
.form-switch .form-check-input {
  background-color: #111 !important;
}

.form-switch .form-check-input:checked {
  background-color: #fff !important;
}

/* -------- Range -------- */
.form-range {
  background-color: transparent !important;
}

.form-range:focus {
  box-shadow: none !important;
}

/* Webkit thumb/track */
.form-range::-webkit-slider-runnable-track {
  background-color: #111;
  border: 1px solid var(--bs-dark-border);
}

.form-range::-webkit-slider-thumb {
  background-color: #fff;
  border: 1px solid #fff;
}

/* Firefox thumb/track */
.form-range::-moz-range-track {
  background-color: #111;
  border: 1px solid var(--bs-dark-border);
}

.form-range::-moz-range-thumb {
  background-color: #fff;
  border: 1px solid #fff;
}

/* -------- File input -------- */
.form-control[type="file"] {
  background-color: var(--bs-dark-bg) !important;
  color: var(--bs-dark-text) !important;
}

.form-control[type="file"]::file-selector-button {
  background-color: #111 !important;
  color: #fff !important;
  border-color: var(--bs-dark-border) !important;
}

.form-control[type="file"]:hover::file-selector-button {
  background-color: #1a1a1a !important;
}

/* -------- Validación -------- */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--bs-dark-success) !important;
  background-color: var(--bs-dark-bg) !important;
  color: var(--bs-dark-text) !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 195, 125, 0.25) !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--bs-dark-danger) !important;
  background-color: var(--bs-dark-bg) !important;
  color: var(--bs-dark-text) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 91, 91, 0.25) !important;
}

.valid-feedback,
.invalid-feedback {
  color: var(--bs-dark-text-muted) !important;
}

/* -------- Select options (depende del navegador) -------- */
select.form-select option {
  background: #000;
  color: #fff;
}

/* -------- Autofill (Chrome) -------- */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* -------- Fieldset/legend -------- */
legend {
  color: var(--bs-dark-text) !important;
}

/* -------- Pequenos extras útiles -------- */
/* inputs con color tipo date/time en algunos browsers */
.form-control::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
}

/* === intl-tel-input DARK por defecto === */

/* contenedor general */
.iti {
  color: #f8f9fa;
}

/* input */
.iti input.iti__tel-input,
.iti input.iti__input,
input[type="tel"].form-control {
  background-color: #212529;
  color: #f8f9fa;
  border-color: #495057;
}

.iti input.iti__tel-input::placeholder,
.iti input.iti__input::placeholder,
input[type="tel"].form-control::placeholder {
  color: #adb5bd;
}

/* bloque bandera + prefijo */
.iti__selected-flag {
  background-color: #212529 !important;
  border-right: 1px solid #495057;
}

/* dropdown lista de países */
.iti__country-list {
  background-color: #212529;
  border: 1px solid #495057;
  color: #f8f9fa;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* buscador del dropdown */
.iti__search-input {
  background-color: #1b1f22;
  color: #f8f9fa;
  border: 1px solid #495057;
}

/* hover / selección */
.iti__country:hover,
.iti__country.iti__highlight {
  background-color: #2b3035;
}

/* texto secundario del dial code */
.iti__dial-code {
  color: #adb5bd;
}

/* separadores */
.iti__divider {
  border-color: #495057;
}

.acordeon-header {
  background: black !important;
  color: white;
}

.accordion-button {
  background: none !important;
  color: white;
  border: none !important;
}

.accordion-button:focus {
  background: none !important;
  color: white;
  border: none !important;
}

.accordion-button::after {
  background: none !important;
  color: white;
  border: none !important;
}

.accordion-collapse {
  background-color: none !important;
  padding: 20px;
  border: none !important;
}

.accordion-body {
  background-color: none !important;
  padding: 0px !important;
  border: none !important;
}

.accordion {
  border: none !important;
  background-color: none !important;
}

.accordion-item {
  border: solid 1px rgba(128, 128, 128, 0.349);
  background: none;
  margin-bottom: 10px;
}