/* ==========================================================================
   politica-cookies.css — Estilos exclusivos de
   paginas/politica-cookies.html.

   1. TABLA DE COOKIES — .cookies-table__* dentro de #cookies_content
   2. NAVEGADORES      — .cookies-browsers dentro de #cookies_content

   El héroe (#cookies_hero) y el cuerpo del documento (#cookies_content:
   índice lateral, bloques, listas, avisos, tablas y cierre) usan los
   componentes compartidos definidos en global.css, porque son idénticos en
   las tres páginas legales.
   ========================================================================== */

/* ==========================================================================
   1. TABLA DE COOKIES — .cookies-table__*
   ========================================================================== */

/* 1.1 Reparto de columnas

   La finalidad es el texto largo, así que se le deja el ancho restante y se
   acotan las otras dos columnas. */

#cookies_content .cookies-table__name-column {
    width: 26%;
}

#cookies_content .cookies-table__duration-column {
    width: 22%;
}

/* 1.2 Nombre de la cookie

   Va en monoespaciada porque es un identificador técnico literal, no un
   texto redactado: así se distingue de la descripción de al lado. */

#cookies_content .cookies-table__name {
    font-family: var(--site-font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   2. NAVEGADORES — .cookies-browsers
   ========================================================================== */

/* 2.1 Rejilla */

#cookies_content .cookies-browsers {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--site-space-3);
}

/* 2.2 Tarjeta de enlace */

#cookies_content .cookies-browsers__link {
    display: flex;
    align-items: center;
    gap: var(--site-space-4);
    min-height: 64px;
    padding: var(--site-space-3) var(--site-space-4);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-medium);
    background-color: var(--site-paper);
    color: var(--site-ink-900);
    text-decoration: none;
    transition:
        border-color var(--site-duration-medium) var(--site-ease-out),
        background-color var(--site-duration-medium) var(--site-ease-out);
}

/* 2.3 Icono */

#cookies_content .cookies-browsers__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--site-radius-pill);
    background-color: var(--site-blue-50);
    color: var(--site-blue-500);
}

#cookies_content .cookies-browsers__icon svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

/* 2.4 Nombre y flecha */

#cookies_content .cookies-browsers__name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

#cookies_content .cookies-browsers__arrow {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--site-ink-500);
    transition:
        color var(--site-duration-medium) var(--site-ease-out),
        transform var(--site-duration-medium) var(--site-ease-out);
}

/* 2.5 Estados */

#cookies_content .cookies-browsers__link:hover {
    border-color: var(--site-blue-500);
    background-color: var(--site-blue-50);
    color: var(--site-ink-900);
}

#cookies_content .cookies-browsers__link:hover .cookies-browsers__arrow {
    color: var(--site-blue-500);
    transform: translate(2px, -2px);
}

/* 2.6 Responsive de los navegadores */

@media (min-width: 600px) {
    #cookies_content .cookies-browsers {
        grid-template-columns: repeat(2, 1fr);
    }
}