/* INNSOLAR · Registro de montajistas
   Todo está bajo .inn-reg para no chocar con el tema ni con Elementor.
   Para adaptar colores a tu marca, cambia las variables de abajo. */
.inn-reg {
  --inn-bg: #f3f5f8; --inn-surface: #ffffff; --inn-sunken: #e9edf3; --inn-line: #d5dce6;
  --inn-ink: #14213a; --inn-muted: #56637a; --inn-cell: #1c3f74; --inn-cell-ink: #ffffff;
  --inn-sun: #e8a21a; --inn-sun-ink: #2a1b00; --inn-ok: #1f7a4d; --inn-bad: #b3261e;
  --inn-info-soft: #dfe9f8; --inn-focus: #2d6fd6;
  --inn-display: "Archivo", system-ui, sans-serif; --inn-body: "IBM Plex Sans", system-ui, sans-serif; --inn-mono-f: "IBM Plex Mono", ui-monospace, monospace;
  --inn-sticky-top: 100px; /* ajusta si tu encabezado fijo es más alto */
  background: var(--inn-bg); color: var(--inn-ink); font-family: var(--inn-body); font-size: 15px; line-height: 1.5;
  padding: 28px clamp(16px, 3vw, 32px) 40px; border-radius: 14px; text-align: left;
}
.inn-reg *, .inn-reg *::before, .inn-reg *::after { box-sizing: border-box; }
.inn-reg [hidden] { display: none !important; }
.inn-reg h2, .inn-reg h3 { font-family: var(--inn-display); color: var(--inn-ink); margin: 0; letter-spacing: -.01em; text-wrap: balance; text-transform: none; }
.inn-reg p { margin: 0; }
.inn-reg button, .inn-reg input, .inn-reg select, .inn-reg textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; }
.inn-reg :focus-visible { outline: 2px solid var(--inn-focus); outline-offset: 2px; }

.inn-reg .inn-intro { display: grid; gap: 6px; margin-bottom: 20px; }
.inn-reg .inn-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--inn-muted); font-weight: 600; }
.inn-reg .inn-h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; line-height: 1.15; }
.inn-reg .inn-intro p { color: var(--inn-muted); max-width: 68ch; }

.inn-reg .inn-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.inn-reg .inn-aside { display: grid; gap: 20px; position: sticky; top: var(--inn-sticky-top); }
@media (max-width: 880px) {
  .inn-reg .inn-grid { grid-template-columns: minmax(0, 1fr); }
  .inn-reg .inn-aside { position: static; }
  .inn-reg .inn-guide { display: none; }
}

.inn-reg .inn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.inn-reg .inn-steps li { margin: 0; padding: 0; }
.inn-reg .inn-steps button { width: 100%; display: flex; gap: 12px; align-items: center; background: transparent; border: 0; padding: 9px 10px; border-radius: 8px; text-align: left; cursor: pointer; color: var(--inn-muted); font-weight: 400; min-height: 0; line-height: 1.3; }
.inn-reg .inn-steps button:hover { background: transparent; color: var(--inn-ink); }
.inn-reg .inn-steps button:disabled { cursor: default; opacity: 1; }
.inn-reg .inn-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 1.5px solid var(--inn-line); flex: none; font-family: var(--inn-mono-f); }
.inn-reg .inn-steps li.inn-done .inn-n { background: var(--inn-ok); border-color: var(--inn-ok); color: #fff; }
.inn-reg .inn-steps li.inn-cur button { background: var(--inn-surface); color: var(--inn-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--inn-line); }
.inn-reg .inn-steps li.inn-cur .inn-n { border-color: var(--inn-sun); background: var(--inn-sun); color: var(--inn-sun-ink); }
@media (max-width: 880px) {
  .inn-reg .inn-steps { grid-auto-flow: column; overflow-x: auto; padding-bottom: 4px; }
  .inn-reg .inn-steps .inn-lbl { display: none; }
  .inn-reg .inn-steps li.inn-cur .inn-lbl { display: inline; white-space: nowrap; }
}

.inn-reg .inn-guide { background: var(--inn-sunken); border-radius: 10px; padding: 16px; font-size: 13.5px; }
.inn-reg .inn-guide h3 { font-size: 14px; margin-bottom: 8px; }
.inn-reg .inn-guide ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--inn-muted); }

