/* ════════════════════════════════════════════════════════════════════
   Pisos de Resina — Herramienta dentro de la app
   ────────────────────────────────────────────────────────────────────
   Capa FINA encima de css/pdr-shared.css (sistema v2). Aquí va SOLO lo
   que el sistema no trae y que las herramientas de pdr/herramientas/
   necesitan todas igual: el ancho y el ritmo del contenido dentro del
   armazón, la miga "‹ Herramientas" con el chip de plan, la ayuda bajo
   un campo, los avisos, el bloque de resultado (con el contrato valor +
   incertidumbre + confianza + fuente), la carga, el descargo de la IA,
   la zona de foto y la rejilla formulario + resultado.

   Guía de uso (esqueleto, qué quitar, qué no tocar):
   docs/herramientas-en-la-app.md

   Reglas: solo tokens var(--…) — el tema oscuro sale solo de los tokens
   (ya trae su propio verde/ámbar/rojo). Un texto de estado sobre su tinte
   va con color-mix(tono 85%, --ink), como .pdr-tag; un texto sobre un
   relleno de estado va en var(--on-status). Móvil
   primero (cortes 900/760/560/440/400). min-width:0 en hijos de rejilla
   y flex. Toques de 38px (46px la acción principal, .pdr-btn.lg).
═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   1. CONTENIDO DENTRO DEL ARMAZÓN
   <main class="pdr-container pdr-tool [narrow]">
   El armazón deja el contenedor a todo lo ancho (igual que el resto de
   la plataforma, alineado a la izquierda). Los bloques de la herramienta
   se topan a un ancho de lectura para que un formulario no se estire a
   1500px en un monitor grande. `narrow` es para las de una sola columna.
═══════════════════════════════════════════════════════════ */
.pdr-tool > *{max-width:1120px;min-width:0;}
.pdr-tool.narrow > *{max-width:760px;}
/* Un solo ritmo vertical entre bloques: lo que antes ponía cada página
   con su propio margin-bottom (14, 16, 18px…). */
.pdr-tool > * + *{margin-top:var(--sp-4);}

/* ════════════════════════════════════════════════════════
   2. ENCABEZADO DE LA HERRAMIENTA
   Es el .pdr-page-head del sistema. Encima del <h1> va una fila con la
   miga de vuelta al listado de herramientas y el chip del plan. El menú
   lateral ya marca "Herramientas"; la miga es el regreso de un toque en
   el celular, donde el menú vive detrás del botón "Menú".
═══════════════════════════════════════════════════════════ */
.pdr-tool-title{flex:1 1 auto;min-width:0;}
.pdr-tool-crumbs{
    display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
    /* El enlace mide 38px de alto (blanco de toque); el margen negativo
       le quita ese aire al ojo sin quitárselo al dedo. */
    margin:calc(var(--sp-2) * -1) 0 var(--sp-1);
    font-size:.8rem;color:var(--muted);
}
.pdr-tool-crumbs a{
    display:inline-flex;align-items:center;gap:var(--sp-1);
    min-height:38px;padding-right:var(--sp-1);
    color:var(--muted);text-decoration:none;font-weight:600;
    transition:color var(--t-fast);
}
.pdr-tool-crumbs a:hover{color:var(--ink);}
.pdr-tool-crumbs a svg{width:15px;height:15px;flex-shrink:0;}

/* Chip de plan. El texto y el data-plan se copian de js/pdr-tools-catalog.js
   (campo `plan`) con las mismas etiquetas que pdr/herramientas.html:
   public → "Gratis", maestro → "Maestro", pro → "Pro". */
/* Texto en tinta suave / --accent-ink / ámbar mezclado con tinta (el mismo
   criterio que .pdr-tag del sistema): "Gratis" en gris quedaba a 3.8:1. */
.pdr-tool-plan{
    display:inline-flex;align-items:center;
    padding:3px 9px;border-radius:var(--r-pill);
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
    background:var(--bg-2);color:var(--ink-soft);border:1px solid var(--line);
}
.pdr-tool-plan[data-plan="maestro"]{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent;}
.pdr-tool-plan[data-plan="pro"]{background:var(--amber-soft);color:color-mix(in srgb,var(--amber) 85%,var(--ink));border-color:transparent;}

