/*--------REPRODUCTORES EXTERNOS (consent.js, WEB-10)---------------------*/
/*
 * No hay aviso de cookies: la web no instala ninguna (DEC-16). Lo único que
 * espera permiso son los reproductores de Apple Music y los vídeos de YouTube,
 * y el permiso es pulsar su propio botón.
 *
 * El aviso va al MISMO ANCHO que el reproductor al que sustituye (660 px), no a
 * un ancho propio: a 250 px el texto se estrangulaba y no se leía.
 */

.consent-embed iframe:not([src]) {
    display: none;
}

.consent-embed.cargado .consent-embed-aviso {
    display: none;
}

.consent-embed-aviso {
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
    padding: 22px 22px 20px 22px;
    background-color: #55514d;
    text-align: center;
}

/* El gris es el del menú ARTISTAS·DISCOS·BLOG·EDITORIAL: negro al 70% sobre el
   beige. Es el único gris de la web sobre el que el texto blanco (7.86) y el
   rótulo naranja son legibles; sobre el beige el rótulo se quedaba en 1.37 y
   sobre el tinte #b3a69b desaparecía del todo (1.01). Sin hilos naranjas: con
   fondo propio la caja ya se separa sola. */

/* De qué es el reproductor, antes de leer nada. */
.consent-embed-rotulo {
    display: block;
    margin-bottom: 10px;
    color: #e29834;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* Selector con más peso que el "p" general de style.css (Cardo, 20px, negro,
   justificado). Lato 400: el 300 sobre el beige se ve deslavado. */
.consent-embed-aviso p {
    margin: 0;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
}

/* Las fichas de disco ya llevan su texto en inglés debajo del español; el aviso
   hace lo mismo, porque 108 de las 116 son bilingües. */
.consent-embed-aviso p.consent-embed-en {
    margin-top: 6px;
    font-size: 14px;
    color: #d8d3ce;
}

.consent-embed-acciones {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 16px;
}

.consent-embed-cargar {
    padding: 11px 30px;
    border: 0;
    border-radius: 3px;
    background-color: #e67e22;
    color: #ffffff;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.consent-embed-cargar:hover,
.consent-embed-cargar:focus {
    background-color: #cf6d17;
}

/* Los dos enlaces se tratan IGUAL: si uno va subrayado y otro no, la caja se ve
   desordenada aunque cada uno por separado esté bien. */
.consent-embed-aviso a,
.consent-embed-siempre {
    padding: 0 0 2px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #d8d3ce;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, border-bottom-color 0.2s;
}

.consent-embed-aviso a:hover,
.consent-embed-aviso a:focus,
.consent-embed-siempre:hover,
.consent-embed-siempre:focus {
    color: #e29834;
    border-bottom-color: #e29834;
}

/* La portada de las fichas va centrada y a 250px (.col-portada img lleva
   margin 0 5%); sin fondo daba igual, con fondo la caja se salía por la
   izquierda. Se le alinea. */
.col-portada .consent-embed-aviso {
    width: 250px;
    max-width: 100%;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    .consent-embed-acciones {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .col-portada .consent-embed-aviso {
        width: auto;
    }
    .consent-embed-cargar {
        width: 100%;
    }
}

/* Aviso de YouTube dentro del lightbox de vídeos de la portada. Solo lo
   coloca: el fondo gris y el texto los pone .consent-embed-aviso, para que sea
   el mismo aviso que el de las fichas de disco. Tenía fondo blanco y texto
   #333 de cuando el aviso no llevaba fondo propio; al ponerle el gris y el
   texto en blanco, quedaba blanco sobre blanco. */
.videowrapper .consent-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 420px;
    transform: translate(-50%, -50%);
}

/*--------POLÍTICA DE COOKIES---------------------*/

.tabla-cookies {
    overflow-x: auto;
    margin-bottom: 20px;
}

.tabla-cookies table {
    width: 100%;
    border-collapse: collapse;
    font-size: 90%;
    line-height: 1.4;
}

.tabla-cookies th,
.tabla-cookies td {
    padding: 8px;
    border-bottom: 1px solid #b3a69b;
    text-align: left;
    vertical-align: top;
}

.tabla-cookies tbody th {
    padding-top: 16px;
    color: #e29834;
    font-weight: 400;
}

/* Botón para deshacer la preferencia de "cargar siempre". */
.boton-olvidar {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    border: 1px solid #e67e22;
    border-radius: 3px;
    background-color: #e67e22;
    color: #ffffff;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 15px;
    cursor: pointer;
}

.boton-olvidar:hover,
.boton-olvidar:focus {
    background-color: #cf6d17;
    border-color: #cf6d17;
}

/* Cambio de idioma: va en la banda negra del título, a la derecha, igual que
   el "English" de mariem-hassan.html. El estilo del enlace lo pone .disc-nav
   .btn-small (discos.css); aquí solo se centra con el h1. */
.section-cookies .negro .disc-nav {
    padding-top: 16px;
}

/* Los enlaces del texto se leían como texto normal: negro sobre negro. El
   subrayado pasa al naranja de la casa, que es lo que marca los hilos. */
.section-cookies p a:link,
.section-cookies p a:visited {
    color: #000;
    text-decoration: underline;
    -webkit-text-decoration-color: #e29834;
    text-decoration-color: #e29834;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.section-cookies p a:hover,
.section-cookies p a:active {
    color: #e29834;
    text-decoration: none;
}

/* Una sola fecha, al final de la página y para los dos idiomas. Lato 400 en
   gris, como el texto de la caja del reproductor: es un pie, no cuerpo de
   texto. Lleva .section-cookies delante para ganarle al p de style.css sin
   depender del orden de carga de las hojas. */
.section-cookies .fecha-actualizacion {
    margin: 40px 0 0 0;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: #85807b;
    text-align: center;
}