/* Herramientas PDF gratuitas (/herramientas). Usa los tokens de docs.css:
   claro y oscuro salen solos. Índigo solo para la acción y lo seleccionado. */

.herr-sitio { background: var(--bg); }
.h-in { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)); }

/* Barra superior */
.h-top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.h-top-in { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.h-marca { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 14.5px; padding-left: 14px; border-left: 1px solid var(--line); white-space: nowrap; }
.h-marca:hover { color: var(--brand); }
.h-probar { margin-left: auto; flex: none; }
@media (max-width: 480px) { .h-ancho { display: none; } .h-top .wm { font-size: 18px; } .h-top-in { gap: 10px; } }
/* En el celular las migas ya llevan a /herramientas. */
@media (max-width: 420px) { .h-marca { display: none; } }
/* docs.css da ancho completo a los input de archivo: los ocultos no deben ensanchar la página. */
.herr-sitio input[type=file].sr-only { width: 1px; height: 1px; min-height: 0; padding: 0; }

.h-migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); padding: 18px 0 0; }
.h-migas a { color: inherit; text-decoration: none; }
.h-migas a:hover { color: var(--brand); text-decoration: underline; }
.h-migas [aria-current] { color: var(--ink); font-weight: 600; }

/* Encabezado */
.h-hero { text-align: center; padding: 22px 0 22px; max-width: 720px; margin: 0 auto; }
.h-hero h1 { font-size: clamp(28px, 5.2vw, 42px); letter-spacing: -.03em; line-height: 1.1; margin: 10px 0 10px; }
.h-hero-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-tint); color: var(--brand); }
.h-hero-ico .ico { width: 28px; height: 28px; }
.h-bajada { font-size: 17px; color: var(--text); margin: 0 auto 14px; max-width: 600px; }
.h-privado { display: inline-flex; align-items: flex-start; gap: 8px; text-align: left; font-size: 14px; color: var(--seal-texto); background: var(--seal-tint); border-radius: 999px; padding: 8px 16px; margin: 0; }
.h-privado .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.h-privado b { color: inherit; }
@media (max-width: 520px) { .h-privado { border-radius: 14px; } }

/* Índice */
.h-hero-indice { padding-top: 26px; }
.h-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.h-tarjeta { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease; }
.h-tarjeta:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); transform: translateY(-2px); box-shadow: var(--sombra-2); color: var(--text); }
.h-tarjeta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.h-tarjeta-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); }
.h-tarjeta-ico .ico { width: 22px; height: 22px; }
.h-tarjeta-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; line-height: 1.45; }
.h-tarjeta-txt b { color: var(--ink); font-size: 16px; }
.h-flecha { flex: none; margin-left: auto; align-self: center; color: var(--muted); }
.h-tarjeta:hover .h-flecha { color: var(--brand); }

