/* ==========================================================================
   ENTRADA Y REGISTRO DE LA PACIENTE  (v2)

   Alcance: /portal/login, /portal/registro, /portal/recuperar y
   /portal/restablecer. Nada de esta hoja toca otra pantalla: todo cuelga de
   .kctp-entrada, que solo escriben esas cuatro vistas. La puerta del personal
   (/medico) usa .kctp-acceso SIN .kctp-entrada y por eso no se entera de nada
   de lo que hay aqui.

   -------------------------------------------------------------------------
   LO QUE ARREGLA LA VUELTA 2: LA ESCALA SE DESFONDABA
   -------------------------------------------------------------------------
   Medido en la vuelta 1 a 1440x900: 22 nodos de texto repartidos en SIETE
   tamanos -12/13/15/17/21/28/64- y CATORCE de esos 22 vivian en 12 o 13px.
   Las etiquetas "Correo electronico" y "Clave" a 13px, el rotulo "Portal del
   paciente" a 13px y las seis filas de la ficha del plan a 12px. La vara
   (lovi.care) no baja de 16px y se apana con cuatro escalones.

   O sea: un titular de 64px cargaba toda la presencia de la pantalla y TODO
   lo que la paciente tiene que leer para operar quedaba en el sotano. El lado
   izquierdo ganaba la comparacion y el derecho -que es donde se trabaja- la
   perdia.

   Tres correcciones, ninguna de contenido:

     1. EL PISO SUBE A 15px y la escala se recorta a cuatro papeles claros:
        15 letra chica -> 17 todo lo operable -> 40 titulo de la tarea ->
        64 titular. (El 28 de "Rutina de noche" es el quinto y unico extra:
        es el titulo de un objeto dentro del panel vino, no un peldano suelto.)
        En telefono la escalera es 15 / 17 / 28 / 40, cuatro exactos.
     2. EL TITULO DE LA TAREA PASA DE 28px A 40px y la tarjeta se ensancha
        para sostenerlo. Antes competia de 28 contra los 44-48 de la vara.
     3. LA COLUMNA DEL FORMULARIO DEJA DE SER UN LAVADO DE CASI-BLANCOS. El
        fondo de esa mitad baja a --kctp-panel y la tarjeta se queda blanca
        pura: es exactamente lo que hace Lovi (hero blanco que se hunde en
        #F6F6FA, tarjetas #FFF encima). Y el campo se llena de ese mismo tono
        en vez de fiarlo todo a un borde de 1px que sobre blanco no se veia.

   Lo que NO se toca porque ya ganaba: el panel de marca (vino de tres focos,
   grano, serif de 64px, filete de oro) y la composicion de tres tiempos.

   Las reglas del sistema (dos pesos, cero mayusculas, tracking negativo solo
   arriba de 20px, borde O sombra, ritmo de dos velocidades) se heredan de
   kctp.css. Aqui no se escribe ni un color ni un tamano de letra que no salga
   de las fichas --kctp-* / --paso-*.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LA ESCALA DE ESTA PANTALLA
   -------------------------------------------------------------------------- */

/* 1.1 EL ROTULO DE ORIENTACION. Sube de 12 a 15: es el peldano de letra
   chica, no el sotano. Sigue siendo lo mas callado de la tarjeta porque va en
   tinta tenue y en el piso de la escala, no porque sea diminuto. */
.kctp-entrada .kctp-acceso-ojo {
    font-size: var(--paso-3);
    line-height: 1.4;
    margin-bottom: var(--kctp-e3);
}

/* 1.2 EL TITULO DE LA TAREA: 28 -> 40px (el peldano de display).
   Es el cambio mas caro de los tres y el mas barato de aplicar: la jerarquia
   la da el TAMANO, no el peso, y con 28px la tarjeta no tenia con que
   contestarle al titular de 64 de la otra mitad. Interlineado 1.06 y tracking
   -.028em, que es lo que el sistema manda por encima de 38px. */
.kctp-entrada .kctp-acceso-titulo {
    font-size: var(--kctp-t-display);
    line-height: var(--kctp-lh-display);
    letter-spacing: var(--kctp-ls-display);
}

/* 1.3 LA BAJADA Y EL PIE DE ENLACES, AL PELDANO DE CUERPO (15 -> 17).
   Del titulo a su bajada siguen 8px -son un bloque- y del bloque al primer
   campo, 32. Ritmo de dos velocidades: tacano adentro, generoso afuera.
   La medida se recorta a 38ch para que la bajada no llegue al canto de la
   tarjeta: una linea de texto pegada al borde se lee como relleno. */
.kctp-entrada .kctp-acceso-sub {
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.5;
    max-width: 38ch;
}
.kctp-entrada .kctp-acceso-pie { font-size: var(--kctp-t-cuerpo); }

/* 1.4 EL AVISO DE ERROR, TAMBIEN AL PELDANO DE CUERPO. Es el texto que le
   dice a la paciente por que no pudo entrar: si algo tiene que leerse, es
   eso. Y comparte el radio del control de la puerta (12px) en vez del 10px
   general, porque dentro de esta tarjeta conviven a dos centimetros. */
.kctp-entrada .kctp-aviso {
    border-radius: var(--kctp-radio-ch);
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.5;
    padding: 15px 17px;
}

/* Cuando el aviso va pegado al titulo -/portal/restablecer con el enlace
   vencido- no es su bajada, es el cuerpo de la pantalla: los 8px del par
   "titulo y su bajada" no le tocan. */
.kctp-entrada .kctp-acceso-titulo + .kctp-aviso { margin-top: var(--kctp-e5); }

/* 1.5 EL AVISO LEGAL, EN EL PISO (13 -> 15). Es letra chica de verdad
   -no cambia lo que dice- pero 13px estaba por debajo del suelo de la vara.
   Alineado a la tarjeta, no al ancho de la columna. */
.kctp-entrada .kctp-acceso-legal {
    font-size: var(--paso-3);
    line-height: 1.55;
}

