/*###########################gama de colores de SUGAR-LOVE ###################################################################
 # color 1*/  .colore{
    color:#D4AF37;
    color:#B8860B;   
    color:#656564;
    color:#a6a5a6;
    color:#ffffff;
    color:#F5F5F5;

  
  } 
  /*-------------------------------botones---------------------*/
  
  .entrar {
    display: block;
    margin: auto;
    padding: 1% 39%;
    background-color: #D4AF37;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 100%x;
    height: 100%;
    font-size: 12px;
    border: 1px solid #ccc;
  }
  
  .entrar:hover {
    background-color: #B8860B;
  }
  
  
  
  @media only screen and (max-width: 600px) {
    .main-title {
      font-size: auto;/* Cambiar el tamaño del texto para dispositivos móviles */
    }
  }
  
  /*------------------------pie de pagina----------------*/
  /* Footer styles */
  footer {
    background-color: #656564;/* Dark background color */
  }
  
  footer .text-white {
    color: #ffffff !important; /* White text color */
  }
  
  footer a {
    color: #ffffff; /* White link color */
  }
  
  footer a:hover {
    color: #adb5bd; /* Lighter color on hover */
  }
  
  .custom-footer {
    padding-top: 20px;
  }
  
  .custom-footer hr {
    border-top-color: #6c757d; /* Dark gray border color */
  }
  
  .custom-footer p {
    font-size: 14px; /* Small font size */
    margin-bottom: 0; /* Remove bottom margin */
  }
  
  .custom-footer p i {
    margin-right: 5px; /* Space between icon and text */
  }
  /* Estilos para el texto del botón en dispositivos móviles */
  @media (max-width: 767px) {
    .btn-home-search span {
      font-size: 16px; /* Reducir el tamaño del texto en dispositivos móviles */
    }
    
    .btn-home-search i {
      font-size: 16px; /* Reducir el tamaño del icono en dispositivos móviles */
    }
  }
  
  /* Estilos para el botón modal en dispositivos móviles */
  @media (max-width: 767px) {
    .btmmodal {
      padding: 8px 16px; /* Reducir el espaciado interno del botón en dispositivos móviles */
    }
  }
  
  /* Estilos para el pie de página en dispositivos móviles */
  @media (max-width: 767px) {
    footer {
      padding: 20px 0; /* Reducir el espaciado interno del pie de página en dispositivos móviles */
    }
    
    .custom-footer p {
      font-size: 12px; /* Reducir el tamaño del texto en dispositivos móviles */
    }
  }
  
  
  /* Estilos específicos para dispositivos móviles */
  @media only screen and (max-width: 600px) {
    .btn-mobile-size {
      font-size: 12px; /* Tamaño de fuente más pequeño para móviles */
      padding: 6px 12px; /* Relleno más pequeño para móviles */
      height: 36px; /* Altura del botón en móviles */
      width: 50%; /* Ancho del botón en móviles */
    }
  }
        /* Estilos generales */
        .main-title {
            font-size: 2.5rem; /* Tamaño de fuente por defecto */
            position: center;
        }
        
        /* Estilos para pantallas pequeñas */
        @media (max-width: 576px) {
            .main-title {
                font-size: 1.75rem; /* Tamaño de fuente reducido para pantallas pequeñas */
            }
        }

        .input-wrapper {
            position:center;
            margin-bottom: 1rem;
            width: 100%;
           
        }
        
        .input-container {
            position: relative;   
            width: 100%;
        
        }
        
        .input-field {
            width: 100%;
            padding: 1.25rem 2.5rem 0.5rem 0.75rem; /* Adjust padding for space for label and button */
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            box-sizing: border-box; /* Ensure padding is included in the width */
        }
        
        .input-field:focus {
            color: #495057;
            background-color: #fff;
            border-color:  #B8860B;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(255, 103, 149, 0.25);
        }
        
        .input-label {
            position: absolute;
            top: 1rem; /* Position label within input */
            left: 0.75rem;
            pointer-events: none;
            font-size: 1rem;
            color: #6c757d;
            transition: all 0.2s ease-in-out;
            background-color: white; /* Background color to cover input text */
            padding: 0 0.25rem; /* Padding to adjust background color area */
        }
        
        .input-field:focus + .input-label,
        .input-field:not(:placeholder-shown) + .input-label {
            top: -0.75rem;
            left: 0.75rem;
            font-size: 0.75rem;
            color:#B8860B;
        }
        
        .toggle-password {
            position: absolute;
            top: 50%;
            right: 0.75rem;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            outline: none;
            display: flex;
            align-items: center;
        }
        
        .password-toggle-label {
            font-size: 0.75rem;
            color: #6c757d;
            display: none;
            position: absolute;
            bottom: 150%; /* Position above the icon */
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.75);
            color: white;
            padding: 0.25rem;
            border-radius: 0.25rem;
            white-space: nowrap;
            z-index: 1;
            transition: opacity 0.2s ease-in-out;
        }
        
        .toggle-password:hover .password-toggle-label {
            display: block;
        }
        
        .password-icon {
            width: 20px;
            height: 20px;
            fill: #D4AF37;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 576px) {
            .input-container {
                margin-top: 1rem; /* Adjust margin for smaller screens */
                width:100%; /* Ensure full width on small screens */
               /* left: -80px; /* Mueve el elemento 20px hacia la izquierda */
        
            }
        
            .input-field {
                padding: 1rem 2rem 0.5rem 0.75rem; /* Adjust padding for smaller screens */
                font-size: 1rem; /* Maintain font size for better readability */
                width: 100%; /* Ensure full width on small screens */
               
            }
        
            .input-label {
                top: 0.875rem; /* Adjust label position */
                left: 0.75rem; /* Adjust label position */
                font-size: 1rem; /* Maintain label font size */
            }
        
            .input-field:focus + .input-label,
            .input-field:not(:placeholder-shown) + .input-label {
                top: -0.625rem; /* Adjust label position on focus */
                left: 0.75rem; /* Adjust label position on focus */
                font-size: 0.875rem; /* Adjust font size on focus */
            }
        
            .toggle-password {
                right: 0.75rem; /* Adjust button position */
            }
        
            .password-icon {
                width: 18px; /* Slightly smaller icon size */
                height: 18px;
            }
    
          }
          .input-field:focus {
            color: #495057;
            background-color: #fff;
            border-color:  #B8860B;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(100, 149, 237, 0.25);


        }