/*
  Controles de formulario — hoja compartida
  ------------------------------------------------------------------
  Los estilos de campo estaban repetidos dentro de onboarding.css, que sólo cargaba el
  registro de doctor. El resto de formularios —búsqueda, registro de paciente, perfil—
  seguía con los controles de la plantilla de 2019: campos de 34px, tipografía de 14px y
  bordes duros.

  Aquí viven una sola vez y cualquier página los usa añadiendo `cm-form` al contenedor.
  Las reglas están acotadas a `.cm-form`, así que ninguna pantalla cambia hasta que se le
  ponga la clase: la migración puede hacerse pantalla por pantalla sin riesgo.

  Decisiones que vienen de un problema real: un doctor reportó que los controles eran
  pequeños y confusos, sin espacio. Por eso la altura mínima es 48px, el texto 16px —que
  además evita el zoom automático de iOS al enfocar— y las etiquetas van encima del campo,
  nunca flotando dentro.
*/

.cm-form {
    --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-border: #cfd7e3;
    --cm-bg: #f7fafc;
    --cm-error: #c62828;

    color: var(--cm-navy);
    line-height: 1.6;
}

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

/* ---------- Campos ---------- */

/* El min-width: 0 no sobra.
   
   Un .cm-field es una columna flexible y, a la vez, casi siempre una celda de
   una rejilla o de otro flex. Una celda vale por omisión min-width: auto, es
   decir, su contenido mínimo; y el contenido mínimo de un <select> lo calcula
   Safari con su opción más larga. Con instituciones como «Universidad Central
   del Ecuador — Facultad de Ciencias Médicas» eso empuja la columna, la columna
   empuja la rejilla y la rejilla empuja la página: el perfil del doctor se podía
   arrastrar de lado en el teléfono y se salía de la maqueta.
   
   Chrome no lo hace —recorta el mínimo del select por su cuenta—, así que sólo
   se veía en el iPhone. */
.cm-form .cm-field { display: flex; flex-direction: column; margin-bottom: 18px; min-width: 0; }

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

.cm-form input[type="text"],
.cm-form input[type="email"],
.cm-form input[type="tel"],
.cm-form input[type="password"],
.cm-form input[type="number"],
.cm-form input[type="date"],
.cm-form input[type="time"],
.cm-form select,
.cm-form textarea {
    width: 100%;
    /* Y que ninguno se pase de su hueco por muy largo que sea lo que lleva
       dentro: es la otra mitad del min-width: 0 de arriba. */
    max-width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-family: inherit;
    color: var(--cm-navy);
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    padding: 11px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cm-form textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.cm-form 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-form input:focus,
.cm-form select:focus,
.cm-form textarea:focus {
    outline: none;
    border-color: var(--cm-cyan);
    box-shadow: 0 0 0 3px rgba(32, 192, 243, .18);
}

.cm-form input::placeholder,
.cm-form textarea::placeholder { color: #a2abba; }

.cm-form input[disabled],
.cm-form select[disabled] { background: var(--cm-bg); color: var(--cm-gray); cursor: not-allowed; }

/* Validación de jQuery Unobtrusive: marca el campo, no sólo el mensaje. */
.cm-form input.input-validation-error,
.cm-form select.input-validation-error,
.cm-form textarea.input-validation-error { border-color: var(--cm-error); }

.cm-form .field-validation-error,
.cm-form .cm-field__error { font-size: .8rem; color: var(--cm-error); margin-top: 6px; display: block; }

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


/* Un dato que se enseña y no se toca: mismo alto y misma línea de base que un campo,
   para que la fila no se descuadre, pero sin borde ni fondo, que no invita a escribir. */
.cm-form .cm-field__fixed {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 11px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cm-navy);
}

/* «Actualmente», debajo del año de fin de un puesto. */
.cm-form .cm-field__current {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 0;
    font-weight: 400;
    font-size: .82rem;
    color: var(--cm-gray);
    cursor: pointer;
}

.cm-form .cm-field__current input { width: 16px; height: 16px; margin: 0; accent-color: var(--cm-cyan-text); }

/* ---------- Casillas y opciones ---------- */

.cm-form .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;
    margin-bottom: 0;
}

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

/* ---------- Rejilla ---------- */

.cm-form .cm-row { display: grid; gap: 18px; }
.cm-form .cm-row--two { grid-template-columns: 1fr 1fr; }
.cm-form .cm-row--three { grid-template-columns: repeat(3, 1fr); }

/* ---------- Botones ---------- */

.cm-form .cm-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

.cm-form .cm-btn:focus-visible { outline: 3px solid rgba(39, 43, 65, .4); outline-offset: 2px; }
.cm-form .cm-btn:disabled { opacity: .65; cursor: progress; }

.cm-form .cm-btn--primary {
    background: var(--cm-cyan-text);
    color: #fff;
    box-shadow: 0 6px 16px rgba(32, 192, 243, .32);
}

.cm-form .cm-btn--primary:hover:not(:disabled) { background: var(--cm-cyan-deep); color: #fff; transform: translateY(-1px); }

.cm-form .cm-btn--mint { background: var(--cm-mint); color: #053f30; }
.cm-form .cm-btn--mint:hover:not(:disabled) { background: var(--cm-mint-dark); transform: translateY(-1px); }

.cm-form .cm-btn--ghost {
    background: transparent;
    color: var(--cm-navy);
    border: 1px solid var(--cm-border);
}

.cm-form .cm-btn--ghost:hover:not(:disabled) { border-color: var(--cm-cyan-text); color: var(--cm-cyan-text); }

.cm-form .cm-btn--sm { min-height: 36px; padding: 0 14px; font-size: .9rem; border-radius: 8px; }

.cm-form .cm-btn--block { width: 100%; }

/* ---------- Tarjeta contenedora ---------- */

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

.cm-form-card > h1,
.cm-form-card > h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 6px;
}

.cm-form-card__subtitle { font-size: .88rem; color: var(--cm-gray); margin: 0 0 24px; }

/* ---------- Resumen de errores ---------- */

/* Cuando el resumen ya es una caja (.cm-errors, de cm-base.css) cada línea va como
   línea; esto es para el resumen suelto. Con las dos cosas salía una caja dentro de
   otra (Nelson, 20-sep-2026). */
.cm-form .validation-summary-errors:not(.cm-errors) ul { list-style: none; margin: 0 0 18px; padding: 0; }

.cm-form .validation-summary-errors:not(.cm-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-form .validation-summary-valid { display: none; }

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

@media (max-width: 640px) {
    .cm-form .cm-row--two,
    .cm-form .cm-row--three { grid-template-columns: 1fr; }
    .cm-form-card { padding: 20px 18px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-form * { transition: none !important; }
    .cm-form .cm-btn:hover { transform: none; }
}