@import url('../../assets/css/tool.css');

.poster-app{max-width:1100px;display:grid;gap:1.25rem}.poster-app [hidden]{display:none!important}.privacidad{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border:1px solid color-mix(in srgb,var(--marca-secundaria) 45%,var(--borde));border-radius:var(--radio-pequeno);background:color-mix(in srgb,var(--marca-secundaria) 9%,var(--superficie));color:var(--texto-suave)}.privacidad span{display:grid;flex:0 0 1.6rem;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--marca-secundaria);color:#09271d;font-weight:800}.privacidad p{margin:0}.privacidad strong{color:var(--texto)}
.zona-carga{display:grid;place-items:center;gap:.55rem;min-height:250px;padding:2.5rem 1rem;border:2px dashed var(--borde);border-radius:var(--radio);background:var(--superficie);text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}.zona-carga:hover,.zona-carga.arrastrando{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 7%,var(--superficie));transform:translateY(-1px)}.zona-carga:focus-visible{outline:3px solid color-mix(in srgb,var(--acento) 40%,transparent);outline-offset:3px}.zona-carga h2,.zona-carga p{margin:0}.zona-carga p,.zona-carga small{color:var(--texto-suave)}.icono-carga{display:grid;place-items:center;width:58px;height:66px;border:1px solid color-mix(in srgb,var(--acento) 35%,var(--borde));border-radius:10px;background:color-mix(in srgb,var(--acento) 12%,var(--tarjeta));color:var(--acento);font-size:.72rem;font-weight:900}.archivo-oculto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.estado{min-height:1.5rem;color:var(--texto-suave);font-size:.9rem}.estado.error{color:#ff7474}.estado.exito{color:var(--marca-secundaria)}.estado.procesando::before{content:'';display:inline-block;width:.85rem;height:.85rem;margin-right:.5rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;vertical-align:-.12rem;animation:girar .75s linear infinite}
.espacio-trabajo{display:grid;gap:1.25rem}.barra-imagen{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--borde)}.resumen-imagen{display:flex;align-items:center;gap:.8rem;min-width:0}.resumen-imagen img{display:block;flex:0 0 64px;width:64px;height:52px;object-fit:contain;border-radius:8px;background:var(--tarjeta)}.resumen-imagen span{display:grid;min-width:0}.resumen-imagen strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.resumen-imagen small{color:var(--texto-suave)}
.editor-poster{display:grid;grid-template-columns:minmax(270px,.75fr) minmax(340px,1.25fr);gap:1.25rem}.configuracion{display:grid;gap:.8rem}.configuracion fieldset{display:grid;gap:.75rem;padding:1rem;border:1px solid var(--borde);border-radius:12px;background:var(--superficie)}.configuracion legend{padding:0 .35rem;font-weight:800}.campos-dobles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.campo{gap:.45rem}.campo select,.campo input{width:100%}.total-hojas{padding:.65rem;border-radius:8px;background:color-mix(in srgb,var(--acento) 10%,var(--tarjeta));color:var(--acento);text-align:center;font-weight:850}.opciones-radio{display:grid;gap:.55rem}.opciones-radio label{cursor:pointer}.opciones-radio input{position:absolute;opacity:0}.opciones-radio span{display:grid;gap:.15rem;padding:.75rem;border:1px solid var(--borde);border-radius:9px;background:var(--tarjeta)}.opciones-radio small{color:var(--texto-suave);font-weight:400}.opciones-radio input:checked+span{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 9%,var(--superficie))}.opciones-radio input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--acento) 35%,transparent);outline-offset:2px}.opcion-check{display:flex;gap:.6rem;align-items:center;cursor:pointer}.opcion-check input{width:1.1rem;height:1.1rem;accent-color:var(--acento)}
.panel-vista{display:grid;align-content:start;gap:.9rem;min-width:0;padding:1rem;border:1px solid var(--borde);border-radius:12px;background:var(--superficie)}.cabecera-vista{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.cabecera-vista h2,.cabecera-vista p{margin:0}.cabecera-vista h2{font-size:1.15rem}.cabecera-vista p,.ayuda-vista{color:var(--texto-suave);font-size:.87rem}.cabecera-vista>span{flex:0 0 auto;padding:.35rem .55rem;border-radius:99px;background:var(--tarjeta);color:var(--texto-suave);font-size:.76rem;font-weight:750}.lienzo-vista{position:relative;overflow:hidden;justify-self:center;width:100%;max-width:620px;aspect-ratio:1/1;background:#fff;box-shadow:0 9px 28px #0002}.lienzo-vista>img{position:absolute;width:100%;height:100%;object-fit:contain}.lienzo-vista.llenar>img{object-fit:cover}.cuadricula{position:absolute;inset:0}.pagina-vista{position:absolute;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--acento) 82%,#fff);background:transparent;color:#fff;font-size:clamp(.7rem,2.3vw,1rem);font-weight:900;text-shadow:0 1px 3px #000,0 0 5px #000}.pagina-vista span{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .35rem;border-radius:99px;background:#161622b8}.ayuda-vista{margin:0}.acciones-poster{display:flex;flex-wrap:wrap;gap:.65rem}.acciones-poster button:disabled{opacity:.5;cursor:not-allowed}.resultado{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid color-mix(in srgb,var(--marca-secundaria) 45%,var(--borde));border-radius:12px;background:color-mix(in srgb,var(--marca-secundaria) 8%,var(--superficie))}.resultado h2,.resultado p{margin:0}.resultado h2{font-size:1.1rem}.resultado p{color:var(--texto-suave);font-size:.9rem}.contenido-ayuda{max-width:1100px;margin-top:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.contenido-ayuda section{padding:1.4rem}.contenido-ayuda h2{margin-bottom:.8rem;font-size:1.3rem}.contenido-ayuda p,.contenido-ayuda li{color:var(--texto-suave)}.contenido-ayuda ol{display:grid;gap:.5rem;padding-left:1.25rem}
@keyframes girar{to{transform:rotate(360deg)}}
@media(max-width:820px){.editor-poster{grid-template-columns:1fr}.panel-vista{order:-1}}
@media(max-width:700px){.poster-app{margin-inline:-12px;padding:16px;border-radius:0}.zona-carga{min-height:225px;padding:2rem .8rem}.barra-imagen,.resultado{align-items:stretch;flex-direction:column}.barra-imagen .boton-secundario,.resultado .boton,.acciones-poster>*{width:100%}.contenido-ayuda{grid-template-columns:1fr}.cabecera-vista{align-items:stretch;flex-direction:column}.cabecera-vista>span{align-self:flex-start}}
@media(max-width:390px){.campos-dobles{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.zona-carga{transition:none}}