/* Tripzi · /documentos-legales/ (14-oct-2026): una tarjeta por documento y el visor grande.
   Se carga después de base.css y paginas.css. Las tarjetas y el visor los escribe construir.py (bloque_documentos())
   desde ../documentos-jaygu/; el movimiento del visor está en /assets/js/documentos.js. */

/* ---------- Tarjeta de documento ---------- */

.docs{display:grid;gap:var(--e4)}
.doc{display:grid;min-width:0;overflow:clip;border-radius:var(--r-escena);background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra);--foco:var(--tinta)}
.doc [hidden]{display:none}
.doc--turquesa{--doc-color:var(--turquesa)}
.doc--sol{--doc-color:var(--sol)}
.doc--coral{--doc-color:var(--coral)}
.doc--agua{--doc-color:var(--agua-honda)}

/* La hoja sobre su color, un poco chueca, como puesta en la mesa; se endereza al pasar el cursor o con el teclado. */
.doc__papel{position:relative;isolation:isolate;overflow:clip;display:grid;justify-items:center;align-items:start;padding:calc(var(--e5) + var(--e1)) var(--e3) var(--e4);background:var(--doc-color)}
.doc__papel::before{content:"";position:absolute;z-index:-1;right:-20%;top:-26%;width:74%;aspect-ratio:1;border-radius:50%;background:rgb(251 254 254 / .3);transition:scale 1.4s var(--suave)}
.doc:hover .doc__papel::before{scale:1.15}
.doc__numero{position:absolute;left:var(--e3);top:var(--e2);display:flex;align-items:baseline;gap:var(--e1);margin:0;font:900 clamp(2.5rem,2rem + 2vw,3.5rem)/.8 var(--display);color:var(--tinta)}
.doc__numero span{padding:var(--e0) var(--e15);border-radius:var(--r-pastilla);background:rgb(251 254 254 / .55);font:700 var(--t-chico)/1.3 var(--texto);letter-spacing:.04em;text-transform:uppercase;translate:0 -.3em}
.doc__mini{position:relative;display:block;width:min(100%,300px);border-radius:6px;box-shadow:0 22px 44px -18px rgb(12 58 64 / .6);rotate:-2.5deg;transition:rotate .6s var(--suave),translate .6s var(--suave);--foco:var(--tinta)}
.doc:nth-child(even) .doc__mini{rotate:2deg}
.doc__mini:hover,.doc__mini:focus-visible{rotate:0deg;translate:0 -6px}
.doc__mini img{width:100%;height:auto;border-radius:6px;background:#fff}
.doc__lupa{position:absolute;right:var(--e15);bottom:var(--e15);display:inline-flex;align-items:center;gap:var(--e1);padding:var(--e1) var(--e2) var(--e1) var(--e15);border-radius:var(--r-pastilla);background:var(--tinta);color:var(--blanco);font:700 var(--t-chico)/1 var(--texto);box-shadow:var(--sombra-honda);transition:background-color .3s ease-out,color .3s ease-out}
.doc__mini:hover .doc__lupa,.doc__mini:focus-visible .doc__lupa{background:var(--sol);color:var(--tinta)}
.doc__lupa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.doc__texto{display:grid;gap:var(--e2);align-content:start;min-width:0;padding:var(--e3)}
.doc__texto > *{margin:0}
.doc__emite{font:700 var(--t-chico)/1.45 var(--texto);letter-spacing:.03em;text-transform:uppercase;opacity:.75}
.doc__titulo{font:900 clamp(2rem,1.4rem + 2.4vw,3.25rem)/.95 var(--display);text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.doc__chips{display:flex;flex-wrap:wrap;gap:var(--e1);margin:0;padding:0;list-style:none}
.doc__chips li{padding:var(--e0) var(--e15);border-radius:var(--r-pastilla);background:var(--agua-honda);font:600 var(--t-chico)/1.45 var(--texto)}
.doc__chips li:last-child{background:transparent;box-shadow:inset 0 0 0 1.5px rgb(12 58 64 / .35)}
.doc__pie{max-width:56ch;font:500 var(--t-entrada)/1.45 var(--texto);text-wrap:pretty}
.doc__rotulo{margin-top:var(--e1);font:800 var(--t-rotulo)/1 var(--display);text-transform:uppercase}
.doc__dice dd{font-size:var(--t-cuerpo);overflow-wrap:anywhere}
.doc__completo{background:var(--agua)}
.doc__completo summary{font-size:var(--t-cuerpo)}
.doc__completo p{font:500 var(--t-chico)/1.65 var(--texto);overflow-wrap:anywhere}
.doc__comprobar{max-width:62ch}
.doc__comprobar a{font-weight:600;text-underline-offset:3px}
.doc__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e3);margin-top:var(--e1)}
/* «Abrir la imagen» y su peso van juntos; a 320 px el peso baja de renglón entero (no se hacen dos columnas). */
.doc__abrir{min-width:0}
.doc__peso{font-weight:500;opacity:.75;white-space:nowrap}

