/* Dashboard público de utilidades: indicadores, categorías y una herramienta en foco. */
.qt-workspace { --qt-ink:var(--qv-content-ink); --qt-muted:var(--qv-content-muted); --qt-line:var(--qv-divider); --qt-line-soft:var(--qv-divider-soft); --qt-accent:var(--brand); --qt-tint:var(--qv-neutral-surface); container:qt / inline-size; width:100%; color:var(--qt-ink); font:13px/1.5 var(--ff-sans,system-ui); }
.qt-workspace [hidden], .qt-workspace[hidden] { display: none !important; }
.qt-workspace *, .qt-workspace *::before, .qt-workspace *::after { box-sizing: border-box; }
.qt-workspace button, .qt-workspace input, .qpd-toolbar .qt-back { font: inherit; }
.qt-workspace button { cursor: pointer; }
.qt-workspace svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.7; }
.qt-navigation { display: flex; align-items: center; }
:is(.qt-workspace, .qpd-toolbar) .qt-back { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid #dce5ef; border-radius: var(--qv-action-radius); background: rgb(255 255 255 / 85%); color: #43546b; font: 500 12px/1.4 var(--ff-sans, system-ui); box-shadow: 0 2px 5px rgb(26 47 74 / 3%); transition: border-color .16s, background .16s; }
.qt-back-icon { display: grid; place-items: center; width: 16px; height: 16px; color: currentColor; }
.qt-back-icon svg { width: 16px; height: 16px; stroke-width: 1.7; }
.qt-back:hover { border-color: color-mix(in srgb, var(--brand) 30%, #dce5ef); background: #fff; color: var(--brand); }
.qt-dashboard-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 24px; }
.qt-dashboard-copy { min-width: 0; }
.qt-dashboard-head h2 { margin:0; font-size:26px; line-height:1.2; letter-spacing:-.03em; font-weight:600; color:var(--qt-ink); }
.qt-tool-count { flex-shrink: 0; font-size: 13px; color: #65778c; }
.qt-detail { grid-column:1 / -1; min-width:0; padding:24px; border:1px solid var(--qt-line); border-radius:16px; background:#fff; box-shadow:0 2px 8px rgb(11 18 32 / 3%); scroll-margin-block:24px; }
.qt-detail-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--qt-line); }
.qt-detail-title { display: flex; gap: 12px; align-items: center; min-width: 0; }
.qt-detail-title .qt-option-icon { flex-shrink: 0; }
.qt-detail-head h4 { margin:0; font-size:16px; line-height:1.35; letter-spacing:-.02em; font-weight:600; color:var(--qt-ink); }
.qt-detail-head p { margin: 4px 0 0; font-size: 13px; color: #65778c; }
.qt-detail-head .qv-close-button > svg { width: 14px; height: 14px; }
.qt-detail-body { max-width:960px; margin-inline:auto; }
.qt-detail-body > .qt-caption:last-child { margin-bottom: 0; }
.qt-indicators { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:20px 0; overflow:hidden; background:#fff; border:1px solid var(--qt-line); border-radius:16px; box-shadow:0 2px 8px rgb(11 18 32 / 2%); }
.qt-indicator { min-width:0; display:grid; grid-template-rows:auto auto 1fr; align-content:start; gap:8px; padding:0 20px; border-left:1px solid var(--qt-line); }
.qt-indicator:first-child { border-left:0; }
.qt-indicator-label { display:flex; align-items:center; gap:8px; color:var(--qt-muted); font-size:12px; line-height:1.4; }
.qt-indicator-label svg { width:16px; height:16px; color:var(--qt-muted); }
.qt-indicator strong { display:block; margin:0; font-size:clamp(21px,2.4cqi,26px); line-height:1.2; letter-spacing:-.035em; font-weight:700; font-variant-numeric:tabular-nums; color:var(--qt-ink); white-space:nowrap; }
.qt-indicator small { display:block; color:var(--qt-muted); font-size:11px; line-height:1.5; }
.qt-category { margin-top:28px; }
.qt-category-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qt-category-head h3 { margin:0; color:var(--qt-muted); font-size:12px; line-height:1.5; font-weight:500; }
.qt-category-head::after { content:""; height:1px; background:var(--qt-line); flex:1; }
.qt-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.qt-workspace .qt-option { position:relative; min-height:112px; padding:20px 16px; border:1px solid var(--qt-line); border-radius:14px; background:#fff; display:grid; grid-template-columns:36px minmax(0,1fr) 14px; align-items:center; gap:12px; text-align:left; color:inherit; box-shadow:0 2px 5px rgb(11 18 32 / 2%); transition:border-color .16s,background .16s; }
.qt-option:hover { border-color:#c4cdd8; background:#fafbfc; }
.qt-option-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--qt-tint); color:var(--qt-muted); }
.qt-option-icon svg { width: 19px; height: 19px; }
.qt-option strong { display:block; font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.015em; }
.qt-option-description { display:block; margin-top:4px; color:var(--qt-muted); font-size:12px; line-height:1.5; }
.qt-option-arrow { display:grid; place-items:center; color:var(--qt-muted); transition:transform .16s; }
.qt-option-arrow svg { width: 15px; height: 15px; }
.qt-option:hover .qt-option-arrow, .qt-option[aria-expanded="true"] :is(.qt-option-arrow,.qt-option-icon) { color:var(--qt-accent); }
.qt-option[aria-expanded="true"] { border-color:#aab9c9; background:#f8fafc; }
.qt-option[aria-expanded="true"] .qt-option-arrow { transform: rotate(180deg); }
.qt-workspace .qt-link { border: 0; background: transparent; padding: 6px 0; min-height: 36px; color: var(--brand); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; text-align: left; text-decoration: none; }
.qt-link:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.qt-link svg { width: 16px; height: 16px; }
.qt-caption { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--qt-line-soft); color:var(--qt-muted); font-size:12px; line-height:1.6; }
.qt-surface { min-width: 0; }
.qt-surface p { margin: 0 0 16px; }
.qt-surface p:last-child { margin-bottom: 0; }
.qt-form-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 22px; }
.qt-form-top p { margin: 0; font-weight: 500; }
.qt-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.qt-fields:has(> [hidden]):not(.qt-fields-three) { grid-template-columns: 1fr; }
.qt-field { min-width: 0; }
.qt-field label, .qt-field > span { display: block; margin-bottom: 8px; font-size: 13px; color: #43546b; font-weight: 500; }
.qt-input-wrap { display:flex; align-items:center; gap:10px; padding:0 12px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; min-height:46px; color:var(--qt-muted); }
.qt-input-wrap:has([aria-invalid="true"]) { border-color: var(--error, #c53637); }
.qt-workspace .qt-input-wrap input { display:block; flex:1; width:100%; min-width:0; height:44px; border:0; padding:0; margin:0; border-radius:0; background:transparent; color:var(--qt-ink); box-shadow:none; font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; }
.qt-input-wrap > span { font-size: 13px; }
.qt-hint, .qt-error { display:block; margin-top:6px; font-size:12px; line-height:1.5; color:var(--qt-muted); }
.qt-hint:empty { display: none; }
.qt-error { color: var(--error, #c53637); }
.qt-workspace .qt-add { margin-top: 14px; }
.qt-note { font-size: 13px; color: #65778c; line-height: 1.6; }
.qt-note:empty { display: none; }
.qt-result { margin:0; color:var(--qt-muted); }
.qt-result > span { display: block; font-size: 13px; }
.qt-result strong { display:block; margin-top:8px; font-size:28px; line-height:1.2; font-weight:600; letter-spacing:-.035em; color:var(--qt-ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.qt-result p { margin:10px 0 0; font-size:12px; line-height:1.6; }
.qt-workspace .qt-rate { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--qt-line-soft); color:var(--qt-muted); font-size:12px; line-height:1.6; }
.qt-surface:has(> .qt-rate) + .qt-caption { margin-top:8px; padding-top:0; border-top:0; }
.qt-conversion { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); gap: 16px; align-items: start; }
.qt-conversion-sign { margin-top: 40px; color: #8196ac; }
.qt-conversion + .qt-note { margin-top: 22px; }
.qt-segments { display:flex; gap:4px; padding:4px; border:1px solid #cbd5e1; border-radius:10px; min-height:46px; }
.qt-segments button { flex: 1; border: 0; border-radius: 6px; padding: 7px; background: transparent; color: #596b80; font-size: 13px; }
.qt-segments [aria-pressed="true"] { color:var(--qt-ink); background:var(--qv-neutral-hover); }
.qt-table-wrap { width: 100%; overflow-x: auto; }
.qt-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.qt-table caption { text-align: left; color: #728399; padding: 0 0 10px; font-size: 13px; }
.qt-table th, .qt-table td { border-bottom:1px solid var(--qt-line-soft); text-align:right; padding:10px 8px; white-space:nowrap; font-weight:400; }
.qt-table tr > :first-child { text-align: left; padding-left: 0; }
.qt-table thead th { color:var(--qt-muted); font-size:12px; font-weight:500; border-bottom-color:var(--qt-line); }
.qt-table tbody tr:last-child > * { border-bottom:0; }
.qt-fields-three { grid-template-columns: 1fr 1fr; }
.qt-fields-three > :last-child { grid-column: 1 / -1; }
.qt-coverage-output { margin:0; }
.qt-coverage-track { height:6px; border-radius:6px; background:var(--qv-neutral-hover); overflow:hidden; }
.qt-coverage-track span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.qt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-block: 18px 12px; }
.qt-split > div { display:flex; flex-direction:column; min-width:0; }
.qt-split span { display: block; font-size: 13px; color: #65778c; }
.qt-split strong { display:block; margin-top:auto; color:#253349; font-size:25px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.qt-split > :first-child strong { color: var(--brand); }
.qt-breakdown { display:grid; gap:12px; margin:20px 0 0; padding-top:16px; border-top:1px solid var(--qt-line); }
.qt-breakdown > div { display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.qt-breakdown dt { color: #718196; }
.qt-breakdown dd { margin: 0; color: #43546b; font-weight: 500; }
.qt-option-copy, .qt-calculator-inputs, .qt-calculator-output { min-width:0; }
.qt-calculator { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; align-items:start; }
.qt-calculator-inputs.qt-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.qt-pregnancy > .qt-fields { grid-template-columns:minmax(0,1fr); }
.qt-calculator-output, .qt-coverage-output { padding:22px; border-radius:12px; background:#f7f8fa; }
.qt-calculator > .qt-caption { grid-column:1 / -1; margin:0; }
.qt-detail-body:has(> .qt-surface .qt-table-wrap), .qt-detail-body:has(.qt-conversion) { max-width:780px; }
@container qt (max-width: 860px) {
  .qt-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container qt (max-width: 760px) {
  .qt-indicators { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; }
  .qt-indicator { padding:18px 20px; }
  .qt-indicator:nth-child(3) { border-left:0; }
  .qt-indicator:nth-child(n+3) { border-top:1px solid var(--qt-line); }
  .qt-calculator { grid-template-columns:minmax(0,1fr); gap:20px; }
  .qt-calculator-inputs.qt-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container qt (max-width: 600px) {
  .qt-dashboard-head { grid-template-columns:auto minmax(0,1fr); gap:14px 20px; }
  .qt-navigation { grid-column:1 / -1; }
  .qt-dashboard-head h2 { font-size:23px; }
  .qt-tool-count { font-size:12px; justify-self:end; }
  .qt-options { grid-template-columns:1fr; gap:10px; }
  .qt-workspace .qt-option { min-height:94px; padding:18px; }
  .qt-detail { padding:20px; }
  .qt-detail-head { gap:12px; padding-bottom:16px; margin-bottom:20px; }
  .qt-detail-title .qt-option-icon { display:none; }
  .qt-calculator-inputs.qt-fields, .qt-fields, .qt-fields-three, .qt-conversion { grid-template-columns:minmax(0,1fr); }
  .qt-form-top { gap:0; }
  .qt-conversion-sign { margin:-2px 0; justify-self:center; transform:rotate(90deg); }
  .qt-conversion { gap:12px; }
}
@container qt (max-width: 460px) {
  .qt-indicator { padding:16px 12px; }
  .qt-indicator strong { font-size:20px; }
  .qt-indicator-label { font-size:11px; }
  .qt-indicator-label svg { display:none; }
  .qt-indicator small { font-size:11px; }
  .qt-split { gap:12px; }
  .qt-split strong { font-size:22px; }
}
@container qt (max-width: 340px) {
  .qt-indicator strong { font-size:18px; }
  .qt-indicator { padding:14px 10px; }
}
html.qv-workspace:not(.qvw-desktop) .qt-workspace { padding-bottom: 110px; }
@media (prefers-reduced-motion: reduce) { .qt-option, .qt-option-arrow { transition:none !important; } }

html.qv-workspace[data-qvw-keyboard="true"] #resultados .qt-workspace .qt-input-wrap input:focus-visible { outline: none !important; }
html.qv-workspace[data-qvw-keyboard="true"] .qt-input-wrap:has(input:focus-visible):not(:has([aria-invalid="true"])) { border-color: var(--brand, #0087ff); }

/* Embarazo: identidad rosa; el resultado representa la proporción por meses. */
.qt-option--pregnancy, .qt-detail--pregnancy { --qt-accent: #c64685; --qt-tint: #fcf0f6; }
.qt-pregnancy { --qt-pregnancy-color: #148363; --qt-pregnancy-tint: #eff9f5; }
.qt-pregnancy[data-level="media"] { --qt-pregnancy-color: #a36b0b; --qt-pregnancy-tint: #fff9eb; }
.qt-pregnancy[data-level="baja"] { --qt-pregnancy-color: #b65f25; --qt-pregnancy-tint: #fff5ed; }
.qt-pregnancy[data-level="minima"] { --qt-pregnancy-color: var(--error, #c53637); --qt-pregnancy-tint: color-mix(in srgb, var(--error, #c53637) 5%, white); }
.qt-stepper { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.qt-stepper button { appearance: none; display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #dce5ef; border-radius: 50%; background: #fff; color: #596b80; }
.qt-stepper button svg { width: 16px; height: 16px; }
.qt-stepper button:hover:not(:disabled) { border-color: var(--qt-accent); color: var(--qt-accent); background: var(--qt-tint); }
.qt-stepper button:disabled { opacity: .35; cursor: default; }
.qt-workspace .qt-stepper input[type="range"] { appearance: none; -webkit-appearance: none; display: block; flex: 1; min-width: 0; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action:pan-y; box-shadow: none; }
.qt-stepper input::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(to right, var(--qt-accent) var(--qt-fill), #e7eaf0 var(--qt-fill)); }
.qt-stepper input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7.5px; border: 3px solid #fff; border-radius: 50%; background: var(--qt-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qt-accent) 25%, #dce5ef), 0 2px 4px rgb(26 47 74 / 12%); }
.qt-stepper input::-moz-range-track { height: 5px; border-radius: 999px; background: #e7eaf0; }
.qt-stepper input::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--qt-accent); }
.qt-stepper input::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--qt-accent); box-shadow: 0 0 0 1px #dce5ef; }
.qt-step-value { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; color: #43546b; }
.qt-pregnancy-result { margin:0; padding:22px; border-radius:12px; background:var(--qt-pregnancy-tint); color:var(--qt-pregnancy-color); transition:color .2s,background .2s; }
.qt-pregnancy-result > span { font-size: 13px; font-weight: 500; }
.qt-pregnancy-result strong { display:block; margin-top:8px; font-size:36px; line-height:1.2; letter-spacing:-.03em; font-weight:600; }
.qt-pregnancy-result p { margin: 8px 0 0; font-size: 13px; }
.qt-pregnancy-months { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 5px; margin-top: 22px; }
.qt-pregnancy-months span { height: 8px; border-radius: 3px; background: rgb(26 47 74 / 9%); }
.qt-pregnancy-months .is-covered { background: var(--qt-pregnancy-color); }
.qt-pregnancy-result .qt-pregnancy-formula { margin-top: 12px; font-size: 13px; }
@media (pointer: coarse) { .qt-stepper button { flex-basis: 44px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .qt-back, .qt-pregnancy-result { transition: none !important; } }