/*
 * Calculadoras de obra de las Free Tools — diseño editorial de RÜM (oct 2026).
 *
 * El mismo lenguaje que las Herramientas PDF (assets/css/rum_pdf_tools.css) y
 * Criterios (RUM_Tools/Coordinacion/criterios.php): fondo blanco, Syne en
 * títulos y cifras, Inter en texto, etiquetas y botones en versalitas, filetes
 * cálidos en vez de sombras y primario durazno en píldora. Tokens --rx-* de
 * assets/css/rum_shell_editorial.css (los carga navbar.php), con respaldo para
 * cuando la página sale sin navbar (modo embebido).
 *
 * Estructura (la arma includes/rum_calc_page.php):
 *   .calc > .topbar > .calc-flow > .calc-kpis > .calc-grid (.calc-in | .calc-out) > .calc-doc
 *
 * Los nombres --c-* se conservan porque los usan aisc.php y la biblioteca.
 */

@font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/home/fonts/syne-var.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/home/fonts/inter-var.woff2) format("woff2"); }

:root {
  --c-font: var(--rx-f-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --c-display: var(--rx-f-display, "Syne", "Inter", system-ui, sans-serif);
  --c-bg: #fff;
  --c-bg-page: #fff;
  --c-card: #fff;
  --c-soft: var(--rx-paper-2, #FAF7F3);
  --c-mute: var(--rx-paper-2, #FAF7F3);
  --c-line: var(--rx-rule, #ECE4DA);
  --c-line-2: var(--rx-rule, #ECE4DA);
  --c-line-strong: var(--rx-rule-strong, #DDD1C3);
  --c-shadow: none;
  --c-text: var(--rx-ink, #1C1F26);
  --c-ink-2: var(--rx-ink-2, #4A4F5A);
  --c-muted: #6B7079;
  --c-faint: var(--rx-muted, #8A8F98);
  --c-rum: var(--rx-ink, #1C1F26);
  --c-accent: var(--rx-peach, #F3D2B2);
  --c-accent-2: var(--rx-peach-2, #EEBF95);
  --c-accent-text: var(--rx-peach-ink, #5C3A21);
  --c-accent-border: var(--rx-peach, #F3D2B2);
  --c-terra: var(--rx-terracotta, #B8784C);
  --c-dot: var(--rx-terracotta, #B8784C);
  --c-ok: #3E7A4F;
  --c-warn: #9A6417;
  --c-warn-bg: rgba(201, 138, 43, .13);
  --c-warn-text: #9A6417;
  --c-bad: #B4483C;
  --c-bad-bg: rgba(180, 72, 60, .09);
  --c-r: 10px;
  --c-r-tight: 8px;
}

html:has(> body.rum-calc-page) { background: #fff; }

body.rum-calc-page {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: var(--c-text);
  font-family: var(--c-font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.rum-calc-page [hidden] { display: none !important; }
body.rum-calc-page *,
body.rum-calc-page *::before,
body.rum-calc-page *::after { box-sizing: border-box; }

/* El navbar del sitio sin brillos animados, como en las páginas de operación. */
body.rum-calc-page .rum-navbar .nav-glow::before,
body.rum-calc-page .rum-navbar .nav-glow::after,
body.rum-calc-page .rum-navbar .nav-glow .portal-hover,
body.rum-calc-page .rum-navbar .nav-glow .portal-hover::before,
body.rum-calc-page .rum-navbar .nav-glow .portal-hover::after,
body.rum-calc-page .rum-footer .nav-glow::before,
body.rum-calc-page .rum-footer .nav-glow::after,
body.rum-calc-page .rum-footer .nav-glow .portal-hover { display: none !important; animation: none !important; opacity: 0 !important; }
body.rum-calc-page .rum-navbar .nav-trail,
body.rum-calc-page .rum-footer .nav-trail { display: none !important; }
body.rum-calc-page .rum-navbar .nav-glow,
body.rum-calc-page .rum-footer .nav-glow { transform: none !important; filter: none !important; text-shadow: none !important; }
body.rum-calc-page .rum-navbar .nav-portal-ring { animation: none !important; opacity: .35; }

.calc {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 2.6vw, 40px) clamp(16px, 2.4vw, 36px) 64px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
}
body.is-embedded .calc { padding-top: 12px; }

/* ---------- Encabezado editorial: regreso, etiqueta, título, entrada ---------- */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 24px;
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--c-line);
}
.back-btn {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-faint);
  background: none;
  border: 0;
  text-decoration: none;
  transition: color .2s ease;
}
.back-btn svg { width: 12px; height: 12px; }
.back-btn:hover,
.back-btn:focus-visible { color: var(--c-text); }
.back-btn:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
.badge-role {
  grid-column: 1 / -1;
  justify-self: start;
  display: block;
  margin: 0 0 14px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-terra);
  background: none;
  border: 0;
}
.badge-role::before { content: none; }
.topbar-title { grid-column: 1; min-width: 0; }
.topbar-title h1 {
  margin: 0;
  font-family: var(--c-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.topbar-title .proj-name {
  display: block;
  margin: 14px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-muted);
}
.topbar-title .proj-name::before { content: none; }
.topbar-title .proj-name strong { color: var(--c-text); font-weight: 600; }
.topbar-actions {
  grid-column: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.topbar-actions:empty { display: none; }

/* ---------- Guía de 3 pasos: celdas con filete ---------- */
.calc-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  margin: 0 0 22px;
  list-style: none;
  border-radius: var(--c-r);
  overflow: hidden;
  counter-reset: flow;
}
.calc-flow li {
  counter-increment: flow;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--c-line);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--c-muted);
}
.calc-flow li::before {
  content: counter(flow, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--c-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-terra);
}
.calc-flow strong { color: var(--c-text); font-weight: 600; }

/* ---------- Cifras (lo que hay que comprar, de un vistazo): filetes entre celdas ---------- */
.calc-kpis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 1px;
  margin: 0 0 22px;
  border-radius: var(--c-r);
  overflow: hidden;
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--c-line);
}
.metric-card span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card strong {
  display: block;
  font-family: var(--c-display);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card em {
  display: block;
  margin-top: -2px;
  font-style: normal;
  font-size: 12px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-card.is-main span { color: var(--c-terra); }

/* ---------- Rejilla principal ---------- */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}
.calc-card {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  box-shadow: none;
  padding: clamp(16px, 2vw, 24px);
}
.calc-out { position: sticky; top: 84px; }

/* Secciones numeradas: el orden de captura se lee solo. */
.calc-in { counter-reset: step; }
.calc-sec:not([hidden]) { counter-increment: step; }
.calc-sec + .calc-sec {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.calc-sec h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 14px;
  font-family: var(--c-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--c-text);
}
.calc-sec h2::before {
  content: counter(step, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--c-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-terra);
}
.calc-sec h2 small {
  font-family: var(--c-font);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-muted);
}
.calc-sec.is-plain { counter-increment: none; }
.calc-sec.is-plain h2::before { display: none; }

/* ---------- Campos ---------- */
.f-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 14px;
}
.f-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.f.span-all { grid-column: 1 / -1; }
.f > label,
.f > .f-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--c-muted);
}
.f-hint { font-size: 12px; line-height: 1.45; color: var(--c-muted); }

.f-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--c-r-tight);
  background: #fff;
  transition: border-color .2s ease;
}
.f-box:hover { border-color: var(--c-ink-2); }
.f-box:focus-within { border-color: var(--c-text); box-shadow: none; }
.f-box input,
.f-box select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 9px 12px;
  font: inherit;
  font-family: var(--c-font);
  font-size: 16px; /* 16 px evita el zoom automático de iOS al enfocar */
  font-weight: 500;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.f-box select {
  cursor: pointer;
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C1F26' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.f-box input::placeholder { color: var(--c-faint); font-weight: 400; }
.f-unit { flex: 0 0 auto; padding: 0 12px 0 2px; font-size: 13px; color: var(--c-faint); white-space: nowrap; }
.f-box.is-bad { border-color: var(--c-bad); background: var(--c-bad-bg); box-shadow: none; }

.f-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.f-check input { width: 18px; height: 18px; accent-color: var(--c-text); margin: 0; }

/* Control segmentado: píldoras grandes, fáciles de tocar en obra; la elegida en tinta */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  background: transparent;
  font-family: var(--c-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--c-ink-2);
  text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.seg label:hover span { border-color: var(--c-text); color: var(--c-text); }
.seg input:checked + span { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 2px; }
.seg.is-full { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* ---------- Lista de elementos ---------- */
.items { display: flex; flex-direction: column; gap: 10px; }
.item {
  position: relative;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-soft);
}
.item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.item-no {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-terra);
  background: #fff;
  border: 1px solid var(--c-line-strong);
  font-variant-numeric: tabular-nums;
}
.item-head .f-box { flex: 1 1 auto; }
.item-sub {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.item-sub:empty { display: none; }
.item-del {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--c-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.item-del:hover,
.item-del:focus-visible { background: var(--c-bad-bg); border-color: rgba(180, 72, 60, .3); color: var(--c-bad); outline: none; }
.item .f-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.item .f > label { font-size: 10px; }
.item .f-box input, .item .f-box select { min-height: 40px; font-size: 16px; }

/* ---------- Supuestos editables ---------- */
details.assume {
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: #fff;
}
details.assume > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}
details.assume > summary::-webkit-details-marker { display: none; }
details.assume > summary::before { content: "▸"; display: inline-block; margin-right: 10px; color: var(--c-terra); transition: transform .2s ease; }
details.assume[open] > summary::before { transform: rotate(90deg); }
details.assume > summary::after { content: "Opcional"; float: right; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); line-height: 21px; }
details.assume[open] > summary { border-bottom: 1px solid var(--c-line); }
details.assume > .assume-body { padding: 14px 16px 16px; }

/* ---------- Botones: píldora Inter en versalitas; primario durazno, secundario con filete ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: var(--c-text);
  font: inherit;
  font-family: var(--c-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--c-accent-2); border-color: var(--c-accent-2); color: var(--c-text); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
.btn:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.secondary,
.btn.ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); }
.btn.secondary:hover,
.btn.secondary:focus-visible,
.btn.ghost:hover,
.btn.ghost:focus-visible { background: transparent; border-color: var(--c-text); color: var(--c-text); }
.btn.sm { min-height: 30px; padding: 0 12px; font-size: 10.5px; }
.btn.block { width: 100%; }
.btn-add { width: 100%; margin-top: 10px; border-style: dashed; }

/* ---------- Resultados ---------- */
.out-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-terra); }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  white-space: nowrap;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); }

.out-main { padding: 16px 18px 18px; border-radius: var(--c-r); background: var(--c-soft); border: 1px solid var(--c-line); }
.out-label { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.out-big {
  margin: 8px 0 0;
  font-family: var(--c-display);
  font-size: clamp(36px, 3.8vw, 52px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.out-big small { font-family: var(--c-font); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--c-muted); margin-left: 6px; }
.out-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.out-note:empty { display: none; }

.out-shop { margin-top: 18px; }
.out-shop h3,
.out-detail > summary { margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.shop { width: 100%; border-collapse: collapse; font-size: 14px; }
.shop td { padding: 10px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.shop tr:last-child td { border-bottom: 0; }
.shop td:first-child { font-weight: 500; }
.shop td.q { text-align: right; font-weight: 600; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.shop .n { display: block; font-size: 12px; font-weight: 400; color: var(--c-muted); margin-top: 2px; }

.out-detail { margin-top: 16px; border-top: 1px solid var(--c-line); padding-top: 12px; }
.out-detail > summary { list-style: none; cursor: pointer; margin: 0; color: var(--c-text); }
.out-detail > summary::-webkit-details-marker { display: none; }
.out-detail > summary::before { content: "▸ "; color: var(--c-terra); }
.out-detail[open] > summary::before { content: "▾ "; }
.out-rows { margin: 8px 0 0; padding: 0; list-style: none; }
.out-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--c-line-strong);
  font-size: 13.5px;
}
.out-rows li:last-child { border-bottom: 0; }
.out-rows .k { color: var(--c-muted); }
.out-rows .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.out-rows li.is-strong .k { color: var(--c-text); font-weight: 600; }

.out-warn {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--c-r-tight);
  background: var(--c-warn-bg);
  border: 0;
  color: var(--c-warn-text);
  font-size: 13px;
  line-height: 1.45;
}
.out-warn:empty { display: none; }

.out-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.out-actions .btn { width: 100%; }
.out-actions .btn.wide { grid-column: 1 / -1; min-height: 44px; font-size: 11.5px; }
.out-toast { min-height: 18px; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--c-ok); text-align: center; }
.out-fine { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-muted); }

/* ---------- Barra fija inferior en móvil ---------- */
.calc-dock { display: none; }

/* ---------- Contenido (cómo se calcula, FAQ) ---------- */
.calc-doc {
  margin-top: 24px;
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  box-shadow: none;
  padding: clamp(20px, 3vw, 40px);
}
.calc-doc-inner { max-width: 780px; }
.calc-doc h2 {
  margin: 36px 0 12px;
  font-family: var(--c-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--c-text);
}
.calc-doc h2:first-child { margin-top: 0; }
.calc-doc h3 { margin: 22px 0 8px; font-family: var(--c-display); font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.calc-doc p, .calc-doc li { font-size: 15.5px; line-height: 1.65; color: var(--c-ink-2); }
.calc-doc p { margin: 0 0 12px; }
.calc-doc ul, .calc-doc ol { margin: 0 0 14px; padding-left: 22px; }
.calc-doc li { margin: 0 0 6px; }
.calc-doc li::marker { color: var(--c-terra); }
.calc-doc strong { color: var(--c-text); font-weight: 600; }
.calc-doc a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-accent-2); text-underline-offset: 3px; }
.calc-doc code, .calc-doc .formula { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px; }
.calc-doc code { padding: 1px 5px; border-radius: 4px; background: var(--c-soft); }
.calc-doc .formula {
  display: block;
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-tight);
  background: var(--c-soft);
  color: var(--c-text);
  overflow-x: auto;
  white-space: pre-wrap;
}
.calc-doc table { width: 100%; margin: 8px 0 18px; border-collapse: collapse; font-size: 14px; }
.calc-doc th, .calc-doc td { padding: 9px 10px; border-bottom: 1px solid var(--c-line); text-align: left; }
.calc-doc th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); font-weight: 600; background: transparent; border-bottom-color: var(--c-line-strong); }
.calc-doc td.num, .calc-doc th.num { text-align: right; font-variant-numeric: tabular-nums; }
.calc-doc .table-wrap { overflow-x: auto; }
.calc-doc details.faq { border-bottom: 1px solid var(--c-line); }
.calc-doc details.faq > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 15px 32px 15px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-text);
}
.calc-doc details.faq > summary::-webkit-details-marker { display: none; }
.calc-doc details.faq > summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 20px; font-weight: 400; color: var(--c-terra); }
.calc-doc details.faq[open] > summary::after { content: "–"; }
.calc-doc details.faq > div { padding: 0 0 14px; }