/* ════════════════════════════════════════════════════════
   3. FORMULARIO — lo que falta al lado de .pdr-field/.pdr-label/.pdr-input
═══════════════════════════════════════════════════════════ */
/* Ayuda bajo un campo ("Unidad cambia según método", "Opcional…"). */
.pdr-tool-hint{margin-top:6px;font-size:.78rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;}
/* Oscuro ya trae su propio ámbar (pdr-shared.css): se mezcla con la tinta en
   los dos temas y sobra el cambio al token -2. */
.pdr-tool-hint.warning{color:color-mix(in srgb,var(--amber) 85%,var(--ink));}
/* Última pieza de una tarjeta sin aire sobrante abajo. */
.pdr-tool .pdr-panel-body > .pdr-field:last-child,
.pdr-tool .pdr-panel-body > :last-child > .pdr-field:last-child{margin-bottom:0;}

/* Campos de 44px en TODAS las herramientas (guante, teléfono en una mano).
   El sistema da 42px al input y el select sale a 44px: en un mismo
   formulario quedaban dos alturas. Antes lo repetían las tres calculadoras
   integradas; ahora es igual en las 23. */
.pdr-tool .pdr-input, .pdr-tool .pdr-select{min-height:44px;}

/* Dos o tres campos en fila (.pdr-row / .pdr-row-3). El sistema ya da el
   ritmo (pdr-shared.css, auditoría 15/09): el campo va SIN margen dentro de la
   fila y la fila lleva 16px abajo. Aquí antes se ponía row-gap:0 porque el
   margen lo daba el campo; con el sistema nuevo eso dejaba dos campos
   apilados (≤560px) a 0px, pegados. Ahora el hueco entre celdas apiladas es
   16px, igual que entre campos sueltos. Solo filas de campos (:has), no otras
   rejillas que usen .pdr-row. */
.pdr-tool .pdr-row:has(> .pdr-field),
.pdr-tool .pdr-row-3:has(> .pdr-field){row-gap:var(--sp-4);}
/* Igual en el modal de las herramientas, que vive FUERA de main.pdr-tool.
   proveedores.html:39 todavía pone `#modal .pdr-row{row-gap:0}` (del ritmo
   viejo) y dejaba Categoría/Contacto y Precio/Descuento pegados a ≤560px;
   la variante con #modal le gana por especificidad hasta que se borre esa
   línea de la página. */
.pdr-modal-card .pdr-row:has(> .pdr-field),
.pdr-modal-card .pdr-row-3:has(> .pdr-field),
.pdr-modal #modal .pdr-row:has(> .pdr-field){row-gap:var(--sp-4);}
/* La última fila de una tarjeta no deja aire sobrante abajo. */
.pdr-tool .pdr-panel-body > .pdr-row:last-child,
.pdr-tool .pdr-panel-body > .pdr-row-3:last-child{margin-bottom:0;}

/* Chips conmutables (sugerencias, plataformas): blanco de toque de 38px. El
   .pdr-chip del sistema mide 32px. */
.pdr-tool .pdr-chip{min-height:38px;}

/* Controles nativos (casillas, radios, lista desplegable del select) en el
   tema oscuro: sin esto salían en blanco sobre el fondo oscuro. */
[data-theme="dark"] .pdr-tool{color-scheme:dark;}

/* Fila de acciones (principal + secundarias). En el celular cada botón
   ocupa el ancho: cae donde llega el pulgar. */
.pdr-tool-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);}
.pdr-tool-actions > *{min-width:0;}
@media (max-width:560px){
    .pdr-tool-actions > .pdr-btn{flex:1 1 100%;}
}
/* .pdr-btn no parte el texto (white-space:nowrap). En una herramienta el
   botón principal lleva frases ("Validar humedad del sustrato"): a 375px
   una sola línea empujaría la página de ancho. Se deja partir. */
.pdr-tool .pdr-btn.block,
.pdr-tool-actions > .pdr-btn{white-space:normal;text-align:center;}

