/* Acceso (templates/taller/login.html.twig): banda granate con lo que hace la herramienta y un resguardo ya firmado. */
.contenido.pagina-acceso { max-width: none; padding: 0; }
.acceso { max-width: 1040px; margin: 0 auto; }

.portada {
    background: var(--marca);
    color: var(--sobre-marca);
    padding: 1.75rem 1.25rem 7.5rem;
    position: relative;
}
.portada .logotipo { display: block; width: min(250px, 70%); height: auto; filter: brightness(0) invert(1); margin: 0 0 1.5rem; }
.portada h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: .95; margin: 0 0 .75rem; color: var(--sobre-marca); }
.portada .promesa { font-size: 1.08rem; line-height: 1.5; max-width: 34ch; margin: 0; color: oklch(95% 0.02 40); }

/* La muestra: un resguardo de papel, un poco girado, que asoma sobre el formulario. */
.muestra {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: -4.25rem;
    max-width: 21rem;
    margin: 0;
    padding: .8rem .9rem;
    background: var(--superficie);
    color: var(--texto);
    border-radius: 6px;
    box-shadow: 0 14px 30px oklch(20% 0.05 30 / 28%), 0 2px 4px oklch(20% 0.05 30 / 18%);
    rotate: -2.5deg;
    z-index: 2;
}
.muestra-arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.muestra-hora { font: 600 1rem/1 var(--rotulo); color: var(--tenue); }
.muestra-abajo { display: grid; grid-template-columns: 4.6rem 1fr; gap: .8rem; align-items: end; }
.muestra-croquis { position: relative; border: 1px solid var(--borde); border-radius: 4px; background: oklch(100% 0 0); }
.muestra-croquis img { display: block; width: 100%; height: auto; }
.muestra-croquis .dano { width: 22%; }
.muestra-croquis .dano::before, .muestra-croquis .dano::after { height: 3px; top: calc(50% - 1.5px); }
.muestra-firma { position: relative; border-bottom: 1.5px solid var(--borde); padding-bottom: .2rem; color: oklch(30% 0.1 265); }
.muestra-firma svg { display: block; width: 100%; height: auto; }
.sello {
    position: absolute; right: -.2rem; top: -.4rem;
    padding: .15rem .55rem; border: 2px solid var(--ok); border-radius: 4px;
    color: var(--ok); font: 700 1.05rem/1 var(--rotulo); rotate: 8deg; background: oklch(100% 0 0 / 70%);
}

.formulario-acceso { margin: 5.5rem 1rem 1rem; padding: 1.25rem; position: relative; }
.formulario-acceso > .tenue { margin-bottom: 1rem; }

/* La única animación: el resguardo se posa al cargar. */
@media (prefers-reduced-motion: no-preference) {
    .muestra { animation: posarse 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both 150ms; }
    @keyframes posarse { from { opacity: 0; translate: 0 1.5rem; rotate: -8deg; } }
}

@media (min-width: 860px) {
    .acceso { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 0; min-height: calc(100vh - 6rem); padding: 2rem 1.5rem; }
    .portada { border-radius: 18px; padding: 2.5rem; }
    .muestra { position: relative; inset: auto; margin-top: 2rem; }
    .formulario-acceso { margin: 0 0 0 -1.5rem; z-index: 3; box-shadow: 0 18px 40px oklch(25% 0.03 35 / 14%); }
}