/* ============================================================
   HERRAMIENTAS DEL PROPIETARIO — Fraserte
   Se carga DESPUÉS de /styles.css y solo en las páginas de
   herramientas. Reutiliza los tokens de :root de styles.css.
   ============================================================ */

/* Texto gris que sí llega al 4,5:1 de la AA. El --ink-lt de styles.css
   (#9A8E88) se queda solo para bordes y separadores. */
:root { --ink-lt-txt: #6E625C; }

/* ---------- cabecera común de herramienta ---------- */
.tool-hero { padding: 9rem 0 3rem; background: var(--warm); }
.tool-hero .crumbs { font-size: 0.78rem; color: var(--ink-lt-txt); margin-bottom: 1.4rem; }
.tool-hero .crumbs a { color: var(--ink-lt-txt); text-decoration: none; }
.tool-hero .crumbs a:hover { color: var(--clay); }
.tool-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.04em; line-height: 1.08; max-width: 20ch; }
.tool-hero h1 em { font-style: normal; color: var(--clay); }
.tool-hero .lead { font-size: 1.05rem; color: var(--ink-md); line-height: 1.8; max-width: 66ch; margin-top: 1.3rem; }
.tool-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.tool-meta span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.4px; color: var(--ink-md); background: var(--clay-bg); border: 1px solid rgba(196,130,106,0.22); border-radius: 50px; padding: 0.42rem 0.95rem; }

/* ---------- rejilla herramienta: entradas + resultado ---------- */
.tool { padding: 1rem 0 6rem; }
.tool-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 1.6rem; align-items: start; }
.tool-grid.doc { grid-template-columns: 0.85fr 1.15fr; }
.tool-panel { background: var(--white); border-radius: 22px; box-shadow: var(--shadow); padding: 2.1rem 2.1rem 2.3rem; }
.tool-panel > h2, .tool-out > h2 { font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.tool-panel > .ph, .tool-out > .ph { font-size: 0.82rem; color: var(--ink-lt-txt); line-height: 1.6; margin-bottom: 1.7rem; }
.tool-out { background: var(--ink); color: var(--warm); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 2.1rem; position: sticky; top: 6.5rem; }
.tool-out > .ph { color: rgba(253,250,245,0.5); }

/* ---------- campos ---------- */
.f { margin-bottom: 1.35rem; }
.f > label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-md); margin-bottom: 0.5rem; }
.f > label b { font-family: var(--font); font-size: 1.28rem; font-weight: 600; color: var(--clay-btn); letter-spacing: -0.02em; white-space: nowrap; }
.f .hint { font-size: 0.735rem; color: var(--ink-lt-txt); margin-top: 0.42rem; line-height: 1.55; }
.f input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 5px; background: var(--beige); outline: none; }
.f input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--clay); cursor: pointer; border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(196,130,106,0.45); }
.f input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--clay); cursor: pointer; border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(196,130,106,0.45); }
.f input[type=text], .f input[type=number], .f input[type=date], .f select, .f textarea {
  width: 100%; font-family: var(--font); font-size: 0.92rem; color: var(--ink);
  background: var(--warm); border: 1.5px solid rgba(200,189,180,0.55); border-radius: 11px;
  padding: 0.72rem 0.9rem; outline: none; transition: border-color 0.2s, background 0.2s;
}
.f textarea { line-height: 1.6; resize: vertical; min-height: 4.6rem; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--clay); background: var(--white); }
.f select { cursor: pointer; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f-row .f { margin-bottom: 1.35rem; }
.fieldset-t { font-size: 0.68rem; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--clay-btn); margin: 2.1rem 0 1.1rem; padding-top: 1.6rem; border-top: 1px solid rgba(200,189,180,0.4); }
.fieldset-t:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* segmentado (dos o tres opciones) */
.seg { display: flex; gap: 0.4rem; background: var(--beige); border-radius: 12px; padding: 0.3rem; }
.seg button { flex: 1; font-family: var(--font); font-size: 0.8rem; font-weight: 600; color: var(--ink-md); background: transparent; border: none; border-radius: 9px; padding: 0.62rem 0.5rem; cursor: pointer; transition: all 0.2s; }
.seg button.on { background: var(--white); color: var(--clay-btn); box-shadow: 0 2px 8px rgba(43,37,32,0.09); }

/* Sin esto, [hidden] no oculta: .res-row y .kpi3 traen su propio display. */
[hidden] { display: none !important; }