/* 1.6 LA LINEA DE PRUEBA DEL PANEL VINO, al peldano de cuerpo. Es la promesa
   entera del producto ("ninguna recomendacion se te entrega sin que un
   profesional la apruebe"): no puede ir en el mismo cuerpo que un pie de
   pagina. */
.kctp-entrada .kctp-acceso-prueba {
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.5;
    max-width: 38ch;
}


/* --------------------------------------------------------------------------
   2. LA FICHA DEL PLAN: EL MISMO PISO QUE EL RESTO
   -------------------------------------------------------------------------- */

/* La ficha vive en el parcial de marca que comparten las cuatro pantallas de
   entrada, pero ese parcial solo lo montan ellas: todo esto va colgado de
   .kctp-entrada para que la puerta del personal -que usa la misma ficha con
   otro texto- siga exactamente como esta.

   Aqui estaban DIEZ de los catorce nodos por debajo del piso: el rotulo, el
   sello, los tres numeros, los tres "cada cuanto" y la firma, todos a 12px, y
   los tres pasos a 13. Es la prueba de producto de la pantalla -lo unico que
   ensena que esto entrega algo- y estaba escrita en el cuerpo de un pie de
   pagina. Sube entera al piso de 15 y el nombre del plan al peldano de
   titulo. La ficha crece unos 60px y el hueco elastico del centro del panel
   se los come sin mover ni el logo ni el titular. */
.kctp-entrada .kctp-acceso-obra {
    max-width: 27rem;
    padding: 22px 24px;
}
@media (min-width: 960px) {
    .kctp-entrada .kctp-acceso-obra { padding: 26px 28px; }
}

.kctp-entrada .kctp-acceso-obra-ojo {
    font-size: var(--paso-3);
    line-height: 1.4;
    margin-bottom: 2px;
}
/* El nombre del plan al peldano de titulo (21 -> 28). Es el titulo de un
   objeto, y el objeto es el argumento de esta pantalla. */
.kctp-entrada .kctp-acceso-obra-nombre { font-size: var(--kctp-t-titulo); }

/* El sello crece con la letra: radio = alto/2, como manda la escalera de
   pastillas de las dos referencias. */
.kctp-entrada .kctp-acceso-obra-sello {
    height: 32px;
    padding: 0 13px;
    font-size: var(--paso-3);
}
.kctp-entrada .kctp-acceso-obra-sello::before { width: 7px; height: 7px; }

.kctp-entrada .kctp-acceso-obra-lista {
    margin-top: 20px;
    padding-top: 17px;
}
.kctp-entrada .kctp-acceso-obra-lista li {
    min-height: 38px;
    font-size: var(--paso-3);
}
.kctp-entrada .kctp-acceso-obra-lista li { grid-template-columns: 26px 1fr auto; }
.kctp-entrada .kctp-acceso-obra-n {
    width: 26px;
    height: 26px;
    font-size: var(--paso-3);
}
/* Dentro de la ficha hay dos papeles y no uno: el PASO es contenido y va al
   peldano de cuerpo; el "cada cuanto" es meta y se queda en el piso. Antes
   los dos estaban abajo (13 y 12) y la fila se leia como una tabla de
   letra chica; asi se lee como un plan. */
.kctp-entrada .kctp-acceso-obra-t { font-size: var(--kctp-t-cuerpo); }
.kctp-entrada .kctp-acceso-obra-m { font-size: var(--paso-3); }
.kctp-entrada .kctp-acceso-obra-pie {
    margin-top: 17px;
    padding-top: 16px;
    font-size: var(--paso-3);
    line-height: 1.5;
}
.kctp-entrada .kctp-acceso-obra-pie::before { margin-top: 6px; }


/* --------------------------------------------------------------------------
   3. LA COLUMNA DEL FORMULARIO DEJA DE SER UN LAVADO DE CASI-BLANCOS
   -------------------------------------------------------------------------- */

/* El problema medido: tarjeta #ffffff sobre fondo #fbf7f5. Son dos casi
   blancos separados por cuatro puntos de luminosidad, asi que la unica cosa
   que despegaba la tarjeta del fondo era su sombra, y una sombra sola no
   sostiene la mitad de una pantalla.

   La solucion es literalmente la de la vara: Lovi arranca en blanco puro y
   HUNDE la pagina en un lavanda (#F6F6FA) para que las tarjetas blancas
   floten encima. Aqui el papel de ese lavanda lo hace --kctp-panel (#f5edef),
   que es el tinte del vino al 8% y ya existe en el sistema. Hueso -> panel:
   la tarjeta blanca pasa a tener suelo.

   No se toca la sombra: la de la ficha (--kctp-sombra-caja) ya es de dos
   capas y esta tenida de tinto, que es justo lo que las dos referencias
   hacen. Lo que faltaba era el contraste del fondo, no mas desenfoque. */
.kctp-entrada.kctp-acceso,
.kctp-entrada .kctp-acceso-forma { background: var(--kctp-panel); }

/* El suelo va tambien en la rejilla y no solo en la columna del formulario
   por el registro: ahi el panel de marca es pegajoso y mide una pantalla, asi
   que por debajo de esa pantalla asoma la celda de la izquierda. Con el fondo
   hueso del chasis quedaba una escuadra de #fbf7f5 pegada a una columna de
   #f5edef -dos casi blancos distintos en diagonal, que es justo el defecto
   que esta hoja vino a arreglar-. Con el mismo tinte, el vino se lee como lo
   que es: una pieza que termina, sobre un suelo continuo. */

/* La tarjeta se ensancha de 420 a 480px porque ahora sostiene un titulo de
   40px: con 340px utiles, "Entrar a tu consulta" caia en tres lineas. Sigue
   dentro de la medida de lectura de las referencias (410-560px). El relleno
   sube a 44px, que es lo que pide una tipografia de este tamano. */
.kctp-entrada .kctp-acceso-caja {
    max-width: 480px;
    padding: clamp(26px, 5.6vw, 44px);
}
.kctp-entrada .kctp-acceso-legal { max-width: 480px; }

