/*
 * CBTI Widgets · página Súmate (afiliación).
 * Valores copiados de los estilos en línea del diseño "Web CBTI v3" (ruta afiliacion).
 * Las clases af-*, cbti-pick, cbti-chip, cbti-steps y cbti-sticky vienen de cbti-design.css del tema.
 */

/* ---------- Portada ---------- */
.cbtiw-sm-hero { background: var(--surface-inverse); color: var(--text-on-dark); }
.cbtiw-sm-hero__in { max-width: var(--container); margin: 0 auto; padding: var(--space-20) var(--space-6); box-sizing: border-box; }
.cbtiw-sm-hero__title { margin: var(--space-6) 0 0; max-width: 860px; font-family: var(--font-display); font-size: var(--text-display-2); font-weight: var(--weight-black); line-height: var(--leading-snug); letter-spacing: var(--tracking-display); color: var(--text-on-dark); text-wrap: balance; }
.cbtiw-sm-hero__lead { margin: var(--space-6) 0 0; max-width: var(--container-narrow); font-size: var(--text-body-lg); line-height: var(--leading-body); color: var(--text-on-dark-muted); }

/* ---------- Pasos ---------- */
.cbtiw-sm-steps { max-width: var(--container); margin: 0 auto; padding: var(--section-y-compact, 64px) var(--space-6) 0; box-sizing: border-box; }
.cbtiw-sm-step { padding-top: var(--space-4); border-top: 3px solid var(--green-500); }
.cbtiw-sm-step__n { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--accent-strong); font-weight: var(--weight-semibold); }
.cbtiw-sm-step__t { margin: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-heading); }
.cbtiw-sm-step__p { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-muted); }

/* ---------- Formulario ---------- */
.cbtiw-af [hidden] { display: none !important; }
/* El <form> no genera caja: sus dos columnas son las celdas de la grilla .af-wrap del diseño. */
.cbtiw-af-form { display: contents; }
.cbtiw-af-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.cbtiw-af-kicker { font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-strong); }
/* line-height: normal = valor heredado en el diseño (estos títulos no lo fijan). */
.cbtiw-af-h2 { margin: var(--space-3) 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-black); line-height: normal; color: var(--text-strong); }
.cbtiw-af-h2--intro { margin-bottom: var(--space-2); }
.cbtiw-af-h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-heading); }
.cbtiw-af-note { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-muted); }
.cbtiw-af-note--intro { margin-bottom: var(--space-6); }
.cbtiw-af-note--soft { margin-top: var(--space-3); }
.cbtiw-af-note--sum { margin-top: var(--space-4); }
.cbtiw-af-note--qr { margin-top: var(--space-2); }
.cbtiw-af-stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* Tarjetas de plan (button.cbti-pick): neutraliza estilos de botón del tema padre. */
.cbtiw-af button.cbti-pick { font: inherit; color: inherit; background: var(--white); text-transform: none; letter-spacing: normal; min-height: 0; height: auto; }
.cbtiw-af button.cbti-pick:hover, .cbtiw-af button.cbti-pick:focus { background: var(--white); color: inherit; }
.cbtiw-af-pick__n { margin: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-heading); }
.cbtiw-af-pick__p { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--accent-strong); font-weight: var(--weight-semibold); }
.cbtiw-af-pick__d { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-muted); }

/* ¿Fabrica software? (Tag del diseño, seleccionable). */
.cbtiw-af-soft { margin-top: var(--space-6); }
.cbtiw-af-q { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.cbtiw-af-tags { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.cbtiw-af-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--weight-medium); background: var(--white); color: var(--text-body); border: 1px solid var(--border-subtle); cursor: pointer; box-sizing: border-box; }
.cbtiw-af-tag[aria-checked="true"] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.cbtiw-af-tag:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }

