@import url("https://rsms.me/inter/inter.css");
:root {
  --tblr-font-sans-serif: "Inter Var", --apple-system, BlinkMacSystemFont,
    San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  --color-background-light: #fff;
  --color-text-light: #000;
  --color-background-dark: #222;
  --color-text-dark: #fff;
  --primary-color: #435ebe;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --bs-accordion-btn-bg: #ffffff;
  --transition-speed: 0.3s;
}

body {
  font-feature-settings: "cv03", "cv04", "cv11";
  background-color: var(--color-background-light);
  color: var(--color-text-light);
  .navbar-brand-autodark {
    color: #000; /* Cambia esto al color que quieras para el tema claro */
  }
  .dropdown-item:hover {
    background-color: #add8e6; /* Cambia esto al color celeste que quieras para el fondo cuando el cursor del ratón está sobre los elementos en el tema claro */
    color: #000; /* Cambia esto al color que quieras para las letras cuando el cursor del ratón está sobre los elementos en el tema claro */
  }
}

body.dark {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
  navbar-brand,
  .navbar-brand-autodark {
    color: #fff; /* Cambia esto al color que quieras para el tema oscuro */
  }
  .dropdown-menu {
    background-color: --color-background-dark;
  }
  .nav-item .dropdown {
    background-color: --color-background-dark;
  }
}

body.dark .nav-item.dropdown,
body.dark .nav-item.dropdown .dropdown-menu,
body.dark .nav-item.dropdown .dropdown-menu a {
  background-color: --color-background-dark; /* Cambia esto al color que quieras para el fondo en el tema oscuro */
  color: --color-text-dark; /* Cambia esto al color que quieras para el tema oscuro */
}
body.dark
  .nav-item.dropdown
  .dropdown-menu.dropdown-menu-end.dropdown-menu-arrow.show {
  background-color: var(
    --color-background-dark
  ); /* Cambia esto al color que quieras para el fondo en el tema oscuro */
  color: var(
    --color-text-dark
  ); /* Cambia esto al color que quieras para las letras en el tema oscuro */
}

body.dark .dropdown-item {
  color: var(
    --color-text-dark
  ); /* Cambia esto al color que quieras para las letras en el tema oscuro */
}

body.dark .navbar-toggler {
  background-color: var(
    --color-background-dark
  ); /* Cambia esto al color que quieras para el fondo del botón en el tema oscuro */
  color: var(
    --color-text-dark
  ); /* Cambia esto al color que quieras para el botón en el tema oscuro */
  .dropdown-item:hover {
    color: #000; /* Cambia esto al color que quieras para las letras cuando el cursor del ratón está sobre los elementos */
  }
}

body.dark .nav-item .nav-link,
body.dark .nav-item .nav-link .nav-link-title .dropdown-menu-columns {
  color: #fff; /* Cambia esto al color que quieras para las letras en el tema oscuro */
}

body.dark .nav-item .nav-link .icon {
  stroke: #fff; /* Cambia esto al color que quieras para el icono en el tema oscuro */
}
body.dark
  .dropdown-menu.show
  .dropdown-menu-columns
  .dropdown-menu-column
  .dropdown-item {
  color: #fff; /* Cambia esto al color que quieras para las letras en el tema oscuro */
}

body.dark
  .dropdown-menu.show
  .dropdown-menu-columns
  .dropdown-menu-column
  .dropdown-item:hover {
  color: #000; /* Cambia esto al color que quieras para las letras cuando el cursor del ratón está sobre los elementos */
}

.sidebar-wrapper .menu .submenu .submenu-item a:hover {
  margin-left: 0.3rem;
  color: #435ebe;
}

.exploracion-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