/* El alto de la columna es fijo (una pantalla) y el contenido crecio: el
   relleno vertical y el hueco entre tarjeta y letra chica se ajustan para que
   /portal/login siga entrando entero en 1440x900 sin barra. */
@media (min-width: 960px) {
    .kctp-entrada .kctp-acceso-forma {
        gap: var(--kctp-e5);
        padding-block: clamp(28px, 4.4vh, 40px);
    }
}


/* --------------------------------------------------------------------------
   4. EL CAMPO: UN CONTROL, NO UN HUECO
   -------------------------------------------------------------------------- */

/* Medido: borde #e3d5da sobre tarjeta #ffffff. Sobre blanco puro ese filete
   casi no existe, y un campo de 52px que solo se anuncia con una linea
   invisible se lee como un hueco en la tarjeta.

   Se resuelve como lo resuelve el lado paciente de la vara: por RELLENO, no
   por linea. El campo se tine del mismo --kctp-panel que ahora hace de suelo
   de la columna, o sea que se lee como una ventana abierta en la tarjeta
   blanca hacia el fondo de la pagina. Cero colores nuevos: el campo, el suelo
   y el tinte del vino son el mismo valor.

   El foco sigue siendo un cambio de estado de verdad y no un halo: el campo
   se pone BLANCO y el borde pasa a vino. Fondo y linea cambian a la vez, asi
   que se distingue tambien sin ver color. */
.kctp-entrada .kctp-acceso-campo input {
    height: 56px;
    min-height: 56px;
    padding: 0 17px;
    background: var(--kctp-panel);
    border-color: color-mix(in srgb, var(--kctp-acento) 12%, transparent);
}
.kctp-entrada .kctp-acceso-campo input:hover {
    border-color: color-mix(in srgb, var(--kctp-acento) 26%, transparent);
}
.kctp-entrada .kctp-acceso-campo input:focus {
    background: var(--kctp-blanco);
    border-color: var(--kctp-acento);
    box-shadow: inset 0 0 0 1px var(--kctp-acento);
}
/* El marcador de posicion sube de --kctp-tenue-2 (que la propia hoja marca
   como "solo iconos y adornos, nunca texto") a --kctp-tenue, que es el minimo
   legible. Sobre el campo tenido, el gris claro se perdia. */
.kctp-entrada .kctp-acceso-campo input::placeholder { color: var(--kctp-tenue); }

/* LA ETIQUETA, DE 13px A 17px. Es la correccion mas directa de la critica:
   "Correo electronico" y "Clave" son lo que la paciente lee para saber que
   escribir, y estaban dos peldanos por debajo del texto que iban a etiquetar.
   Ahora van al mismo cuerpo que el contenido del campo, en peso 500 -el
   "negrita" de este sistema- y en tinto. */
.kctp-entrada .kctp-acceso-campo label,
.kctp-entrada .kctp-acceso-campo .form-label {
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.35;
    letter-spacing: var(--kctp-ls-cuerpo);
    margin-bottom: var(--kctp-e2);
}

/* El boton iguala el alto del campo: los dos son controles de la misma
   familia y una diferencia de 4px entre ellos se ve como un descuido. */
body .kctp-entrada .kctp-btn { min-height: 56px; }


/* --------------------------------------------------------------------------
   5. LA COLUMNA DEL FORMULARIO CUANDO ES MAS ALTA QUE LA PANTALLA
   -------------------------------------------------------------------------- */

/* El chasis centra la tarjeta en el alto de la columna. Con siete campos eso
   deja de ser centrado y pasa a ser recorte: en un contenedor flex, lo que
   sobra por arriba de un centrado no se puede desplazar hacia atras y el
   titulo queda inalcanzable. Cuando el contenido es mas alto que el pliegue,
   se ancla arriba. */
.kctp-entrada-registro .kctp-acceso-forma {
    justify-content: flex-start;
}

/* La tarjeta del registro es mas ancha porque lleva parejas de dos columnas.
   Sube de 520 a 560 -el tope de la medida de lectura de Lovi- para que dos
   etiquetas de 17px como "Fecha de nacimiento" quepan en su mitad sin
   partirse. La letra chica se alinea al mismo ancho: si no, el aviso legal
   arranca en una x que no coincide con ninguna columna. */
.kctp-entrada-registro .kctp-acceso-caja,
.kctp-entrada-registro .kctp-acceso-legal {
    max-width: 560px;
}

/* Con la tarjeta a 560px, el reparto 1.15fr/1fr de pantalla ancha dejaba la
   columna derecha corta: 560 de tarjeta mas 48+48 de relleno es 656, y la
   composicion quedaba apretada contra los dos bordes. A partes iguales
   respira. */
@media (min-width: 1200px) {
    .kctp-entrada-registro.kctp-acceso { grid-template-columns: 1fr 1fr; }
}

/* EL PANEL DE MARCA EN EL REGISTRO, QUE ES LA UNICA PANTALLA MAS ALTA QUE EL
   PLIEGUE.

   El problema de fondo: la columna de marca tiene las filas "auto 1fr auto"
   -logo arriba, ficha en el centro elastico, titular abajo- y eso solo
   compone bien cuando la columna mide una pantalla. Estirada al alto del
   formulario (1.246px medidos), el titular se va al fondo de esa altura, o
   sea fuera de la pantalla: al entrar no se ve mas que vino.

   Antes esto se arreglaba con un panel pegajoso de una pantalla de alto. Ese
   arreglo tenia un precio que la vuelta 1 no vio porque las dos mitades eran
   del mismo hueso: el panel deja de llenar su celda, y por debajo de la
   primera pantalla asomaba el suelo en una escuadra de 350px. Con la columna
   del formulario ya tenida, esa escuadra se lee como un panel que se quedo
   corto.

   Ahora el panel llena su columna entera -vino de arriba abajo, con su
   degradado repartido en todo el alto- y lo que se congela es la COMPOSICION:
   las tres filas pasan a "auto auto auto" con align-content start, asi que
   logo, ficha y titular se apilan dentro de la primera pantalla y lo que
   sobra queda como campo de color. Dos columnas continuas y una sola costura,
   en vez de tres zonas y una escuadra.

   Lo que se pierde: el panel ya no acompana el desplazamiento. Se cambia a
   proposito: una marca que se va al desplazar es normal; media pantalla en
   dos rosas distintos, no. */