.inn-reg .inn-card { background: var(--inn-surface); border: 1px solid var(--inn-line); border-radius: 12px; min-width: 0; margin: 0; position: relative; }
.inn-reg .inn-card-head { padding: 22px 26px 4px; }
.inn-reg .inn-card-head h3 { font-size: 21px; }
.inn-reg .inn-card-head p { margin-top: 6px; color: var(--inn-muted); max-width: 70ch; }
.inn-reg .inn-card-body { padding: 18px 26px 8px; display: grid; gap: 22px; }
.inn-reg .inn-card-foot { padding: 16px 26px 22px; display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--inn-line); margin-top: 10px; }
.inn-reg .inn-foot-right { display: flex; gap: 12px; align-items: center; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 520px) { .inn-reg .inn-card-head, .inn-reg .inn-card-body, .inn-reg .inn-card-foot { padding-left: 16px; padding-right: 16px; } }

.inn-reg fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.inn-reg legend { font-family: var(--inn-display); font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 8px; color: var(--inn-ink); }
.inn-reg .inn-disc-extra { display: grid; gap: 16px; }
.inn-reg .inn-disc-box { background: var(--inn-sunken); border-radius: 10px; padding: 16px; }
.inn-reg .inn-disc-box legend { float: left; width: 100%; margin-bottom: 4px; }
.inn-reg .inn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.inn-reg .inn-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.inn-reg .inn-field > label { font-size: 13.5px; font-weight: 600; color: var(--inn-ink); margin: 0; }
.inn-reg .inn-req::after { content: " *"; color: var(--inn-bad); }
.inn-reg .inn-hint { font-size: 12.5px; color: var(--inn-muted); }
.inn-reg .inn-err { font-size: 12.5px; color: var(--inn-bad); }
.inn-reg .inn-err:empty { display: none; }
.inn-reg input[type=text], .inn-reg input[type=email], .inn-reg input[type=tel], .inn-reg input[type=number], .inn-reg input[type=url], .inn-reg select, .inn-reg textarea {
  width: 100%; max-width: 100%; background: var(--inn-surface); border: 1px solid var(--inn-line); border-radius: 7px; padding: 9px 11px; min-height: 42px; margin: 0; color: var(--inn-ink); font-size: 15px; line-height: 1.4;
}
.inn-reg textarea { min-height: 96px; resize: vertical; }
.inn-reg input:focus, .inn-reg select:focus, .inn-reg textarea:focus { border-color: var(--inn-focus); outline: none; box-shadow: 0 0 0 3px rgba(45, 111, 214, .18); }
.inn-reg .inn-mono { font-family: var(--inn-mono-f); font-variant-numeric: tabular-nums; }
.inn-reg .inn-invalid input, .inn-reg .inn-invalid select, .inn-reg .inn-invalid textarea { border-color: var(--inn-bad); }

.inn-reg .inn-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.inn-reg .inn-choice { position: relative; display: grid; gap: 3px; border: 1.5px solid var(--inn-line); border-radius: 10px; padding: 13px 14px 13px 44px; cursor: pointer; background: var(--inn-surface); margin: 0; font-weight: 400; }
.inn-reg .inn-choice input { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; margin: 0; accent-color: var(--inn-cell); }
.inn-reg .inn-choice strong { font-family: var(--inn-display); font-size: 15px; color: var(--inn-ink); }
.inn-reg .inn-choice span { color: var(--inn-muted); font-size: 13px; }
.inn-reg .inn-choice:has(input:checked) { border-color: var(--inn-cell); background: var(--inn-info-soft); }

.inn-reg .inn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inn-reg .inn-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--inn-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13.5px; background: var(--inn-surface); user-select: none; margin: 0; font-weight: 400; color: var(--inn-ink); }
.inn-reg .inn-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.inn-reg .inn-chip:has(input:checked) { background: var(--inn-cell); border-color: var(--inn-cell); color: var(--inn-cell-ink); }
.inn-reg .inn-chip:has(input:focus-visible) { outline: 2px solid var(--inn-focus); outline-offset: 2px; }
.inn-reg .inn-code { font-family: var(--inn-mono-f); font-size: 11.5px; opacity: .75; }
.inn-reg .inn-chip-actions { display: flex; gap: 14px; font-size: 13px; }
.inn-reg .inn-linkbtn { background: none; border: 0; padding: 0; color: var(--inn-cell); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-size: 13px; min-height: 0; font-weight: 500; }
.inn-reg .inn-linkbtn:hover { background: none; color: var(--inn-ink); }

