/* Sintropia · programa de partners y plataforma de referidos */

.p-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.p-nav__brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.p-nav__brand .label { color: var(--n400); padding-left: 14px; border-left: 1px solid var(--ink-line); white-space: nowrap; }
@media (max-width: 560px) { .p-nav__brand .label { display: none; } .p-nav .btn { min-height: 42px; padding: 10px 14px; font-size: 14px; } }

/* ---------- Página del programa ---------- */
.p-hero { padding-block: clamp(56px, 9vw, 120px) clamp(56px, 8vw, 104px); }
.p-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: end; }
@media (min-width: 960px) { .p-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.p-hero__copy { display: grid; gap: 28px; justify-items: start; }
.p-hero__copy .display { max-width: 12ch; }
.p-hero__copy strong { color: var(--bone); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--ink-line); color: var(--n200); }
.badge::before { content: ""; width: 6px; height: 6px; background: var(--liquen); animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.calc { border: 1px solid var(--ink-line); background: var(--ink-2); padding: clamp(20px, 3vw, 32px); display: grid; gap: 24px; min-width: 0; }
.calc__head { display: flex; justify-content: space-between; gap: 12px; color: var(--n400); }
.calc__row { display: grid; gap: 10px; }
.calc__row label { color: var(--n300); }
.calc__value { font-size: clamp(28px, 3vw, 36px); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.calc__value small { font-size: 14px; color: var(--n400); letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.calc__out { padding-top: 20px; border-top: 1px solid var(--ink-line); display: grid; gap: 8px; }
.calc__out .label { color: var(--amber); }
.calc__out .calc__value { color: var(--amber); font-size: clamp(40px, 5vw, 56px); }
.calc__note { color: var(--n500); font-size: 13px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--liquen) var(--fill, 20%), var(--ink-line) var(--fill, 20%)); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--ink-line); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--liquen); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; background: var(--bone); border: 0; border-radius: 0; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--bone); border: 0; border-radius: 0; }
input[type="range"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.steps { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; position: relative; }
.step { display: grid; gap: 12px; align-content: start; padding-top: 28px; border-top: 1px solid var(--n200); min-width: 0; }
.step .label { color: var(--n500); }
.step:last-child { border-top-color: var(--amber-700); }
.step:last-child .label { color: var(--amber-700); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

.terms { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--n200); }
.terms div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--n200); }
.terms dt { color: var(--n500); }
.terms dd { margin: 0; font-size: 17px; }
@media (min-width: 760px) { .terms div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: baseline; } }

.p-cta { padding-block: clamp(72px, 9vw, 120px); }
.p-cta__inner { display: grid; gap: 24px; justify-items: start; max-width: 720px; }
.p-cta__inner .muted { font-size: 14px; }

/* ---------- Plataforma ---------- */
.app { min-height: calc(100vh - 73px); }
.auth { display: grid; place-items: center; padding-block: clamp(48px, 10vh, 120px); }
.auth__card { width: 100%; max-width: 440px; border: 1px solid var(--ink-line); background: var(--ink-2); padding: clamp(24px, 4vw, 40px); display: grid; gap: 24px; }
.auth__card h1 { font-size: 32px; letter-spacing: -.025em; line-height: 1.1; }
.auth__card form { display: grid; gap: 16px; }
.auth__switch { background: none; border: 0; padding: 4px 0; color: var(--liquen); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
.msg-error { color: #F2877F; font-size: 14px; }

.user-menu { display: flex; align-items: center; gap: 16px; color: var(--n400); min-width: 0; }
.user-menu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28vw; }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }

.dash { padding-block: clamp(40px, 6vw, 72px) 96px; display: grid; gap: 40px; }
.dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; }
.dash__head h1 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -.03em; line-height: 1.05; }
.dash__head p { color: var(--n400); margin-top: 8px; }
.kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi-card { border: 1px solid var(--ink-line); background: var(--ink-2); padding: 22px 24px; display: grid; gap: 10px; }
.kpi-card .label { color: var(--n400); }
.kpi-card__value { font-size: 36px; font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-card__value small { font-size: 14px; color: var(--n500); font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.kpi-card--earned { border-top: 2px solid var(--amber); }
.kpi-card--earned .kpi-card__value { color: var(--amber); }
.kpi-card--potential { border-top: 2px solid var(--liquen); }

.board-title { font-size: 20px; letter-spacing: -.01em; }
.loading { display: flex; align-items: center; gap: 12px; color: var(--n400); padding: 24px 0; }
.spinner { width: 14px; height: 14px; border: 1.5px solid var(--n500); border-top-color: transparent; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.col { border: 1px solid var(--ink-line); background: rgba(18,27,25,.6); padding: 14px; display: grid; gap: 12px; align-content: start; min-height: 220px; }
.col__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-3); color: var(--n300); }
.col__head::before { content: ""; width: 8px; height: 8px; background: var(--dot, var(--n600)); }
.col--neg { --dot: var(--liquen); }
.col--won { --dot: var(--amber); }
.col--lost { --dot: var(--n600); }
.col__list { display: grid; gap: 10px; }
.ref { border: 1px solid var(--ink-line); background: var(--ink); padding: 14px; display: grid; gap: 6px; }
.ref__name { font-weight: 500; color: var(--bone); }
.ref__contact { font-size: 13px; color: var(--n400); }
.ref__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--ink-3); }
.ref__foot .label { font-size: 10.5px; }
.st-contact { color: var(--n400); }
.st-neg { color: var(--liquen); }
.st-won { color: var(--amber); }
.st-lost { color: var(--n500); }
.ref--won { border-color: var(--amber); }
.ref--lost { opacity: .6; }
.empty { border: 1px dashed var(--ink-line); padding: 18px; text-align: center; color: var(--n500); }

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(11,17,16,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t-base) var(--ease); }
.modal.is-open { opacity: 1; }
.modal__card { width: 100%; max-width: 520px; max-height: 100%; overflow: auto; background: var(--ink-2); border: 1px solid var(--ink-line); transform: translateY(8px); transition: transform var(--t-base) var(--ease); }
.modal.is-open .modal__card { transform: none; }
.modal__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ink-line); color: var(--n400); }
.modal__close { background: none; border: 1px solid var(--ink-line); color: var(--n300); padding: 6px 10px; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.modal__close:hover { color: var(--bone); border-color: var(--n500); }
.modal__body { padding: clamp(20px, 4vw, 32px); display: grid; gap: 20px; }
.modal__body form { display: grid; gap: 16px; }
.modal__body h2 { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 520px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
legend { padding: 0; margin-bottom: 10px; color: var(--n300); }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--ink-line); cursor: pointer; transition: border-color var(--t-fast) var(--ease); }
.choice:hover { border-color: var(--n600); }
.choice:has(input:checked) { border-color: var(--liquen); background: rgba(95,174,142,.06); }
.choice input { accent-color: var(--green-300); margin-top: 3px; }
.success { display: grid; gap: 14px; justify-items: start; }