/*
    Estilo principal
*/
/* 
    Created on : 6/09/2023, 09:27:34 AM
    Author     : Carlos
*/
.boton_control {
    width: fit-content;
    float: right;
    display: block;
}

.boton_accion {
    margin: .2em;
}

.page-item.active .page-link {
    pointer-events: none !important;
}

#result {
    z-index: 100;
}

/*
 * Custom CSS for a larger Bootstrap 4 switch
 */
.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem; /* Increase padding to make space for the larger switch */
    padding-bottom: 1.5rem; /* Vertically center the text */
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 1.5rem; /* Taller track */
    width: 2.75rem; /* Wider track */
    border-radius: 1.5rem; /* Keep it rounded */
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    width: calc(1.5rem - 4px);  /* Taller and wider thumb */
    height: calc(1.5rem - 4px); /* Taller and wider thumb */
    border-radius: 1.5rem; /* Keep it rounded */
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    /* Move the thumb further to the right when checked */
    transform: translateX(1.25rem);
}

/*
    *END Custom CSS for a larger Bootstrap 4 switch
    -----
    * Custom CSS to move the Bootstrap switch to the right of the label
 */

.custom-switch.switch-right{
       padding-left: 0rem;
 
}

.custom-switch.switch-right .custom-control-label {
    /* Remove the default left padding */
    padding-left: 0rem;
    /* Add padding to the right to make space for the switch */
    padding-right: 4.25rem; 
}

.custom-switch.switch-right .custom-control-label::before {
    /* Remove the default left positioning */
    left: auto;
    /* Position the switch track on the right */
    right: 0;
}

.custom-switch.switch-right .custom-control-label::after {
    /* Remove the default left positioning */
    left: auto;
    /* Position the switch thumb on the right */
    right: 1.3rem; /* Adjust to align thumb inside the track */
}

.custom-switch.switch-right .custom-control-input:checked ~ .custom-control-label::after {
    /* Keep the default transform to slide the thumb */
    transform: translateX(0.1rem);
    /* But change its base position to the right side */
    right: 0.25rem;
}

/*
 * FIN Custom CSS to move the Bootstrap switch to the right of the label
 */


.capitalize-first::first-letter {
  text-transform: uppercase;
}

/* Selecciona cualquier etiqueta 'label' que tenga la clase 'required' y añade un asterisco rojo después */
label:has(+ input[required])::after,
label:has(+ textarea[required])::after,
label:has(+ select[required])::after {
    content: " *";
    color: red;
}


/* --- CSS Base (igual que antes) --- */
.wrapper { display: flex; justify-content: space-between; width: 100%;}

.contenedor-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  margin: 0 10px; /* Margen para espaciar los iconos */
}

.icono-ayuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #555;
  color: white;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 14px;
}

/* --- ESTILO POR DEFECTO: TOOLTIP ARRIBA --- */
.contenedor-tooltip .texto-tooltip {
  visibility: hidden; opacity: 0;
  width: 220px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  transition: opacity 0.3s;

  /* Posición por defecto: arriba y centrado */
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
}

/* Flecha por defecto: apuntando hacia abajo */
.contenedor-tooltip .texto-tooltip::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;

  /* Flecha por defecto: abajo y centrada, apuntando arriba */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: #333 transparent transparent transparent;
}


/* --- ¡NUEVAS REGLAS DE POSICIONAMIENTO LATERAL! --- */

/* Clase para cuando el tooltip debe ir A LA DERECHA del icono */
.contenedor-tooltip.tooltip-place-right .texto-tooltip {
  /* Centrado verticalmente al lado del icono */
  top: 50%;
  transform: translateY(-50%); /* Clave para el centrado vertical */
  
  /* Lo movemos a la derecha del icono */
  left: 140%; /* Un poco más del 100% para dar espacio */
  bottom: auto; /* Anulamos la posición 'bottom' */
}
.contenedor-tooltip.tooltip-place-right .texto-tooltip::after {
  /* Centramos la flecha verticalmente */
  top: 50%;
  transform: translateY(-50%);

  /* La ponemos a la izquierda del tooltip, apuntando a la izquierda */
  right: 100%; /* La pega al borde izquierdo del tooltip */
  left: auto; /* Anulamos 'left' */
  border-color: transparent #333 transparent transparent; /* La flecha apunta a la izquierda */
}


/* Clase para cuando el tooltip debe ir A LA IZQUIERDA del icono */
.contenedor-tooltip.tooltip-place-left .texto-tooltip {
  /* Centrado verticalmente al lado del icono */
  top: 50%;
  transform: translateY(-50%);
  
  /* Lo movemos a la izquierda del icono */
  right: 140%;
  left: auto; /* Anulamos 'left' */
  bottom: auto; /* Anulamos 'bottom' */
}
.contenedor-tooltip.tooltip-place-left .texto-tooltip::after {
  /* Centramos la flecha verticalmente */
  top: 50%;
  transform: translateY(-50%);

  /* La ponemos a la derecha del tooltip, apuntando a la derecha */
  left: 100%;
  right: auto;
  border-color: transparent transparent transparent #333; /* La flecha apunta a la derecha */
}


/* Regla para mostrar el tooltip (igual que antes) */
.contenedor-tooltip:hover .texto-tooltip {
  visibility: visible;
  opacity: 1;
}