/*=======================
 * Generales navegador *
 ========================*/

input:disabled {
  cursor: not-allowed;
}

.pagina-login {
  display: flex;
  flex-direction: column; /* Sidebar y contenido una al lado de otra */
  flex-wrap: wrap; /* No se pongan una bajo otra cuando no quepan. La sidebar quedaría rara */
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.polyfox {
  margin-top: -120px; /*Alinea el polyfox con la caja*/
  cursor: pointer;
}

 .contenedor-invisible {
   display: block;
   opacity: 0;
   width: 0%;
   height: 270px;
   transition: width 2s ease-in-out;
 }

 .contenedor-invisible #formulario-sesion {
   opacity: 0;
   display: none;
 }

 .contenedor-login-visible #formulario-sesion {
   opacity: 1;
   transition: opacity 1s 1.1s ease-in-out;
 }

 .contenedor-login-visible {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   text-align: center;
   width: 100%;
   max-width: 320px;
   height: 270px;
   transition: width 2s ease-in-out, padding 2s ease-in-out; /* El padding es para que el estilo .tarjeta no cause un salto*/
 }

 .contenedor-login-visible .campo input {
   display: inline-block;
   padding: 0.575rem 1.375rem;
   font-size: 1rem;
   color: #495057;
   background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid #f3f3f3;
   border-radius: 2px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

 .polyfox-login {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 .pathfinder-texto {
   padding-bottom: 12rem;
 }

 .enviar input {
   padding: 0.775rem 1.375rem;
   width: 100%;
 }


/* Afecta a los elementos dentro de otros */
 * {
 	margin: 0;
 	padding: 0;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
  font-family: Public Sans,sans-serif;
 }

 body {
  background-color: rgb(248, 247, 250, 1);
}

 ul {
 	list-style-type: none;
 }

 a {
 	color: rgb(15,103,240, 1);
 	text-decoration: none;
 }

 h1 {
  	color: #000;
  	font-size: 24px;
  	font-weight: 400;
  	text-align: center;
  }

 h1 a {
  	color: #c12c42;
  	font-size: 16px;
  }

table {
  width: 100%;
}

/*=======================
 * Cabecera *
 ========================*/

.contenedor-cabecera {
  z-index: 50; /* Que pise la tabla */
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  backdrop-filter: blur(6px);
  background-color: rgb(255, 255, 255,.9);
  position: sticky;
  top: 0; /*O el sticky no funcionará. Alguna tiene que no ser auto*/
}

.contenedor-barra {
  height: 64px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  border-block-end: 1px solid rgba(75, 70, 92, 0.12);
}

.contenedor-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 1440px;
  padding: 0 24px;
  text-align: right;
}

.contenedor-top .logo img {
  height: 56px;
  width: auto;
}

.iconos-top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contador_creditos {
  border: 1px solid #ff8f00;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  color: #4c4a50;
}

.profile-pic {
  border-radius: 50%; /* gives the image a circle shape */
  cursor: pointer;
  max-height: 38px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none; 
  position: absolute;
  background-color: #ffffff;
  min-width: 200px;
  margin-left: -162px;
  box-shadow: 0 4px 11px rgba(47, 43, 61,.16),0 0 transparent,0 0 transparent;
  padding: 8px;
  z-index: 100;
  text-align: initial;
  margin-top: 12px;
  border-radius: 5px;
}

.dropdown-content ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 4px;
}

.dropdown-content ul li {
  border-radius: 0.4rem;
  padding-block: 0.5rem;
  padding-inline: 0.7rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-content ul li:hover {
  background-color: #f8f8fa;
}

.dropdown-content ul li a {
  color: rgb(51,48,60, 0.68);
  letter-spacing: .15px;
}

.dropdown-content i {
  margin-inline-end: 0.625rem
}

.lightbox {
  display: none;
  position: absolute;
  right: 10px;
  top: 60px;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  padding: 10px;
  z-index: 100;
}

.lightbox input[type="text"],
.lightbox input[type="password"] {
  width: 100%;
  padding: 5px;
  margin: 5px 0;
}

.lightbox input[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

.lightbox input[type="submit"]:hover {
  background-color: #0056b3;
}


#lightbox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#top-lightbox {
  display: flex;
  width: 100%; /* Full width */
  justify-content: space-between;
  align-items: center;
}

#closeButton {
  padding: 0 1rem;
}

