/* === Tipo de cálculo === */

/* Alineación vertical de íconos + texto */
.form-check-label i {
  width: 1.2em;
  text-align: center;
  color: #495057; /* gris Bootstrap */
}

/* Mayor espaciado entre radios para legibilidad */
.form-check {
  padding: 0.6rem 0.2rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

/* Hover sutil sobre opción */
.form-check:hover {
  background-color: #f8f9fa; /* gris claro Bootstrap */
}

/* Opción seleccionada resaltada visualmente */
.form-check-input:checked ~ .form-check-label {
  font-weight: 600;
  color: #0d6efd; /* azul Bootstrap primario */
}

.form-check-input:checked ~ .form-check-label i {
  color: #0d6efd;
}

/* Subtítulo pequeño en gris */
.form-check-label small {
  font-size: 0.85rem;
  color: #6c757d; /* gris medio */
}

/* Tooltip personalizado */
[data-bs-toggle="tooltip"] {
  cursor: help;
}

body.theme-light {
    background-image: url("/static/core/img/light/Fondo_light.980a66aa1f26.png");  
}

body.theme-dark {
    background-image: url("/static/core/img/dark/Fondo_dark.c904484e8edd.png"); 
}

.ContenidoPrincipal {
  margin: 0 auto;
  padding: 0 1rem; /* Espacio lateral base */
}

@media (min-width: 768px) {
  .ContenidoPrincipal {
    max-width: 1200px;
    padding: 0 2rem; /* Más espacio en desktop */
  }
}

.recuadro-semifondo {
  background-color: rgba(255, 255, 255, 0.75); /* semi transparente en modo claro */
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(3px); /* opcional pero queda fino */
  /* max-width: 600px; */
  margin: 2rem auto;
  z-index: 1; /* bien atrás */
  position: relative;
}

/* Tema claro */
.recuadro-semifondo.light {
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Tema oscuro */
.recuadro-semifondo.dark {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* === Base visual para radios === */
.form-check {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
}

/* === Hover según tema === */
body[data-bs-theme="light"] .form-check:hover {
  background-color: rgba(0, 0, 0, 0.05); /* gris suave */
  border-color: rgba(0, 0, 0, 0.2);
}

body[data-bs-theme="dark"] .form-check:hover {
  background-color: rgba(255, 255, 255, 0.1); /* blanco semi */
  border-color: rgba(255, 255, 255, 0.3);
}

/* === Opción seleccionada === */
.form-check-input:checked ~ .form-check-label {
  font-weight: 600; /* negrita */
}

body[data-bs-theme="light"] .form-check-input:checked ~ .form-check-label {
  background-color: #f0f4ff;
  border-radius: 0.5rem;
  border: 1px solid #0d6efd;
}

body[data-bs-theme="dark"] .form-check-input:checked ~ .form-check-label {
  background-color: rgba(0, 123, 255, 0.2);
  border-radius: 0.5rem;
  border: 1px solid rgba(0,123,255,0.4);
}

/* === Ícono con color reactivo */
.form-check-label i {
  width: 1.5rem;
  text-align: center;
  margin-right: 0.5rem;
  color: inherit;
}

.modal {
  z-index: 1100 !important;
}
.modal-backdrop {
  z-index: 1000 !important;
}

.tabla-scroll {
  overflow-x: auto;
  display: block;
  width: 100%;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .label-alineado {
    min-height: 3rem; /* o el valor que mejor se adapte a tus labels */
    display: flex;
    align-items: center;
  }

  #bloqueDimensiones {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  #bloqueDimensiones > div {
    flex: 1;
    min-width: 0;
  }
}

/* Override del ícono responsive de DataTables para coherencia visual */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
  border-left: 14px solid #00bfff !important;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 0px solid transparent;
  content: "";
  display: inline-block;
  box-sizing: border-box;
  margin-right: 0.5em;
}

#dropdownUserDesktop::after {
    display: none;
}
/* ── Navbar: indicador de sección activa ─────────────────────────────────── */

/* Transición suave en hover para todos los nav-links */
.navbar .nav-link {
  position: relative;
  padding-bottom: 0.35rem;
  transition: color 0.2s ease;
}

/* Línea inferior animada — base invisible en todos los links */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: width 0.25s ease;
}

/* Hover: la línea crece desde el centro */
.navbar .nav-link:hover::after {
  width: 60%;
}

/* Activo: línea completa + texto más brillante */
.navbar .nav-link.nav-active::after {
  width: 80%;
}

/* Colores según tema */
body[data-bs-theme="light"] .navbar .nav-link::after,
body[data-bs-theme="light"] .navbar .nav-link.nav-active::after {
  background-color: #B1DE43;
}

body[data-bs-theme="light"] .navbar .nav-link.nav-active {
  color: #2a2a2a !important;
  font-weight: 600;
}

body[data-bs-theme="dark"] .navbar .nav-link::after,
body[data-bs-theme="dark"] .navbar .nav-link.nav-active::after {
  background-color: #B1DE43; /* el verde lima resalta bien sobre oscuro también */
}

body[data-bs-theme="dark"] .navbar .nav-link.nav-active {
  color: #ffffff !important;
  font-weight: 600;
}
/* ── Select2 adaptado al tema (claro/oscuro) ──────────────────────────────
   El CSS del CDN de Select2 fija fondo blanco y no conoce data-bs-theme.
   Estos overrides lo alinean con las variables de Bootstrap para que funcione
   en ambos temas. Se usa !important en los puntos clave porque el CSS del CDN
   se carga después de este archivo. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--bs-body-color) transparent transparent transparent;
}
.select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.select2-container--default .select2-results__option {
  color: var(--bs-body-color);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
.select2-search--dropdown .select2-search__field {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color) !important;
}