/* ════════════════════════════════════════════════════════
   4. AVISOS  ·  .pdr-tool-notice [.info | .success | .warning | .danger]
   Sesión requerida, error de red, "función no configurada", explicación
   de métodos, consejo. Una sola caja con barra de color a la izquierda.
═══════════════════════════════════════════════════════════ */
.pdr-tool-notice,
.pdr-tool .notlogged{
    display:block;
    padding:var(--sp-3) var(--sp-4);
    background:var(--bg-card);color:var(--ink-soft);
    border:1px solid var(--line);border-left:3px solid var(--line-2);
    border-radius:var(--r);
    font-size:.88rem;line-height:1.55;overflow-wrap:anywhere;
}
.pdr-tool-notice b, .pdr-tool-notice strong{color:var(--ink);}
.pdr-tool-notice a:not(.pdr-btn),
.pdr-tool .notlogged a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.pdr-tool-notice ul{margin:6px 0 0;padding-left:20px;}
.pdr-tool-notice li{margin:3px 0;}
.pdr-tool-notice > .pdr-btn{display:flex;width:max-content;max-width:100%;margin-top:var(--sp-3);}
.pdr-tool-notice-title{
    display:block;margin-bottom:4px;
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.92rem;
    letter-spacing:-.01em;color:var(--ink);
}
.pdr-tool-notice.info{
    background:var(--accent-soft);
    border-color:color-mix(in srgb,var(--accent) 22%,transparent);border-left-color:var(--accent);
}
.pdr-tool-notice.success{
    background:var(--green-soft);
    border-color:color-mix(in srgb,var(--green) 25%,transparent);border-left-color:var(--green);
}
.pdr-tool-notice.warning,
.pdr-tool .notlogged{
    background:var(--amber-soft);
    border-color:color-mix(in srgb,var(--amber) 25%,transparent);border-left-color:var(--amber);
}
.pdr-tool-notice.danger{
    background:var(--red-soft);
    border-color:color-mix(in srgb,var(--red) 25%,transparent);border-left-color:var(--red);
}
/* Aviso plegable: <details class="pdr-tool-notice info"><summary>…</summary>…</details>
   Para explicaciones que se consultan una vez (los 3 métodos de humedad) y no
   deben empujar el formulario hacia abajo en el celular. El resumen es la fila
   de toque (44px) con "+" / "−" a la derecha. */
details.pdr-tool-notice{padding-top:0;padding-bottom:0;}
details.pdr-tool-notice[open]{padding-bottom:var(--sp-3);}
.pdr-field > details.pdr-tool-notice{margin-top:var(--sp-2);}
details.pdr-tool-notice > summary{
    display:flex;align-items:center;gap:var(--sp-2);
    min-height:44px;padding-block:var(--sp-1);
    list-style:none;cursor:pointer;
    font-weight:600;color:var(--ink);
}
details.pdr-tool-notice > summary::-webkit-details-marker{display:none;}
details.pdr-tool-notice > summary > svg{width:16px;height:16px;flex-shrink:0;color:var(--accent-ink);}
details.pdr-tool-notice > summary::after{
    content:'+';content:'+' / '';margin-left:auto;padding-left:var(--sp-2);
    font:600 1.15rem/1 'JetBrains Mono',monospace;color:var(--muted);
}
details.pdr-tool-notice[open] > summary::after{content:'−';content:'−' / '';}
details.pdr-tool-notice > summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:var(--r-xs);}
details.pdr-tool-notice > ul{margin-top:var(--sp-1);}

/* Descargo de la IA / guía general ("no sustituye la SDS del producto"). */
.pdr-tool-disclaimer{
    padding:var(--sp-3);border-radius:var(--r-sm);
    background:var(--bg-2);color:var(--muted);
    font-size:.82rem;line-height:1.5;overflow-wrap:anywhere;
}
.pdr-tool-disclaimer b, .pdr-tool-disclaimer strong{color:var(--ink);}

