.favorites-container, .featured-container, .section-container {
    padding: 20px;
    margin-bottom: 20px;
}

body {
    background-image: linear-gradient(to top, #d299c2 0%, #fae292 100%) !important;
    background-size: cover; /* Hace que el gradiente cubra todo el fondo */
    background-repeat: no-repeat; /* Evita que el gradiente se repita */
    background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */
}

.navbar{
    background-color: transparent !important;
}
/* From Uiverse.io by Praashoo7 */ 
.input {
    border: none;
    outline: none;
    border-radius: 15px !important;
    padding: 1em;
    background-color: #ccc;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
    transition: 300ms ease-in-out;
}
  
.input:focus {
    background-color: white;
    transform: scale(1.03);
    box-shadow: 13px 13px 100px #969696,
            -13px -13px 100px #ffffff;
}

#search-btn{
    border: none;
    outline: none;
    border-radius: 15px !important;
    padding: 1em;
    background-color: #ccc;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
}

.card-buscador {
    border-radius: 20px;
    background: #f5f5f5;
    position: relative;
    padding: 1.8rem;
    border: 2px solid #c3c6ce;
    transition: 0.5s ease-out;
    overflow: visible;
    z-index: 1;
}
   
.card-buscador-details {
    color: black;
    height: 100%;
    gap: .5em;
    display: grid;
    place-content: center;
}
   
.card-buscador-button {
    transform: translate(-50%, 125%);
    width: 60%;
    border-radius: 1rem;
    border: none;
    background-color: #f72585;
    color: #fff;
    font-size: 1rem;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    transition: 0.3s ease-out;
    z-index: 5;
    pointer-events: none;
}
   
.text-body {
    color: rgb(134, 134, 134);
}
   
.text-title {
    font-size: 1.5em;
    font-weight: bold;
   }

   .card-buscador:hover {
    border-color: #f72585;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
   }
   
.card-buscador:hover .card-buscador-button {
    transform: translate(-50%, 50%);
    opacity: 1;
    pointer-events: auto;
   }

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
    background-color: #a07a50;
  }
  