/* Cada tarjeta entra cuando llega a la pantalla (su propio data-revela). */
.js .doc[data-revela]{opacity:0;translate:0 48px}
.js .doc[data-revela].visto{opacity:1;translate:0 0;transition:opacity .7s ease-out,translate 1s var(--suave)}
/* La que se abre con un ancla (/documentos-legales/#rnt) no sube: si no, queda 48 px más arriba, bajo la barra. */
.js .doc[data-revela]:target{translate:0 0}
.js .doc[data-revela] .doc__mini{scale:.92}
.js .doc[data-revela].visto .doc__mini{scale:1;transition:scale 1.1s var(--suave) .15s,rotate .6s var(--suave),translate .6s var(--suave)}

@media (min-width:720px){
  .doc__texto{padding:var(--e4)}
}
@media (min-width:900px){
  .doc{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)}
  .doc__papel{padding:var(--e6) var(--e4) var(--e5)}
  /* La hoja se queda a la vista mientras se lee el texto de al lado. */
  .doc__mini{position:sticky;top:calc(var(--e6) + var(--e2))}
  .doc__texto{padding:var(--e5) var(--e5) var(--e5) var(--e4)}
}

/* ---------- Visor ---------- */

html:has(.visor[open]){overflow:hidden}
.visor{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#082A2F;color:var(--blanco);--foco:var(--sol)}
.visor[open]{display:grid;grid-template:auto minmax(0,1fr) auto / minmax(0,1fr)}
.visor::backdrop{background:rgb(6 30 34 / .85)}
.visor__barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1) var(--e15);padding:var(--e15) var(--e2) var(--e1)}
.visor__cuenta{flex:none;margin:0;padding:var(--e0) var(--e15);border-radius:var(--r-pastilla);background:var(--sol);color:var(--tinta);font:800 var(--t-chico)/1.4 var(--texto);white-space:nowrap}
.visor__titulo{flex:1 1 14rem;min-width:0;margin:0;font:800 clamp(1.25rem,1rem + 1vw,1.75rem)/1.1 var(--display);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor__botones{display:flex;flex-wrap:wrap;gap:var(--e1);margin-left:auto}
.visor__boton{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e2);border:0;border-radius:var(--r-pastilla);background:rgb(251 254 254 / .14);color:var(--blanco);font:700 var(--t-chico)/1 var(--texto);text-decoration:none;cursor:pointer;transition:background-color .2s ease-out}
.visor__boton:hover{background:rgb(251 254 254 / .26)}
.visor__boton[aria-pressed="true"]{background:var(--blanco);color:var(--tinta)}
.visor__boton--cerrar,.visor__boton--cerrar:hover{background:var(--sol);color:var(--tinta)}
.visor__lienzo{position:relative;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;min-height:0;overflow:auto;padding:var(--e1) var(--e2);overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.visor__lienzo:focus-visible{outline-offset:-4px}
.visor__lienzo img{grid-area:1 / 1;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;background:#fff;box-shadow:0 24px 60px -20px rgb(0 0 0 / .7);user-select:none;-webkit-user-select:none}
.visor--ampliado .visor__lienzo{display:block;touch-action:auto;cursor:grab}
.visor--ampliado .visor__lienzo.arrastrando{cursor:grabbing}
.visor--ampliado .visor__lienzo img{max-width:none;max-height:none;margin:0 auto}
.visor__estado{position:absolute;left:0;right:0;bottom:var(--e2);margin:0;text-align:center;font:600 var(--t-chico)/1.4 var(--texto)}
.visor__estado:empty{display:none}
.visor__pie{display:flex;align-items:center;justify-content:center;gap:var(--e15);padding:var(--e1) var(--e2) max(var(--e15),env(safe-area-inset-bottom))}
.visor__flecha{flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--blanco);color:var(--tinta);cursor:pointer;transition:background-color .2s ease-out,scale .3s var(--suave)}
.visor__flecha:hover{background:var(--sol)}
.visor__flecha:active{scale:.94}
.visor__flecha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.visor__miniaturas{display:flex;gap:var(--e1);min-width:0;overflow-x:auto;padding:4px}
.visor__mini{flex:none;width:44px;height:56px;padding:0;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer;opacity:.55;transition:opacity .2s ease-out,border-color .2s ease-out}
.visor__mini:hover{opacity:.85}
.visor__mini[aria-current="true"]{border-color:var(--sol);opacity:1}
.visor__mini img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:5px;background:#fff}
@media (min-width:720px){
  .visor__barra{padding:var(--e2) var(--e3) var(--e1)}
  .visor__lienzo{padding:var(--e15) var(--e3)}
  .visor__mini{width:52px;height:68px}
}