.calc-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  padding: 1px;
  margin-top: 12px;
  border-radius: var(--c-r);
  overflow: hidden;
}
.calc-related a {
  position: relative;
  display: block;
  padding: 16px 40px 18px 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--c-line);
  text-decoration: none;
  color: var(--c-text);
  transition: background .2s ease;
}
.calc-related a::after { content: "→"; position: absolute; top: 16px; right: 18px; color: var(--c-terra); }
.calc-related a:hover,
.calc-related a:focus-visible { background: var(--c-soft); outline: none; }
.calc-related strong { display: block; font-family: var(--c-display); font-size: 17px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.calc-related span { display: block; margin-top: 4px; font-size: 13px; color: var(--c-muted); line-height: 1.45; }

/* ---------- Capas de anuncio (cotizar, catálogo, patrocinio) dentro de la calculadora ----------
   Los bloques traen su propia piel editorial (includes/rum_freetools_*.php); aquí sólo se
   ajustan al ancho de .calc. */
body.rum-calc-page .calc .rum-ft-q,
body.rum-calc-page .calc .rum-ft-cat,
body.rum-calc-page .calc .rum-ft-slot { max-width: none; padding: 0; margin: 16px 0 0; }
/* aisc.php los imprime al final del <body>: mismo ancho y márgenes que la página. */
body.rum-calc-page > .rum-ft-q,
body.rum-calc-page > .rum-ft-cat,
body.rum-calc-page > .rum-ft-slot { max-width: 1240px; padding-left: clamp(16px, 2.4vw, 36px); padding-right: clamp(16px, 2.4vw, 36px); }
body.rum-calc-page .bib-slot .rum-ft-slot,
body.rum-calc-page .bib-side .rum-ft-slot { max-width: none; padding: 0; margin: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .calc-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .calc { padding-bottom: 96px; }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-out { position: static; }
  .calc-flow { grid-template-columns: minmax(0, 1fr); }
  .calc-flow li:not(:first-child) { display: none; }
  /* En el celular el total ya va en la barra fija: primero los campos. */
  .calc-kpis { display: none !important; }
  .calc-dock {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    color: var(--c-text);
    border-top: 1px solid var(--c-line);
    box-shadow: none;
    transition: transform .2s;
  }
  .calc-dock.is-hidden { transform: translateY(110%); }
  .calc-dock-txt { flex: 1 1 auto; min-width: 0; }
  .calc-dock-k { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); }
  .calc-dock-v { display: block; font-family: var(--c-display); font-size: 22px; font-weight: 400; letter-spacing: -.015em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
}
@media (max-width: 640px) {
  .topbar { grid-template-columns: minmax(0, 1fr); }
  .topbar-actions { grid-column: 1; justify-content: flex-start; margin-top: 16px; }
}
@media (max-width: 560px) {
  .calc { padding-left: 16px; padding-right: 16px; }
  .calc-card { padding: 16px; }
  .f-grid, .f-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg.is-full { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
  .metric-card { padding: 12px 14px 14px; }
}

/* ---------- Impresión: entradas y resultados ---------- */
@media print {
  body.rum-calc-page { background: #fff; }
  .calc-dock, .calc-doc, .calc-flow, .out-actions, .out-toast, .topbar-actions, .back-btn,
  nav, header.site-header, footer, .rum-navbar, .rum-footer, .rum-ft-cat, .rum-ft-q, .rum-ft-slot, .rum-consumable-bridge,
  .item-del, .btn-add, [data-print="hide"] { display: none !important; }
  .calc { padding: 0; max-width: none; }
  .topbar { padding-bottom: 12px; margin-bottom: 12px; }
  .calc-grid { grid-template-columns: 1fr 1fr; }
  .calc-card, .metric-card { box-shadow: none; }
  .metric-card { border: 1px solid var(--c-line); }
  .calc-out { position: static; }
  details.assume > .assume-body, .out-detail > .out-rows { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-dock, .btn, .seg span, .back-btn, .f-box, .item-del, .calc-related a { transition: none; }
}