/* ════════════════════════════════════════════════════════
   5. RESULTADO  ·  .pdr-tool-result [.v-OK | .v-WARNING | .v-BLOCK]
   Los modificadores llevan el nombre del veredicto que devuelve el
   servidor (OK / WARNING / BLOCK), el mismo contrato que ya usa
   calculadora.html (.v-OK). BLOCK es la forcing function: franjas rojas,
   se lee de lejos que esa mezcla/esa losa NO va.

   Alias heredados (solo dentro de .pdr-tool): las cuatro calculadoras que
   llaman a calculate-and-log (humedad, mezcla, pot-life, rendimiento)
   generan desde su JS `result verdict-X`, `verdict-badge`, `reason`,
   `meta`, `steps`, `sources`, `err-code`, `calc-loading`, `calc-spin` y
   `notlogged`. Se pintan aquí con los mismos estilos para NO tener que
   editar los textos de su JS. Código nuevo: usar los nombres .pdr-tool-*.
═══════════════════════════════════════════════════════════ */
.pdr-tool-result,
.pdr-tool .result{
    position:relative;
    padding:var(--sp-4);
    background:var(--bg-card);color:var(--ink);
    border:1px solid var(--line);border-left:4px solid var(--line-2);
    border-radius:var(--r-lg);box-shadow:var(--sh-1);
    overflow-wrap:anywhere;
}
@media (min-width:561px){
    .pdr-tool-result, .pdr-tool .result{padding:var(--sp-5);}
}
/* El tinte se pinta ENCIMA de --bg-card: con el tinte solo (translúcido)
   el oscuro dejaba ver el fondo y el claro quedaba lavado. */
.pdr-tool-result.v-OK,
.pdr-tool .result.verdict-OK{
    background:linear-gradient(var(--green-soft),var(--green-soft)),var(--bg-card);
    border-color:color-mix(in srgb,var(--green) 30%,transparent);border-left-color:var(--green);
}
.pdr-tool-result.v-WARNING,
.pdr-tool .result.verdict-WARNING{
    background:linear-gradient(var(--amber-soft),var(--amber-soft)),var(--bg-card);
    border-color:color-mix(in srgb,var(--amber) 30%,transparent);border-left-color:var(--amber);
}
.pdr-tool-result.v-BLOCK,
.pdr-tool .result.verdict-BLOCK{
    background:
        repeating-linear-gradient(45deg,transparent 0 10px,var(--red-soft) 10px 20px),
        linear-gradient(var(--red-soft),var(--red-soft)),
        var(--bg-card);
    border-color:color-mix(in srgb,var(--red) 35%,transparent);border-left-color:var(--red);
}

/* Etiqueta del veredicto. Rellena: es LA línea que el aplicador tiene que
   ver primero. El texto va en --on-status (blanco en claro, marino en
   oscuro): con los estados propios del oscuro (#4ADE80, #FBBF24, #F87171)
   el blanco fijo de antes quedaba a 1.6-2.5:1. */
.pdr-tool-verdict,
.pdr-tool .verdict-badge{
    display:inline-flex;align-items:center;
    margin:0 6px 10px 0;padding:4px 10px;border-radius:var(--r-xs);
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;
    background:var(--bg-3);color:var(--ink);
}
.pdr-tool-verdict.v-OK, .v-OK > .pdr-tool-verdict,
.pdr-tool .verdict-OK .verdict-badge{background:var(--green);color:var(--on-status);}
.pdr-tool-verdict.v-WARNING, .v-WARNING > .pdr-tool-verdict,
.pdr-tool .verdict-WARNING .verdict-badge{background:var(--amber);color:var(--on-status);}
.pdr-tool-verdict.v-BLOCK, .v-BLOCK > .pdr-tool-verdict,
.pdr-tool .verdict-BLOCK .verdict-badge{background:var(--red);color:var(--on-status);}

/* Explicación del veredicto / de la abstención. */
.pdr-tool-reason,
.pdr-tool .result .reason{margin:var(--sp-2) 0;font-size:.92rem;line-height:1.55;color:var(--ink);}

/* Contrato de salida: confianza · incertidumbre · fórmula y versión. */
.pdr-tool-meta,
.pdr-tool .result .meta{
    margin-top:var(--sp-3);font-size:.76rem;line-height:1.6;color:var(--muted);
    font-variant-numeric:tabular-nums;
}
.pdr-tool-sources,
.pdr-tool .result .sources{margin-top:var(--sp-2);font-size:.76rem;line-height:1.6;color:var(--muted);}
.pdr-tool-sources a,
.pdr-tool .result .sources a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}

/* Paso a paso: trae valores con muchos dígitos → scrollea DENTRO de su
   caja, la página nunca se va de ancho. */
.pdr-tool-steps,
.pdr-tool .result .steps{margin-top:var(--sp-3);}
.pdr-tool-steps summary,
.pdr-tool .result .steps summary{
    display:flex;align-items:center;min-height:38px;cursor:pointer;
    font-size:.8rem;font-weight:600;color:var(--ink-soft);
}
.pdr-tool-steps ol,
.pdr-tool .result .steps ol{
    margin:6px 0 0;padding:10px 10px 10px 28px;
    background:var(--bg-2);border-radius:var(--r-sm);
    font-family:'JetBrains Mono',monospace;font-size:.72rem;line-height:1.6;color:var(--ink-soft);
    max-height:300px;overflow:auto;
}

