:root {
    --color-fondo: #f5f5f5;
    --color-amarillo: #F6D44D;
    --color-amarillo-claro: #FFE680;
    --color-negro: #000000;
    --color-gris: #D9E1E2;
    --color-gris2: #F3F3F3;
    --color-gris3: #242424;
    --color-gris4: #525252;
    --color-gris5: #787878;
    --color-blanco: #ffffff;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--color-negro) !important;
    background: var(--color-blanco) !important;
    font-weight: bold !important;

}

.main-header, .navbar, .navbar-expand, .navbar-white, .navbar-black {
    color: var(--color-negro) !important;
    background: var(--color-amarillo) !important;
    --bs-navbar-padding-y: 0px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;


}

.main-sidebar, .sidebar-dark-primary, .elevation-4 {
    color: var(--color-negro) !important;
    background: var(--color-amarillo) !important;
    padding: 0px 40px !important;

}

.nav-link.active {
    color: var(--color-negro) !important;
    background: var(--color-blanco) !important;
}

.nav-item a {
    color: var(--color-negro) !important;
    background: var(--color-amarillo) !important;
}

.nav-item a:hover {
    color: var(--color-negro) !important;
    background: var(--color-blanco) !important;
}

/*
.titulo3 .main-header{
    background-color: var(--color-negro) !important;
}
*/


.fixed-top {
    position: relative !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.logo {
    width: 360px;
    height: 75px;
    text-align: center;
}

.pie1 {
    background-color: var(--color-gris2) !important;
    padding: 10px;
}

.pie1 .heading-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px;
    font-weight: 600;
    -webkit-text-stroke-color: #000;
    stroke: #000;
    color: #000000;
    font-weight: 700 !important;
}

.pie1 .lista-sin-puntos {
    list-style-type: none;
    padding-left: 0;
}

.pie1 .lista-sin-puntos a {
    text-decoration: none;
    display: block;
    padding: 0 0 5px !important;
    margin: 5px 0 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    color: var(--color-gris3) !important;
    transition: color 0.3s !important;
    font-weight: 200 !important;
}

.pie1 .letra_conoce {
    color: var(--color-gris4) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
}

.pie2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    font-weight: 700 !important;
}


.etiqueta {
    font-family: 'Poppins', sans-serif; /* Ajustar según la tipografía detectada */
    font-weight: bold;
    font-size: 16px !important;
    color: var(--color-negro); /* Azul oscuro similar al de su sitio */
    font-size: 16px; /* Tamaño apropiado para un título */
    margin-bottom: 8px; /* Espacio con el siguiente campo */
    display: inline-block; /* Para que cada etiqueta esté en su propia línea */
    font-weight: 500;
    line-height: inherit;
    margin-bottom: 0;
}
/*****************************************************************/
.campoExpe {
    background-color: var(--color-blanco); /* Color de fondo inicial */
    border-radius: 10px; /* Bordes redondeados */
    font-size: 1.2rem; /* Texto más grande */
    padding: 15px 20px; /* Espacio interno */
    border: 2px solid var(--color-gris4); /* Borde de color azul */
    transition: background-color 0.3s ease; /* Transición suave */
    color: var(--color-negro);
    text-align: center;
    font-weight: bold; /* Negritas para el placeholder */
}

.campoExpe::placeholder {
    color: var(--color-gris5);
    opacity: 1; /* Asegura que se muestre completamente blanco */
}

.campoExpe:focus::placeholder {
    color: var(--color-negro);
}

.campoExpe:focus {
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    outline: none; /* Opcional: quita el borde azul por defecto */
}

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


.campoCaptura {
    background-color: var(--color-blanco); /* Color de fondo inicial */
    border-radius: 10px; /* Bordes redondeados */
    font-size: 1.2rem; /* Texto más grande */
    padding: 5px 10px; /* Espacio interno */
    border: 2px solid var(--color-gris4); /* Borde de color azul */
    transition: background-color 0.3s ease; /* Transición suave */
    color: var(--color-negro);
    text-align: center;
    font-weight: bold; /* Negritas para el placeholder */
}

.campoCaptura::placeholder {
    color: var(--color-gris5);
    opacity: 1; /* Asegura que se muestre completamente blanco */
}

.campoCaptura:focus::placeholder {
    color: var(--color-negro);
}

.campoCaptura:focus {
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    outline: none; /* Opcional: quita el borde azul por defecto */
}


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

.campoCaptura2 {
    background-color: var(--color-gris); /* Color de fondo inicial */
    border-radius: 10px; /* Bordes redondeados */
    font-size: 1.2rem; /* Texto más grande */
    padding: 5px 10px; /* Espacio interno */
    border: 2px solid var(--color-gris4); /* Borde de color azul */
    transition: background-color 0.3s ease; /* Transición suave */
    color: var(--color-negro);
    text-align: center;
    font-weight: bold; /* Negritas para el placeholder */
}

.campoCaptura2::placeholder {
    color: var(--color-gris5);
    opacity: 1; /* Asegura que se muestre completamente blanco */
}

.campoCaptura2:focus::placeholder {
    color: var(--color-negro);
}

.campoCaptura2:focus {
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    outline: none; /* Opcional: quita el borde azul por defecto */
}