#bottom-lightbox {
  display: flex;
  width: 100%; /* Full width */
  justify-content: center;
}

#lightbox-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and bottom and centered */
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  padding: 20px;
}


.contenedor-nav {
  z-index: 50; /* Que pise la tabla */
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  border-block-end: 1px solid rgba(75, 70, 92, 0.12);
}

.menu-nav {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 1440px;
  padding: 0 24px;
}

.menu-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.menu-nav ul li {
  border-radius: 0.4rem;
  padding-block: 0.5rem;
  padding-inline: 0.7rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.menu-nav .activa {
  background: linear-gradient(72.47deg,rgb(115,103,240) 22.16%,rgba(115,103,240,.7) 76.47%);
}

.menu-nav i {
  margin-inline-end: 0.625rem
}

.menu-nav .activa a, .menu-nav .activa i {
  color: white;
}

.menu-nav ul li:hover {
  background-color: #f8f8fa;
}

.menu-nav ul li a {
  color: rgb(51,48,60, 0.68);
  letter-spacing: .15px;
}

/*=======================
 * Contenedores principales *
 ========================*/

 .contenedor-total {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap; /* No se pongan una bajo otra cuando no quepan. La sidebar quedaría rara */
     width: 100%; /*Total sin barras de scroll*/
 }

 .contenedor-cuerpo {
     display: flex;
     /*margin-left: 255px; /* Necesario para que no se meta debajo de la barra lateral al estar esta en fixed */
     flex-direction: column; /* Sidebar y contenido una al lado de otra */
     flex-wrap: wrap; /* No se pongan una bajo otra cuando no quepan. La sidebar quedaría rara */
 }

.contenedor-pagina {
    height: calc( 100% - 56px);
    padding: 24px;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 1440px;
}

/*=======================
 * Elementos recurrentes *
 ========================*/

.tarjeta {
  border-radius: 6px;
  box-shadow: 0 3px 9px 2px rgba(51,48,60, 0.03),0 9px 8px rgba(51,48,60, 0.02),0 1px 6px 4px rgba(51,48,60, 0.01);
  background-color: #fff;
  padding: 1.5rem 1.5rem;
}

.contenedor-columnas {
  display: flex;
  gap: 5rem;
}

.columna {
  flex: 1;
}

.fila-formulario {
  display: flex;
  height: auto;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 1rem 0;
  width: 100%;
}

/* Set a specific width to the first child of fila-formulario */
.fila-formulario > :first-child {
  flex: 0 0 200px; /* or whatever width you desire */
  padding-right: 1rem;
}

/* Let the second child take up the available space */
.fila-formulario > :nth-child(2) {
  flex: 1;
  display: flex; /* This is added to make sure select2 and other items within this div also expand */
}

/* The last child will take only as much space as it needs */
.fila-formulario > :last-child {
  flex: 0 0 auto;
}


/* The last child will take only as much space as it needs */
/* So, no need to specify any specific width for it */

.fila-formulario fieldset {
  border: none;
}

.fila-formulario .conjunto-inputs {
  width: 450px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: end;
  align-items: center;
  gap: 0.7rem;
}

/* Styles for the input elements inside fila-formulario */
.fila-formulario input[type="text"], 
.fila-formulario select, 
.select2-selection {
  max-width: 450px;
  width: 100%; /* Updated width property */
  border-radius: 5px;
  border: 1px solid #7f7e8552;
  padding-left: 1rem;
  min-height: 2.5rem;
}

.select2-container {
  width: 100%!important;
  height: auto;
}

.select2-search__field {
  width: 100%!important;
}

.select2-search {
  width: 100%!important;
}

input[type="text"], select, .select2-selection {
  max-width: 450px;
  width: -webkit-fill-available;
  border-radius: 5px;
  border: 1px solid #7f7e8552;
}

.select2-selection__placeholder {
  width: 100%;
}

.select2-container--open .select2-dropdown {
  box-sizing: border-box;
}

.select2-container--open .select2-dropdown .select2-results > .select2-results__options {
  max-width: 100%;
  overflow-x: hidden; /* to ensure it doesn't overflow horizontally */
}


.exclusor {
  display: flex;
  flex-wrap: nowrap;
  min-height: 2.5rem;
  justify-content: space-between;
  padding: 1rem;
}

.switch-wrapper {
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-right: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196F3; /* Default to blue */
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  content: "";
  position: absolute;
  height: 26px;
  width: 26px;
  left: 30px; /* Default to right side */
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:not(:checked) + .slider {
  background-color: #ccc;
}

input:not(:checked) + .slider:before {
  left: 4px; /* Move to left when unchecked */
}


label {
  font-size: 1rem;
  color: #7f7e85;
  font-weight: 400;
  letter-spacing: .0178571429em;
}

button, input[type="button"] {
  border-radius: 5px;
  margin-left: 0.7rem;
  height: 2.5rem;
  border: none;
  padding: 0 2rem;
  color: rgb(115,103,240);
  background-color: #eeecfd;
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .0892857143em;
  cursor: pointer;
}

button:hover, input[type="button"]:hover  {
  background-color: #eae7fd;
}

/*////////////////////////////////////////////////////////////*/

/* Tablas de datos */

.hideButton {
  display: none;
}

.supratabla {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1.5rem;
}

.contenedor-parametros {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  padding: 1.5rem 1.5rem;
  flex: 0 0 100%;
}

.contenedor-parametros input[type="text"] {
  display: inline-block;
  padding: 0.875rem 1.375rem;
  font-size: 1rem;
  color: #495057;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 2px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.contenedor-parametros td {
  text-align: center;
}

.contenedor-tabla {
  margin-top: 24px;
  padding: 1.5rem 1.5rem;
  flex: 0 0 100%;
  flex-grow: 1;
  /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);*/
}

.dataTables_length select {
  height: 2.5rem;
  border-radius: 5px;
  margin-left: 0.7rem;
  border: 1px solid #7f7e8552;
  padding-left: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}

.dt-buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.dt-button {
  border-radius: 5px;
  margin-left: 0.7rem;
  height: 2.5rem;
  border: none;
  padding: 0 2rem;
  color: rgb(115,103,240);
  background-color: #eeecfd;
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .0892857143em;
  cursor: pointer;
}

.dt-button:hover {
  background-color: #eae7fd;
}

.dt-button.disabled, button[type="submit"]:disabled, input[type="button"]:disabled {
  color: #a8a9ae;
  background-color: #f4f4f5;
  cursor: not-allowed;
}

div.dt-button-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 2001;
}