/* Bloques del resultado uno bajo otro (el #result de las herramientas de IA:
   tarjetas, avisos, descargo). Antes cada página traía su
   `#result > * + *{margin-top:…}`. */
.pdr-tool-stack > * + *{margin-top:var(--sp-3);}

/* Código técnico del error, en letra chica bajo el mensaje humano. */
.pdr-tool-errcode,
.pdr-tool .err-code{
    display:block;margin-top:var(--sp-2);
    font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);
}

/* ════════════════════════════════════════════════════════
   6. CARGANDO
═══════════════════════════════════════════════════════════ */
.pdr-tool-loading,
.pdr-tool .calc-loading{
    display:flex;align-items:center;gap:var(--sp-3);
    padding:var(--sp-4);
    background:var(--bg-card);color:var(--muted);
    border:1px dashed var(--line-2);border-radius:var(--r-lg);
    font-size:.9rem;
}
.pdr-tool-spin,
.pdr-tool .calc-spin{
    display:inline-block;flex:none;width:18px;height:18px;border-radius:50%;
    border:2px solid var(--line-2);border-top-color:var(--accent);
    vertical-align:-3px;
    animation:pdr-tool-spin .7s linear infinite;
}
/* Dentro de un botón (relleno oscuro o claro) toma el color del texto. */
.pdr-btn .pdr-tool-spin{
    width:16px;height:16px;
    border-color:color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor;
}
@keyframes pdr-tool-spin{to{transform:rotate(360deg);}}

/* ════════════════════════════════════════════════════════
   7. FOTO  ·  <label class="pdr-tool-drop"><input type="file">…</label>
   Para las herramientas de IA con imagen. El input queda oculto a la
   vista pero NO a teclado (con display:none no se podía enfocar): el
   anillo aparece en la caja con :focus-within.
═══════════════════════════════════════════════════════════ */
.pdr-tool-drop{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:120px;padding:var(--sp-6) var(--sp-4);
    background:var(--bg-2);color:var(--muted);
    border:2px dashed var(--line-2);border-radius:var(--r);
    text-align:center;font-size:.9rem;cursor:pointer;
    transition:border-color var(--t),color var(--t);
}
.pdr-tool-drop:hover{border-color:var(--accent);color:var(--ink);}
.pdr-tool-drop:focus-within{border-color:var(--accent);box-shadow:var(--ring);}
.pdr-tool-drop input[type="file"]{
    position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.pdr-tool-drop.has{min-height:0;padding:var(--sp-2);border-style:solid;}
.pdr-tool-drop img{display:block;max-width:100%;max-height:260px;margin:0 auto;border-radius:var(--r-sm);}

/* ════════════════════════════════════════════════════════
   8. FORMULARIO + RESULTADO LADO A LADO
   <div class="pdr-tool-layout">
       <div class="pdr-tool-main">…tarjetas del formulario…</div>
       <aside class="pdr-tool-side">…resultado…</aside>
   </div>
   Se pone en dos columnas SOLO cuando al formulario le queda al menos el
   55% del ancho; si no, el resultado baja. Sin @media a propósito: el
   ancho útil depende de si el menú lateral está abierto (280px), plegado
   (68px) o es cajón (móvil), y un corte por ancho de ventana no lo sabe.
═══════════════════════════════════════════════════════════ */
.pdr-tool-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-4);}
.pdr-tool-layout > .pdr-tool-main{flex:999 1 0;min-width:55%;display:flex;flex-direction:column;gap:var(--sp-3);}
.pdr-tool-layout > .pdr-tool-side{flex:1 1 22rem;min-width:0;}
@media (min-width:761px){
    /* 58px de la barra superior del armazón + respiro. Cuando el resultado
       ya bajó bajo el formulario es el último hijo: no tiene hacia dónde
       pegarse y la regla no hace nada. */
    .pdr-tool-layout > .pdr-tool-side{position:sticky;top:calc(58px + var(--sp-4));}
}
@media (max-width:560px){
    .pdr-tool-layout > .pdr-tool-main{min-width:100%;}
}

