@import url('../../assets/css/tool.css');
.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;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{font-size:2.4rem;color:var(--acento)}.archivo-oculto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.controles{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr);gap:1rem;align-items:end;padding:1.1rem;border:1px solid var(--borde);border-radius:var(--radio-pequeno);background:var(--superficie)}.controles[hidden]{display:none}.control-calidad{display:grid;gap:.6rem;font-weight:700}.control-calidad span{display:flex;justify-content:space-between}.control-calidad output{color:var(--acento)}.control-calidad input{width:100%;accent-color:var(--acento)}.control-calidad small{color:var(--texto-suave);font-weight:400}.controles .campo{gap:.6rem}.aviso-png{grid-column:1/-1;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.9rem;border:1px solid color-mix(in srgb,var(--acento) 35%,var(--borde));border-radius:.65rem;background:color-mix(in srgb,var(--acento) 7%,var(--superficie))}.aviso-png[hidden]{display:none}.aviso-png p{margin:0;color:var(--texto-suave);font-size:.9rem}.aviso-png strong{color:var(--texto)}.aviso-png .boton-secundario{flex:0 0 auto}.controles .acciones{grid-column:1/-1;margin:0}.boton-limpiar{margin-left:auto}
.estado{min-height:1.5rem;color:var(--texto-suave)}.estado.error{color:#ef767a}.estado.exito{color:var(--marca-secundaria)}.lista-imagenes{display:grid;gap:1rem}.tarjeta-imagen{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1rem;padding:1rem;border:1px solid var(--borde);border-radius:var(--radio-pequeno);background:var(--superficie)}.vista-imagen{display:grid;place-items:center;overflow:hidden;min-height:120px;border-radius:.65rem;background-image:linear-gradient(45deg,#aaa2 25%,transparent 25%),linear-gradient(-45deg,#aaa2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aaa2 75%),linear-gradient(-45deg,transparent 75%,#aaa2 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.vista-imagen img{display:block;width:100%;height:140px;object-fit:contain}.detalle-imagen{min-width:0}.encabezado-imagen{display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between}.encabezado-imagen h3{overflow-wrap:anywhere;margin:0;font-size:1rem}.quitar{flex:0 0 auto;border:0;background:transparent;color:var(--texto-suave);font-size:1.4rem;cursor:pointer}.quitar:hover{color:#ef767a}.quitar:focus-visible{outline:2px solid var(--acento);outline-offset:2px}.metadatos{display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin:.6rem 0;color:var(--texto-suave);font-size:.875rem}.resultado-compresion{display:grid;gap:.7rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--borde)}.metricas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.metrica{padding:.6rem;border-radius:.55rem;background:var(--tarjeta);font-size:.8rem;color:var(--texto-suave)}.metrica strong{display:block;margin-top:.2rem;color:var(--texto);font-size:.95rem}.reduccion{color:var(--marca-secundaria)!important}.advertencia{margin:0;color:#e7ad55;font-size:.9rem}.progreso{height:.4rem;overflow:hidden;border-radius:999px;background:var(--tarjeta)}.progreso span{display:block;width:35%;height:100%;border-radius:inherit;background:var(--acento);animation:cargando 1s ease-in-out infinite alternate}.error-imagen{margin:.5rem 0 0;color:#ef767a}.descarga-resultado{justify-self:start}
@keyframes cargando{to{transform:translateX(185%)}}@media(max-width:700px){.controles{grid-template-columns:1fr}.aviso-png{align-items:stretch;flex-direction:column}.tarjeta-imagen{grid-template-columns:1fr}.vista-imagen img{height:190px}.metricas{grid-template-columns:1fr}.boton-limpiar{margin-left:0}.controles .acciones>*{width:100%}}@media(prefers-reduced-motion:reduce){.progreso span{animation:none;width:70%}.zona-carga{transition:none}}