/* Zona de trabajo */
.h-app { max-width: 860px; margin: 6px auto 0; padding: 18px; }
.h-soltar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 38px 18px; border: 2px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--brand-tint) 45%, var(--paper)); transition: border-color .2s ease, background-color .2s ease; }
.h-soltar.encima { border-color: var(--brand); border-style: solid; background: var(--brand-tint); }
.h-soltar:focus-within { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 3px; }
.h-soltar-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--paper); color: var(--brand); box-shadow: var(--sombra-1); margin-bottom: 6px; }
.h-soltar-ico .ico { width: 28px; height: 28px; }
.h-soltar-t { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.h-soltar-o { margin: 0; color: var(--muted); font-size: 13px; }
.h-elegir { min-width: 220px; margin: 4px 0 6px; }
.h-soltar .small { margin: 0; }
@media (max-width: 520px) { .h-soltar { padding: 26px 14px; } .h-soltar-t { font-size: 16px; } .h-elegir { min-width: 0; width: 100%; } }

.h-trabajo > * + * { margin-top: 14px; }
.h-archivo:empty { display: none; }
.h-archivo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.h-archivo .ico { flex: none; color: var(--brand); }
.h-archivo b { display: block; color: var(--ink); overflow-wrap: anywhere; font-size: 14.5px; }
.h-archivo span { font-size: 13px; color: var(--muted); }
.h-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 14px; }
.h-opciones .field + .field { margin-top: 0; }
.h-opciones-col { grid-template-columns: 1fr; }
.h-opciones fieldset { margin: 0; }
.h-opciones .radio > span { display: flex; flex-direction: column; gap: 2px; }
.h-acciones { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.h-acciones .btn:first-child { flex: 1 1 220px; }
@media (max-width: 520px) { .h-acciones .btn { flex: 1 1 100%; } }

.h-estado { margin-top: 14px; }
.h-estado p { margin: 6px 0 0; font-size: 14px; color: var(--text); }
.h-progreso { display: block; width: 100%; height: 6px; }
.h-progreso-fondo { fill: var(--neutral-tint); }
.h-progreso-valor { fill: var(--brand); transition: width .2s ease; }
.h-error { margin-top: 14px; }

.h-listo { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 16px; border-radius: var(--r); background: var(--seal-tint); }
.h-listo:focus { outline: none; }
.h-listo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.h-listo-ico { flex: none; color: var(--seal); }
.h-listo-ico .ico { width: 28px; height: 28px; }
.h-listo-t { font-weight: 700; color: var(--ink); margin: 2px 0 2px; }
.h-listo-acciones { gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.h-listo .link-btn { font-size: 13.5px; }

/* Lista ordenable (unir, imagen a PDF) */
.h-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.h-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.h-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.h-item.arrastrando { opacity: .55; border-style: dashed; border-color: var(--brand); }
.h-asa { flex: none; display: grid; place-items: center; width: 32px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: grab; touch-action: none; padding: 0; }
.h-asa:hover { background: var(--neutral-tint); color: var(--ink); }
.h-asa:active { cursor: grabbing; }
.h-mini { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--neutral-tint); color: var(--muted); display: grid; place-items: center; overflow: hidden; }
.h-mini canvas { max-width: 100%; max-height: 100%; display: block; }
.h-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.h-item-txt b { color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-item-txt span { color: var(--muted); font-size: 12.5px; }
.h-item-btns { flex: none; display: flex; gap: 2px; }
.h-icono-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.h-icono-btn:hover { background: var(--neutral-tint); color: var(--ink); }
.h-icono-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.h-icono-btn[disabled] { opacity: .35; cursor: default; background: transparent; }
.h-icono-btn.quitar:hover { color: var(--alert); background: var(--alert-tint); }
.h-mas { display: flex; }
@media (max-width: 420px) { .h-mini { display: none; } .h-item { gap: 6px; padding: 6px; } .h-icono-btn { width: 34px; } }

/* Miniaturas de páginas (rotar, ordenar) */
.h-barra-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.h-paginas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 420px) { .h-paginas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.h-pag { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); }
.h-pag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.h-pag-vista { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--neutral-tint); overflow: hidden; }
.h-paginas-orden .h-pag-vista { cursor: grab; touch-action: none; }
.h-pag-vista canvas { max-width: 92%; max-height: 92%; box-shadow: 0 1px 3px rgba(16, 24, 40, .18); background: #fff; transition: transform .25s var(--ease); }
.h-pag-pie { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.h-pag-n { font-size: 12.5px; font-weight: 700; color: var(--ink); padding-left: 2px; white-space: nowrap; }
.h-pag-pie .h-icono-btn { width: 30px; height: 32px; }
.h-pag-pie .h-icono-btn .ico { width: 18px; height: 18px; }
.h-pag.arrastrando { opacity: .55; border-style: dashed; border-color: var(--brand); }
.h-pag.quitada .h-pag-vista { opacity: .3; }
.h-pag.quitada .h-pag-n { text-decoration: line-through; color: var(--muted); }
.h-pag-marca { position: absolute; top: 14px; left: 14px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--alert-tint); color: var(--alert); }
.h-pag-giro { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); }
.h-resumen { margin: 0; font-size: 14px; color: var(--muted); }