.sign {
    width: 100%;
    transition-duration: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.sign i {
    width: 17px;
  }
  
.text {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    transition-duration: .3s;
  }
  /* hover effect on button width */
.btn-logout:hover {
    width: 125px;
    border-radius: 40px;
    transition-duration: .3s;
  }
  
.btn-logout:hover .sign {
    width: 30%;
    transition-duration: .3s;
    padding-left: 20px;
  }
  /* hover effect button's text */
.btn-logout:hover .text {
    opacity: 1;
    width: 70%;
    transition-duration: .3s;
    padding-right: 10px;
  }
  /* button click effect*/
.btn-logout:active {
    transform: translate(2px ,2px);
  }

.container-carrousel{
    position: relative; 
    z-index: 1;
    margin-left: 100px; 
    margin-right: 100px;
    border-radius: 8px;
}

.card-carrousel{
    border-radius: 20px;
    background: #f5f5f5;
    position: relative;
    padding: 0.5rem;
    border: 2px solid #c3c6ce;
    transition: 0.5s ease-out;
    overflow: visible;
    z-index: 1;
}



















.carousel-control-prev, .carousel-control-next {
    z-index: 99999;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%black'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>")
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%black'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>")
}
.carousel-indicators [data-bs-target] { 
    background-color: #1e1e1e;
}

.card-principal {
    padding: 20px;
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

.card-principal h4 {
    border-bottom: 1px solid #b89360;
}
.favorites, .featured, .section {
    display: flex;
    overflow-x: auto;
}

.favorite-item, .featured-item, .section-item {
    flex: 0 0 auto;
    margin-right: 15px;
    text-align: center;
}

.favorite-item img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.favorite-item span, .section-item span {
    display: block;
    margin-top: 5px;
    font-size: 0.9em;
}

.featured-item img {
    border-radius: 10px;
    height: 150px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

th, td {
    padding: 10px;
    border: 1px solid #b89360;
    text-align: left;
}

thead {
    background-color: #f4f4f4;
}

th {
    background-color: #b89360;
    color: #fff;
}

form {
    margin: 20px 0;
    border: 1px solid #b89360;
    padding: 20px;
    border-radius: 8px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, select, textarea {
    width: calc(100% - 20px);
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #b89360;
    border-radius: 4px;
}

.button-xvdreams {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #b89360;
    cursor: pointer;
    font-size: 16px;
}

.button-xvdreams button:hover{
    background-color: #a07a50;
}

.card-img-top {
    object-fit: cover;
    height: 200px;
}

.card {
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#productList .col {
    margin-bottom: 20px;
}

.page-publications-header {
    margin-bottom: 40px; 
}

.unique-margin {
    margin-bottom: 30px;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

.todo-item.completed {
    background-color: #d4edda;
    text-decoration: line-through;
}

.todo-actions {
    display: flex;
    gap: 10px;
}

.priority-Alta {
    color: red;
    font-weight: bold;
}

.priority-Media {
    color: orange;
    font-weight: bold;
}

.priority-Baja {
    color: green;
    font-weight: bold;
}



.login-container {
    font-family: 'Glory'; 
    padding: 30px; /* Espacio interior reducido */
    border: 2px solid #b89360; /* Color dorado */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background-color: #fff; /* Fondo blanco para el contenedor del login */
    text-align: center; /* Centrar el texto dentro del contenedor */
    max-width: 400px; /* Ancho máximo del contenedor */
    width: 100%; /* Hacer que el contenedor ocupe el 100% de su padre */
    margin: auto; /* Centrar el contenedor horizontalmente */
    margin-top: 70px;
}

h2 {
    color: #b89360; /* Color dorado */
    margin-bottom: 20px;
    font-size: 2em; /* Tamaño de fuente más pequeño */
}

.form-label {
    color: #b89360; /* Color dorado */
    font-weight: bold; /* Hacer el texto de la etiqueta más grueso */
}

.btn-login {
    background-color: #b89360; /* Color dorado */
    color: #fff;
    font-size: 1.2em; /* Tamaño de fuente del botón */
    padding: 10px 20px; /* Relleno del botón */
    border-radius: 5px; /* Bordes redondeados del botón */
}

.btn-login:hover {
    background-color: #a07a50; /* Color dorado más oscuro */
}

.error-message {
    color: red;
    display: none;
    margin-top: 10px; /* Espacio superior para el mensaje de error */
}

.link-forgot {
    color: #b89360; /* Color dorado para el enlace */
    text-decoration: underline; /* Subrayar el enlace */
    transition: color 0.3s; /* Animación suave al cambiar de color */
}

.link-forgot:hover {
    color: #a07a50; /* Color dorado más oscuro al pasar el mouse */
}

body.register-body {
    background-color: #f8d9e5; /* Color de fondo rosa claro */
    font-family: 'Glory'; /* Aplicando la fuente Glory */
    height: 100vh; /* Asegúrate de que ocupe toda la altura de la ventana */
    margin: 0; /* Eliminar margen para que el fondo se aplique correctamente */
    display: flex;
    flex-direction: column; /* Disposición en columna para el texto de bienvenida y el contenedor */
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Alinear verticalmente el contenedor */
}

.welcome-text {
    color: #b89360; /* Color dorado */
    font-size: 2em; /* Tamaño de fuente del título de bienvenida */
    text-align: center; /* Centrar el texto */
    margin: 20px 0; /* Espaciado vertical */
}

.register-container {
    padding: 30px; /* Espacio interior reducido */
    border: 2px solid #b89360; /* Color dorado */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background-color: #fff; /* Fondo blanco para el contenedor del registro */
    text-align: center; /* Centrar el texto dentro del contenedor */
    max-width: 400px; /* Ancho máximo del contenedor */
    width: 100%; /* Hacer que el contenedor ocupe el 100% de su padre */
}

h2 {
    color: #b89360; /* Color dorado */
    margin-bottom: 20px;
    font-size: 1.5em; /* Tamaño de fuente del título de registro */
}

.form-label {
    color: #b89360; /* Color dorado */
    font-weight: bold; /* Hacer el texto de la etiqueta más grueso */
}

.btn-register {
    background-color: #b89360; /* Color dorado */
    color: #fff;
    font-size: 1.2em; /* Tamaño de fuente del botón */
    padding: 10px 20px; /* Relleno del botón */
    border-radius: 5px; /* Bordes redondeados del botón */
}

.btn-register:hover {
    background-color: #a07a50; /* Color dorado más oscuro */
}


.input-group .btn {
    height: 100%; /* Hacer que el botón tenga la misma altura que el campo de entrada */
}

.tooltip-icon {
    display: inline-table;
    margin-right: -20px;
    padding: 10px 20px; 
    cursor: pointer;
    color: #b89360; /* Color dorado */
}

.tooltip-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: #f8d7da; /* Fondo del tooltip */
    color: #721c24; /* Color del texto */
    padding: 5px;
    border-radius: 4px;
    z-index: 10;
    white-space: nowrap;
    margin-left :-30px; /* Ajusta la posición si es necesario */
    top: 35px; /* Ajusta la posición si es necesario */
}
body {
    background-color: #f7f7f7;
}

header h1 {
    color: #a07a50; /* Un color atractivo para el título */
}

.table th {
    background-color: #ffeeef; /* Color de fondo para encabezados de la tabla */
    color: #333; /* Color del texto en el encabezado */
}

.table td {
    transition: background-color 0.3s; /* Transición suave para el hover */
}

.table td:hover {
    background-color: #f1c1c6; /* Color al pasar el mouse sobre las filas */
}


.btn-primary {
    background-color: #a07a50; /* Color primario para botones */
    border-color: #a07a50; /* Color del borde del botón */
}

.btn-success {
    background-color: #a07a50;/* Color para el botón de agregar */
    border-color: #a07a50; /* Color del borde del botón de agregar */
}

.btn-success:hover {
    background-color: #866137  !important; /* Color dorado más oscuro al pasar el mouse */
    border-color: #a07b50 !important; /* Color del borde al pasar el mouse */
}

.btn-danger {
    background-color: #fc574c; /* Color para el botón de cancelar */
    border-color: #f44336; /* Color del borde del botón de cancelar */
}


.dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }

.dot {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: #ffeeef;
    animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
    margin-right: 0;
    animation-delay: 0.5s;
}

.dot:nth-child(1) {
    animation-delay: 0.1s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.3s;
}

.dot:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        background-color: #ffeeef;
        box-shadow: 0 0 0 0 rgba(255, 238, 239, 0.7);
    }

    50% {
        transform: scale(1.2);
        background-color: #ffb3c6;
        box-shadow: 0 0 0 10px rgba(255, 238, 239, 0);
    }

    100% {
        transform: scale(0.8);
        background-color: #ffeeef;
        box-shadow: 0 0 0 0 rgba(255, 238, 239, 0.7);
    }
}