/* Útiles de texto de la tanda 7 (4-oct-2026): letras bonitas, emojis y
   símbolos, Lorem ipsum, texto al revés, números a letras y generador de
   firma. Complementa a utiles-herramientas.css: todos los colores salen de
   sus variables --uth-* (que ya traen su respaldo de tokens.css). El «papel»
   de la firma es el color del documento, no del tema. */
.uth{--utt-papel:var(--uth-papel,var(--uth-texto));--utt-tinta-papel:var(--uth-fondo)}

/* Marco de una sola columna (letras bonitas, emojis) */
.utt-marco{display:grid;gap:16px;min-width:0}

/* Letras bonitas: una fila por estilo con su botón Copiar */
.utt-estilos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.utt-estilo{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;background:var(--uth-fondo);border:1px solid var(--uth-borde);border-radius:10px}
.utt-estilo-nombre{color:var(--uth-tenue);font-size:12px;line-height:1.3}
.utt-muestra{min-width:0;overflow-wrap:anywhere;font-size:18px;line-height:1.45;color:var(--uth-texto)}
@media(max-width:560px){.utt-estilo{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nombre boton" "muestra muestra"}.utt-estilo-nombre{grid-area:nombre}.utt-muestra{grid-area:muestra}.utt-estilo .uth-btn{grid-area:boton}}

/* Emojis y símbolos */
.utt-simbolos{display:grid;gap:10px;max-height:min(460px,60vh);overflow:auto;padding:4px;border:1px solid var(--uth-borde);border-radius:12px;background:var(--uth-fondo);overscroll-behavior:contain}
.utt-simbolos-titulo{margin:6px 4px 0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--uth-tenue)}
.utt-simbolos-grupo{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
.utt-simbolo{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--uth-texto);font:inherit;font-size:22px;line-height:1;cursor:pointer;transition:background-color .12s,border-color .12s}
.utt-simbolo.is-ancho{grid-column:span 2;font-size:15px;white-space:nowrap}
.utt-simbolo:hover{background:var(--uth-sup);border-color:var(--uth-borde)}
.utt-simbolo.is-hecho{border-color:var(--uth-acento);background:color-mix(in srgb,var(--uth-acento) 14%,transparent)}
.utt-compone{display:grid;gap:10px}
@media(prefers-reduced-motion:reduce){.utt-simbolo{transition:none}}

/* Números romanos */
.utt-romanos{display:grid;gap:10px;margin:0;padding:14px;border:1px solid var(--uth-borde);border-radius:12px}
.utt-romanos legend{padding:0 6px;font-weight:600}
.utt-romanos .uth-fila{align-items:end;flex-wrap:wrap}
.utt-romano-res{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
.utt-romano{font:600 22px/1.3 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:var(--uth-texto);overflow-wrap:anywhere}

/* Generador de firma: zona de dibujo con línea guía (la guía es solo CSS:
   no sale en la imagen descargada) */
.utt-firma-pad{display:block;width:100%;aspect-ratio:3/1;height:auto;border:1px dashed var(--uth-borde);border-radius:10px;touch-action:none;cursor:crosshair;
 background:linear-gradient(to bottom,transparent calc(72% - 1px),color-mix(in srgb,var(--utt-tinta-papel) 22%,transparent) calc(72% - 1px),color-mix(in srgb,var(--utt-tinta-papel) 22%,transparent) 72%,transparent 72%),var(--utt-papel)}
.utt-firma-pad:focus-visible{outline:2px solid var(--uth-acento);outline-offset:2px}
.utt-firma-marco{display:grid;place-items:center;min-height:150px;padding:14px;border:1px solid var(--uth-borde);border-radius:12px;
 background:repeating-conic-gradient(color-mix(in srgb,var(--uth-texto) 92%,var(--uth-tenue)) 0 25%,var(--uth-texto) 0 50%) 0 0/18px 18px}
.utt-firma-marco .uth-nota{color:var(--utt-tinta-papel);text-align:center}
.utt-firma-vista{display:block;max-width:100%;max-height:220px;height:auto}

/* Letras para escribir el nombre: vista de cada una sobre papel */
.utt-letras-grupo{margin:0;padding:0;border:0;min-width:0}
.utt-letras-grupo legend{margin-bottom:8px;font-size:13px;color:var(--uth-suave)}
.utt-letras{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.utt-letra{position:relative;display:grid;gap:2px;padding:8px 12px;border:1px solid var(--uth-borde);border-radius:10px;background:var(--utt-papel);cursor:pointer;min-width:0}
.utt-letra.is-activa{border-color:var(--uth-acento);box-shadow:0 0 0 1px var(--uth-acento)}
.utt-letra:has(input:focus-visible){outline:2px solid var(--uth-acento);outline-offset:2px}
.utt-letra-muestra{display:block;min-height:46px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--utt-tinta-papel);font-size:30px;line-height:1.5}
.utt-letra-nombre{font-size:11px;color:color-mix(in srgb,var(--utt-tinta-papel) 70%,transparent)}

/* Color de la tinta: muestras visuales; el nombre va en la etiqueta accesible */
.utt-tintas-grupo{margin:0;padding:0;border:0;min-width:0}
.utt-tintas-grupo legend{margin-bottom:8px;font-size:13px;color:var(--uth-suave)}
.utt-tintas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.utt-tinta{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--uth-borde);border-radius:50%;background:var(--utt-papel);cursor:pointer}
.utt-tinta-punto{width:26px;height:26px;border-radius:50%;background:var(--utt-tinta,var(--utt-tinta-papel))}
.utt-tinta.is-activa,.utt-tinta-otro.is-activa{box-shadow:0 0 0 2px var(--uth-fondo),0 0 0 4px var(--uth-acento)}
.utt-tinta:has(input:focus-visible){outline:2px solid var(--uth-acento);outline-offset:3px}
.utt-tinta-otro{width:44px;height:44px;padding:4px;border:1px solid var(--uth-borde);border-radius:50%;background:var(--utt-papel);cursor:pointer}
.utt-tinta-otro::-webkit-color-swatch-wrapper{padding:0}
.utt-tinta-otro::-webkit-color-swatch{border:0;border-radius:50%}
.utt-tinta-otro::-moz-color-swatch{border:0;border-radius:50%}

/* Letras manuscritas vendorizadas (OFL 1.1, ver vendor/fuentes-firma-5.3.0/NOTICE.html).
   El navegador solo las descarga cuando algo visible las usa. */
@font-face{font-family:"CocuyoFirma Great Vibes";src:url("../vendor/fuentes-firma-5.3.0/great-vibes-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CocuyoFirma Dancing Script";src:url("../vendor/fuentes-firma-5.3.0/dancing-script-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CocuyoFirma Sacramento";src:url("../vendor/fuentes-firma-5.3.0/sacramento-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CocuyoFirma Mr Dafoe";src:url("../vendor/fuentes-firma-5.3.0/mr-dafoe-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CocuyoFirma Herr Von Muellerhoff";src:url("../vendor/fuentes-firma-5.3.0/herr-von-muellerhoff-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CocuyoFirma Caveat";src:url("../vendor/fuentes-firma-5.3.0/caveat-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.utt-f-great-vibes{font-family:"CocuyoFirma Great Vibes",cursive}
.utt-f-dancing-script{font-family:"CocuyoFirma Dancing Script",cursive}
.utt-f-sacramento{font-family:"CocuyoFirma Sacramento",cursive}
.utt-f-mr-dafoe{font-family:"CocuyoFirma Mr Dafoe",cursive}
.utt-f-herr-von-muellerhoff{font-family:"CocuyoFirma Herr Von Muellerhoff",cursive}
.utt-f-caveat{font-family:"CocuyoFirma Caveat",cursive}