@media (min-width: 960px) {
    .kctp-entrada-registro .kctp-acceso-marca {
        grid-template-rows: auto auto auto;
        align-content: start;
    }
}


/* --------------------------------------------------------------------------
   6. GRUPOS DE CAMPOS
   -------------------------------------------------------------------------- */

/* Ritmo de dos velocidades, literal: 20px entre campos de un mismo grupo y
   32px mas un filete punteado entre grupos. El error que habia era el
   contrario -la misma raya solida cada 24px- y con el todos los campos
   pesaban igual: siete secciones de un campo cada una. */
.kctp-entrada .kctp-acceso-campo { margin-bottom: 20px; }

.kctp-entrada-grupo + .kctp-entrada-grupo {
    margin-top: var(--kctp-e6);
    padding-top: var(--kctp-e6);
    border-top: 1px dashed var(--kctp-borde);
}
/* El ultimo grupo respira antes del boton: el boton no es un campo mas. */
.kctp-entrada-form .kctp-entrada-grupo:last-of-type { margin-bottom: var(--kctp-e6); }

/* Parejas de campos. Dos columnas en cuanto la tarjeta da para dos campos de
   unos 200px; por debajo se apilan solas.

   La linea de ayuda va DEBAJO del control (y no debajo de la etiqueta) por
   una razon de alineacion: en una pareja donde un campo lleva ayuda y el otro
   no -cedula y fecha de nacimiento, clave y repetir clave- ponerla arriba
   empuja un campo y deja los dos controles a distinta altura. Debajo, los dos
   arrancan en la misma linea y la ayuda cuelga. */
