.carta-impresa-body { background: var(--ml-ink); color: var(--ml-ink); min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.lector-cabecera { align-items: center; background: var(--ml-paper); display: flex; gap: 1rem; height: var(--ml-altura-cabecera); justify-content: space-between; padding: .5rem max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left)); position: relative; z-index: 3; }
.marca-lector { align-items: center; color: var(--ml-ink); display: flex; gap: .55rem; min-width: 0; text-decoration: none; }
.marca-lector img { height: 3rem; object-fit: contain; width: 3rem; }
.marca-lector span { display: grid; line-height: 1.1; }
.marca-lector strong { font-size: .9rem; white-space: nowrap; }
.marca-lector small { color: #705f52; font-size: .62rem; white-space: nowrap; }
.selector-carta { background: #ece6da; border-radius: 999px; display: flex; padding: .18rem; }
.selector-carta__opcion { border-radius: 999px; color: #62574c; font-size: .72rem; font-weight: 600; padding: .4rem .62rem; text-decoration: none; }
.selector-carta__opcion.is-active { background: var(--ml-ink); color: #fff; }
.boton-cabecera, .boton-control { align-items: center; background: transparent; border: 0; border-radius: .55rem; color: inherit; display: inline-flex; gap: .4rem; justify-content: center; min-height: 2.5rem; padding: .45rem .6rem; transition: background-color .18s ease, transform .18s ease; }
.boton-cabecera { color: var(--ml-wine); font-size: .75rem; font-weight: 700; }
.boton-control:hover, .boton-cabecera:hover { background: rgba(255,255,255,.15); }
.lector-carta { height: calc(100vh - var(--ml-altura-cabecera)); height: calc(100dvh - var(--ml-altura-cabecera)); min-height: 0; overflow: hidden; position: relative; }
.lector-escena { align-items: center; background: radial-gradient(circle at center, #4d4035 0, #29211c 76%); display: flex; height: calc(100% - 4.75rem); justify-content: center; outline: none; overflow: hidden; padding: .8rem max(1rem, env(safe-area-inset-right)) .35rem max(1rem, env(safe-area-inset-left)); position: relative; touch-action: none; user-select: none; }
.lector-escena:focus-visible { box-shadow: inset 0 0 0 3px var(--ml-accent); }
.lector-papel { align-items: center; background: transparent; box-shadow: 0 .8rem 2.2rem rgba(0,0,0,.42); display: flex; height: 100%; justify-content: center; max-width: 100%; overflow: hidden; transform: translate3d(0,0,0) scale(1); transform-origin: center center; transition: transform .22s cubic-bezier(.2,0,0,1); }
.lector-papel img { display: block; height: 100%; max-width: 100%; object-fit: contain; width: auto; }
.lector-escena.is-interacting .lector-papel { transition: none; }
.lector-escena.is-zoomed { cursor: grab; }
.lector-escena.is-zoomed.is-interacting { cursor: grabbing; }
.lector-papel--secundario { margin-left: .4rem; }
.lector-escena.is-spread .lector-papel { height: min(100%, 100%); max-width: calc(50% - .2rem); }
.lector-error { align-items: center; background: #f8f5ee; color: var(--ml-ink); display: flex; flex-direction: column; gap: .5rem; inset: 0; justify-content: center; position: absolute; text-align: center; }
.lector-error p { margin: 0; }
.lector-ayuda { background: rgba(20,16,12,.75); border-radius: 99rem; color: #fff; font-size: .72rem; left: 50%; max-width: calc(100% - 2rem); opacity: 0; padding: .45rem .7rem; pointer-events: none; position: absolute; text-align: center; top: 1rem; transform: translateX(-50%) translateY(-.4rem); transition: opacity .25s ease, transform .25s ease; z-index: 2; }
.lector-ayuda.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.lector-controles { align-items: center; background: var(--ml-ink); bottom: 0; color: #fff; display: flex; height: 4.75rem; justify-content: space-between; padding: .55rem max(1rem, env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); position: absolute; width: 100%; z-index: 2; }
.lector-controles__navegacion, .lector-controles__herramientas { align-items: center; display: flex; gap: .15rem; }
.contador-paginas { font-size: .75rem; min-width: 4.5rem; text-align: center; }
.boton-control { color: inherit; min-width: 2.5rem; }
.boton-control:focus-visible, .boton-cabecera:focus-visible, .miniatura:focus-visible { box-shadow: 0 0 0 3px var(--ml-accent); outline: none; }
.boton-control--texto { font-size: .67rem; font-weight: 700; min-width: auto; }
.boton-control[disabled] { cursor: not-allowed; opacity: .35; }
.panel-miniaturas { background: var(--ml-paper); bottom: 4.75rem; box-shadow: 0 -1rem 2rem rgba(0,0,0,.25); display: grid; grid-template-rows: auto minmax(0, 1fr); left: 0; max-height: min(58vh, 31rem); max-height: min(58dvh, 31rem); overflow: hidden; position: absolute; width: 100%; z-index: 4; }
.panel-miniaturas__cabecera { align-items: center; display: flex; justify-content: space-between; padding: .65rem 1rem .35rem; }
.panel-miniaturas__contenido { min-height: 0; overflow: auto; }
.panel-miniaturas__lista { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .35rem 1rem 1rem; }
.miniatura { aspect-ratio: 1 / 2; background: #fff; border: 2px solid transparent; border-radius: .3rem; box-shadow: 0 .15rem .55rem rgba(40,30,20,.12); min-width: 0; overflow: hidden; padding: 0; position: relative; }
.miniatura img { display: block; height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.miniatura span { background: var(--ml-ink); border-radius: 50%; bottom: .3rem; color: #fff; font-size: .65rem; height: 1.25rem; line-height: 1.25rem; position: absolute; right: .3rem; width: 1.25rem; }
.miniatura.is-active { border-color: var(--ml-wine); }
.lector-paso { inset: 0; overflow: visible; perspective: 1600px; pointer-events: none; position: absolute; z-index: 1; }
.lector-hoja { background: transparent; box-shadow: 0 .8rem 2.2rem #0006; overflow: hidden; position: absolute; backface-visibility: hidden; }
.lector-hoja img { display: block; height: 100%; object-fit: cover; width: 100%; }
.lector-hoja::after { background: linear-gradient(90deg, #0000 35%, #0005); content: ''; inset: 0; opacity: 0; position: absolute; }
.lector-paso--siguiente .lector-hoja--activa { animation: hoja-siguiente .54s cubic-bezier(.4,0,.2,1) both; transform-origin: left center; }
.lector-paso--anterior .lector-hoja--activa { animation: hoja-anterior .54s cubic-bezier(.4,0,.2,1) both; transform-origin: right center; }
.lector-paso .lector-hoja--activa::after { animation: sombra-hoja .54s ease-in-out both; }
.lector-paso--siguiente .lector-hoja--base, .lector-paso--anterior .lector-hoja--base { animation: hoja-base .45s ease both; }
.lector-escena.is-pasando .lector-papel { animation: asentar-hoja .54s cubic-bezier(.2,0,0,1) both; }
@keyframes hoja-siguiente { 0% { transform: rotateY(0); opacity: 1; } 75% { opacity: 1; } 100% { transform: rotateY(-105deg); opacity: 0; } }
@keyframes hoja-anterior { 0% { transform: rotateY(0); opacity: 1; } 75% { opacity: 1; } 100% { transform: rotateY(105deg); opacity: 0; } }
@keyframes sombra-hoja { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
@keyframes hoja-base { 0%, 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes asentar-hoja { from { filter: brightness(.86); } to { filter: brightness(1); } }
.estado-compartir { bottom: 5rem; color: #fff; font-size: .75rem; left: 50%; margin: 0; position: fixed; text-align: center; transform: translateX(-50%); z-index: 5; }
.lector-carta:fullscreen { height: 100vh; height: 100dvh; min-height: 0; }

@media (min-width: 640px) { .panel-miniaturas { left: auto; right: 1rem; width: min(34rem, calc(100% - 2rem)); } .panel-miniaturas__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 820px) { .marca-lector strong { font-size: 1rem; } .marca-lector small { font-size: .68rem; } .selector-carta__opcion { font-size: .78rem; padding-inline: .9rem; } .boton-cabecera { font-size: .8rem; } }
@media (max-width: 575px) { .lector-cabecera { gap: .35rem; padding-inline: max(.65rem, env(safe-area-inset-left)) max(.65rem, env(safe-area-inset-right)); } .marca-lector img { height: 2.5rem; width: 2.5rem; } .marca-lector small { display: none; } .selector-carta__opcion { padding-inline: .45rem; } .boton-cabecera span { display: none; } .lector-controles__herramientas { gap: 0; } .boton-control { min-width: 2.2rem; padding-inline: .4rem; } .boton-control--texto { min-width: 2.2rem; } .boton-control--texto span { display: none; } }
@media (max-width: 700px), (max-height: 560px) { .boton-control--escritorio { display: none; } .lector-escena.is-spread .lector-papel--secundario { display: none; } }
@media (max-width: 400px) { .lector-controles { align-items: center; flex-wrap: wrap; height: 5.1rem; justify-content: center; padding-block: .2rem; } .lector-controles__navegacion, .lector-controles__herramientas { height: 2.3rem; } .lector-escena { height: calc(100% - 5.1rem); } .panel-miniaturas { bottom: 5.1rem; } .estado-compartir { bottom: 5.3rem; } }
@media (max-height: 560px) { .lector-cabecera { padding-block: .25rem; } .marca-lector img { height: 2.45rem; width: 2.45rem; } .lector-controles { height: 3.5rem; padding-block: .25rem; } .lector-escena { height: calc(100% - 3.5rem); padding-top: .35rem; } .panel-miniaturas { bottom: 3.5rem; } .estado-compartir { bottom: 3.75rem; } }
@media (max-width: 400px) and (max-height: 560px) { .lector-controles { height: 5.1rem; } .lector-escena { height: calc(100% - 5.1rem); } .panel-miniaturas { bottom: 5.1rem; } .estado-compartir { bottom: 5.3rem; } }
@media (prefers-reduced-motion: reduce) { .lector-papel, .lector-ayuda, .boton-control, .boton-cabecera { transition: none; } }