div.dt-button-collection {
  position: absolute;
  top: 0;
  left: 0;
  width: 245px;
  margin-left: 10px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: white;
  overflow: hidden;
  z-index: 2002;
  border-radius: 5px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.dt-button-collection .dt-button {
  background-color: white;
  text-transform: none;
  margin: 3px;
  width: 100%;
  text-align: left;
  padding: 0 0.5rem;
  color: #86848b;
}

.dt-button-collection .dt-button:hover  {
  background-color: #f8f8fa;
}

.dt-button-collection .dt-button.active  {
  background-color: #f8f8fa;
}

.dt-down-arrow {
  margin-left: 8px;
}

table.dataTable thead th, table.dataTable thead td {
  text-transform: uppercase;
  height: 24px;
  user-select: none;
  font-size: .75rem;
  border-bottom: none!important;
}

table.dataTable tr {
  height: 3.75rem;
  background-color: white!important; /* Sobreescribir el odd */
}

table.dataTable.display tbody tr > .sorting_1 {
  background-color: white!important;
}

table.dataTable.display tbody td {
  border-top: 1px solid #7f7e8533!important;
}

table.dataTable > tbody > tr > td.select-checkbox:before {
  width: 16px!important;
  height: 16px!important;
  margin-top: 3px!important;
  border: 1px solid #7f7e8573!important;
  z-index: 10;
}

/* Add a circular grey shadow behind the checkbox when hovered */
table.dataTable > tbody > tr > td.select-checkbox:hover::after {
  content: "";
  /* position: absolute; */
  top: 13px;
  transform: translateX(-45%);
  background-color: #f9f9fa;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  cursor: pointer;
  z-index: 5;
}

/* Add a circular grey shadow behind the checkbox when hovered */
table.dataTable > tbody > tr.selected > td.select-checkbox:hover::after {
  background-color: transparent;
  top: 24px!important;
  transform: translateX(-30%);
  width: none!important;
}

/* Add a circular grey shadow behind the checkbox when hovered */
table.dataTable > tbody > tr.selected > td.select-checkbox:hover::before {
  cursor: pointer;
}

table.dataTable > tbody > tr.selected > td.select-checkbox:after, table.dataTable > tbody > tr.selected > th.select-checkbox:after {
  margin-top: -9px!important;
  margin-left: -5px!important;
  text-shadow: none!important;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #7f7e8533!important;
}

a.paginate_button {
  border: none!important;
  border-radius: 0.5rem!important;
  background-color: #e8e8ea;
}

a.paginate_button.current {
  background: none!important;
  color: white!important;
  background-color: #7367f0!important;
}

/*Aviso en elementos desactivados */

.conjunto-inputs, .exclusor {
  position: relative;
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  white-space: nowrap;
}



/*Acordeón animado */

/*Código de Bootstrap traído aquí */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.pt-5 {
}

.accordion-wrapper {
  margin-bottom: 20px;
  /*border: 1px solid rgba(0, 0, 0, 0.125);*/
  border-radius: 6px;
  box-shadow: 0 3px 5px 2px rgba(51,48,60, 0.03),0 5px 3px rgba(51,48,60, 0.02),0 1px 4px 2px rgba(51,48,60, 0.01);
  background-color: #fff;
}

.acc-head {
  position: relative;
  border: 0;
  cursor: pointer;
  font-weight: 600;
}
.acc-head i {
  margin-right: 0.3rem;
}

.card {
  position: relative;
}

.p-3 {
  padding: 1rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.acc-body {
  display: none;
  padding: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}



.accordion-wrapper 
{
  position: relative;
  margin-bottom: .5rem;
}
.acc-head
{
  position: relative;
}
.acc-head::after
{
  content: '\276F';
  position: absolute;
  right: 16px;
  color: grey;
  transform: rotate(0deg);
  transition: .4s;
}
.acc-head.active::after
{
  content: '\276F';
  position: absolute;
  right: 16px;
  color: grey;
  transform: rotate(90deg);
  transition: .4s;
}
.acc-body
{
  padding: 1rem;
  display: none;
}

/* Listas */

#gestor-listas {
  display: flex;
  flex-wrap: nowrap;
  padding: 1.5rem;
}

#gestor-listas input[type="text"] {
  max-width: 420px;
  width: -webkit-fill-available;
  border-radius: 5px;
  margin-left: 0.7rem;
  border: 1px solid #7f7e8552;
  padding-left: 1rem;
  height: 2.5rem;
}

.tabla-listas {
  display: flex;
  flex-wrap: wrap;
  padding: 1.5rem;
  margin-top: 24px;
}

.tabla-listas table tr {
  height: 3.75rem;
  border-bottom: 1px solid #7f7e8533;
}

/* Footer */

footer {
  background-color: #fefeff;
  color: #333;
  padding: 20px 0;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  max-inline-size: 1440px;
  padding: 0 20px;
}

.footer-column {
  flex: 1;
  margin-right: 20px;
}

.footer-logo {
  max-width: 100%;
  height: auto;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li a {
  color: #333;
  text-decoration: none;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

.footer-column:nth-child(n+2) ul {
  text-align: right;
}
/* --- Badges (Pathfinder Score, vende-productos) y toasts --- */
.pf-badge{display:inline-block;min-width:2em;padding:2px 8px;border-radius:10px;font-weight:600;color:#fff;text-align:center;font-size:12px}
.pf-badge-red{background:#e53935}
.pf-badge-amber{background:#fb8c00}
.pf-badge-green{background:#43a047}
.pf-badge-gray{background:#9e9e9e}
.pf-toast{background:#333;color:#fff;padding:10px 16px;margin-top:8px;border-radius:6px;opacity:.95;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.3)}