/* Estilos personalizados para el botón */
.botones {
    background-color: var(--color-amarillo); /* Color de fondo amarillo */
    color: var(--color-negro); /* Color del texto */
    font-family: 'Poppins', sans-serif; /* Tipografía Poppins */
    font-size: 1.2rem; /* Tamaño de fuente grande */
    padding: 15px 30px; /* Relleno interno grande */
    border-radius: 10px; /* Bordes redondeados */
    border: none; /* Eliminar el borde */
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    font-weight: bold; /* Negritas */
    margin-top: 10px; /* Espacio superior */
    margin-bottom: 10px; /* Espacio inferior */
    display: inline-block; /* Para mantener dimensiones adecuadas */
    text-align: center; /* Centrar texto */
    text-decoration: none; /* Sin subrayado si es un enlace */
    cursor: pointer; /* Cursor de puntero */
}

/* Cambiar el fondo cuando el mouse está sobre el botón - CORREGIDO */
.botones:hover, .botones:focus {
    border: 1px solid transparent; /* Borde transparente */
    background-color: var(--color-amarillo-claro); /* Cambiar a un amarillo más oscuro */
    color: var(--color-negro); /* Mantener texto negro */
    font-weight: bold; /* Mantener negritas */
    transform: translateY(-2px); /* Levantar ligeramente el botón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil al hacer hover */
}

/* Efecto al hacer clic (opcional) */
.botones:active {
    transform: translateY(0); /* Volver a posición original */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra más pequeña */
}

.custom-input-lectura {
    background-color: var(--color-gris); /* Color de fondo inicial */
    border-radius: 10px;       /* Bordes redondeados */
    font-size: 1.2rem;         /* Texto más grande */
    padding: 15px 20px;        /* Espacio interno */
    border: 2px solid var(--color-gris); /* Borde de color azul */
    transition: background-color 0.3s ease; /* Transición suave */
    color: var(--color-negro);
    text-align: center;
    font-weight: bold;  /* Negritas para el placeholder */
}

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

.custom_select_captura {
    background-color: var(--color-blanco); /* Color de fondo inicial */
    border-radius: 10px;       /* Bordes redondeados */
    font-size: 1.2rem;         /* Texto más grande */
    padding: 5px 10px;        /* Espacio interno */
    border: 2px solid var(--color-gris4); /* Borde de color azul */
    color: var(--color-gris4);              /* Color del texto */
    transition: background-color 0.3s ease; /* Transición suave */
    appearance: none;          /* Eliminar la flecha por defecto */
    -webkit-appearance: none;  /* Soporte para Safari */
    -moz-appearance: none;     /* Soporte para Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Añadir flecha personalizada */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    font-weight: bold; /* Negritas para el placeholder */
}

/* Cambiar el fondo cuando el select está enfocado */
.custom_select_captura:focus {
    background-color: var(--color-amarillo); /* Color de fondo al hacer foco */
    outline: none;             /* Elimina el borde de enfoque predeterminado */
    color: var(--color-negro);              /* Cambiar color de texto al enfocarse */
}

/* Estilos para las opciones del select */
.custom_select_captura option {
    background-color: white;   /* Fondo de las opciones */
    color: black;              /* Color del texto de las opciones */
    font-weight: bold;         /* Negritas para las opciones */
}

/************************************************************************/
.custom-select-2 {
    background-color: var(--color-gris); /* Color de fondo inicial */
    border-radius: 10px;       /* Bordes redondeados */
    font-size: 1.2rem;         /* Texto más grande */
    padding: 5px 10px;        /* Espacio interno */
    border: 2px solid var(--color-gris4); /* Borde de color azul */
    color: var(--color-gris4);              /* Color del texto */
    transition: background-color 0.3s ease; /* Transición suave */
    appearance: none;          /* Eliminar la flecha por defecto */
    -webkit-appearance: none;  /* Soporte para Safari */
    -moz-appearance: none;     /* Soporte para Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Añadir flecha personalizada */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    font-weight: bold; /* Negritas para el placeholder */
}

/* Cambiar el fondo cuando el select está enfocado */
.custom-select-2:focus {
    background-color: var(--color-amarillo); /* Color de fondo al hacer foco */
    outline: none;             /* Elimina el borde de enfoque predeterminado */
    color: var(--color-negro);              /* Cambiar color de texto al enfocarse */
}

/* Estilos para las opciones del select */
.custom-select-2 option {
    background-color: white;   /* Fondo de las opciones */
    color: black;              /* Color del texto de las opciones */
    font-weight: bold;         /* Negritas para las opciones */
}

.etiqueta_form{
	color: #dd4b39;
    font-weight: 900; /* Más grueso que "bold" (700) */
    margin-right: 5px; /* Espacio mínimo entre label y asterisco */
}





















.redes-sociales {
    display: flex;
    gap: 20px;
    align-items: center;
}

.icono-red-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-blanco);
    color: var(--color-negro);
    text-decoration: none;
    font-size: 28px;
    transition: all 0.3s ease;
    position: relative;
}


.icono-red-social.facebook:hover {
    background: var(--color-amarillo);
    color: var(--color-blanco);
    text-decoration: none;
}

.icono-red-social.instagram:hover {
    background: var(--color-amarillo);
    color: var(--color-blanco);
    text-decoration: none;
}

.icono-red-social.linkedin:hover {
    background: var(--color-amarillo);
    color: var(--color-blanco);
    text-decoration: none;
}
.icono-red-social.twitter:hover {
    background: var(--color-amarillo);
    color: var(--color-blanco);
    text-decoration: none;
}

/* Tooltip para iconos */
.icono-red-social::after {
    content: attr(data-red);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.icono-red-social:hover::after {
    opacity: 1;
}