/* Firmar */
.h-firmar { display: grid; gap: 22px; }
.h-sub { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 10px; }
.h-paso-firma .rubrica { height: 160px; }
.h-paso-firma .field + .rubrica-acciones { margin-top: 8px; }
.h-nav-pag { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.h-nav-pag .btn { padding: 6px 8px; }
.h-hoja { position: relative; margin: 10px auto 0; width: fit-content; max-width: 100%; border-radius: 6px; box-shadow: 0 1px 3px rgba(16, 24, 40, .15), 0 8px 24px -12px rgba(16, 24, 40, .3); background: #fff; line-height: 0; }
.h-hoja canvas { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.h-capas { position: absolute; inset: 0; }
.h-colocada { position: absolute; border: 1.5px dashed var(--brand); border-radius: 4px; background: color-mix(in srgb, var(--brand) 6%, transparent); cursor: move; touch-action: none; }
.h-colocada:focus { outline: none; }
.h-colocada:focus-visible, .h-colocada.activa { border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.h-colocada img { width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.h-tirador { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; }
.h-quitar-firma { position: absolute; top: -13px; right: -13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; padding: 0; line-height: 1; }
.h-quitar-firma .ico { width: 14px; height: 14px; }
.h-quitar-firma:hover { color: var(--alert); border-color: var(--alert); }
.h-nota-visual { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.h-nota-visual .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.h-cta-firma { margin-top: 14px; padding: 18px; border-radius: var(--r); border: 1.5px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-tint); }
.h-cta-firma h2 { font-size: 18px; margin: 0 0 6px; }
.h-cta-firma p { margin: 0 0 12px; font-size: 14.5px; }

/* Texto de ayuda bajo la herramienta */
.h-info { display: grid; gap: 28px; margin: 40px auto 0; max-width: 860px; }
@media (min-width: 820px) { .h-info { grid-template-columns: 1fr 1.2fr; } }
.h-info h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -.02em; }
.h-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.h-pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.h-num { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: 13.5px; }
.h-faq details { border-bottom: 1px solid var(--line); }
.h-faq details:first-child { border-top: 1px solid var(--line); }
.h-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 2px; cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; font-size: 15px; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.h-faq-flecha { flex: none; color: var(--muted); transition: transform .2s ease; }
.h-faq details[open] .h-faq-flecha { transform: rotate(180deg); }
.h-faq details p { margin: 0 2px 14px; font-size: 14.5px; color: var(--text); }
.h-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.h-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.h-check .ico { flex: none; color: var(--brand); margin-top: 2px; }
.h-info-indice { max-width: none; align-items: start; }
@media (min-width: 820px) { .h-info-indice { grid-template-columns: 1fr 1fr; } }
.h-info-indice .h-franja { margin: 0; }

/* Franja hacia MindSign Docs: discreta, al final */
.h-franja { display: flex; gap: 16px; align-items: flex-start; max-width: 860px; margin: 36px auto 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.h-franja h2 { font-size: 17px; margin: 0 0 6px; }
.h-franja p { margin: 0 0 12px; font-size: 14.5px; color: var(--text); }
.h-franja-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); }
@media (max-width: 520px) { .h-franja { flex-direction: column; gap: 10px; } }

.h-otras { max-width: 860px; margin: 36px auto 0; }
.h-otras h2 { font-size: 17px; margin: 0 0 12px; }
.h-otras-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.h-otras-lista a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.h-otras-lista a .ico { width: 17px; height: 17px; color: var(--brand); }
.h-otras-lista a:hover { border-color: var(--brand); color: var(--brand); }

/* Pie */
.h-pie { margin-top: 56px; border-top: 1px solid var(--line); background: var(--paper); }
.h-pie-in { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 24px; padding-bottom: 28px; color: var(--muted); font-size: 13.5px; }
.h-pie-in p { margin: 0; max-width: 640px; }
.h-pie-in a { color: inherit; }
.h-pie-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.h-pie-nav a { color: var(--text); font-weight: 600; text-decoration: none; }
.h-pie-nav a:hover { color: var(--brand); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .h-tarjeta, .h-pag-vista canvas, .h-progreso-valor, .h-faq-flecha { transition: none; }
}