/* ════════════════════════════════════════════════════════
   9. CONVIVENCIA CON EL ARMAZÓN EN EL CELULAR
   El botón flotante del Tutor IA (js/pdr-tutor.js) va a 14px del borde
   inferior con z-index 9000: encima de la barra inferior del armazón, justo
   sobre "Menú", que dejaba de responder al dedo. El armazón ya sube el
   flotante de biblioteca (.eb-fab); este es el de las herramientas.
   El selector con body.has-bottombar le gana al estilo que el tutor
   inyecta en tiempo de ejecución.
═══════════════════════════════════════════════════════════ */
@media (max-width:760px){
    body.has-bottombar .pdr-tutor-fab{
        bottom:calc(var(--pdr-bb-h, 53px) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
    }
}
/* Con el cajón del menú abierto el flotante (z 9000) quedaba encima del
   menú y del velo. Se esconde mientras el cajón está abierto. */
body[data-drawer="open"] .pdr-tutor-fab{visibility:hidden;}
/* En el celular el flotante era una píldora de ~170×46 ("🎓 Tutor IA") que
   tapaba la mitad derecha del botón principal o del campo clave. Pasa a un
   círculo de 46px con "IA". Su nombre accesible sigue siendo el aria-label
   "Abrir Tutor IA" que pone js/pdr-tutor.js (Zona A: solo CSS aquí). */
@media (max-width:560px){
    body .pdr-tutor-fab{
        width:46px;height:46px;padding:0;border-radius:50%;
        justify-content:center;gap:0;font-size:0;
    }
    body .pdr-tutor-fab::before{content:'IA';content:'IA' / '';font-size:.85rem;font-weight:700;letter-spacing:.02em;}
}
/* Escribiendo en un campo de la herramienta (teclado abierto) el flotante se
   quita de en medio. Solo en táctil/angosto: en escritorio no estorba y
   desaparecer al teclear se vería como un parpadeo. */
@media (max-width:760px){
    body:has(.pdr-tool :is(input,select,textarea):focus) .pdr-tutor-fab{visibility:hidden;}
}
/* La "×" del panel del tutor medía 22×24: blanco de toque de 38px. */
body .pdr-tutor-x{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;min-height:38px;
}
/* El "?" del glosario (js/pdr-glossary.js) medía 18px al 55% de opacidad
   (1.96:1) y su estilo le quitaba el contorno de foco. Aquí: gris legible a
   opacidad completa, blanco de toque de 38px sin mover el texto de al lado y
   foco visible. `body` delante: el glosario inyecta su estilo después. */
body .pdr-tool .pdr-term-help{opacity:1;color:var(--muted);position:relative;}
body .pdr-tool .pdr-term-help::after{content:'';position:absolute;inset:-10px;}
body .pdr-tool .pdr-term-help:hover{color:var(--ink);}
body .pdr-tool .pdr-term-help:focus-visible{color:var(--ink);outline:2px solid var(--accent-ink);outline-offset:2px;}

/* ════════════════════════════════════════════════════════
   10. hidden E IMPRESIÓN
═══════════════════════════════════════════════════════════ */
/* El atributo hidden SIEMPRE esconde. Las clases del sistema traen display
   (.pdr-panel es flex, .pdr-row es grid) y le ganaban al atributo: en
   pendientes se veían los tres modos a la vez y los campos "distancia al
   lado…" aunque la coladera estuviera al centro. */
.pdr-tool [hidden]{display:none !important;}

/* Al imprimir no sale el armazón (menú, barras, hamburguesa, tutor). El
   armazón no trae @media print; las herramientas que imprimen algo propio
   (justificacion-pro) esconden además su formulario. */
@media print{
    .pdr-shell-sidebar, .pdr-shell-backdrop, .ps-topbar, .pdr-bottombar,
    .pdr-shell-burger, .pdr-section-tabs, .pdr-tutor-fab{display:none !important;}
}

/* ════════════════════════════════════════════════════════
   11. MOVIMIENTO REDUCIDO
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
    /* El texto de al lado ("Validando…") ya dice que está trabajando. */
    .pdr-tool-spin, .pdr-tool .calc-spin{animation:none;}
    .pdr-tool-crumbs a, .pdr-tool-drop{transition:none;}
}