.kctp-entrada-par {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

/* La pareja se abre por el ancho de la TARJETA, no por el de la pantalla, y
   eso obliga a una consulta de contenedor. Medido, el ancho de la tarjeta no
   crece con el navegador: a 900px de pantalla esta en su maximo, a 960 CAE
   -ahi entra el split y la mitad derecha se queda con 480- y no vuelve al
   maximo hasta pantalla ancha. Con una media query de pantalla, la pareja se
   abria justo donde la tarjeta era mas estrecha y los campos quedaban en
   130px.

   El umbral son 420px, y se miden CONTRA LA CAJA DE CONTENIDO de la tarjeta,
   que es lo que compara 'container-type: inline-size': con 560px de tarjeta y
   44px de relleno a cada lado quedan 472px utiles, no 560. Por debajo de 420
   las dos columnas dejarian el campo de fecha por debajo de su ancho minimo
   (182px medidos: el "dd/mm/yyyy" mas el icono de calendario) y la etiqueta
   "Fecha de nacimiento" de 17px se partiria en dos lineas. */
.kctp-entrada-registro .kctp-acceso-caja { container-type: inline-size; }

@container (min-width: 420px) {
    /* minmax(0, 1fr) y no 1fr: el input[type=date] trae un ancho minimo
       propio (el "dd/mm/yyyy" mas el icono de calendario) y con 1fr -que es
       minmax(auto, 1fr)- ese minimo mandaba. Medido a 960px de pantalla:
       columnas de 130px y 182px en una rejilla que pedia mitades iguales. */
    .kctp-entrada-par {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px var(--kctp-e5);
    }
}

/* Dentro de una pareja manda el gap de la rejilla, no el margen del campo.
   Y se apaga a proposito la regla del chasis que le da 24px al ultimo campo
   del formulario: ese :last-of-type tambien acierta al segundo campo de CADA
   pareja (son dos div hermanos), y ese margen extra desalineaba la columna
   derecha. */
.kctp-entrada-form .kctp-entrada-par > .kctp-acceso-campo,
.kctp-entrada-form .kctp-entrada-grupo > .kctp-acceso-campo:last-child {
    margin-bottom: 0;
}
.kctp-entrada-form .kctp-entrada-grupo > .kctp-acceso-campo + .kctp-entrada-par {
    margin-top: 20px;
}


/* --------------------------------------------------------------------------
   7. AYUDA, ERROR Y MARCA DE OBLIGATORIO DENTRO DE LA PUERTA
   -------------------------------------------------------------------------- */

/* .kctp-ayuda nace con un margen negativo arriba porque en el resto del
   producto va pegada bajo la etiqueta. Aqui va bajo el campo, asi que ese
   margen se anula. Y sube de 13 a 15px: es el piso de la escala, no el
   sotano. */
.kctp-entrada .kctp-acceso-campo .kctp-ayuda {
    margin: 7px 0 0;
    font-size: var(--paso-3);
    line-height: 1.45;
    color: var(--kctp-tenue);
    max-width: none;
}
.kctp-entrada .kctp-acceso-campo .kctp-error {
    margin-top: 7px;
    font-size: var(--paso-3);
    line-height: 1.45;
}

/* El campo con error lo marca el borde, no un relleno de color: es como
   senalan estado las dos referencias, y ademas el fondo tintado bajaba el
   contraste de lo que la persona acaba de escribir. Se pone BLANCO -igual que
   el campo con foco- para que se despegue de sus vecinos tenidos, y el borde
   rojo de 2px hace el resto. No depende del color: el mensaje va escrito
   debajo. */
.kctp-entrada .kctp-acceso-campo.con-error input,
.kctp-entrada .kctp-acceso-campo.con-error input:focus {
    border-color: var(--kctp-alerta);
    background: var(--kctp-blanco);
    box-shadow: inset 0 0 0 1px var(--kctp-alerta);
}

/* El asterisco de campo obligatorio iba en el rojo de alerta. Con cinco
   campos obligatorios eso son cinco puntos rojos en una pantalla donde el
   rojo significa "algo salio mal": el formulario se ve averiado antes de
   tocarlo. La marca sigue estando -misma forma, mismo sitio, y el atributo
   required que oye el lector de pantalla-; solo deja de gritar. */
.kctp-entrada .kctp-obligatoria::after { color: var(--kctp-tenue-2); }


/* --------------------------------------------------------------------------
   8. BOTON SUELTO Y REMATE DE LA TARJETA
   -------------------------------------------------------------------------- */

/* En "recuperar" y "restablecer" la accion es un <a> con pinta de boton, sin
   formulario delante. El chasis ya le da alto, radio y ancho completo; falta
   el aire de arriba, que en los formularios lo pone el ultimo campo. */
.kctp-entrada .kctp-acceso-caja > .kctp-btn { margin-top: var(--kctp-e5); }

/* El boton secundario del sistema es blanco con una linea de pelo #ebe1e4.
   Ese gris nace para separar del fondo hueso; DENTRO de la tarjeta blanca de
   la puerta se apaga, y "Volver a entrar" quedaba como un rectangulo casi
   invisible que ademas era la unica salida de la pantalla. Aqui se tine del
   acento, que es como marcan el secundario las dos referencias: fondo
   transparente, borde y texto del color de marca, misma geometria que el
   primario. */
.kctp-entrada .kctp-acceso-caja .kctp-btn-suave {
    background: transparent;
    border-color: color-mix(in srgb, var(--kctp-acento) 32%, transparent);
    color: var(--kctp-acento);
    box-shadow: none;
}
.kctp-entrada .kctp-acceso-caja .kctp-btn-suave:hover {
    background: var(--kctp-acento-sw);
    border-color: color-mix(in srgb, var(--kctp-acento) 55%, transparent);
    color: var(--kctp-acento-os);
}

/* NOTA: aqui habia un 'margin-top: 2px' entre los dos parrafos del pie de la
   tarjeta. Se quito. Era la unica regla de esta hoja que tocaba /portal/login
   -la unica de las cuatro pantallas que ya estaba bien-, y comparadas las
   capturas pixel a pixel, movia esa pantalla para no ganar nada. Si una regla
   no se ve, no entra. */


/* --------------------------------------------------------------------------
   9. TELEFONO Y TABLETA (todo el tramo de UNA columna)
   -------------------------------------------------------------------------- */

/* En las tres pantallas secundarias la banda de marca se compacta: fuera la
   ficha del plan.

   Por que solo ahi: en /portal/login la ficha del plan ES el argumento -la
   persona esta decidiendo si entra a esto-, pero quien esta creando la cuenta
   o recuperando la clave ya decidio y lo unico que quiere es el formulario.
   Medido en un telefono de 390x844, la banda completa dejaba el primer campo
   del registro muy por debajo del pliegue.

   Y llega hasta 959 y no hasta 719 -que es donde el chasis compacta la ficha-
   porque el split no entra hasta los 960: entre 720 y 959 la puerta sigue
   siendo una sola columna, y ahi la banda de marca media 650px de alto. Eran
   650px de vino antes de ver el titulo del formulario, medido en tableta.

   Ninguna pieza se pierde: la ficha es decorativa (aria-hidden) y el titular,
   la linea de prueba y el aviso legal siguen enteros. */
@media (max-width: 959px) {
    .kctp-entrada-secundaria .kctp-acceso-obra { display: none; }
    .kctp-entrada-secundaria .kctp-acceso-marca {
        gap: var(--kctp-e4);
        padding-bottom: var(--kctp-e5);
    }
    /* El oro de la pantalla vuelve al filete del titular, que es donde el
       chasis lo manda cuando la firma de la ficha no esta. */
    .kctp-entrada-secundaria .kctp-acceso-prueba::before { background: var(--kctp-oro); }
}
/* AQUI HABIA UNA REGLA QUE BAJABA EL TITULAR UN PELDANO EN TABLETA. Se quito
   porque creaba un empate: medido a 768px, el titular quedaba en 39,07px y el
   titulo de la tarjeta -que usa el mismo peldano de display- tambien en
   39,07px. Dos textos identicos en tamano, uno sobre vino y otro sobre
   blanco, y ninguna jerarquia entre ellos. La razon de existir de esa regla
   -acortar la banda de marca- ya la cumple sola el ocultar la ficha del plan.
   Sin ella, el titular sigue la curva de --kctp-t-hero y en todo el tramo
   mantiene por lo menos 1,28x sobre el titulo de la tarjeta. */

/* EN TELEFONO LA ESCALERA ES DE CUATRO PELDANOS EXACTOS: 15 / 17 / 28 / 40.
   El titular sube de 34 a 40px (el peldano de display de pantalla) y el
   titulo de la tarjeta se queda en 28. Con 34 contra 28 los dos se leian como
   el mismo tamano en dos columnas distintas, que es lo contrario de una
   jerarquia; con 40 contra 28 hay un salto de 1,43x y cada uno manda en su
   mitad. La vara hace exactamente esto: en movil solo encoge el titular, el
   cuerpo NO cambia. */
@media (max-width: 719px) {
    .kctp-entrada .kctp-acceso-hero {
        font-size: var(--paso-7);
        max-width: 15ch;
    }
    /* La ficha colapsa a su cabecera y el nombre vuelve al peldano de cuerpo,
       que es lo que el chasis manda en esa densidad. Sin esta linea, la regla
       del punto 2 -que en escritorio lo sube a 28- ganaba tambien aqui y
       metia un quinto tamano (21px) en una escalera que tiene que ser de
       cuatro. */
    .kctp-entrada .kctp-acceso-obra-nombre {
        font-size: var(--paso-4);
        letter-spacing: -.018em;
    }
    /* Y el relleno vuelve al de una fila de lista: con los 26px de la version
       de escritorio, la cabecera sola medía 76px y empujaba el primer campo
       del formulario fuera del pliegue, que es justo lo que el chasis evita
       colapsandola. */
    .kctp-entrada .kctp-acceso-obra { padding: 15px 18px; }
    /* El titulo de la tarjeta se congela en 28px en vez de seguir su curva.
       Si sigue la curva, a 719px vale 37,6 contra los 40 del titular: los dos
       se leen como el mismo tamano y la escalera se aplasta justo en el borde
       del tramo. Congelado en el peldano 6, la distancia titular/titulo es de
       1,43x en TODO el tramo de telefono. */
    .kctp-entrada .kctp-acceso-titulo { font-size: var(--paso-6); }

    /* La tarjeta pega su relleno a la escala nueva y el aire de la columna
       baja: en un telefono el fondo tenido ya separa, no hace falta ademas
       un marco de 24px de aire a cada lado. */
    .kctp-entrada .kctp-acceso-caja { padding: 28px 24px; }
    .kctp-entrada .kctp-acceso-forma { gap: var(--kctp-e5); }
}


/* --------------------------------------------------------------------------
   10. LA FOTOGRAFIA: EL PANEL DE MARCA DEJA DE SER UN BLOQUE DE COLOR
   -------------------------------------------------------------------------- */

/* LO QUE ARREGLA ESTA VUELTA. Medido a 1440x900: el panel de marca son
   1.070x900 px -el 53% de la pantalla- de degradado burdeos con tres cosas
   encima. No hay UNA sola imagen en las cuatro pantallas de entrada. La vara
   (lovi.care) resuelve exactamente ese hueco con una fotografia de un rostro
   a sangre, con textura de piel visible, y es lo unico que a la nuestra le
   faltaba por completo. En /portal/registro el problema ademas se ve: la
   columna crece a 1.246px y abandona ~350px de burdeos vacio al fondo.

   La foto va de fondo a sangre, sin marco -las dos referencias jamas enmarcan
   una imagen-, y encima queda un velo de vino en dos direcciones que sostiene
   el contraste del titular abajo y del logo arriba. La ficha "Rutina de
   noche" pasa a flotar SOBRE la fotografia, que es lo que hace Lovi con la
   interfaz dentro del telefono y Stripe con el panel de pago: un objeto claro
   sobre una imagen oscura.

   POR QUE ESTA FOTO Y NO OTRA. Es una cara real con textura de piel de
   verdad -poros, lineas finas, marcas- y no una piel de anuncio de belleza:
   esto es una consulta dermatologica, y una piel retocada a cero poros seria
   una mentira sobre lo que el producto mira. Va vestida y con los ojos
   cerrados, en un tejido burdeos que ya cae dentro de la paleta, para que la
   pantalla sea seria y no publicitaria.

   POR QUE EL VELO Y NO UN FILTRO. Tenir la foto con filter: sepia/hue-rotate
   la deja plana y de un solo tono. El velo son dos degradados de vino ENCIMA
   de la foto: la piel conserva su luz donde hay luz y todo lo demas cae al
   vino de la marca. Cero colores nuevos: los dos velos son el tinto (#260514)
   y el negro-vino del degradado que ya estaban en el panel.

   Peso: 182 KB en webp (341 KB el jpg de reserva, que hoy no pide ningun
   navegador). Si la imagen no cargara, la pantalla queda EXACTAMENTE como
   estaba antes de esta vuelta: el degradado de tres focos sigue debajo. */

.kctp-entrada .kctp-acceso-marca::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    /* Velo vertical: cierra arriba (el logo) y abajo (el titular y su linea
       de prueba), y abre en la franja del medio, que es donde esta la cara.
       En el medio se queda en .22 y no en .30: es ahi donde se ve el poro y
       la linea fina, o sea lo unico que esta foto vino a aportar. */
    --velo-v: linear-gradient(180deg,
        rgba(30, 5, 15, .70) 0%,
        rgba(30, 5, 15, .34) 20%,
        rgba(30, 5, 15, .22) 46%,
        rgba(28, 5, 14, .70) 80%,
        rgba(26, 4, 13, .92) 100%);
    /* Velo horizontal: el borde izquierdo -donde arranca la tarjeta y el
       titular- queda casi opaco y la fotografia se abre hacia la derecha.
       Asi la foto no compite con ningun texto: ocupa el hueco que el texto
       deja libre.

       El color de este velo es VINO (#4A0C29), no un negro neutro: si se tine
       de negro, la mitad izquierda del panel se apaga a casi-negro y la marca
       pierde su color justo donde vive el titular. Tenido de vino, la
       fotografia se hunde en el burdeos en vez de en la sombra. */
    --velo-h: linear-gradient(90deg,
        rgba(74, 12, 41, .90) 0%,
        rgba(66, 11, 37, .58) 30%,
        rgba(50,  8, 27, .18) 66%,
        rgba(45,  7, 24, .06) 100%);

    /* EL PRODUCTO, NO UN RETRATO DE BANCO DE IMAGENES.
       Aqui habia una fotografia descargada del CDN de Freepik que un agente
       metio durante el rediseno. Sin licencia verificable no puede vivir en una
       plataforma clinica, asi que va el producto insignia de KARA, que es
       material propio del cliente y ademas encaja mejor: el patron dorado de la
       mascarilla es el mismo oro de la marca.
       Recortado del fondo blanco de estudio, se apoya sobre el degradado en vez
       de ir a sangre. */
    background-image: var(--velo-v), var(--velo-h), url("../../img/entrada-producto.png");
    background-image: var(--velo-v), var(--velo-h),
        image-set(url("../../img/entrada-producto.webp") type("image/webp"),
                  url("../../img/entrada-producto.png")  type("image/png"));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, cover, min(40%, 290px);
    /* La banda derecha a media altura: es el unico hueco real del panel. La
       ficha y el logo mandan arriba a la izquierda, el titular abajo a la
       izquierda. Entero y con aire alrededor, para que se lea como una decision
       y no como un recorte. */
    background-position: center, center, right 7% top 58%;
}

