/* Repair page. It builds on installation.css (grid, heads, intro, timeline) and keeps its type sizes. The quick
   diagnosis is one wide tool: a navy side holds its heading and the three steps (assets/js/repair.js marks the current
   one), the questions run beside it; the brands sit beside their heading as a ruled list, with no boxes. */

/* The diagnosis tool across the container: the navy side and the white panel share one frame */
.rd { display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgb(0 36 80 / .3); scroll-margin-top: 16px; }
/* The side is wide enough to keep "Diagnóstico rápido" on one line */
.rd__side { padding: 44px 40px; background: var(--navy); }
.rd__side .sv-h2 { color: #fff; }
.rd__lead { margin-top: 12px; font-size: 1.125rem; line-height: 1.6; color: #c9dcf2; text-wrap: pretty; }
.rd__panel { padding: clamp(24px, 3.5vw, 48px); }
/* Questions and checks keep a readable line length on wide screens */
.rd__panel > [data-step] { max-width: 46rem; }
.rd [hidden] { display: none; }
.rd legend { margin-bottom: 16px; padding: 0; }
.rd__title { font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.rd__title:focus { outline: none; }
.rd__hint { margin-top: 8px; font-size: .95rem; line-height: 1.6; color: #5d6f84; }
.rd .sv-field { max-width: 26rem; margin-top: 24px; }
.rd__code { margin-top: 18px; }
.rd__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.rd button.sv-cta { border: 0; cursor: pointer; }
.rd .sv-cta:disabled { opacity: .4; cursor: not-allowed; }
.rd__ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border: 1px solid #c9d8e8; border-radius: 10px; background: #fff; color: var(--navy); font-family: "Poppins", sans-serif; font-size: .98rem; font-weight: 600; cursor: pointer; transition: border-color .2s ease; }
.rd__ghost:hover { border-color: var(--navy); }
.rd__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: auto; padding: 0; border: 0; background: none; color: var(--blue); font-family: "Poppins", sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; }
.rd__back svg { width: 18px; height: 18px; transform: rotate(180deg); }
.rd__checks { display: grid; gap: 8px; margin-top: 16px; }
.rd__checks label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 14px; border: 1px solid #c9d8e8; border-radius: 10px; background: #fff; font-size: .95rem; line-height: 1.45; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.rd__checks label:hover { border-color: var(--navy); }
.rd__checks label:has(input:checked) { border-color: var(--navy); background: #eef6ff; }
.rd__checks input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy); cursor: pointer; }
/* Below the checks, the blog post that explains the symptom */
.rd__read { margin-top: 14px; font-size: .95rem; line-height: 1.6; color: #5d6f84; }
.rd__read a { color: #1c6fc9; text-decoration: underline; text-underline-offset: 3px; }
.rd__alert { margin-top: 16px; padding: 16px 18px; border: 1px solid #f1b0b0; border-radius: 12px; background: #fdf0f0; color: #7f1d1d; }
.rd__alert strong { font-family: "Poppins", sans-serif; font-size: 1rem; }
.rd__alert p { margin-top: 6px; line-height: 1.55; }
.rd__summary { margin: 18px 0 22px; border: 1px solid var(--line); border-radius: 12px; }
.rd__summary > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 16px; border-top: 1px solid var(--line); }
.rd__summary > div:first-child { border-top: 0; }
.rd__summary dt { font-size: .92rem; color: var(--muted); }
.rd__summary dd { font-weight: 600; color: var(--navy); }
.rd__fine { margin-top: 12px; font-size: .85rem; line-height: 1.5; color: var(--muted); }

/* The three steps down the navy side, joined by a line: the current one lit, the ones behind it in blue */
.rd__stages { margin-top: clamp(28px, 3vw, 40px); }
.rd__stages li { position: relative; padding-bottom: 22px; }
.rd__stages li:last-child { padding-bottom: 0; }
.rd__stages li:not(:last-child)::after { content: ""; position: absolute; top: 30px; bottom: 4px; left: 11px; width: 2px; border-radius: 2px; background: rgb(255 255 255 / .18); transition: background .2s ease; }
.rd__stages h3 { display: flex; align-items: center; gap: 14px; font-family: "Poppins", sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: #a9bfd9; transition: color .2s ease; }
.rd__dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); font: 600 12px/1 "Poppins", sans-serif; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.rd__stages p { margin-top: 4px; padding-left: 38px; font-size: .95rem; line-height: 1.6; color: #a9bfd9; transition: color .2s ease; }
.rd__stages .is-current h3 { color: #fff; }
.rd__stages .is-current .rd__dot { background: #fff; box-shadow: none; color: var(--navy); }
.rd__stages .is-current p { color: #dbe7f5; }
.rd__stages .is-done h3 { color: #dbe7f5; }
.rd__stages .is-done .rd__dot { background: var(--blue); box-shadow: none; color: #fff; }
.rd__stages .is-done::after { background: var(--blue-light); }

/* Brands: a lighter section, the heading on the left and the names on the right as a ruled list; Daikin links to its
   own page */
.rd-brands-sec { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.rd-brands-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.rd-brands-wrap .ig-head { margin-bottom: 0; }
.rd-brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2rem); }
.rd-brands li { padding: 14px 0; border-top: 1px solid #d3e1ef; font-family: "Poppins", sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.rd-brands li:last-child { color: #5d6f84; }
.rd-brands a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .rd-brands-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rd-brands-wrap .ig-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
  .rd-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Up to small laptops: the navy side on top; the steps become a three-part progress bar named by the current step */
@media (max-width: 1100px) {
  .rd { grid-template-columns: minmax(0, 1fr); }
  .rd__side { padding: clamp(24px, 4vw, 40px); }
  .rd__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 24px; }
  .rd__stages li, .rd__stages li:last-child { padding: 12px 0 0; border-top: 3px solid rgb(255 255 255 / .2); transition: border-color .2s ease; }
  .rd__stages li::after { display: none; }
  .rd__stages .is-current { border-top-color: #fff; }
  .rd__stages .is-done { border-top-color: var(--blue-light); }
  .rd__stages h3 { visibility: hidden; }
  .rd__stages .is-current h3 { visibility: visible; }
  .rd__stages .rd__dot, .rd__stages p { display: none; }
}
@media (max-width: 720px) {
  .rd__nav { flex-direction: column-reverse; align-items: stretch; }
  .rd__back { justify-content: center; margin-right: 0; }
  .rd__ghost { width: 100%; }
  .rd__summary > div { grid-template-columns: 7rem minmax(0, 1fr); }
  .rd-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Wide screens: the step texts a step smaller, as on the installation and maintenance legends */
@media (min-width: 1301px) {
  .rd__stages p { font-size: .93rem; line-height: 1.55; }
}