/* Útiles de imagen (utiles-herramientas.js). Se usa en utiles.html, que carga
   tokens.css, y en las páginas SEO /es/utiles/ y /en/tools/, que no lo cargan:
   por eso cada color sale de un token con su valor de respaldo. */
.uth{
 /* Familia Cocuyo (familia.css) si está; si no, tokens.css; si no, respaldo. */
 --uth-fondo:var(--f-sup-1,var(--negro-abismo,#0b0b0b));--uth-sup:var(--f-sup-2,var(--negro-elevado,#121212));--uth-borde:var(--f-linea-fuerte,var(--negro-borde,#262626));
 --uth-texto:var(--f-texto,var(--blanco-luz,#f8fafc));--uth-suave:var(--f-texto-2,var(--gris-niebla,#cbd5e1));--uth-tenue:var(--f-texto-3,var(--gris-humo,#94a3b8));
 --uth-acento:var(--f-lima,var(--verde-cocuyo,#aff33e));--uth-peligro:var(--peligro,#f87171);--uth-aviso:#f5c451;
 color:var(--uth-texto);font-size:14px;line-height:1.5;min-width:0
}
.uth *,.uth *::before,.uth *::after{box-sizing:border-box}
.uth [hidden],.uth[hidden]{display:none!important}
/* Puerta de cuenta compartida: también se usa fuera de .uth (WAV y útiles). */
.cuc-content{display:contents}
.cuc-content[hidden],.cuc-gate[hidden],.cuc-gate [hidden]{display:none!important}
/* Prueba sin cuenta gastada (útiles de pantalla): el panel sigue a la vista
   pero no se puede usar hasta entrar. */
.cuc-content[inert]>*{opacity:.5}
.cuc-gate{box-sizing:border-box;display:grid;gap:12px;grid-column:1/-1;width:100%;min-width:0;padding:24px;border:1px solid var(--f-linea-fuerte,var(--negro-borde,#262626));border-radius:14px;background:var(--f-sup-2,var(--negro-elevado,#121212));color:var(--f-texto,var(--blanco-luz,#f8fafc));font-size:14px;line-height:1.5}
.cuc-gate strong{font-size:16px;line-height:1.4}
.cuc-gate p{margin:0;color:var(--f-texto-2,var(--gris-niebla,#cbd5e1));line-height:1.5;overflow-wrap:anywhere}
.cuc-actions{display:flex;flex-wrap:wrap;gap:10px}
.cuc-signup,.cuc-login,.cuc-retry,.cuc-close{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--f-linea-fuerte,var(--negro-borde,#262626));border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.cuc-signup{background:var(--f-lima,var(--verde-cocuyo,#aff33e));border-color:transparent;color:var(--f-lima-tinta,var(--tinta-sobre-verde,#0a0a0a))}
.cuc-login:hover,.cuc-retry:hover,.cuc-close:hover{border-color:var(--f-texto-3,var(--gris-humo,#94a3b8))}
.cuc-actions :focus-visible{outline:2px solid var(--f-lima,var(--verde-cocuyo,#aff33e));outline-offset:3px}
@media(max-width:480px){.cuc-gate{padding:18px}.cuc-actions>*{flex:1 1 160px}}
/* Recordatorio de aporte (utiles-cuenta.js, 6-oct-2026): una línea discreta
   bajo el útil tras un uso con resultado. No es modal ni tapa nada. Solo
   variables de tokens.css (todas las páginas de útiles lo cargan). */
.cuc-aporte{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;grid-column:1/-1;width:100%;min-width:0;margin-top:12px;padding:8px 6px 8px 14px;border:1px solid var(--negro-borde);border-radius:12px;background:var(--negro-elevado);color:var(--gris-niebla);font-size:13px;line-height:1.45}
.cuc-aporte[hidden]{display:none!important}
.cuc-aporte p{flex:1 1 220px;min-width:0;margin:0;overflow-wrap:anywhere}
.cuc-aporte-ir,.cuc-aporte-cerrar{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.cuc-aporte-ir{padding:8px 16px;border:1px solid var(--verde-cocuyo);color:var(--verde-cocuyo);text-decoration:none;white-space:nowrap}
.cuc-aporte-ir:hover{background:var(--verde-cocuyo);color:var(--tinta-sobre-verde)}
.cuc-aporte-cerrar{flex:none;min-width:44px;padding:0;border:0;background:transparent;color:var(--gris-humo);font-size:20px;line-height:1}
.cuc-aporte-cerrar:hover{color:var(--blanco-luz)}
.cuc-aporte :focus-visible{outline:var(--foco-contorno);outline-offset:var(--foco-separacion)}
@media(max-width:480px){.cuc-aporte{padding:10px 6px 10px 12px}.cuc-aporte p{flex-basis:100%}.cuc-aporte-ir{flex:1 1 auto}}
.uth p{margin:0;line-height:1.5}
.uth-rejilla{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);grid-template-areas:"fuente panel" "lote panel";grid-template-rows:auto 1fr;gap:24px 32px;align-items:start}
.uth-fuente{grid-area:fuente;min-width:0;display:grid;gap:14px}
.uth-panel{grid-area:panel;min-width:0;display:grid;gap:16px;align-content:start}
.uth-lote{grid-area:lote;min-width:0;display:grid;gap:10px}
.uth-rejilla-qr{grid-template-areas:"fuente panel"}
.uth-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:190px;padding:24px;background:var(--uth-fondo);border:1px dashed color-mix(in srgb,var(--uth-texto) 30%,transparent);border-radius:14px;color:var(--uth-texto);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.uth-drop:hover,.uth-drop.is-arrastrando{border-color:var(--uth-acento);background:color-mix(in srgb,var(--uth-acento) 5%,var(--uth-fondo))}
.uth-drop.is-compacta{min-height:84px;flex-direction:row;gap:12px;padding:16px}.uth-drop.is-compacta span{display:none}
.uth-drop:disabled{cursor:not-allowed;opacity:.55}
.uth-drop strong{font-size:15px;font-weight:600}.uth-drop span{font-size:12px;color:var(--uth-suave)}
.uth-ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.uth-drop .uth-ico{width:28px;height:28px;color:var(--uth-acento)}
.uth-limites,.uth-nota{font-size:12px;color:var(--uth-tenue)}
.uth-campos,.uth-grupo{display:grid;gap:14px}
.uth-campo{display:grid;gap:6px;min-width:0}
.uth-campo>label,.uth-pastillas legend,.uth-info strong,.uth-snippet strong{font-size:12px;font-weight:600;color:var(--uth-suave);letter-spacing:.01em}
.uth-campo-rango{grid-template-columns:1fr auto}.uth-campo-rango>input,.uth-campo-rango>.uth-nota{grid-column:1/-1}
.uth-campo-rango output{font-size:12px;color:var(--uth-texto);font-variant-numeric:tabular-nums}
.uth input[type=text],.uth input[type=url],.uth input[type=tel],.uth input[type=email],.uth input[type=number],.uth select,.uth textarea{width:100%;min-width:0;min-height:44px;padding:10px 12px;background:var(--uth-fondo);color:var(--uth-texto);border:1px solid var(--uth-borde);border-radius:10px;font:inherit;font-size:14px}
.uth textarea{resize:vertical;min-height:72px}
.uth select{appearance:auto}
.uth input[type=color]{width:100%;height:44px;padding:4px;background:var(--uth-fondo);border:1px solid var(--uth-borde);border-radius:10px;cursor:pointer}
.uth input[type=range]{width:100%;accent-color:var(--uth-acento);min-height:28px}
.uth input:focus-visible,.uth select:focus-visible,.uth textarea:focus-visible,.uth button:focus-visible,.uth a:focus-visible,.uth [tabindex]:focus-visible,.uth .uth-pastilla:has(input:focus-visible),.uth .uth-pos:has(input:focus-visible),.uth .uth-casilla:has(input:focus-visible){outline:2px solid var(--uth-acento);outline-offset:2px}
.uth-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.uth-cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.uth-pastillas{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.uth-pastillas legend{padding:0;margin-bottom:8px}
.uth-pastillas-op{display:flex;flex-wrap:wrap;gap:6px}
.uth-pastilla{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--uth-borde);border-radius:999px;background:var(--uth-fondo);color:var(--uth-suave);font-size:13px;cursor:pointer;user-select:none}
.uth-pastilla.is-activa{color:var(--uth-texto);border-color:color-mix(in srgb,var(--uth-acento) 70%,var(--uth-borde));background:color-mix(in srgb,var(--uth-acento) 9%,var(--uth-fondo))}
.uth-pastilla.is-desactivada{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.uth-sr-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.uth-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uth-casilla{display:flex;align-items:center;gap:10px;min-height:40px;font-size:13px;color:var(--uth-suave);cursor:pointer}
.uth-casilla input{width:18px;height:18px;accent-color:var(--uth-acento)}
.uth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.uth-btn-primario{background:var(--uth-acento);color:var(--f-lima-tinta,var(--tinta-sobre-verde,#0a0a0a))}
.uth-btn-primario:hover{background:color-mix(in srgb,var(--uth-acento) 85%,#fff)}
.uth-btn-fantasma{background:transparent;color:var(--uth-texto);border-color:var(--uth-borde)}
.uth-btn-fantasma:hover{border-color:color-mix(in srgb,var(--uth-texto) 40%,var(--uth-borde))}
.uth-btn-fantasma[aria-pressed=true]{border-color:var(--uth-acento);color:var(--uth-acento)}
.uth-btn:disabled{opacity:.45;cursor:not-allowed}
.uth-btn-sm{min-height:36px;padding:6px 12px;font-size:13px}
.uth-btn-icono{min-height:36px;min-width:36px;padding:6px;background:transparent;color:var(--uth-texto);border-color:var(--uth-borde)}
.uth-btn-icono .uth-ico{width:18px;height:18px}
.uth-acciones{display:flex;flex-wrap:wrap;gap:10px}
.uth-accion{flex:1 1 auto}
.uth-estado{font-size:13px;color:var(--uth-suave);min-height:1.5em}.uth-estado:empty{min-height:0}
.uth-estado.is-error,.uth-aviso.is-error,.uth-item-estado.is-error{color:var(--uth-peligro)}
.uth-aviso{font-size:12px;color:var(--uth-aviso)}.uth-aviso:empty{display:none}
.uth-cuenta{display:grid;gap:10px;padding:18px;border:1px solid color-mix(in srgb,var(--uth-acento) 45%,var(--uth-borde));border-radius:14px;background:color-mix(in srgb,var(--uth-acento) 6%,var(--uth-sup))}
.uth-cuenta p{font-size:13px;color:var(--uth-suave)}
.uth-cuenta-acciones{display:flex;flex-wrap:wrap;gap:10px}
.uth-lote-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.uth-contador{font-size:12px;color:var(--uth-tenue);font-variant-numeric:tabular-nums}
.uth-archivos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.uth-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);min-width:0}
.uth-item.is-arrastrando{opacity:.7;border-color:var(--uth-acento)}
.uth-mini-marco{flex:none;width:52px;height:52px;border-radius:8px;background:repeating-conic-gradient(#1c1c1c 0 25%,#141414 0 50%) 0 0/12px 12px;display:grid;place-items:center;overflow:hidden}
.uth-mini{max-width:100%;max-height:100%;display:block;transition:transform .2s}
.uth-con-giro .uth-mini{transform:var(--uth-giro)}
.uth-item-meta{flex:1;min-width:0;display:grid;gap:3px}
.uth-item-meta strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.uth-item-meta small{font-size:12px;color:var(--uth-tenue);overflow-wrap:anywhere}
.uth-item-detalle{color:var(--uth-suave)!important}
.uth-item-estado{font-size:12px;color:var(--uth-suave)}.uth-item-estado.is-ok{color:var(--uth-acento)}
.uth-item-progreso{width:100%;height:4px;margin-top:4px;accent-color:var(--uth-acento)}
.uth-item-acciones{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:48%}
.uth-asir{flex:none;align-self:center;display:grid;place-items:center;width:28px;height:44px;color:var(--uth-tenue);cursor:grab;touch-action:none}
.uth-meta{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:2px;font-size:12px;color:var(--uth-suave)}
.uth-meta li{overflow-wrap:anywhere}
.uth-meta-gps{color:var(--uth-aviso)}
.uth-meta.is-limpia{text-decoration:line-through;opacity:.6}
.uth-salidas{display:grid;gap:8px}
.uth-salida{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo)}
.uth-salida-vista{flex:none;width:auto;height:auto;max-width:48px;max-height:48px;image-rendering:auto;background:repeating-conic-gradient(#1c1c1c 0 25%,#141414 0 50%) 0 0/8px 8px;border-radius:4px}
.uth-salida-meta{flex:1;min-width:0;display:grid;gap:2px}.uth-salida-meta strong{font-size:13px;overflow-wrap:anywhere}.uth-salida-meta span{font-size:12px;color:var(--uth-tenue)}
.uth-zip{display:flex;flex-wrap:wrap;gap:10px}
.uth-privacidad{display:flex;align-items:center;gap:10px;margin-top:22px!important;font-size:12px;color:var(--uth-suave)}
.uth-privacidad .uth-ico{width:18px;height:18px;color:var(--uth-acento)}
.uth-info{display:grid;gap:6px;padding:16px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo)}
.uth-info p{font-size:13px;color:var(--uth-suave)}
.uth-extra:empty{display:none}
/* Recorte */
.uth-recorte{display:grid;gap:10px;justify-items:center}
.uth-recorte-marco{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:10px;line-height:0;background:repeating-conic-gradient(#1c1c1c 0 25%,#141414 0 50%) 0 0/16px 16px}
.uth-recorte-img{display:block;max-width:100%;max-height:min(62vh,560px);width:auto;height:auto;user-select:none;-webkit-user-drag:none}
.uth-recorte-caja{position:absolute;box-shadow:0 0 0 100vmax rgba(0,0,0,.58);outline:1px solid rgba(255,255,255,.9);cursor:move;touch-action:none;background-image:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)),linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)),linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.28)),linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.28));background-size:100% 1px,100% 1px,1px 100%,1px 100%;background-position:0 33.33%,0 66.66%,33.33% 0,66.66% 0;background-repeat:no-repeat}
.uth-recorte-caja:focus-visible{outline:2px solid var(--uth-acento);outline-offset:0}
.uth-recorte-caja.is-circulo{box-shadow:none;outline:none;background-image:none}
.uth-recorte-caja.is-circulo::before{content:'';position:absolute;inset:0;border-radius:50%;outline:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 100vmax rgba(0,0,0,.58);pointer-events:none}
.uth-recorte-caja.is-circulo:focus-visible::before{outline:2px solid var(--uth-acento)}
.uth-recorte-caja.is-circulo>.uth-asa{z-index:1}
.uth-asa{position:absolute;width:22px;height:22px;touch-action:none}
.uth-asa::after{content:'';position:absolute;inset:6px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.uth-asa-nw{left:-11px;top:-11px;cursor:nwse-resize}.uth-asa-ne{right:-11px;top:-11px;cursor:nesw-resize}.uth-asa-se{right:-11px;bottom:-11px;cursor:nwse-resize}.uth-asa-sw{left:-11px;bottom:-11px;cursor:nesw-resize}
.uth-asa-n{left:calc(50% - 11px);top:-11px;cursor:ns-resize}.uth-asa-s{left:calc(50% - 11px);bottom:-11px;cursor:ns-resize}.uth-asa-e{right:-11px;top:calc(50% - 11px);cursor:ew-resize}.uth-asa-w{left:-11px;top:calc(50% - 11px);cursor:ew-resize}
/* QR */
.uth-qr-vista{display:grid;place-items:center;padding:18px;border:1px solid var(--uth-borde);border-radius:14px;background:var(--uth-fondo)}
.uth-qr-lienzo{width:100%;max-width:300px;height:auto;aspect-ratio:1;image-rendering:pixelated;border-radius:6px}
.uth-mas{border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo)}
.uth-mas>summary{cursor:pointer;min-height:44px;padding:12px 16px;font-size:13px;font-weight:600;list-style-position:inside}
.uth-mas>.uth-campos{padding:4px 16px 16px}
.uth-logo{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Marca de agua y rotar */
.uth-posiciones{display:grid;grid-template-columns:repeat(3,44px);gap:6px}
.uth-pos{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--uth-borde);border-radius:8px;background:var(--uth-fondo);cursor:pointer}
.uth-pos span{width:10px;height:10px;border-radius:50%;background:var(--uth-tenue)}
.uth-pos:has(input:checked){border-color:var(--uth-acento)}.uth-pos:has(input:checked) span{background:var(--uth-acento)}
.uth-vista{margin:0;display:grid;gap:6px;justify-items:center}
.uth-vista-lienzo{max-width:100%;max-height:min(55vh,480px);width:auto;height:auto;border-radius:10px;background:repeating-conic-gradient(#1c1c1c 0 25%,#141414 0 50%) 0 0/16px 16px}
.uth-botonera{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.uth-botonera .uth-btn{white-space:normal;text-align:center;font-size:13px}
.uth-fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Favicon */
.uth-snippet{display:grid;gap:8px}
.uth-codigo{margin:0;padding:14px;max-width:100%;overflow:auto;border:1px solid var(--uth-borde);border-radius:10px;background:var(--uth-fondo);font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--uth-suave);white-space:pre}
@media (max-width:860px){
 .uth-rejilla,.uth-rejilla-qr{grid-template-columns:minmax(0,1fr);grid-template-areas:"fuente" "panel" "lote";grid-template-rows:none;gap:20px}
}
@media (max-width:520px){
 .uth-cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
 .uth-drop:not(.is-compacta){min-height:150px}
 .uth-item{flex-wrap:wrap}
 .uth-item-acciones{max-width:none;width:100%;justify-content:flex-start;padding-left:64px}
 .uth-dos{grid-template-columns:minmax(0,1fr)}
 .uth-dos:has(input[type=color]){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.uth *{transition:none!important}}

/* utiles.html: filtro de categorías sobre las pestañas (utiles-categorias.js) */
.ut-cats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.ut-cats button{min-height:40px;padding:8px 16px;border:1px solid var(--negro-borde,#262626);border-radius:999px;background:transparent;color:var(--gris-niebla,#cbd5e1);font:inherit;font-size:13px;cursor:pointer}
.ut-cats button[aria-pressed=true]{color:var(--blanco-luz,#f8fafc);border-color:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 70%,transparent);background:color-mix(in srgb,var(--verde-cocuyo,#aff33e) 9%,transparent)}
.ut-cats-estado{font-size:12px;color:var(--gris-humo,#94a3b8);margin-left:4px}
/* PDF (utiles-pdf-herramientas.js) */
.uth-mini-pdf{display:grid;place-items:center;width:100%;height:100%;font:700 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--uth-acento);background:var(--uth-sup)}
.uth-organizar{display:grid;gap:12px;min-width:0}
.uth-paginas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;max-height:min(70vh,760px);overflow:auto;overscroll-behavior:contain;padding:2px}
.uth-pagina{display:grid;gap:6px;padding:8px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);min-width:0}
.uth-pagina.is-arrastrando{opacity:.7;border-color:var(--uth-acento)}
.uth-pagina.is-quitada .uth-pagina-vista{opacity:.3}.uth-pagina.is-quitada .uth-pagina-num{text-decoration:line-through}
.uth-pagina-vista{display:grid;place-items:center;height:140px;overflow:hidden;border-radius:8px;background:var(--uth-sup);cursor:grab;touch-action:none;user-select:none}
.uth-pagina-vista>*{max-width:100%;max-height:100%;transform:rotate(var(--uth-rot,0deg));transition:transform .2s}
.uth-pagina-vista>.uth-mini-pdf{width:60px;height:80px;border-radius:6px}
.uth-pagina-lienzo{display:block;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.uth-pagina-num{font-size:12px;color:var(--uth-suave);text-align:center;overflow-wrap:anywhere}
.uth-pagina-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.uth-pagina-acciones .uth-btn-icono{min-width:30px;min-height:30px;padding:4px}.uth-pagina-acciones .uth-btn-icono .uth-ico{width:16px;height:16px}
.uth-pagina-acciones .uth-btn-sm{min-height:30px;padding:4px 10px;font-size:12px;flex-basis:100%}
.uth-pagina-acciones .uth-btn-sm[aria-pressed=true]{border-color:var(--uth-aviso);color:var(--uth-aviso)}
/* Imagen extra (utiles-imagen-extra.js) */
.uth-zonas-marco{touch-action:none;cursor:crosshair}
.uth-zona{position:absolute;outline:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);cursor:move;touch-action:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(255,255,255,.08)}
.uth-zona-pixelar{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 0 75%,rgba(255,255,255,.18) 0),linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 0 75%,rgba(255,255,255,.18) 0);background-size:14px 14px;background-position:0 0,7px 7px}
.uth-zona.is-activa,.uth-zona:focus-visible{outline:2px solid var(--uth-acento)}
.uth-zona-quitar{position:absolute;top:-12px;right:-12px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:#fff;color:#111;font:700 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.uth-zona-quitar::before{content:'';position:absolute;inset:-10px}
.uth-paleta{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.uth-color{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);min-width:0}
.uth-color-muestra{flex:none;width:44px;height:44px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.uth-color-meta{flex:1;min-width:0;display:grid;gap:2px}.uth-color-meta strong{font:600 14px/1.3 ui-monospace,Menlo,Consolas,monospace}.uth-color-meta small{font-size:12px;color:var(--uth-tenue);overflow-wrap:anywhere}
.uth-tamanos{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:0 12px}
.uth-base64{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.uth-inverso{margin-top:18px}.uth-inverso-estado.is-error{color:var(--uth-peligro)}.uth-inverso .uth-vista-lienzo{justify-self:start}
/* Texto (utiles-texto.js) */
.uth-rejilla-texto{grid-template-areas:"fuente panel";grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.uth .uth-texto{min-height:200px;font-size:15px;line-height:1.55}
.uth-subtitulo{font-size:13px;font-weight:600;color:var(--uth-suave)}
.uth-cifras{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.uth-cifra{padding:10px 12px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);min-width:0}
.uth-cifra dt{font-size:11px;color:var(--uth-tenue);overflow-wrap:anywhere}.uth-cifra dd{margin:2px 0 0;font-size:20px;font-weight:620;font-variant-numeric:tabular-nums;color:var(--uth-texto)}
.uth-redes{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:560px;overflow:auto}
.uth-red{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 12px;border:1px solid var(--uth-borde);border-radius:10px;background:var(--uth-fondo)}
.uth-red-nombre{font-size:13px;color:var(--uth-texto);overflow-wrap:anywhere}.uth-red-cifra{font-size:12px;color:var(--uth-suave);font-variant-numeric:tabular-nums;text-align:right}
.uth-red progress{grid-column:1/-1;width:100%;height:4px;accent-color:var(--uth-acento)}
.uth-red-estado{grid-column:1/-1;font-size:11px;color:var(--uth-tenue)}
.uth-red.is-cerca progress{accent-color:var(--uth-aviso)}.uth-red.is-cerca .uth-red-estado{color:var(--uth-aviso)}
.uth-red.is-excede{border-color:color-mix(in srgb,var(--uth-peligro) 55%,var(--uth-borde))}.uth-red.is-excede progress{accent-color:var(--uth-peligro)}.uth-red.is-excede .uth-red-estado{color:var(--uth-peligro)}
@media (max-width:860px){.uth-rejilla-texto{grid-template-columns:minmax(0,1fr);grid-template-areas:"fuente" "panel"}}
@media (max-width:520px){.uth-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}.uth-paginas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Páginas SEO de cada útil (/es/utiles/, /en/tools/) ---- */
.utl-herramienta{margin:0 0 72px;padding:28px;border:1px solid var(--border,#262626);border-radius:18px;background:#0d0e0d}
.utl-hero{padding:56px 0 28px;max-width:860px}
.utl-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.045em;font-weight:620;margin:10px 0 16px}
.utl-hero .lead{max-width:720px}
.utl-chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted,#acb2ad)}
.utl-chips li{display:flex;align-items:center;gap:8px}.utl-chips li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green,#b4f43a)}
.utl-otros{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.utl-otros a{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--border,#262626);border-radius:12px;background:#111413}
.utl-otros a:hover{border-color:#b4f43a70}
.utl-otros strong{font-size:15px;font-weight:620}.utl-otros span{font-size:13px;color:var(--muted,#acb2ad);line-height:1.5}
@media (max-width:650px){.utl-herramienta{padding:18px 16px;margin-inline:-6px;border-radius:14px}.utl-hero{padding:36px 0 22px}}
/* Útiles de vídeo y audio (utiles-video-audio.js). El <video> que se recorre
   para leer fotogramas vive fuera de la vista: diminuto pero pintado, para que
   el navegador siga entregando fotogramas (requestVideoFrameCallback). */
.uth-medio-oculto{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none;z-index:-1}
.uth-medio-oculto video{width:2px;height:2px}
.uth-mini-video{display:block;max-width:100%;max-height:100%;border-radius:4px}
.uth-mini-audio{font-size:11px}
.uth-recortador{display:grid;gap:10px;min-width:0}
.uth-video-vista{display:block;width:100%;max-height:min(50vh,420px);border-radius:12px;background:#000}
.uth-audio-vista{display:block;width:100%;height:40px}
.uth-onda{display:block;width:100%;height:96px;border-radius:10px;background:var(--uth-fondo)}
.uth-barras input[type=range]{width:100%;accent-color:var(--uth-acento)}
.uth-marcas{justify-content:flex-start;flex-wrap:wrap}
.uth-aviso{padding:12px 14px;border-radius:12px;border:1px solid var(--uth-peligro);color:var(--uth-texto);background:color-mix(in srgb,var(--uth-peligro) 10%,transparent);font-size:13px;margin-bottom:14px}
/* Útiles locales, tanda 2 (utiles-svg.js y utiles-video-extra.js) */
.uth-svg-vista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.uth-svg-vista figure{margin:0;display:grid;gap:6px;justify-items:center;min-width:0}
.uth-svg-img{display:block;max-width:100%;max-height:min(40vh,320px);width:auto;height:auto;border-radius:10px;background:repeating-conic-gradient(#1c1c1c 0 25%,#141414 0 50%) 0 0/16px 16px}
.uth-tira-vertical{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.uth-tira-foto{display:block;width:100%;height:auto;border-radius:8px;background:#000}
.uth-onda-silencios{height:96px}
.uth-resumen-silencios{color:var(--uth-texto);font-variant-numeric:tabular-nums}
.uth-etiqueta{font-size:12px;font-weight:600;color:var(--uth-suave);letter-spacing:.01em}
.uth-fila-izq{justify-content:flex-start;flex-wrap:wrap}
@media (max-width:520px){.uth-svg-vista{gap:8px}}
/* Stickers para WhatsApp: ayuda plegable «Cómo añadirlos» (utiles-stickers.js). */
.uth-ayuda{border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-sup);padding:10px 14px;color:var(--uth-suave);font-size:14px}
.uth-ayuda summary{cursor:pointer;font-weight:600;color:var(--uth-texto)}
.uth-ayuda ol{margin:10px 0 8px;padding-left:20px;display:grid;gap:6px}
/* Subtítulos automáticos (utiles-subtitulos.js): vista previa con el lienzo
   encima del vídeo y editor de tarjetas (tiempos, texto y acciones). */
.uth-subs-vista{display:grid;gap:8px;margin-top:12px}
.uth-subs-marco{position:relative;border-radius:12px;overflow:hidden;background:var(--uth-fondo)}
.uth-subs-video{display:block;width:100%;max-height:min(55vh,460px);background:var(--uth-fondo)}
.uth-subs-capa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:contain}
.uth-subs-marco:has(.uth-subs-video[hidden]){aspect-ratio:16/5}
.uth-subs-marco:has(.uth-subs-video[hidden]) .uth-subs-capa{position:static;display:block}
.uth-subs-vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uth-subs-editor{display:grid;gap:10px;margin-top:14px;padding:14px;border:1px solid var(--uth-borde);border-radius:14px;background:var(--uth-sup);min-width:0}
.uth-subs-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px}
.uth-subs-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:min(60vh,520px);overflow:auto;overscroll-behavior:contain}
.uth-subs-tarjeta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 8px;align-items:center;padding:8px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);min-width:0}
.uth-subs-tarjeta.is-actual{border-color:var(--uth-acento)}
.uth-subs-tiempos{display:flex;align-items:center;gap:6px;min-width:0;color:var(--uth-tenue)}
.uth input.uth-subs-t{width:6.5em;min-height:36px;padding:6px 8px;font-variant-numeric:tabular-nums;font-size:13px}
.uth input.uth-subs-texto{grid-column:1/-1;min-height:40px}
.uth-subs-acc{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.uth-subs-trans{display:grid;gap:10px;margin:0;padding:12px;border:1px solid var(--uth-borde);border-radius:14px;min-width:0}
.uth-subs-trans>legend{padding:0 6px;font-size:13px;font-weight:600;color:var(--uth-texto)}
.uth-subs-estado.is-error{color:var(--uth-peligro)}
@media (max-width:520px){.uth input.uth-subs-t{width:5.6em}.uth-subs-lista{max-height:none;overflow:visible}}
/* SEO técnico (30-sep-2026): reserva el hueco de la herramienta mientras su JS
   la monta, para que los pasos de abajo no salten (CLS). Los valores son algo
   menores que la herramienta más baja ya montada (móvil ~390 px, escritorio
   ~290 px); sin JS no se reserva nada. */
@media (scripting:enabled){.utl-herramienta>[data-uth]:not([data-uth-listo]){min-height:280px}}
@media (scripting:enabled) and (max-width:650px){.utl-herramienta>[data-uth]:not([data-uth-listo]){min-height:380px}}

/* Pantallas táctiles (auditoría móvil UT-05/UT-10, oct-2026): los campos a
   16 px para que el iPhone no amplíe la página al tocarlos, y los botones
   pequeños y el deslizador con 44 px de alto para el dedo. En ordenador
   todo sigue igual. */
@media (pointer:coarse){
  /* Todos los campos de escribir o elegir (también contraseña, fecha y las
     áreas de texto grandes .uth-texto, que tenían su propia regla de 15 px);
     quedan fuera casillas, deslizadores, colores y subir archivo. */
  .uth :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]),select,textarea),
  .uth .uth-texto{font-size:16px!important} /* !important: las hojas de cada tanda
     (p. ej. utiles-tanda8-*.css) se cargan después y ponen 12-13 px en sus campos. */
  .uth-btn-sm{min-height:44px}
  .uth-btn-icono{min-height:44px;min-width:44px}
  .uth input[type=range]{min-height:44px}
  .uth-pastilla,.uth-casilla{min-height:44px}
}