.form-label {
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.form-check-inline {
  margin-right: 1.5rem;
}

.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-check-label {
  color: #495057;
}

.form-control {
  border-radius: 8px;
  border: 1px solid #ced4da;
  transition: all 0.3s ease;
  height: 45px;
  font-size: 0.95rem;
}

.form-control:focus {
  border-color: #435ebe;
  box-shadow: 0 0 0 0.25rem rgba(67, 94, 190, 0.25);
}

.form-select {
  height: 45px;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.form-select:focus {
  border-color: #435ebe;
  box-shadow: 0 0 0 0.25rem rgba(67, 94, 190, 0.25);
}

.form-select-lg {
  height: 3rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

/* Estilos para modales y formularios */
.modal-content {
  background-color: var(--color-background-light);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-xl {
  max-width: 90%;
}

.modal-body {
  padding: 1.5rem;
}

.accordion-item {
  border: 1px solid var(--tblr-border-color);
  margin-bottom: 1rem;
}

.accordion-button {
  background-color: var(--color-background-light);
  color: var(--color-text-light);
  padding: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.accordion-button:not(.collapsed) {
  background-color: #435ebe;
  color: #fff;
}

.accordion-button::after {
  transition: transform 0.3s ease;
}

.accordion-body {
  padding: 1.5rem;
  background-color: rgba(67, 94, 190, 0.03);
  border-radius: 0 0 8px 8px;
}

.accordion-body input,
.accordion-body select,
.accordion-body textarea {
  margin-bottom: 1rem;
}

.accordion-collapse {
  transition: all 0.35s ease-in-out;
}

.accordion-button i,
.accordion-button em {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

.accordion {
  margin-bottom: 1.5rem;
}

.accordion-fono {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Mejoras en los acordeones */
.accordion-fono {
  --accordion-border-radius: 1rem;
  --accordion-padding: 1.5rem;
  --accordion-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  border-radius: var(--accordion-border-radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: var(--accordion-transition);
}

.accordion-fono .accordion-button {
  padding: var(--accordion-padding);
  border-radius: var(--accordion-border-radius) var(--accordion-border-radius) 0
    0;
  background: linear-gradient(
    to right,
    var(--bs-accordion-btn-bg),
    rgba(67, 94, 190, 0.05)
  );
}

.accordion-fono .accordion-button:not(.collapsed) {
  background: linear-gradient(to right, var(--primary-color), #3a4f9c);
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(67, 94, 190, 0.1);
}

.accordion-fono .form-group {
  transition: var(--accordion-transition);
}

.accordion-fono .form-group:hover {
  transform: translateY(-2px);
}

.accordion-fono .form-select {
  border: 2px solid #e9ecef;
  transition: var(--accordion-transition);
}

.accordion-fono .form-select:hover {
  border-color: var(--primary-color);
}

.accordion-fono .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(67, 94, 190, 0.25);
}

.accordion-fono .form-label {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 0.75rem;
}

.accordion-fono .form-label i {
  font-size: 1rem;
  margin-right: 0.5rem;
}

/* Mejoras responsivas */
@media (max-width: 768px) {
  .accordion-fono {
    --accordion-padding: 1rem;
  }

  .accordion-fono .accordion-button {
    font-size: 0.9rem;
  }

  .accordion-fono .form-label {
    font-size: 0.8rem;
  }

  .accordion-fono .form-select {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accordion-fono .accordion-body {
  animation: fadeIn 0.3s ease-out;
}

.accordion-fono .accordion-button {
  padding: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background-color: var(--bs-accordion-btn-bg);
  transition: all var(--transition-speed) ease;
}

.accordion-fono .accordion-button:not(.collapsed) {
  background-color: var(--primary-color);
  color: #ffffff;
}

.accordion-fono .accordion-body {
  padding: 1.5rem;
  background-color: rgba(67, 94, 190, 0.02);
}

.tituloh6 {
  background-color: var(--tblr-card-bg);
  border: 1px solid var(--tblr-border-color);
  border-radius: 6px;
  padding: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Select2 ajustes */
.select2-dropdown {
  z-index: 10000;
}

.select2-container--open {
  pointer-events: auto !important;
}

/* Tema oscuro para modales */
body.dark .modal-content {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

body.dark .accordion-button {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

body.dark .accordion-button:not(.collapsed) {
  background-color: #3a4f9c;
  color: #fff;
}

body.dark .accordion-body {
  background-color: rgba(255, 255, 255, 0.03);
}

body.dark .tituloh6 {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark .form-control {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark .form-control:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.dark .form-label {
  color: #e9ecef;
}

/* Estilos para el nav sticky */
.header-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--color-background-light);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

body.dark .header-nav {
  background-color: var(--color-background-dark);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Ajuste para el contenido principal */
.main-content {
  margin-top: 1rem;
}

.row {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .exploracion-section {
    padding: 1rem;
  }

  .form-check-inline {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
  }

  .col {
    margin-bottom: 1rem;
  }

  .accordion-button {
    font-size: 1rem;
    padding: 0.75rem;
  }

  .accordion-body {
    padding: 1rem;
  }

  .accordion-fono .accordion-button {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .accordion-fono .accordion-body {
    padding: 1rem;
  }

  .form-select-lg {
    height: 2.75rem;
    padding: 0.4rem 0.75rem;
  }
}