/* ---------- resultado ---------- */
.res-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.72rem 0; border-bottom: 1px solid rgba(253,250,245,0.12); font-size: 0.875rem; }
.res-row span { color: rgba(253,250,245,0.62); }
.res-row span small { display: block; font-size: 0.72rem; color: rgba(253,250,245,0.52); margin-top: 0.15rem; line-height: 1.45; }
.res-row b { font-weight: 600; font-size: 0.98rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-row.sub { padding: 0.5rem 0; font-size: 0.82rem; }
.res-row.sub span { color: rgba(253,250,245,0.52); padding-left: 0.9rem; position: relative; }
.res-row.sub span::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 4px; height: 1px; background: rgba(253,250,245,0.52); }
.res-row.tot { border-bottom: none; border-top: 2px solid var(--sage); margin-top: 0.7rem; padding-top: 1.15rem; }
.res-row.tot span { color: var(--warm); font-weight: 600; font-size: 0.95rem; }
.res-row.tot b { font-size: 2.25rem; line-height: 1; letter-spacing: -0.035em; color: var(--sage-lt); }
.res-row.tot.bad b { color: #E6A29C; }
.res-row.tot.bad { border-top-color: #B4413C; }
.pos { color: #A8C4B8; } .neg { color: #E6A29C; }

.res-box { background: rgba(122,158,142,0.16); border: 1px solid rgba(168,196,184,0.28); border-radius: 14px; padding: 1.05rem 1.25rem; margin-top: 1.4rem; font-size: 0.86rem; line-height: 1.68; color: rgba(253,250,245,0.9); }
.res-box b { color: var(--sage-lt); }
.res-box.warn { background: rgba(180,65,60,0.14); border-color: rgba(230,162,156,0.3); }
.res-box.warn b { color: #E6A29C; }
.res-note { font-size: 0.735rem; color: rgba(253,250,245,0.55); margin-top: 1.15rem; line-height: 1.6; }
.res-cta { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.res-cta .btn-sage, .res-cta .btn-ghost { text-align: center; display: block; width: 100%; }
.res-cta .btn-ghost { border-color: rgba(253,250,245,0.32); color: var(--warm); }
.res-cta .btn-ghost:hover { border-color: var(--clay-lt); color: var(--clay-lt); }

/* medidores tipo KPI dentro del panel oscuro */
.kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 1.5rem 0 0.2rem; }
.kpi3 div { background: rgba(253,250,245,0.06); border: 1px solid rgba(253,250,245,0.1); border-radius: 12px; padding: 0.85rem 0.9rem; }
.kpi3 b { display: block; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em; color: var(--clay-lt); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi3 span { display: block; font-size: 0.64rem; letter-spacing: 0.9px; text-transform: uppercase; color: rgba(253,250,245,0.55); margin-top: 0.32rem; line-height: 1.4; }

/* barra comparativa horizontal */
.bars { margin-top: 1.5rem; }
.bar { margin-bottom: 0.95rem; }
.bar .bl { display: flex; justify-content: space-between; font-size: 0.78rem; color: rgba(253,250,245,0.72); margin-bottom: 0.35rem; }
.bar .bl b { color: var(--warm); font-variant-numeric: tabular-nums; }
.bar .bt { height: 9px; border-radius: 6px; background: rgba(253,250,245,0.1); overflow: hidden; }
.bar .bf { height: 100%; border-radius: 6px; background: var(--clay); transition: width 0.35s ease; }
.bar.is-good .bf { background: var(--sage-lt); }

/* ---------- índice de herramientas (hub) ---------- */
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.4rem; }
.tcard { background: var(--white); border: 1px solid rgba(200,189,180,0.4); border-radius: 20px; padding: 2rem 1.9rem 1.8rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(196,130,106,0.45); }
.tcard .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--clay-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.tcard .ico svg { width: 23px; height: 23px; stroke: var(--clay-btn); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tcard h3 { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.6rem; }
.tcard p { font-size: 0.875rem; color: var(--ink-md); line-height: 1.7; flex: 1; }
.tcard .q { font-size: 0.82rem; color: var(--clay-btn); font-weight: 600; font-style: italic; margin-bottom: 0.75rem; }
.tcard .go { margin-top: 1.3rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.4px; color: var(--clay-btn); display: flex; justify-content: space-between; align-items: center; }
.tcard .go em { font-style: normal; font-weight: 500; color: var(--ink-lt-txt); }
.tcard.is-new { border-color: rgba(196,130,106,0.5); }
.tcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pill-new { font-size: 0.6rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); background: var(--clay-btn); border-radius: 50px; padding: 0.28rem 0.7rem; }

/* ---------- generador de documentos ---------- */
.doc-pick { display: grid; gap: 0.55rem; }
.doc-pick button { display: flex; gap: 0.85rem; align-items: flex-start; text-align: left; font-family: var(--font); background: var(--warm); border: 1.5px solid rgba(200,189,180,0.5); border-radius: 13px; padding: 0.9rem 1rem; cursor: pointer; transition: all 0.2s; color: inherit; }
.doc-pick button:hover { border-color: var(--clay-lt); }
.doc-pick button.on { border-color: var(--clay); background: var(--clay-bg); }
.doc-pick .n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--white); border: 1px solid rgba(200,189,180,0.6); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--clay-btn); }
.doc-pick button.on .n { background: var(--clay-btn); color: #fff; border-color: var(--clay-btn); }
.doc-pick strong { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
.doc-pick small { display: block; font-size: 0.755rem; color: var(--ink-lt-txt); line-height: 1.5; margin-top: 0.2rem; }

.doc-sheet { background: var(--white); border: 1px solid rgba(200,189,180,0.5); border-radius: 16px; box-shadow: var(--shadow); padding: 2.6rem 2.8rem 3rem; font-size: 0.87rem; line-height: 1.75; color: var(--ink); }
.doc-sheet .dh { border-bottom: 2px solid var(--clay); padding-bottom: 0.9rem; margin-bottom: 1.6rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.doc-sheet .dh .t { font-size: 0.64rem; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-lt); }
.doc-sheet h3 { font-size: 1.1rem; letter-spacing: -0.02em; margin: 0 0 1.4rem; text-align: center; text-transform: uppercase; font-weight: 700; }
.doc-sheet p { margin-bottom: 0.95rem; }
.doc-sheet .rt { text-align: right; color: var(--ink-md); font-size: 0.83rem; margin-bottom: 1.6rem; }
.doc-sheet table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 1rem 0 1.2rem; font-variant-numeric: tabular-nums; }
.doc-sheet table th, .doc-sheet table td { border: 1px solid rgba(200,189,180,0.65); padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; }
.doc-sheet table th { background: var(--warm); font-size: 0.7rem; letter-spacing: 0.9px; text-transform: uppercase; color: var(--ink-lt); font-weight: 700; }
.doc-sheet table td.num { text-align: right; white-space: nowrap; }
.doc-sheet .firma { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.6rem; }
.doc-sheet .firma div { border-top: 1px solid var(--ink-lt); padding-top: 0.5rem; font-size: 0.78rem; color: var(--ink-md); }
.doc-sheet .firma.one { grid-template-columns: 1fr; max-width: 55%; }
.doc-sheet .nota { font-size: 0.73rem; color: var(--ink-lt-txt); line-height: 1.6; border-top: 1px solid rgba(200,189,180,0.5); margin-top: 2rem; padding-top: 0.9rem; }
.doc-sheet ol, .doc-sheet ul { margin: 0 0 1rem 1.15rem; }
.doc-sheet li { margin-bottom: 0.4rem; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.2rem; }
.doc-actions button { font-size: 0.83rem; padding: 0.72rem 1.5rem; }
.copied { font-size: 0.8rem; color: var(--sage-btn); font-weight: 600; align-self: center; }

/* ---------- diagnóstico ---------- */
.q-list { counter-reset: q; }
.q-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(200,189,180,0.4); }
.q-item:first-child { padding-top: 0; }
.q-item:last-child { border-bottom: none; }
.q-item > p { font-size: 0.95rem; font-weight: 600; line-height: 1.5; margin-bottom: 0.9rem; display: flex; gap: 0.7rem; }
.q-item > p::before { counter-increment: q; content: counter(q); flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--clay-bg); color: var(--clay-btn); font-size: 0.74rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
.opts { display: grid; gap: 0.45rem; margin-left: 2.2rem; }
.opts button { text-align: left; font-family: var(--font); font-size: 0.855rem; line-height: 1.5; color: var(--ink-md); background: var(--warm); border: 1.5px solid rgba(200,189,180,0.5); border-radius: 11px; padding: 0.7rem 0.95rem; cursor: pointer; transition: all 0.18s; }
.opts button:hover { border-color: var(--clay-lt); color: var(--ink); }
.opts button.on { border-color: var(--clay); background: var(--clay-bg); color: var(--ink); font-weight: 500; }

.gauge { text-align: center; padding: 0.4rem 0 0.2rem; }
.gauge .n { font-size: 4.2rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--sage-lt); font-variant-numeric: tabular-nums; }
.gauge .n small { font-size: 1.3rem; font-weight: 500; color: rgba(253,250,245,0.55); letter-spacing: 0; }
.gauge .g { display: inline-block; margin-top: 0.7rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: 50px; padding: 0.4rem 1.1rem; background: rgba(122,158,142,0.2); border: 1px solid rgba(168,196,184,0.35); color: var(--sage-lt); }
.gauge .track { height: 8px; border-radius: 6px; background: rgba(253,250,245,0.1); margin: 1.3rem 0 0.5rem; overflow: hidden; }
.gauge .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #C4826A, #A8C4B8); transition: width 0.5s ease; }
.gauge .scale { display: flex; justify-content: space-between; font-size: 0.66rem; color: rgba(253,250,245,0.55); }
.gauge.lvl-bad .n, .gauge.lvl-bad .g { color: #E6A29C; }
.gauge.lvl-bad .g { background: rgba(180,65,60,0.16); border-color: rgba(230,162,156,0.3); }
.gauge.lvl-mid .n, .gauge.lvl-mid .g { color: var(--clay-lt); }
.gauge.lvl-mid .g { background: rgba(196,130,106,0.18); border-color: rgba(212,160,144,0.35); }

.plan { margin-top: 1.6rem; }
.plan h4 { font-size: 0.68rem; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(253,250,245,0.58); margin-bottom: 0.9rem; }
.plan li { list-style: none; display: flex; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(253,250,245,0.1); font-size: 0.85rem; line-height: 1.6; color: rgba(253,250,245,0.82); }
.plan li:last-child { border-bottom: none; }
.plan li i { flex: none; width: 20px; height: 20px; border-radius: 6px; font-style: normal; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.15rem; background: rgba(196,130,106,0.28); color: var(--clay-lt); }
.plan li b { color: var(--warm); }
.plan .empty { color: rgba(253,250,245,0.5); font-size: 0.85rem; line-height: 1.7; }

/* ---------- cronología (impago) ---------- */
.tline { margin-top: 1.5rem; border-left: 2px solid rgba(253,250,245,0.15); padding-left: 1.2rem; }
.tline div { position: relative; padding: 0 0 1.1rem; }
.tline div:last-child { padding-bottom: 0; }
.tline div::before { content: ""; position: absolute; left: -1.55rem; top: 0.42rem; width: 9px; height: 9px; border-radius: 50%; background: var(--clay); border: 2px solid var(--ink); }
.tline b { display: block; font-size: 0.8rem; color: var(--warm); }
.tline span { font-size: 0.77rem; color: rgba(253,250,245,0.58); line-height: 1.55; display: block; margin-top: 0.15rem; }

/* ---------- bloque de cierre común ---------- */
.tool-end { background: var(--clay-bg); border-radius: 22px; padding: 2.6rem 2.8rem; margin-top: 2.6rem; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 2rem; align-items: center; }
.tool-end h3 { font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.7rem; }
.tool-end p { font-size: 0.92rem; color: var(--ink-md); line-height: 1.75; }
.tool-end .b { display: grid; gap: 0.6rem; }
.tool-end .b a { text-align: center; display: block; }

.tool-more { margin-top: 3.4rem; }
.tool-more h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 1.3rem; }
.tool-more .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tool-more a { display: block; background: var(--white); border: 1px solid rgba(200,189,180,0.45); border-radius: 15px; padding: 1.2rem 1.35rem; text-decoration: none; color: inherit; transition: all 0.25s; }
.tool-more a:hover { border-color: var(--clay-lt); transform: translateY(-2px); box-shadow: var(--shadow); }
.tool-more strong { display: block; font-size: 0.92rem; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.tool-more span { font-size: 0.79rem; color: var(--ink-lt-txt); line-height: 1.55; }

/* aviso de privacidad de las herramientas */
.privacy-note { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--sage-bg); border: 1px solid rgba(122,158,142,0.28); border-radius: 14px; padding: 1rem 1.25rem; font-size: 0.82rem; color: var(--ink-md); line-height: 1.65; margin-top: 2.2rem; }
.privacy-note svg { flex: none; width: 19px; height: 19px; stroke: var(--sage-btn); fill: none; stroke-width: 1.8; margin-top: 0.15rem; }
.privacy-note b { color: var(--sage-btn); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .tool-grid, .tool-grid.doc { grid-template-columns: 1fr; }
  .tool-out { position: static; }
  .tool-end { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tool-hero { padding: 7.5rem 0 2rem; }
  .tool-panel, .tool-out { padding: 1.5rem 1.35rem 1.7rem; }
  .doc-sheet { padding: 1.6rem 1.4rem 2rem; }
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .kpi3 { grid-template-columns: 1fr; }
  .tool-end { padding: 1.9rem 1.5rem; }
  .doc-sheet .firma { grid-template-columns: 1fr; gap: 1.6rem; }
  .doc-sheet .firma.one { max-width: 100%; }
  .opts { margin-left: 0; }
}

/* ============================================================
   IMPRESIÓN — cada herramienta se imprime como informe limpio.
   "Guardar como PDF" es una opción nativa del diálogo del navegador.
   ============================================================ */
.print-head { display: none; }

@media print {
  nav, footer, .whatsapp-btn, .whatsapp-tooltip, .skip-link, .no-print,
  .tool-end, .tool-more, .res-cta, .doc-actions, .privacy-note, .modal-overlay { display: none !important; }

  body { background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .container { max-width: none; padding: 0; }
  .tool-hero { padding: 0 0 1rem; background: #fff; }
  .tool-hero h1 { font-size: 1.55rem; max-width: none; }
  .tool-hero .lead { font-size: 0.88rem; margin-top: 0.6rem; }
  .tool-hero .crumbs, .tool-meta { display: none; }
  .tool { padding: 0; }
  .tool-grid { display: block; }
  .tool-panel { box-shadow: none; border: 1px solid #ddd; padding: 1.1rem 1.2rem; page-break-inside: avoid; margin-bottom: 1rem; }
  .tool-out { position: static; background: #fff; color: #000; box-shadow: none; border: 1.5px solid #C4826A; padding: 1.1rem 1.2rem; page-break-inside: avoid; }
  .tool-out > .ph, .res-row span, .res-note { color: #5A4E48; }
  .res-row { border-bottom-color: #e3ddd6; }
  .res-row.tot b, .gauge .n { color: #A85F42; }
  .res-row span small { color: #9A8E88; }
  .res-box { background: #EEF4F1; color: #2B2520; border-color: #b9cfc5; }
  .res-box b, .bar .bl b, .plan li b, .tline b { color: #2B2520; }
  .res-box.warn { background: #F7ECEA; }
  .kpi3 div { background: #F5EDE8; border-color: #e0cec6; }
  .kpi3 b { color: #A85F42; }
  .kpi3 span, .bar .bl, .plan li, .tline span, .gauge .scale { color: #5A4E48; }
  .plan h4 { color: #9A8E88; }
  .bar .bt, .gauge .track { background: #eee6de; }
  .gauge .g { border-color: #b9cfc5; background: #EEF4F1; color: #3E5F52; }
  .f .hint, .doc-pick { display: none; }
  .f > label { color: #2B2520; }
  /* Las barras no se imprimen: su valor ya va en negrita dentro de la etiqueta. */
  .f input[type=range] { display: none; }
  .f input, .f select, .f textarea { border-color: #ddd; background: #fff; padding: 0.3rem 0.5rem; }
  /* Del diagnóstico solo interesa la respuesta elegida, no el menú de opciones. */
  .opts button:not(.on) { display: none; }
  .opts button.on { border: none; background: none; padding: 0 0 0 0.1rem; color: #5A4E48; font-weight: 600; }
  .q-item { padding: 0.5rem 0; border-bottom-color: #eee; }
  .q-item > p { margin-bottom: 0.25rem; }
  .q-item > p::before { background: #F5EDE8; color: #A85F42; }
  .fieldset-t { color: #A85F42; border-top-color: #eee; margin: 1rem 0 0.6rem; padding-top: 0.8rem; }
  .doc-sheet { border: none; box-shadow: none; padding: 0; font-size: 11pt; }
  .print-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 2px solid #C4826A; padding-bottom: 0.7rem; margin-bottom: 1.2rem; }
  .print-head svg { height: 34px; width: auto; }
  .print-head .pd { font-size: 0.72rem; color: #9A8E88; text-align: right; line-height: 1.45; }
  .print-foot { display: block !important; font-size: 0.7rem; color: #9A8E88; line-height: 1.6; border-top: 1px solid #ddd; margin-top: 1.2rem; padding-top: 0.7rem; }
  @page { margin: 14mm; }
  a[href]::after { content: none !important; }
}
.print-foot { display: none; }

/* enlace-botón dentro de una pista de campo (p. ej. "poner el 7%") */
.f .hint .lnk { background: none; border: none; padding: 0; font: inherit; color: var(--clay-btn); font-weight: 600; text-decoration: underline; cursor: pointer; }
.f .hint .lnk:hover { color: var(--clay-btn-h); }