/*
  Incorporación de doctores
  ------------------------------------------------------------------
  El registro anterior era una tarjeta que decía "escríbanos a soporte@…". Aquí el
  formulario está a la izquierda del argumento de por qué unirse, con los pasos del
  proceso a la vista para que nadie se pregunte qué pasa después de enviar.

  Controles grandes a propósito: un doctor complaint de que los campos del sistema son
  pequeños y apretados. Aquí la altura mínima es 48px y el texto 16px, que además evita
  que iOS haga zoom automático al enfocar un campo.

  Prefijo `cm-ob-` y hoja propia: no toca la plantilla Doccure.
*/

.cm-onboarding {
    --cm-cyan: #20c0f3;
    --cm-cyan-dark: #0f9fce;
    --cm-cyan-text: #0c76a4;
    --cm-cyan-deep: #0a6289;
    --cm-mint: #09e5ab;
    --cm-mint-dark: #06b98a;
    --cm-navy: #272b41;
    --cm-gray: #6b7385;
    --cm-rule: #e3e8ef;
    --cm-bg: #f7fafc;
    --cm-error: #c62828;

    background: var(--cm-bg);
    padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 80px);
    color: var(--cm-navy);
    line-height: 1.6;
}

.cm-onboarding *, .cm-onboarding *::before, .cm-onboarding *::after { box-sizing: border-box; }

.cm-onboarding-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

.cm-onboarding-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}

/* ---------- Argumento ---------- */

.cm-onboarding-eyebrow {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--cm-cyan-text);
    margin-bottom: 12px;
}

.cm-onboarding-pitch h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.18;
    margin: 0 0 14px;
    text-wrap: balance;
}

.cm-onboarding-pitch__subtitle { color: var(--cm-gray); margin: 0 0 28px; max-width: 44ch; }

.cm-onboarding-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }

.cm-onboarding-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }

.cm-onboarding-steps__num {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-weight: 700; font-size: .92rem;
    color: var(--cm-cyan-text);
    background: rgba(32, 192, 243, .12);
}

.cm-onboarding-steps li > span:last-child { font-size: .89rem; color: var(--cm-gray); }
.cm-onboarding-steps strong { display: block; font-size: .96rem; color: var(--cm-navy); font-weight: 600; margin-bottom: 1px; }

.cm-onboarding-benefits {
    display: grid; gap: 11px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--cm-rule);
    border-radius: 14px;
    margin-bottom: 20px;
}

.cm-onboarding-benefits div { display: flex; align-items: center; gap: 11px; font-size: .89rem; color: var(--cm-navy); }
.cm-onboarding-benefits i { color: var(--cm-mint-dark); width: 18px; text-align: center; flex-shrink: 0; }

.cm-onboarding-help { font-size: .85rem; color: var(--cm-gray); margin: 0; }
.cm-onboarding-help a { color: var(--cm-cyan-text); }

/* ---------- Formulario ---------- */

.cm-onboarding-form {
    background: #fff;
    border: 1px solid var(--cm-rule);
    border-radius: 18px;
    padding: clamp(24px, 3.5vw, 38px);
    box-shadow: 0 2px 4px rgba(39, 43, 65, .04), 0 16px 40px rgba(39, 43, 65, .08);
}

.cm-onboarding-form h1 {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 6px;
}

.cm-onboarding-form__subtitle { font-size: .87rem; color: var(--cm-gray); margin: 0 0 26px; }


.cm-onboarding-row { display: grid; gap: 18px; }
.cm-onboarding-row--two { grid-template-columns: 1fr 1fr; }

/* Los campos son deliberadamente amplios: el sistema actual tiene controles pequeños
   y un doctor ya reportó que resultan confusos y sin espacio. */
.cm-field { display: flex; flex-direction: column; margin-bottom: 18px; }

.cm-field label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--cm-navy);
    margin-bottom: 7px;
}