/* EL GRANO PASA POR ENCIMA DE LA FOTOGRAFIA. Es la regla que cose las dos
   capas: una sola trama sobre el degradado Y sobre el retrato hace que se
   lean como UN material. Si el grano se queda debajo, la foto se ve pegada
   encima de un fondo con textura y la costura canta. */
.kctp-entrada .kctp-acceso-marca::before { z-index: 2; }
.kctp-entrada .kctp-acceso-marca > *     { z-index: 3; }

/* En el registro la columna mide mas que una pantalla, asi que la foto se
   estira a todo el alto y ahi ya no hay 350px de color vacio: hay retrato.
   Se sube el punto de encuadre para que la cara siga cayendo en la primera
   pantalla y lo que continua abajo sea el hombro y la pared. */
@media (min-width: 960px) {
    .kctp-entrada-registro .kctp-acceso-marca::after {
        background-position: center, center, 66% 16%;
    }
}

/* En pantalla ancha la columna de marca gana el 53%: la foto puede respirar
   un poco mas a la derecha sin acercarse al titular. */
@media (min-width: 1200px) {
    .kctp-entrada .kctp-acceso-marca::after {
        background-position: center, center, 70% 26%;
    }
}

/* TELEFONO Y TABLETA. Aqui la banda de marca es ancha y baja (390x420
   medidos), asi que el velo cambia de eje: el que manda es el vertical
   -titular arriba, ficha abajo- y el horizontal se afloja casi del todo,
   porque a 390px de ancho no hay "derecha libre" donde poner una cara.
   El encuadre baja al 8% para que se vea frente, ojos y pomulo, que es donde
   esta la textura, y no el trozo de pared de arriba. */
