/* Componente: AvisoCookies */

/* El aviso es un DIALOGO, no una tarjeta en una esquina.
   Antes vivia abajo a la izquierda y se podia seguir navegando por encima, que
   es justo lo que hace que la gente no lo lea y se quede sin decidir. Ahora la
   sombra cubre la pagina y no se levanta hasta que haya respuesta. */
.aviso-ck {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    /* Por encima de TODO lo que flota: el asistente (1250), la sesion (1310),
       la barra (1400), los avisos (1500-1900), el visor de PDF (2000) y las
       ayudas de instalacion (3000-3200). Mientras haya que decidir, no puede
       quedar nada por delante de la sombra. */
    z-index: 3400;

    background: rgba(12, 14, 18, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    opacity: 0;
    transition: opacity 0.25s ease;
}
.aviso-ck.aviso-ck-visible { opacity: 1; }

.aviso-ck-caja {
    width: min(32rem, 100%);
    max-height: calc(100vh - 2.5rem);
    max-height: calc(100dvh - 2.5rem);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-top: 3px solid var(--marca);
    border-radius: var(--radio);
    padding: 1.1rem 1.25rem;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);

    /* La caja sube; la sombra solo se funde. Mover las dos daria la sensacion
       de que la pagina entera se desplaza. */
    transform: translateY(0.75rem);
    transition: transform 0.25s ease;
}
.aviso-ck.aviso-ck-visible .aviso-ck-caja { transform: none; }

/* Con el dialogo abierto, la pagina de detras no se desplaza. */
body.aviso-ck-quieto { overflow: hidden; }

.aviso-ck-texto {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.aviso-ck-titulo {
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--tinta);
    margin-bottom: 0.25rem;
}
.aviso-ck-cuerpo {
    font-size: var(--t-sm);
    color: var(--tinta-media);
    margin: 0;
    line-height: 1.5;
}

/* La frase que acota el aviso: aqui se decide UNA cosa.
   Va pegada al cuerpo y en tono menor, porque no es una advertencia mas: es el
   limite de lo que se esta preguntando. */
.aviso-ck-alcance {
    margin-top: 0.45rem;
    color: var(--tinta-suave);
}

/* Las dos mitades del detalle.
   Lo que se decide aqui, y lo que pasa igual. Sin esta raya el texto se lee
   como si el aviso tratara de todo, y de ahi sale la idea --falsa-- de que
   Google ve la ubicacion o el asistente. */
.aviso-ck-grupo {
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--tinta);
    margin: 1.1rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--borde);
}
.aviso-ck-detalle .aviso-ck-grupo:first-of-type {
    margin-top: 0.8rem;
}
.aviso-ck-detalle .aviso-ck-nota {
    margin-top: 0.3rem;
    font-style: italic;
}

.aviso-ck-detalle { margin-top: 0.6rem; }
.aviso-ck-detalle summary {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--marca);
    cursor: pointer;
    list-style: none;
}
.aviso-ck-detalle summary::-webkit-details-marker { display: none; }
.aviso-ck-detalle summary::before {
    content: '+ ';
    font-family: var(--mono);
}
.aviso-ck-detalle[open] summary::before { content: '– '; }
.aviso-ck-detalle summary:hover { text-decoration: underline; }

.aviso-ck-detalle p {
    font-size: var(--t-sm);
    color: var(--tinta-suave);
    line-height: 1.5;
    margin: 0.6rem 0 0;
}
.aviso-ck-detalle strong { color: var(--tinta-media); font-weight: 600; }

.aviso-ck-acciones {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.aviso-ck-boton {
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 600;
    padding: 0.55rem 1.4rem;
    white-space: nowrap;
    background: var(--marca);
    border: 1px solid var(--marca);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.aviso-ck-boton:hover { background: var(--marca-hondo); border-color: var(--marca-hondo); }

/* Rechazar es una OPCION, no una salida discreta.
   Mismo tamano y mismo peso que aceptar: lo unico que cambia es el relleno,
   para que se vea cual es la accion principal sin que la otra parezca un
   enlace perdido. */
.aviso-ck-boton-2 {
    background: transparent;
    border-color: var(--tinta-suave);
    color: var(--tinta);
}
.aviso-ck-boton-2:hover {
    background: transparent;
    border-color: var(--tinta-suave);
    color: var(--tinta);
}

/* El foco tiene que verse: con el dialogo abierto es lo unico que dice por
   donde va el teclado. */
.aviso-ck-boton:focus-visible,
.aviso-ck-detalle summary:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .aviso-ck {
        padding: 0.75rem;
        align-items: flex-end;         /* al alcance del pulgar */
    }
    .aviso-ck-caja {
        width: 100%;
        gap: 0.9rem;
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }
    .aviso-ck-acciones { width: 100%; }
    .aviso-ck-boton { flex: 1; padding: 0.7rem 0.5rem; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-ck, .aviso-ck-caja { transition: none; }
    .aviso-ck-caja { transform: none; }
}