/* Paleta de Colores Suavizada y Moderna */
:root {
    --background-dark: #121212;
    --background-card: #1e1e1e;
    --background-header: #0a0a0a;
    --border-color: #2e2e2e;
    --text-primary: #373737;
    --text-secondary: #0e0e0e;
    --accent-red: #5490eb;
    /* Rojo (Tailwind red-600) */
    --accent-red-hover: #b91c1c;
    /* Rojo más oscuro (Tailwind red-700) */
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.625;
}

header.bg-black {
    background-color: var(--background-header);
}

footer.bg-black {
    background-color: var(--background-header);
}

.product-card {
    background-color: var(--background-card);
    border: 1px solid var(--border-color);
}

#cartIcon {
    position: relative;
}

#cartCount {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: red;
    color: white;
}

#chatIcon {
    position: relative;
    & span {
        content: "";
        position: absolute;
        top: -5px;
        right: -5px;
        width: 10px;
        height: 10px;
        background: red;
        border-radius: 50%;
    }
}

.list-user-name {
  &:not(:last-child){
    border-bottom: 1px solid #ccc;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
}

.active {
    background-color: #0a0a0a08 !important;
    box-shadow: 0px 0px 0px 2px #0a0a0a08;
    border-radius: 0.375rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#aiLoadingIndicator::after {
    animation: thinking 1s infinite;
    content: "";
    display: block;
    font-size: 1.5rem;
}

@keyframes thinking {
    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }

    100% {
        content: "....";
    }
}