/* ============================================================================
   PROYECTO: Eslabón Digital
   ARCHIVO: assets/css/views/cookies/cookies.css
   MÓDULO: Aviso de Cookies. Estilos base (sin media queries)
   ----------------------------------------------------------------------------
   Consume variables globales. No redefine tokens. Compatible día/noche.
   ============================================================================ */

/* Contenedor principal del aviso de cookies */
.cookie-container {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    display: none;
    border-radius: 15px;
    pointer-events: auto; /* Fuerza que los clics funcionen siempre */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    z-index: 10000;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: bottom 0.5s ease;
}

/* Maquetación interior (galleta + texto + botón) */
.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.cookie-text {
    display: flex;
    align-items: center;
}

/* Clase que activa el JS para mostrarlo */
.cookie-container.activo {
    display: flex;
    bottom: 20px;
}

/* Icono de la galleta */
.cookie-icono {
    color: var(--gold);
    margin-right: 10px;
}

/* Enlaces dentro del aviso */
.cookie-container a {
    color: #f39c12;            /* Color naranja para resaltar */
    text-decoration: underline;
}

/* Botón de aceptar */
.cookie-container button {
    background: #f39c12;       /* Fondo naranja */
    border: none;              /* Sin bordes */
    padding: 10px 15px;        /* Tamaño */
    border-radius: 8px;        /* Bordes del botón */
    color: black;              /* Texto negro para contraste */
    font-weight: bold;         /* Negrita */
    cursor: pointer;           /* Icono de mano */
    margin-left: 15px;         /* Separación del texto */
}