/* Aviso de uso. Todo bajo .psf-aviso y con prefijo pa-, por lo mismo que el
   resto: contra un tema que usa !important no sirve la especificidad. */

.psf-aviso[hidden]{display:none}
.psf-aviso{
 --pa-tinta:#2a2622; --pa-papel:#faf7f0; --pa-linea:#ddd4c2; --pa-sub:#4d463c;
 --pa-acento:#4a5c80; --pa-apag:#6b6357;
 position:fixed;inset:0;z-index:2147483000;
 display:flex;align-items:center;justify-content:center;padding:20px;
 font:15px/1.55 ui-serif,Georgia,"Times New Roman",serif;color:var(--pa-tinta)}
.psf-aviso *,.psf-aviso *::before,.psf-aviso *::after{box-sizing:border-box}
.psf-aviso h2,.psf-aviso p,.psf-aviso li,.psf-aviso span,.psf-aviso b,.psf-aviso a,.psf-aviso label{
 font-family:inherit;color:inherit;text-transform:none;letter-spacing:normal;margin:0;padding:0}
.psf-aviso ul{margin:0;padding:0;list-style:none}

.psf-aviso .pa-fondo{position:absolute;inset:0;background:rgba(28,25,22,.62);backdrop-filter:blur(2px)}
.psf-aviso .pa-caja{
 position:relative;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;
 background:var(--pa-papel);border:1px solid var(--pa-linea);border-radius:14px;
 padding:28px 30px 24px;box-shadow:0 18px 50px rgba(28,25,22,.28)}

.psf-aviso .pa-t{margin:0 0 8px;font-size:25px;line-height:1.16;letter-spacing:-.02em;font-weight:700}
.psf-aviso .pa-lead{margin:0 0 18px;font-size:15px;color:var(--pa-sub)}

.psf-aviso .pa-lista{margin:0 0 18px;display:grid;gap:11px}
.psf-aviso .pa-p{
 font-size:13.5px;line-height:1.52;color:var(--pa-sub);
 padding-left:14px;border-left:2px solid var(--pa-linea)}
.psf-aviso .pa-p b{font-weight:700;color:var(--pa-tinta)}

.psf-aviso .pa-enlaces{
 margin:0 0 18px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12.5px;color:var(--pa-apag)}
.psf-aviso .pa-enlaces a{display:inline-block;padding:4px 0;min-height:24px;color:var(--pa-acento);font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
.psf-aviso .pa-enlaces a:hover,.psf-aviso .pa-enlaces a:focus-visible{border-bottom-color:var(--pa-acento);outline:none}

.psf-aviso .pa-check{
 display:flex;gap:11px;align-items:flex-start;cursor:pointer;
 background:#fff;border:1px solid var(--pa-linea);border-radius:10px;padding:14px 16px;margin:0 0 16px}
.psf-aviso .pa-check:hover{border-color:var(--pa-acento)}
.psf-aviso .pa-check input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--pa-acento);cursor:pointer}
.psf-aviso .pa-check span{font-size:14.5px;font-weight:700}

.psf-aviso .pa-botones{display:flex;gap:10px;flex-wrap:wrap}
.psf-aviso .pa-si,.psf-aviso .pa-no{
 font:inherit;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:700;
 border-radius:9px;padding:11px 22px;cursor:pointer;border:1px solid transparent}
.psf-aviso .pa-si{background:var(--pa-acento);color:#fff}
.psf-aviso .pa-si:hover:not(:disabled){filter:brightness(1.1)}
/* Un boton deshabilitado sigue teniendo que leerse: si no, nadie entiende
   que hay que marcar la casilla para activarlo. 5,9:1 en vez de 3,4:1. */
.psf-aviso .pa-si:disabled{background:#d6d0c4;color:#4f4839;cursor:not-allowed}
.psf-aviso .pa-no{background:transparent;border-color:var(--pa-linea);color:var(--pa-sub)}
.psf-aviso .pa-no:hover{border-color:var(--pa-apag)}
.psf-aviso .pa-si:focus-visible,.psf-aviso .pa-no:focus-visible,.psf-aviso .pa-check input:focus-visible{
 outline:2px solid var(--pa-acento);outline-offset:2px}

/* Mientras el aviso esta abierto, la pagina de detras no se desplaza. */
html.psf-aviso-abierto,body.psf-aviso-abierto{overflow:hidden}

@media (max-width:560px){
 .psf-aviso{padding:0;align-items:flex-end}
 .psf-aviso .pa-caja{max-width:none;max-height:92vh;border-radius:14px 14px 0 0;padding:22px 20px 20px}
 .psf-aviso .pa-si,.psf-aviso .pa-no{flex:1}
}
@media (prefers-reduced-motion:reduce){.psf-aviso .pa-fondo{backdrop-filter:none}}