/* Rubros y acceso al panel: neutraliza estilos de botón del tema padre. */
.cbtiw-af button.cbti-chip { text-transform: none; letter-spacing: normal; min-height: 0; height: auto; }
.cbtiw-af button.cbti-chip:hover, .cbtiw-af button.cbti-chip:focus { background: var(--white); color: var(--text-body); }
.cbtiw-af button.cbti-chip[aria-pressed="true"], .cbtiw-af button.cbti-chip[aria-pressed="true"]:hover { background: var(--navy-800, #0A1F3C); border-color: var(--navy-800, #0A1F3C); color: #fff; }
.cbtiw-af button.af-acc-btn { text-transform: none; letter-spacing: normal; height: auto; }
.cbtiw-af button.af-acc-btn:hover, .cbtiw-af button.af-acc-btn:focus { background: var(--navy-800, #0A1F3C); color: #fff; }
.af-acc .cbtiw-form-notice { margin: 0; }

/* Delegado */
.cbtiw-af-box__p { margin: 4px 0 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-muted); }
.cbtiw-af-box__fields { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

/* Campo de archivo (Field del diseño) */
.cbtiw-af-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); }
.cbtiw-af-field__l { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.02em; color: var(--text-strong); }
.cbtiw-af-req { color: var(--red-500); }
.cbtiw-af-drop { margin: 0; display: flex; align-items: center; gap: var(--space-3); border: 1.5px dashed var(--border-strong, #C3CAD4); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--white); cursor: pointer; }
.cbtiw-af-drop:focus-within { outline: 3px solid var(--green-500); outline-offset: 2px; }
.cbtiw-af-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cbtiw-af-drop__b { flex: 0 0 auto; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--navy-800); color: #fff; font-size: var(--text-caption); font-weight: var(--weight-bold); }
.cbtiw-af-drop__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body-sm); color: var(--text-body); }
.cbtiw-af-field__h { margin: 6px 0 0; font-size: var(--text-caption); line-height: var(--leading-body); color: var(--text-muted); }

/* Paso 4: resumen y envío (Card subtle del diseño) */
.cbtiw-af-card { position: relative; background: var(--surface-subtle); color: var(--text-body); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-8); font-family: var(--font-body); box-shadow: none; overflow: hidden; }
.cbtiw-af-sum-t { margin: var(--space-5) 0 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-black); line-height: normal; color: var(--text-strong); }
.cbtiw-af-lines { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.cbtiw-af-comp { margin-top: var(--space-4); }
.cbtiw-af-submit { margin-top: var(--space-5); }
.cbtiw-af-submit > .cbti-btn { display: flex; width: 100%; white-space: normal; text-align: center; box-sizing: border-box; }
.cbtiw-af .af-err + .cbtiw-form-notice, .cbtiw-af-card .cbtiw-form-notice { margin-top: var(--space-4); }

/* Estado "enviado": la sección pasa de la grilla .af-wrap a la columna angosta del diseño. */
.cbtiw-af--sent { max-width: var(--container-narrow, 860px); margin: 0 auto; padding: var(--section-y) var(--space-6); box-sizing: border-box; }
.cbti-card.cbtiw-af-sent { padding: var(--space-10); }
.cbtiw-af-sent__t { margin: var(--space-5) 0 0; font-family: var(--font-display); font-size: var(--text-display-3); font-weight: var(--weight-black); line-height: normal; color: var(--text-strong); }
.cbtiw-af-sent__p { margin: var(--space-4) 0 0; max-width: 60ch; font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-muted); }
.cbtiw-af-sent__ctas { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Variante ghost del botón del diseño [DERIVADO: el dump no la muestra]. */
:is(a, button).cbti-btn.cbtiw-af-ghost { background: transparent; border-color: transparent; color: var(--navy-800) !important; text-transform: none; }
:is(a, button).cbti-btn.cbtiw-af-ghost:hover { background: var(--surface-subtle); }

/* Enlace al modelo de carta (CARTA-1), bajo el campo de la carta. */
.cbtiw-af-model { display: inline-flex; align-items: center; min-height: 40px; margin-top: var(--space-2); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--accent-strong); text-decoration: underline; }