@media (max-width: 959px) {
    .kctp-entrada .kctp-acceso-marca::after {
        /* El velo vertical sigue AL TEXTO, no al alto de la banda. Medido en
           el telefono, el titular y la linea de prueba ocupan el 62% de
           arriba; de ahi para abajo no hay una sola palabra que proteger y el
           velo estaba cobrando .38 de peaje sobre la unica zona donde la cara
           se ve entera.

           Puesto al lado de la vara renderizada de verdad (lovi2_m.png), esa
           era la diferencia real del primer pantallazo movil: las dos
           pantallas tienen una cara, pero en la suya la PIEL es el asunto
           -brillo, poros, pecas- y en la nuestra la cara era una silueta
           detras de un tinte. La marca no cambia: la mitad de arriba conserva
           su .88 y el titular blanco mantiene el mismo contraste que ya
           pasaba. Lo que se abre es el cuarto de abajo, hasta .10, que es
           donde caen pomulo, mandibula y cuello. */
        --velo-v: linear-gradient(180deg,
            rgba(30, 5, 15, .88) 0%,
            rgba(30, 5, 15, .74) 30%,
            rgba(30, 5, 15, .58) 62%,
            rgba(28, 5, 14, .26) 82%,
            rgba(28, 5, 14, .10) 100%);
        --velo-h: linear-gradient(90deg,
            rgba(74, 12, 41, .60) 0%,
            rgba(66, 11, 37, .28) 46%,
            rgba(50,  8, 27, .08) 100%);
        background-position: center, center, 62% 4%;
    }
}

/* En las tres pantallas secundarias la banda se queda en 335px de alto porque
   ahi la ficha del plan no se monta, y a esa altura el recorte de la foto cae
   justo en la boca: una cara cortada por la mitad en el canto de una seccion
   se lee como un accidente. Con 46vh (388px en un telefono de 844) el corte
   baja al cuello y la cara queda entera. Es la unica medida de esta hoja que
   existe para servir a la fotografia, y por eso va en vh y no en px: sigue al
   telefono, no a un numero elegido a mano. */
@media (max-width: 719px) {
    .kctp-entrada-secundaria .kctp-acceso-marca { min-height: 46vh; }
}


/* --------------------------------------------------------------------------
   11. EL AVISO LEGAL DEJA DE SER UN PARRAFO HUERFANO
   -------------------------------------------------------------------------- */

/* Era el elemento menos disenado de las tres pantallas: dos parrafos sueltos
   debajo de la tarjeta, al mismo cuerpo y a la misma medida que el texto de
   apoyo de dentro, y es lo ultimo que se ve. No cambia ni una palabra: cambia
   de papel.

   Tres cosas. (1) Un filete de oro de 1px a la izquierda -el unico oro de la
   pantalla junto al sello de la ficha- lo convierte en una nota al margen, que
   es lo que es. (2) La medida baja a 52ch (~390px): la de una nota, no la de
   la tarjeta; asi deja de parecer un tercer bloque de contenido. (3) La frase
   de entrada ya iba en peso 500 y tinta oscura -el recurso de Stripe: el peso
   y el color hacen la jerarquia dentro del parrafo, sin cambiar de tamano-,
   y ahora se ve porque el resto se aparto. */
.kctp-entrada .kctp-acceso-legal {
    padding-left: var(--kctp-e4);
    border-left: 1px solid color-mix(in srgb, var(--kctp-oro) 45%, transparent);
}
.kctp-entrada .kctp-acceso-legal p { max-width: 52ch; }
.kctp-entrada .kctp-acceso-legal p + p { margin-top: var(--kctp-e2); }


/* --------------------------------------------------------------------------
   12. EL REGISTRO CABE HASTA SU BOTON
   -------------------------------------------------------------------------- */