.inn-reg .inn-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; margin: 0; cursor: pointer; color: var(--inn-ink); }
.inn-reg .inn-check input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--inn-cell); flex: none; }

.inn-reg .inn-docs { display: grid; gap: 10px; }
.inn-reg .inn-doc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px dashed var(--inn-line); border-radius: 9px; padding: 12px 14px; }
.inn-reg .inn-doc-name { font-weight: 600; font-size: 14px; }
.inn-reg .inn-doc-st { font-size: 12.5px; color: var(--inn-muted); overflow-wrap: anywhere; }
.inn-reg .inn-doc-st.ok { color: var(--inn-ok); }
.inn-reg .inn-doc-actions { display: flex; gap: 12px; align-items: center; }
.inn-reg .inn-doc input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.inn-reg .inn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 10px 18px; font-weight: 600; border: 1px solid var(--inn-line); background: var(--inn-surface); color: var(--inn-ink); cursor: pointer; min-height: 42px; font-size: 14.5px; line-height: 1.2; text-decoration: none; margin: 0; }
.inn-reg .inn-btn:hover { background: var(--inn-sunken); color: var(--inn-ink); border-color: var(--inn-line); }
.inn-reg .inn-btn.inn-primary { background: var(--inn-cell); border-color: var(--inn-cell); color: var(--inn-cell-ink); }
.inn-reg .inn-btn.inn-primary:hover { filter: brightness(1.1); background: var(--inn-cell); color: var(--inn-cell-ink); }
.inn-reg .inn-btn.inn-sun { background: var(--inn-sun); border-color: var(--inn-sun); color: var(--inn-sun-ink); }
.inn-reg .inn-btn.inn-sun:hover { filter: brightness(1.05); background: var(--inn-sun); color: var(--inn-sun-ink); }
.inn-reg .inn-btn.inn-sm { padding: 6px 12px; min-height: 34px; font-size: 13.5px; }
.inn-reg .inn-btn:disabled { opacity: .55; cursor: not-allowed; }

.inn-reg .inn-review { display: grid; gap: 14px; }
.inn-reg .inn-rv { border: 1px solid var(--inn-line); border-radius: 10px; overflow: hidden; }
.inn-reg .inn-rv header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--inn-sunken); font-family: var(--inn-display); font-weight: 700; font-size: 14px; }
.inn-reg .inn-rv dl { margin: 0; display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); font-size: 14px; }
.inn-reg .inn-rv dt, .inn-reg .inn-rv dd { padding: 8px 14px; border-top: 1px solid var(--inn-line); margin: 0; }
.inn-reg .inn-rv dt { color: var(--inn-muted); font-weight: 400; }
.inn-reg .inn-rv dd { overflow-wrap: anywhere; }
.inn-reg .inn-rv dl > :nth-child(1), .inn-reg .inn-rv dl > :nth-child(2) { border-top: 0; }
@media (max-width: 520px) { .inn-reg .inn-rv dl { grid-template-columns: minmax(0, 1fr); } .inn-reg .inn-rv dd { border-top: 0; padding-top: 0; } }

.inn-reg .inn-alert { background: #fbe0de; color: #8e1d16; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.inn-reg .inn-done { padding: 34px 26px; display: grid; gap: 14px; justify-items: start; }
.inn-reg .inn-done p { color: var(--inn-muted); max-width: 62ch; }
.inn-reg .inn-folio { font-family: var(--inn-mono-f); font-size: 22px; background: var(--inn-sunken); padding: 8px 14px; border-radius: 8px; letter-spacing: .04em; }
.inn-reg .inn-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #dcf1e5; color: var(--inn-ok); }
.inn-reg .inn-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.inn-reg .inn-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.inn-reg .inn-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--inn-ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 99999; max-width: calc(100% - 32px); }