.cm-field input[type="text"],
.cm-field input[type="email"],
.cm-field input[type="tel"],
.cm-field input:not([type]),
.cm-field select {
    width: 100%;
    min-height: 48px;
    /* 16px evita que iOS haga zoom al enfocar. */
    font-size: 16px;
    color: var(--cm-navy);
    background: #fff;
    border: 1px solid #cfd7e3;
    border-radius: 10px;
    padding: 0 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cm-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7385' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.cm-field input:focus,
.cm-field select:focus {
    outline: none;
    border-color: var(--cm-cyan);
    box-shadow: 0 0 0 3px rgba(32, 192, 243, .18);
}

.cm-field input::placeholder { color: #a2abba; }

.cm-field__note { font-size: .8rem; color: var(--cm-gray); margin-top: 6px; }
.cm-field__error { font-size: .8rem; color: var(--cm-error); margin-top: 6px; }

.cm-field--check label {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 11px;
    align-items: start;
    font-weight: 400;
    font-size: .88rem;
    color: var(--cm-gray);
    cursor: pointer;
    line-height: 1.5;
}

.cm-field--check input[type="checkbox"] {
    width: 20px; height: 20px;
    margin-top: 1px;
    accent-color: var(--cm-cyan-text);
    cursor: pointer;
}

.cm-field--check a { color: var(--cm-cyan-text); }

.cm-onboarding-errors { margin-bottom: 18px; }
.cm-onboarding-errors ul { list-style: none; margin: 0; padding: 0; }

.cm-onboarding-errors li {
    background: rgba(198, 40, 40, .08);
    border-left: 3px solid var(--cm-error);
    color: #8e1f1f;
    padding: 11px 14px;
    border-radius: 0 8px 8px 0;
    font-size: .88rem;
    margin-bottom: 8px;
}

.cm-onboarding-errors ul:empty, .cm-onboarding-errors:empty { display: none; }

.cm-onboarding-send {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    background: var(--cm-cyan-text);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(32, 192, 243, .32);
    transition: background-color .15s ease, transform .15s ease;
}

.cm-onboarding-send:hover:not(:disabled) { background: var(--cm-cyan-deep); transform: translateY(-1px); }
.cm-onboarding-send:disabled { opacity: .65; cursor: progress; }
.cm-onboarding-send:focus-visible { outline: 3px solid rgba(39, 43, 65, .4); outline-offset: 2px; }

.cm-onboarding-legal { font-size: .78rem; color: var(--cm-gray); margin: 16px 0 0; text-align: center; }

/* ---------- Confirmación ---------- */

.cm-onboarding-ok {
    max-width: 620px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--cm-rule);
    border-radius: 18px;
    padding: clamp(28px, 4vw, 48px);
    text-align: center;
    box-shadow: 0 2px 4px rgba(39, 43, 65, .04), 0 16px 40px rgba(39, 43, 65, .08);
}

.cm-onboarding-ok__icon {
    width: 68px; height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(9, 229, 171, .14);
    color: var(--cm-mint-dark);
    font-size: 1.9rem;
}

.cm-onboarding-ok h1 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px; }
.cm-onboarding-ok p { color: var(--cm-gray); margin: 0 0 14px; }
.cm-onboarding-ok strong { color: var(--cm-navy); }

.cm-onboarding-ok__next {
    text-align: left;
    background: var(--cm-bg);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 24px 0 22px;
}

.cm-onboarding-ok__next h2 { font-size: .95rem; font-weight: 600; margin: 0 0 12px; }
.cm-onboarding-ok__next ol { margin: 0; padding-left: 20px; color: var(--cm-gray); font-size: .89rem; }
.cm-onboarding-ok__next li { margin-bottom: 7px; }

/* ---------- Pantallas pequeñas ---------- */

@media (max-width: 940px) {
    .cm-onboarding-grid { grid-template-columns: 1fr; }
    /* El formulario primero: es a lo que la persona vino. */
    .cm-onboarding-form { order: -1; }
}

@media (max-width: 560px) {
    .cm-onboarding-container { padding-inline: 16px; }
    .cm-onboarding-row--two { grid-template-columns: 1fr; }
    .cm-onboarding-form { padding: 22px 18px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-onboarding * { transition: none !important; }
    .cm-onboarding-send:hover:not(:disabled) { transform: none; }
}

.cm-onboarding-contract-notice {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: rgba(32, 192, 243, .07);
    border: 1px solid rgba(32, 192, 243, .22);
    border-radius: 10px;
    padding: 13px 15px;
    font-size: .85rem;
    color: var(--cm-navy);
    margin: 0 0 6px;
    line-height: 1.5;
}

.cm-onboarding-contract-notice i { color: var(--cm-cyan-text); margin-top: 2px; flex-shrink: 0; }

/* El texto es un único elemento flexible y tiene que poder encogerse. Sin min-width: 0
   un elemento flexible no baja de su ancho mínimo de contenido, que aquí era más que la
   pantalla del teléfono. */
.cm-onboarding-contract-notice > span { flex: 1 1 auto; min-width: 0; }

/* ---------- Agrupación de campos en formularios largos ---------- */

/* El registro de paciente tiene quince campos. Agruparlos por bloques evita que se lea
   como un muro y deja claro qué es obligatorio y qué no. */
.cm-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cm-gray);
    margin: 26px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--cm-rule);
}

.cm-onboarding-form > form > .cm-group-title:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }

.cm-group-optional {
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--cm-mint-dark);
    background: rgba(9, 229, 171, .14);
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: none;
    font-weight: 600;
}

.cm-group-help { font-size: .84rem; color: var(--cm-gray); margin: -6px 0 16px; }