/* Medido a 1440x900: el borde de arriba de "Crear mi cuenta" caia en y=889.
   O sea que la accion principal de la pantalla asomaba 11px y la persona no
   tenia forma de saber que la tarjeta seguia. La respuesta no es un adorno
   que diga "desplaza": es que el boton entre.

   Se recuperan ~74px sin tocar la escala de letra ni el alto de los campos
   (56px, que se decidio en la vuelta 2 y esta bien):
     - la separacion entre grupos pasa de 32+32 a 24+24 -sigue dentro del
       ritmo del sistema, que da de 8 a 32px entre elementos-,
     - el ultimo grupo respira 24 en vez de 32 antes del boton,
     - la tarjeta baja su relleno de 44 a 40,
     - la columna baja su relleno vertical un peldano,
     - y la ayuda de "Cedula" deja de ocupar tres lineas (punto 13).
   El resto de la tarjeta -enlace de pie y aviso legal- sigue por debajo del
   pliegue, que es donde va la letra chica. */
.kctp-entrada-registro .kctp-entrada-grupo + .kctp-entrada-grupo {
    margin-top: 20px;
    padding-top: 20px;
}
.kctp-entrada-registro .kctp-entrada-form .kctp-entrada-grupo:last-of-type {
    margin-bottom: 20px;
}
.kctp-entrada-registro .kctp-acceso-caja { padding: clamp(26px, 5.6vw, 34px); }
@media (min-width: 960px) {
    .kctp-entrada-registro .kctp-acceso-forma { padding-block: clamp(20px, 2.8vh, 26px); }
}

/* SEGUNDA PASADA (vuelta 3). Lo anterior dejo el boton con 11px de aire por
   encima del pliegue: entra por los pelos, pero apoyado contra el canto
   inferior se lee como recortado, y el enlace "¿Ya tienes cuenta?" seguia
   fuera. Medido: boton abajo en 889 de 900.

   Faltaban ~75px y salen de donde sobran, sin tocar la escala de letra:

   - el campo del registro baja de 56 a 52px de alto. Es la unica pantalla con
     siete campos, y 52 sigue por encima de los 45 de Stripe y del alto comodo
     de dedo (44). El boton lo acompana: la hoja ya decidio que campo y boton
     son la misma familia y una diferencia de 4px entre ellos se ve.
   - la ayuda de una pareja sube 6px: es un pie de fila, no una fila mas, y
     colgaba a la misma distancia que separa dos campos distintos.
   - rotulo y bajada aprietan su margen inferior (12->8 y 32->24). Es el
     "tacano adentro" de la regla de ritmo: el titulo y su bajada son UN
     bloque.
   - el pie de enlaces cierra a 20+20 en vez de 24+24.

   Resultado buscado a 1440x900: entran el titulo, los siete campos, el boton
   con aire de verdad y el enlace de pie. Lo unico que queda por debajo es el
   aviso legal, y el canto de la tarjeta cruza el pliegue: esa es la senal de
   que la pagina sigue, que es justo lo que la critica pedia. */
.kctp-entrada-registro .kctp-acceso-campo input,
body .kctp-entrada-registro .kctp-btn {
    height: 52px;
    min-height: 52px;
}
.kctp-entrada-registro .kctp-entrada-par > .kctp-ayuda { margin-top: -6px; }
.kctp-entrada-registro .kctp-acceso-ojo { margin-bottom: 8px; }
.kctp-entrada-registro .kctp-acceso-sub { margin-bottom: var(--kctp-e5); }
.kctp-entrada-registro .kctp-acceso-campo { margin-bottom: 18px; }
.kctp-entrada-registro .kctp-acceso-pie {
    margin-top: 20px;
    padding-top: 20px;
}


/* --------------------------------------------------------------------------
   13. LA AYUDA DE UNA PAREJA ES UN PIE DE FILA, NO MEDIA CELDA
   -------------------------------------------------------------------------- */

/* El defecto: la ayuda de "Cedula" caia en tres lineas dentro de su media
   columna y dejaba la celda de "Fecha de nacimiento" a medio llenar, con un
   escalon de 66px de blanco al lado. Dos campos que son una pareja terminaban
   con dos alturas distintas.

   Ahora la ayuda es una fila propia que cruza las dos columnas (en el marcado
   sale del div del campo y pasa a ser hermana de los dos). Arranca en la
   misma x que "Cedula" -o sea que se sigue leyendo como suya, y ademas sigue
   colgada del campo por aria-describedby, que es lo que oye un lector de
   pantalla-, pero dispone del ancho entero, asi que cae en dos lineas y las
   dos celdas cierran a la misma altura. */
.kctp-entrada-par > .kctp-ayuda {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--paso-3);
    line-height: 1.45;
    color: var(--kctp-tenue);
    max-width: 58ch;
}


/* --------------------------------------------------------------------------
   14. EL TITULAR APRIETA EL INTERLINEADO
   -------------------------------------------------------------------------- */

/* La ficha de la vara dice que el interlineado sub-1 en el display es "la
   palanca mas fuerte y la mas barata de aplicar": Lovi pone 48px de letra con
   44px de linea (0.917) y 44 con 40 (0.909). El sistema de KARA venia en 1.02,
   que ya es apretado para un serif pero todavia deja una banda de aire entre
   las tres lineas del titular.

   Baja a 0.95 SOLO en la puerta del paciente -donde el titular es de 64px y
   ocupa tres lineas, o sea donde el interlineado se ve- y no en el sistema:
   la puerta del personal usa el mismo peldano para textos de una linea, y ahi
   no cambia nada.

   Medido sobre la captura a 1440x900, contando filas de pixeles con tinta:
   el bloque del titular pasa de 180 a 170px de alto, y el aire entre la
   primera y la segunda linea, de 15,5 a 10,5px. Entre la segunda y la tercera
   ya no queda banda de fondo: la "g" de "dermatologica," y la "d" de
   "distancia." comparten filas. ESO ES LO QUE SIGNIFICA un interlineado por
   debajo de 1 y es lo que hace la vara; no se tocan porque estan en columnas
   distintas (la "g" cae hacia el centro de la linea y la "d" arranca en el
   margen). Si alguna vez cambia el texto del titular, hay que volver a mirar
   esta pantalla: es la unica regla de la hoja que depende de que palabras
   dice. */
.kctp-entrada .kctp-acceso-hero { line-height: .95; }