/* ==========================================================================
   LA PUERTA DE KARA - UNA HOJA, DOS LADOS  (pac2.css)

   Variante pac2, "paciente-primero". Cierra la deuda que abrio la vuelta
   anterior: la puerta del personal ya estaba rehecha y la de la paciente no,
   o sea el producto tenia dos disenos. La regla 9 del contrato de kctp.css
   existe justo para impedirlo ("las dos mitades entran por la MISMA puerta").

   COMO SE CIERRA. Esta hoja es la del personal tal como corre en produccion,
   con DOS cambios y ni uno mas:

     1. Lo que era del personal por costumbre -la direccion del split, el
        encuadre de la foto y la medida del titular- sale del cuerpo comun y
        baja a un MODIFICADOR por lado (bloque 12). Son las unicas DIECISEIS
        declaraciones que se bifurcan -5 del personal y 11 de la paciente-
        contra 394 en el cuerpo comun: el 3,9%.
     2. Se le agrega al cuerpo comun el vocabulario de campos que la puerta de
        la paciente necesita y la del personal no instancia: grupos con
        nombre, parejas en dos columnas, telefono con pais, linea de ayuda,
        marca de opcional, error por campo y la fila de salidas (bloques 5b,
        6b, 6c y 7b). Una hoja compartida es un VOCABULARIO, no un inventario:
        que el personal no diga una palabra no la saca del idioma.
     3. Los tres arreglos de forma de la segunda vuelta, cada uno con su cuenta
        en el bloque donde vive:
          - bloque 9b: el panel se queda en la ventana cuando el formulario es
            mas alto que ella, para que el titular no se parta en el pliegue de
            "crear tu cuenta" (arranca en 816,9 y termina en 947,4 sobre 900);
          - bloque 8: la linea que presenta el control pasa de blanco 74% a 86%,
            porque sobre el suelo que esta hoja declara daba 4,23:1 y el
            contrato pide 4,5. Es lo UNICO que repinta tambien la puerta del
            personal, y es un color: no mueve ninguna caja;
          - bloques 9 y 8: la rejilla de escritorio y la medida del titular
            dejan de depender en silencio de que la clase de modificador este
            puesta.

   Por eso el modificador del personal pesa 5 declaraciones: si hubiera hecho
   falta mas, la simetria seria falsa. La prueba es pac2_personal.html, que es
   el marcado de f1.html con esta hoja y el modificador. Medido lado a lado en
   seis ventanas (320x568, 360x640, 375x667, 768x1024, 1024x768 y 1440x900),
   los 41 elementos de la puerta del personal dan la MISMA caja y las mismas 61
   propiedades calculadas que con css/f1.css, con una sola diferencia en todo el
   arbol: `container-type` vale `inline-size` en el <form> en vez de `normal`,
   que es lo que hace posible la consulta de contenedor de las parejas del
   registro y no mueve un pixel.

   LO QUE NO SE TOCA, PORQUE PAUL YA LO DECIDIO: mismos campos, mismo boton,
   mismas esquinas, misma tipografia, mismo ritmo. Lo unico que cambia de lado
   es la fotografia -a la IZQUIERDA en la de la paciente, a la derecha en la
   del personal-. La diferencia se gana en el trato, no en la forma.

   LO QUE PAC2 APUESTA. Que la paciente no es una profesional y la puerta lo
   tiene que notar sin dejar de ser la misma. Todo lo estructural se iguala; lo
   que cambia es el trato, y esta escrito en el marcado, no aqui:
     - el rotulo de 12px se muere como nodo en las dos puertas, y la
       identificacion se muda al titulo ("Entrar a tu consulta" solo lo dice
       una paciente; "Entrar al panel" solo lo dice quien trabaja aqui);
     - la linea bajo el titulo cambia de OFICIO: en el personal identifica la
       puerta, en la paciente explica que hay detras;
     - el aviso de error deja de hablar de intentos y de coordinacion, y por
       eso cabe en dos lineas en vez de tres;
     - la columna de la paciente NO termina en el boton, porque sus dos
       salidas existen de verdad y una primeriza las necesita. Van DEBAJO del
       boton, donde no cuestan pliegue;
     - en el registro se marcan los DOS campos opcionales, no los cinco
       obligatorios, y los tres grupos llevan nombre;
     - en telefono el control del panel NO se adelanta. En la puerta del
       personal si, porque quien se equivoca de puerta alli es una paciente con
       un telefono en la mano; aqui quien se equivoca es del equipo clinico y
       entra por un escritorio.

   ESCALA: cuatro tamanos y ni uno mas, en los dos anchos y en las dos puertas.
     escritorio 15 / 17 / 40 / 64      telefono 15 / 17 / 28 / 34

   PALETA: blanco #ffffff, hueso #fbf7f5, nude #d8cbbe, apoyo #7e6a73, guia
   #67555d, vino #5b0c2f, vino oscuro #3d0820, tinto #260514, tinta #2a1a21,
   alerta #a5231f, oro #9c7433. El unico valor calculado es el relleno del
   campo (#ede6e0 = hueso 62% + nude 38%). Ver el bloque 6.

   RADIO: uno solo, 6px (--kctp-r-campo). Nada mas en la pantalla lleva radio.

   QUE HEREDA: .kctp-acceso de kctp.css (rejilla, tokens, boton).
   QUE NO HEREDA: entrada.css no se carga en ninguna de las dos puertas.
   ALCANCE: todo cuelga de .kctp-firma. Ni un selector alcanza a las vistas
   viejas de /portal/login, que usan .kctp-entrada.

   ORDEN DE LA HOJA: primero el telefono SIN media query, despues el ensanche a
   960px, y el modificador de lado al final.
   ========================================================================== */


/* ==========================================================================
   1. EL ANILLO DE FOCO

   Va primero a proposito: es lo unico que no puede fallar. Se DECLARA con
   especificidad de sobra para ganarle a cualquier `outline: none` que llegue
   despues en produccion, donde entran hojas completas.
   Dos anillos y no uno: vino sobre el blanco de la columna, hueso sobre el
   vino del panel. Un anillo vino sobre la fotografia oscura no se ve.
   ========================================================================== */

.kctp-firma :focus-visible {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 2px;
}
.kctp-firma .kctp-firma-campo input:focus-visible,
.kctp-firma .kctp-firma-caja-clave .kctp-firma-ver:focus-visible,
body .kctp-firma .kctp-firma-btn:focus-visible {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 2px;
}
/* El anillo del control del panel: claro, porque su suelo es vino o fotografia
   oscura. 3px de separacion para que no se coma el borde de 1px del propio
   boton fantasma. */
.kctp-firma .kctp-firma-dicho .kctp-firma-control:focus-visible {
    outline: 2px solid var(--kctp-fondo);
    outline-offset: 3px;
}
/* El envoltorio del telefono es DOS cajas (el pais y el campo) que se leen
   como una: el anillo lo dibuja el envoltorio, no el input de dentro, o el
   foco encerraria media pieza. Es el mismo mecanismo de :focus-within que ya
   usa entrada.css, con el offset de 1px que corresponde a un borde exterior. */
.kctp-firma .kctp-firma-campo .kctp-tel:focus-within {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 1px;
}
.kctp-firma .kctp-firma-campo .kctp-tel input:focus-visible { outline: 0; }


/* ==========================================================================
   2. EL CHASIS, EN TELEFONO, Y EL PRESUPUESTO DEL PLIEGUE

   Una sola columna y tres filas: franja de fotografia, tarea, dicho.
   El suelo es BLANCO. El #f5edef en toda la columna empujaba la lectura hacia
   marca de cosmetica; el resto del software que esta gente abre en el dia
   -historia clinica, laboratorio- es blanco. Y del lado de la paciente pasa lo
   mismo por el otro motivo: el rosa sobre rosa es lo que hace que una
   plataforma clinica se lea como una tienda.

   EL PRESUPUESTO SE DECLARA EN TOKENS, POR ALTO DE PANTALLA. El criterio de
   exito es que el boton principal cierre dentro del pliegue en 320x568,
   360x640 Y 375x667, con el aviso de error puesto y el de mayusculas
   encendido. Eso no se consigue con un solo juego de medidas: en 568px de alto
   sobran 26px y en 812 sobran 130. Asi que hay cuatro juegos, y lo unico que
   cambia entre ellos son los HUECOS, la altura de la franja de fotografia y
   dos alturas de control -nunca un tamano de letra, nunca un area tactil por
   debajo de 48px-.

   LOS JUEGOS SON LOS MISMOS EN LAS DOS PUERTAS, cifra por cifra. Es el "mismo
   ritmo" del pedido, y es tambien lo que hace que la comparacion de
   pac2_personal.html contra f1.html sea util: si el ritmo se bifurcara, la
   prueba no probaria nada.
   ========================================================================== */

.kctp-acceso.kctp-firma {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    background: var(--kctp-blanco);

    /* Juego A - pantallas de hasta 600px de alto (320x568). El mas apretado. */
    --f1-foto:     64px;   /* alto de la franja de fotografia */
    --f1-aire:     10px;   /* hueco entre piezas del bloque */
    --f1-aire-btn: 16px;   /* hueco antes del boton: otra velocidad, a proposito */
    --f1-tit:       4px;   /* titulo -> subtitulo */
    --f1-logo:     20px;
    --f1-campo:    48px;   /* alto del campo: el minimo tactil del contrato */
    --f1-btn:      56px;   /* alto del boton */
    --f1-pad:      10px;   /* relleno superior de la columna */
    --f1-pad-x:    20px;   /* margen lateral: el eje de toda la pantalla */
}
/* A 320px, 24px de margen se comen el 15% del ancho util y le cuestan una
   linea mas al aviso de error. Desde 360 vuelve el margen normal. */
@media (min-width: 360px) {
    .kctp-acceso.kctp-firma { --f1-pad-x: 24px; }
}

/* Juego B - telefonos normales (360x640, 375x667). */
@media (min-height: 601px) {
    .kctp-acceso.kctp-firma {
        --f1-foto: 120px; --f1-aire: 12px; --f1-aire-btn: 20px; --f1-tit: 6px;
        --f1-logo: 22px;  --f1-campo: 52px; --f1-btn: 60px; --f1-pad: 12px;
    }
}
/* Juego B+ - el iPhone de 667 tiene 82px mas de aire que el Android de 640
   porque su aviso de error cabe en tres lineas y no en cuatro. Ese aire se lo
   queda la fotografia, no un hueco. */
@media (min-height: 660px) {
    .kctp-acceso.kctp-firma { --f1-foto: 160px; }
}
/* Juego C - telefonos altos (375x812, 390x844). */
@media (min-height: 720px) {
    .kctp-acceso.kctp-firma {
        --f1-foto: 200px; --f1-aire: 16px; --f1-aire-btn: 24px;
        --f1-btn: 64px;   --f1-pad: 16px;
    }
}
/* Juego D - tabletas en vertical (768x1024). Aqui lo que sobra es alto, y la
   fotografia es lo que mejor lo gasta. */
@media (min-height: 820px) {
    .kctp-acceso.kctp-firma { --f1-foto: 260px; }
}

/* EL FONDO DEL DOCUMENTO, SIN ATARSE A UNA CLASE DE <body>.
   Aqui decia `body.kctp-acceso-pagina:has(.kctp-firma)`, y esa clase la pone la
   puerta del PERSONAL, que es una pagina suelta. Las cuatro pantallas de la
   paciente viven dentro del layout del portal, cuyo <body> lleva
   `kctp-portal pantalla-...`: la regla no las alcanzaba y el documento se
   quedaba con el fondo del portal detras de la puerta.
   Colgada de `:has(.kctp-firma)` a secas vale para las dos, y no puede tocar
   ninguna otra pantalla porque esa clase solo existe en las puertas. */
body:has(.kctp-firma) { background: var(--kctp-blanco); }

/* EL <aside> DESAPARECE COMO CAJA Y SUS DOS HIJOS SE REPARTEN. Es la pieza que
   hace posible el telefono sin duplicar marcado: la franja de fotografia sube
   por encima del formulario (order -1) y el bloque de texto del panel baja por
   debajo (order 1). Ni un nodo se clona, ni un nodo se esconde, y el orden de
   tabulacion no cambia: el unico elemento enfocable del panel es el control, y
   viene despues del boton principal tanto en el arbol como en la pantalla. */
.kctp-firma .kctp-firma-panel { display: contents; }


/* ==========================================================================
   3. LA FRANJA DE FOTOGRAFIA (telefono)

   La vara suelta la imagen por completo en telefono; el brief dice que
   conservar presencia de marca Y meter el boton en el pliegue gana la
   comparacion sin discusion. Asi que la franja se queda, pero cobra lo que
   sobra despues de pagar el formulario entero con los dos avisos: 64px en un
   telefono de 568 y 260 en una tableta.
   Funciona porque los dos recortes de telefono SON apaisados (750x517 el del
   personal, 750x585 el de la paciente): una franja de una foto apaisada sigue
   siendo una foto.

   AQUI NO HAY VELO NI HAY TEXTO ENCIMA, y esa es la decision. Sobre los
   recortes moviles no existe una banda donde el blanco llegue a 4,5:1 sin un
   velo tan espeso que borre la fotografia. Se prefiere una fotografia legible
   sin texto a una fotografia ilegible con titular: el titular tiene sitio
   propio abajo, sobre tinto solido, a 19:1.

   El encuadre (object-position) es lo unico de este bloque que se bifurca: son
   dos fotografias de la misma sesion pero con el sujeto en distinto sitio del
   cuadro. Ver el bloque 12.
   ========================================================================== */

.kctp-firma .kctp-firma-marco {
    order: -1;
    display: block;
    height: var(--f1-foto);
    background-color: var(--kctp-tinto);   /* mientras carga, y detras siempre */
}

/* object-fit: cover. La foto NO puede ser mas ancha que su caja en ningun
   ancho: la de una variante descartada iba de x=334 a x=1108 con la ventana en
   960, y solo el overflow hidden del panel evitaba la barra de desplazamiento
   horizontal. */
.kctp-firma .kctp-firma-foto {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}


/* ==========================================================================
   4. LA COLUMNA DE TRABAJO

   Sin tarjeta: el formulario se apoya en el papel, como la vara. De la puerta
   de la paciente se van de un tiro los mismos cuatro vicios que se le
   quitaron a la del personal, mas los que solo tenia ella: la tarjeta blanca
   flotante de 480x636, el radio de 20px, la sombra de dos capas, el relleno de
   40px y los 124px de pie legal gris colgando por debajo.

   SIETE PIEZAS en la puerta del personal, que termina en el boton. En la de la
   paciente son OCHO, y la octava esta debajo del boton a proposito: las dos
   salidas verdaderas -crear cuenta y recuperar la clave- existen como rutas y
   una primeriza las necesita. Debajo del boton no cuestan pliegue, y no son
   "gris de relleno" sino los dos unicos caminos que esta pantalla ofrece
   ademas de entrar. La del personal no tiene ninguno, y por eso termina antes
   en vez de rellenar.
   ========================================================================== */

.kctp-firma .kctp-firma-tarea {
    position: relative;
    z-index: 1;
    display: grid;
    /* Una sola pista centrada: logo, campos y boton comparten medida y eje. */
    grid-template-columns: min(480px, 100%);
    justify-content: center;
    background: var(--kctp-blanco);
    padding: var(--f1-pad) var(--f1-pad-x) 28px;
}

/* EL LOGO VA DENTRO DEL BLOQUE, no anclado arriba. Un bloque que termina en un
   parrafo termina en medio interlineado de aire invisible, y el centrado
   medido daba 153px arriba contra 137 abajo. Este bloque empieza en el borde de
   una imagen y termina en el borde de un boton -dos cajas macizas-, asi que lo
   que se reparte es exactamente lo que se ve. */
.kctp-firma .kctp-firma-bloque { align-self: center; }

.kctp-firma .kctp-firma-logo {
    display: block;
    height: var(--f1-logo);
    width: auto;
    max-width: none;
    margin: 0 0 var(--f1-aire);
}


/* --- Tipografia de la tarea --------------------------------------------- */

/* --kctp-t-display es un clamp del sistema: 28px a 375, 40px desde ~800px. En
   escritorio el reparto titular:titulo pasa de 2,29:1 -a favor de la mitad
   donde no pasa nada- a 1,60:1, que es exactamente el de la vara (48:30). */
.kctp-firma .kctp-firma-titulo {
    margin: 0 0 var(--f1-tit);
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-display);
    line-height: var(--kctp-lh-display);
    letter-spacing: var(--kctp-ls-display);
    color: var(--kctp-tinto);
    text-wrap: balance;
}

/* EL ROTULO DE 12px SE MUERE COMO NODO EN LAS DOS PUERTAS. En la del personal
   su contenido ("Acceso del personal clinico") paso a ser esta linea. En la de
   la paciente el rotulo decia "Portal del paciente" y esta linea ya tenia otro
   oficio, asi que la identificacion se muda al TITULO: "Entrar a tu consulta"
   es una frase que solo dice una paciente, igual que "Entrar al panel" es una
   que solo dice quien trabaja aqui. Asi las dos puertas quedan con las mismas
   tres piezas sobre el formulario -logo, titulo, una linea- y desaparece el
   ultimo 12px de la pantalla.

   Y de paso esta linea cambia de OFICIO segun el lado, que es la apuesta de
   pac2: en el personal IDENTIFICA la puerta (quien no reconozca "personal
   clinico" se equivoco); en la paciente EXPLICA lo que hay detras, porque
   quien entra por primera vez todavia no lo sabe. Misma tipografia, mismo
   sitio, mismo color: distinto trato. */
.kctp-firma .kctp-firma-sub {
    margin: 0 0 var(--f1-aire);
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.45;
    color: var(--kctp-guia);             /* 7,1:1 sobre blanco */
}


/* ==========================================================================
   5. EL AVISO DE ERROR DE LA PANTALLA

   Sin glifo de bootstrap-icons: el icono entraba a 1rem y metia un quinto
   tamano de 16px que no existe en la escala, y arrastraba 86 KB de hoja mas
   130 KB de woff2 a la ruta critica. La senal la dan un filete de 3px y la
   frase de cabeza en palabras: dos indicaciones y ninguna dependiente del
   color (contrato, regla 7).

   Es la pieza mas cara del pliegue, y EL TEXTO NO ES COSA DE ESTA HOJA NI DE LA
   VISTA: lo escribe el controlador. La primera vuelta puso aqui una frase propia
   para la puerta de la paciente y eso era mentirle sobre lo que paso. Vuelven
   las cadenas reales, y de paso salen mas cortas que el invento:
     PortalController::login()        «Correo o clave incorrectos.»
     ::registro() (hueco general)     «La página caducó. Vuelve a intentarlo.»
     ::recuperar()                    «Escribe un correo válido.»
     ::restablecer()                  «La clave necesita al menos 8 caracteres.»
   El <strong> se queda declarado porque la puerta del personal SI lo instancia
   (su aviso viene de AuthController y lleva frase de cabeza), y en las cuatro
   pantallas de la paciente el parrafo es una sola frase sin negrita.
   ========================================================================== */

.kctp-firma .kctp-firma-error {
    margin: 0 0 var(--f1-aire);
    padding: 10px 14px;
    border-left: 3px solid var(--kctp-alerta);
    border-radius: 0 var(--kctp-r-campo) var(--kctp-r-campo) 0;
    background: var(--kctp-alerta-sw);
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.45;
    color: var(--kctp-tinta);            /* 13,9:1 sobre #fdeeed */
}
.kctp-firma .kctp-firma-error strong {
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-alerta);           /* 7,0:1 sobre #fdeeed */
}

/* LA VARIANTE DE EXITO. El aviso es UNA sola pieza que cambia de color, no dos
   bloques con dos estilos como habia antes. Mismos huesos -filete de 3px,
   relleno tenido, cuerpo de 15- y solo cambia la familia de color: asi un
   "clave cambiada" no puede leerse como un fallo de acceso. La usa la pantalla
   de recuperar, que responde lo mismo exista o no el correo. */
.kctp-firma .kctp-firma-error-ok {
    border-left-color: var(--kctp-ok);
    background: var(--kctp-ok-sw);
}
.kctp-firma .kctp-firma-error-ok strong { color: var(--kctp-ok); }

/* LA VARIANTE DE ATENCION, tercera y ultima familia. Existe porque produccion
   ya distingue tres avisos (kctp-aviso-alerta, -ok y -atencion) y el enlace
   caducado de "elegir clave nueva" es de la tercera: la persona no se equivoco
   en nada, el enlace se le vencio. Pintarlo de rojo le diria que hizo algo mal.
   Mismos huesos otra vez, solo cambia la familia de color:
     #8a5a00 sobre #fdf5e8 = 5,48:1 (el filete y la frase de cabeza)
     tinta #2a1a21 sobre #fdf5e8 = 15,3:1 (el cuerpo) */
.kctp-firma .kctp-firma-error-aten {
    border-left-color: var(--kctp-aviso);
    background: var(--kctp-aviso-sw);
}
.kctp-firma .kctp-firma-error-aten strong { color: var(--kctp-aviso); }


/* ==========================================================================
   5b. LOS GRUPOS DEL FORMULARIO LARGO, Y SUS NOMBRES

   Solo se instancian en "crear tu cuenta", que es la pantalla mas dificil de
   las cuatro y la primera que ve una paciente nueva.

   LOS TRES GRUPOS LLEVAN NOMBRE, y eso es lo unico que convierte un muro de
   siete campos en tres cosas cortas. La vista de produccion ya los habia
   agrupado de tres en tres -"quien eres, como te contactamos, tu clave", con
   esas palabras, en su propio comentario- pero el nombre se quedo en el
   comentario y en la pantalla solo se veia un filete punteado: la persona
   tenia que deducir el agrupamiento. Escrito, deja de deducirse.

   NO ES UN QUINTO TAMANO. El nombre va a 15px -el cuerpo menor que ya existe-
   en peso medio y en tinto. La etiqueta de campo va a 17 medio tinto y la
   linea de ayuda a 15 normal en apoyo: los tres se distinguen sin estrenar un
   peldano.

   Y NO ES SOLO UN TITULITO: el grupo lleva role="group" y aria-labelledby
   apuntando al nombre, asi que un lector de pantalla anuncia "Tu clave" al
   entrar al par de campos de clave. Se hace con un <div> y un <h2> y no con
   <fieldset>/<legend> a proposito: el legend del navegador se coloca DENTRO
   del borde del fieldset con reglas propias que hay que desmontar con un
   float, y un float dentro de una pista de rejilla es la clase de arreglo que
   se rompe solo. El resultado accesible es el mismo.
   El <h2> tambien pone en orden el arbol de encabezados: el <h1> es el titulo
   de la tarea y los tres nombres son sus hijos.
   ========================================================================== */

.kctp-firma .kctp-entrada-grupo { min-width: 0; }

.kctp-firma .kctp-firma-grupo-nombre {
    margin: 0 0 var(--f1-aire);
    padding: 0;
    font-family: var(--kctp-sans);       /* declarado, no heredado: las reglas de
                                            :where(h2) del sistema le ponen la
                                            serif del portal */
    font-size: var(--paso-3);            /* 15 */
    font-weight: var(--kctp-peso-medio);
    line-height: 1.3;
    letter-spacing: -.006em;
    color: var(--kctp-tinto);            /* 18,9:1 sobre blanco */
}

/* Ritmo de dos velocidades, literal: el hueco de siempre entre campos de un
   mismo grupo, y el doble mas un filete punteado entre grupos. El error que
   habia era el contrario -la misma raya solida cada 24px- y con el los siete
   campos pesaban igual: siete secciones de un campo cada una. */
.kctp-firma .kctp-entrada-grupo + .kctp-entrada-grupo {
    margin-top: calc(var(--f1-aire) * 2);
    padding-top: calc(var(--f1-aire) * 2);
    border-top: 1px dashed var(--kctp-borde);
}
/* El ultimo grupo respira antes del boton con el hueco de otra velocidad, el
   mismo que separa el ultimo campo del boton en la pantalla de entrar. */
.kctp-firma .kctp-firma-form .kctp-entrada-grupo:last-of-type {
    margin-bottom: var(--f1-aire-btn);
}


/* ==========================================================================
   6. LOS CAMPOS - Y EL FIN DEL ROSA

   EL RELLENO ROSADO SE VA DE LAS DOS PUERTAS. Con la columna ya en blanco, el
   #f5edef con borde al 12% de tinto era lo mas llamativo del formulario
   despues del boton: exactamente lo que a dos segundos dice "marca de
   cosmetica" en una pantalla que es la entrada a una plataforma clinica.

   El mecanismo -el campo se anuncia por SUPERFICIE, como el #EEEEEE de la
   vara, y no por perimetro- es correcto y se queda. Lo que cambia es el color:
     relleno #ede6e0 = hueso (#fbf7f5) 62% + nude (#d8cbbe) 38%, los dos de la
     paleta. Es un neutro CALIDO, no un gris: mantiene la temperatura de la
     marca sin su tinte rosa.
     figura contra fondo 1,24:1 (la vara: 1,16:1 con su #EEEEEE sobre blanco).
     texto #2a1a21 dentro: 13,4:1.

   EL BORDE CUMPLE 1.4.11, donde la vara falla (ella no pone ninguno):
     #7e6a73 -el "apoyo" de la paleta- da 5,00:1 contra el blanco de la columna
     y 4,05:1 contra su propio relleno. El contrato pide 3:1 contra los dos
     lados; hoy la puerta de la paciente da 1,42:1.
   ========================================================================== */

.kctp-firma .kctp-firma-form { margin: 0; }
.kctp-firma .kctp-firma-campo { margin: 0 0 var(--f1-aire); }
/* El aire antes del boton es de otra velocidad que el que hay entre campos.
   Repartir lo mismo en todas partes es el error tipico. */
.kctp-firma .kctp-firma-form .kctp-firma-campo:last-of-type { margin-bottom: var(--f1-aire-btn); }

/* LA FILA DE LA ETIQUETA. Existe por el aviso de mayusculas: al viajar aqui,
   ese aviso -el mas frecuente de esta pantalla- cuesta CERO pixeles verticales
   en vez de los 29 que costaba debajo del campo. Sigue pegado a su campo,
   sigue siendo texto y sigue anunciandose solo (role=status).
   Y la fila resulto ser un sitio y no un parche: en el registro es donde va la
   marca de opcional, por el mismo motivo y al mismo precio. */
.kctp-firma .kctp-firma-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
}

/* LA ETIQUETA SUBE DE 13 A 17px: el mismo cuerpo que el valor que etiqueta.
   Esa correccion ya se habia hecho a medias en la puerta de la paciente. */
.kctp-firma .kctp-firma-fila label {
    margin: 0;
    font-size: var(--paso-4);            /* 17 */
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.006em;
    line-height: 1.3;
    color: var(--kctp-tinto);            /* 18,9:1 */
}

.kctp-firma .kctp-firma-mayus {
    font-size: var(--paso-3);            /* 15 */
    font-weight: var(--kctp-peso-medio);
    line-height: 1.3;
    color: var(--kctp-alerta);           /* 7,4:1 sobre blanco */
    /* Sin white-space: nowrap a proposito. "Clave" mas "Mayusculas activadas"
       caben en la misma fila hasta 320px; si algun dia el texto crece, que se
       parta en dos lineas y empuje 19px -que el presupuesto del pliegue
       aguanta- en vez de desbordar a lo ancho. */
}

/* LA MARCA DE OPCIONAL, Y POR QUE NO ES UN ASTERISCO.

   En "crear tu cuenta" hay cinco campos obligatorios y dos opcionales. La
   convencion es marcar los obligatorios, y la propia hoja de produccion ya
   habia escrito por que no sirve: "con cinco campos obligatorios eso son cinco
   puntos rojos en una pantalla donde el rojo significa que algo salio mal; el
   formulario se ve averiado antes de tocarlo". Su arreglo fue bajarle el color
   al asterisco.

   Aqui se invierte el signo: se marcan LOS DOS, no los cinco. Y con la palabra
   entera, no con un simbolo que obliga a buscar una leyenda. El mensaje pasa
   de "cinco cosas que tienes que hacer" a "dos que te puedes saltar", que es
   la misma informacion contada del lado de quien la lee.
   El atributo required y el aria-required se quedan en los cinco: quien usa
   lector de pantalla los oye igual, la marca visual no es la fuente de verdad.
   Va en la fila de la etiqueta, o sea a coste CERO de alto. */
.kctp-firma .kctp-firma-fila .kctp-firma-opcional,
.kctp-firma .kctp-firma-fila .kctp-firma-nota {
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.3;
    color: var(--kctp-guia);             /* 7,1:1 sobre blanco */
}

/* LA NOTA DE LA FILA: la misma pieza, para una regla del campo en vez de para
   su opcionalidad. La usa "elegir clave nueva" con «Al menos 8 caracteres.»
   -texto de restablecer.php-, y por eso existe: colgada debajo del control esa
   linea costaba 28,75px de pliegue y dejaba el boton a 13,4px del borde en un
   iPhone de 667. En la fila cuesta CERO, y de paso sube de #7e6a73 (5,0:1) a
   #67555d (7,1:1).

   Y CEDE EL SITIO AL AVISO DE MAYUSCULAS, que es el otro inquilino de esta fila.
   Juntos no caben: 92 + 148 + 152 mas dos huecos de 12 piden 416px y la pista
   mide 312 a 375 y 280 a 320, o sea la fila partiria en dos y costaria los
   21,75px que se acababan de ahorrar. Cuando el aviso enciende, la nota se
   oculta POR RECORTE y no con display: sigue en el arbol de accesibilidad, o sea
   quien usa lector de pantalla sigue oyendo la regla de los 8 caracteres por su
   aria-describedby. Es un cambio de prioridad, no una perdida: la nota se lee
   antes de escribir y el aviso importa mientras se escribe. */
/* Y LA ETIQUETA DE ESA FILA NO SE PARTE. Medido a 320px: la pista mide 265, la
   etiqueta pide 99,4 y la nota 155,7 mas 12 de hueco, o sea la fila se pasa por
   UN pixel y el reparto de encogimiento se lo cobraba a la etiqueta: "Clave
   nueva" salia en dos lineas por 1px. El nombre del campo no se parte nunca; el
   que cede es la nota, que a 320 -y solo a 320- ocupa dos lineas alineadas a la
   derecha. Va en un modificador de fila para no alcanzar a la puerta del
   personal, cuya fila no tiene nota. */
.kctp-firma .kctp-firma-fila--nota label { white-space: nowrap; }
.kctp-firma .kctp-firma-fila .kctp-firma-nota { text-align: right; }

.kctp-firma .kctp-firma-mayus:not([hidden]) ~ .kctp-firma-nota {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* El asterisco del sistema se apaga: la marca de esta pantalla es la palabra
   de arriba, y las dos a la vez se contradicen. La clase se conserva en el
   marcado para que el porte a la vista PHP no tenga que reescribir etiquetas. */
.kctp-firma .kctp-obligatoria::after { content: none; }

.kctp-firma .kctp-firma-campo input {
    width: 100%;
    height: var(--f1-campo);
    padding: 0 16px;
    border: 1px solid var(--kctp-tenue);          /* #7e6a73 */
    border-radius: var(--kctp-r-campo);           /* 6px, uno solo en la pantalla */
    background: #ede6e0;                          /* hueso 62% + nude 38% */
    color: var(--kctp-tinta);
    caret-color: var(--kctp-acento);
    font-family: inherit;
    font-size: var(--paso-4);            /* 17: por encima de los 16 que
                                            disparan el zoom de iOS al enfocar */
    letter-spacing: -.006em;
    box-shadow: none;
    transition: background-color var(--kctp-mov-hover), border-color var(--kctp-mov-hover);
}
.kctp-firma .kctp-firma-campo input:hover { border-color: var(--kctp-acento-cl); }

/* Tres senales al enfocar y ninguna sola de color: el relleno se aclara
   (superficie), el borde pasa a vino (color) y el anillo de 2px del bloque 1
   dibuja el contorno (forma). Nada de `inset 0 0 0 1px`: era una sombra usada
   como segundo borde, y el contrato dice borde O sombra (regla 4). */
.kctp-firma .kctp-firma-campo input:focus {
    background: var(--kctp-blanco);
    border-color: var(--kctp-acento);
}

/* Edge dibuja su propio ojo dentro del campo de contrasena y Chrome no dibuja
   nada: la pantalla tenia un control distinto segun el navegador. */
.kctp-firma .kctp-firma-campo input::-ms-reveal,
.kctp-firma .kctp-firma-campo input::-ms-clear { display: none; }

/* Autocompletado de Chrome: pinta el campo de #e8f0fe y esa capa NO se quita
   con background, solo con un box-shadow interior. Es la unica excepcion a la
   regla del borde-o-sombra en toda la hoja, y es de motor, no de diseno: la
   sombra no se ve, sustituye a un relleno. */
.kctp-firma .kctp-firma-campo input:-webkit-autofill,
.kctp-firma .kctp-firma-campo input:-webkit-autofill:hover,
.kctp-firma .kctp-firma-campo input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 100px #ede6e0;
    -webkit-text-fill-color: var(--kctp-tinta);
    caret-color: var(--kctp-acento);
}

/* LA FECHA DE NACIMIENTO, QUE SE DESBORDABA. Carlos, sobre la pantalla de hoy:
   "campo de fecha de nacimiento desbordado". El input[type=date] trae su
   propio ancho intrinseco -el "dd/mm/aaaa" mas el icono de calendario- y
   `width: 100%` no basta porque ese minimo gana. Con min-width: 0 y la
   apariencia neutralizada se comporta como cualquier otro campo.
   El text-align: left es por Safari, que centra el valor dentro del control y
   deja la fecha flotando mientras los demas campos alinean a la izquierda. */
.kctp-firma .kctp-firma-campo input[type="date"] {
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}
/* El icono nativo del calendario se pinta gris azulado del navegador, que es
   el unico color de la pantalla que no sale de la paleta. Se tine de vino. */
.kctp-firma .kctp-firma-campo input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
    /* Un filtro y no un color: el indicador es una imagen del navegador, no un
       glifo, y no acepta `color`. El sepia+hue lleva su gris al vino. */
    filter: invert(11%) sepia(58%) saturate(3600%) hue-rotate(315deg) brightness(76%) contrast(105%);
}

/* EL CAMPO CON ERROR lo marca el borde, no un relleno de color: 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 de 2px hace el resto. No depende del color: el mensaje
   va escrito debajo y el campo lleva aria-invalid. */
.kctp-firma .kctp-firma-campo.con-error input,
.kctp-firma .kctp-firma-campo.con-error input:focus {
    border-color: var(--kctp-alerta);
    border-width: 2px;
    background: var(--kctp-blanco);
}


/* --- Ver / ocultar contrasena -------------------------------------------- */

/* UN OJO, NO LA PALABRA "Mostrar". Subrayada, dentro del campo y a 8px del
   borde interior, con el campo vacio "Mostrar" se leia a dos segundos como una
   contrasena ya escrita. El ojo no compite con el contenido porque no es
   contenido. Va en SVG en linea -dos trazos de 1,5px en vino, 11,9:1 sobre el
   relleno del campo- y no en una fuente de iconos. */
.kctp-firma .kctp-firma-caja-clave { position: relative; }
.kctp-firma .kctp-firma-caja-clave input { padding-right: 52px; }

.kctp-firma .kctp-firma-ver {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 48px;                         /* el area tactil del contrato, exacta */
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--kctp-r-campo);
    background: transparent;
    color: var(--kctp-acento);
    cursor: pointer;
    transition: color var(--kctp-mov-hover);
}
.kctp-firma .kctp-firma-ver:hover { color: var(--kctp-acento-os); }
.kctp-firma .kctp-firma-ojo { display: block; }

/* EL ATRIBUTO hidden NO ALCANZA SOBRE UN <svg>. Encontrado al portar, mirando
   la pantalla a tamano completo: los DOS ojos se dibujaban a la vez, uno encima
   del otro. Dos causas encadenadas:
     1. `display: block` de la regla de arriba es (0,2,0) y le gana al
        `[hidden] { display: none }` de la hoja del navegador, que es (0,1,0).
        En un <div> no se nota porque casi nadie le pone display a mano.
     2. La propiedad JS `hidden` solo existe en HTMLElement, no en SVGElement:
        `svg.hidden = true` deja una propiedad muerta y no toca el atributo.
        Por eso el guion alterna ahora con toggleAttribute.
   Esta regla arregla la primera causa y deja la segunda documentada. */
.kctp-firma .kctp-firma-ojo[hidden] { display: none; }


/* ==========================================================================
   6b. EL TELEFONO, CON SU PAIS

   Carlos, sobre la pantalla de hoy: "no coloca el pais para el numero
   telefonico". La plataforma ya normaliza a +58 por dentro; lo que faltaba era
   decirlo. Va escrito y fijo -Venezuela es el unico pais donde opera la
   clinica- y no en un desplegable de 200 paises, que seria pedirle que elija
   algo que no puede cambiar.

   DOS CORRECCIONES SOBRE LA VERSION DE PRODUCCION, las dos de contrato:
     - el pais iba a 14,5px, un tamano que no existe en la escala, y en peso
       600, que no existe en el sistema (regla 1: solo 400 y 500). Aqui va a
       17px, el MISMO cuerpo que el numero que ella escribe al lado, y en peso
       normal: el prefijo es parte del valor, no una etiqueta, y no tiene por
       que pesar mas que lo que la persona teclea.
     - el envoltorio iba con radio 12px, que es de la escalera de la paciente
       vieja. Aqui manda el 6px unico de la pantalla.
   El borde lo pone el envoltorio y el campo de dentro lo pierde, o se verian
   dos cajas encajadas.
   ========================================================================== */

.kctp-firma .kctp-firma-campo .kctp-tel {
    display: flex;
    align-items: stretch;
    height: var(--f1-campo);
    border: 1px solid var(--kctp-tenue);
    border-radius: var(--kctp-r-campo);
    background: #ede6e0;
    overflow: hidden;
    transition: background-color var(--kctp-mov-hover), border-color var(--kctp-mov-hover);
}
.kctp-firma .kctp-firma-campo .kctp-tel:hover { border-color: var(--kctp-acento-cl); }
.kctp-firma .kctp-firma-campo .kctp-tel:focus-within {
    background: var(--kctp-blanco);
    border-color: var(--kctp-acento);
}
.kctp-firma .kctp-tel-pais {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 16px;
    border-right: 1px solid var(--kctp-tenue);
    background: transparent;             /* una sola superficie: el prefijo no es
                                            otra caja, es el principio del valor */
    color: var(--kctp-guia);             /* 5,6:1 sobre #ede6e0 */
    font-size: var(--paso-4);            /* 17, el mismo del numero */
    font-weight: var(--kctp-peso-normal);
    letter-spacing: -.006em;
    white-space: nowrap;
}
/* El campo de dentro pierde borde, radio y relleno propio: los tres los pone
   el envoltorio. Sin !important, porque el selector ya es mas especifico. */
.kctp-firma .kctp-firma-campo .kctp-tel input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.kctp-firma .kctp-firma-campo .kctp-tel input:hover,
.kctp-firma .kctp-firma-campo .kctp-tel input:focus { background: transparent; }
.kctp-firma .kctp-firma-campo.con-error .kctp-tel {
    border-color: var(--kctp-alerta);
    border-width: 2px;
    background: var(--kctp-blanco);
}


/* ==========================================================================
   6c. AYUDA Y ERROR POR CAMPO

   Las dos suben de 13 a 15px: es el piso de la escala, no el sotano. Y las dos
   van DEBAJO del control y no debajo de la etiqueta, por una razon de
   alineacion medida en produccion: 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-ayuda nace en kctp.css con margen negativo arriba (alli va pegada bajo
   la etiqueta) y a 13px. Aqui se le anula el margen y se le sube el cuerpo.
   ========================================================================== */

.kctp-firma .kctp-firma-campo .kctp-ayuda,
.kctp-firma .kctp-entrada-par > .kctp-ayuda {
    margin: 7px 0 0;
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.45;
    color: var(--kctp-tenue);            /* 5,0:1 sobre blanco */
    max-width: none;
}
.kctp-firma .kctp-firma-campo .kctp-error {
    display: block;
    margin-top: 7px;
    font-size: var(--paso-3);            /* 15 */
    font-weight: var(--kctp-peso-medio);
    line-height: 1.45;
    color: var(--kctp-alerta);           /* 4,9:1 sobre blanco */
}

/* PAREJAS DE CAMPOS. Se apilan en telefono y se abren en dos columnas cuando
   la pista da para dos campos de unos 200px. El umbral se mide CONTRA LA PISTA
   y no contra la pantalla: la pista no crece con el navegador -a 900px de
   ancho ya esta en su maximo, a 960 CAE porque ahi entra el split- asi que una
   media query de pantalla abriria las dos columnas justo donde la pista es mas
   estrecha. Por eso es una consulta de contenedor.
   Los 420px son el minimo con el que el campo de fecha (182px medidos: el
   "dd/mm/aaaa" mas el icono) y la etiqueta "Fecha de nacimiento" de 17px caben
   sin partirse.

   EL CONTENEDOR ES EL <form> Y NO LA COLUMNA. La columna lleva `position:
   relative` y `z-index: 1`, y `container-type: inline-size` implica
   contencion de disposicion: ponerlo ahi le cambia el contexto de apilado y el
   bloque contenedor a una caja que ya es la base del centrado vertical del
   formulario. El <form> es un bloque tonto del ancho exacto de la pista, y ahi
   no cuesta nada. Verificado midiendo pac2_personal.html contra f1.html: cero
   diferencia. */
/* ATADO AL LADO DE LA PACIENTE, y no a `.kctp-firma` a secas. La consulta de
   contenedor que cuelga de aqui solo sirve a `.kctp-entrada-par`, que es del
   registro y no existe en la puerta del personal. Dejarlo general le agregaba
   contencion de disposicion, de estilo y de tamano al <form> de una pantalla
   verificada al pixel, a cambio de nada. Cuesta 0px medidos, pero "cuesta cero
   hoy" no es lo mismo que "no la toca". */
.kctp-firma--paciente .kctp-firma-form { container-type: inline-size; }

.kctp-firma .kctp-entrada-par {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--f1-aire);
    align-items: start;
}
@container (min-width: 420px) {
    /* minmax(0, 1fr) y no 1fr: el input[type=date] trae ese ancho minimo propio
       y con 1fr -que es minmax(auto, 1fr)- ese minimo manda. Medido en
       produccion a 960px de pantalla: columnas de 130px y 182px en una rejilla
       que pedia mitades iguales.

       Y TRES FILAS DECLARADAS -etiqueta, control, nota- PARA PODER COMPARTIRLAS.
       Es la correccion mas cara de esta pantalla y salio de medir, no de mirar.

       EL DEFECTO: en dos de las tres parejas los dos campos arrancaban a
       distinta altura, 22px de desfase medidos. La causa no es la ayuda -esa ya
       estaba resuelta sacandola del campo- sino la ETIQUETA, que en una columna
       de 228px se parte en dos lineas cuando lleva su marca al lado:
         "Fecha de nacimiento" + "Opcional"        = 229px en 228 disponibles
         "Crea una clave" + "Mayusculas activadas" = 207px, y con la marca
                                                     encendida se pasaba
       O sea: la fila de la etiqueta, que a ancho completo cuesta cero pixeles,
       dentro de una columna estrecha puede costar 22 y desalinear la pareja.

       EL ARREGLO: subgrid. Las dos celdas heredan LAS MISMAS TRES FILAS de la
       pareja, asi que la fila de la etiqueta mide lo que mida la mas alta de
       las dos y los dos controles arrancan siempre a la misma altura, se parta
       lo que se parta y cargue la fuente que cargue. Es una GARANTIA, no un
       ajuste al texto de hoy: si manana la etiqueta crece, no se descuadra.
       Produccion resuelve la mitad del problema (la ayuda) con un truco de
       marcado -sacarla del campo- y la otra mitad no la ve.

       row-gap: 0 a proposito. Los huecos verticales de dentro de un campo los
       ponen los margenes de sus piezas (6px bajo la etiqueta, 7px sobre la
       nota) y en una subrejilla el hueco lo pone la MADRE: dejarle los 16px de
       la pareja separaria la etiqueta de su campo. El hueco entre las dos
       celdas apiladas del telefono sigue siendo --f1-aire, porque ahi la
       pareja tiene una sola columna y no entra en esta consulta. */
    .kctp-firma .kctp-entrada-par {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        column-gap: var(--kctp-e5);
        row-gap: 0;
    }
    .kctp-firma .kctp-entrada-par > .kctp-firma-campo {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
    }
    /* Y LA ETIQUETA SE PEGA ABAJO DE SU FILA COMPARTIDA. Sin esto, la fila mide
       lo que la etiqueta mas alta -"Fecha de nacimiento" mas su marca piden
       240,2px y solo hay 228, asi que parte en dos y la fila pasa de 22,1 a
       44,2px- y la etiqueta corta de al lado se queda arriba con 22px de aire
       debajo, despegada del campo que nombra. Alineada al final, las dos
       terminan a 6px de su control y el aire sobrante se va arriba, que es
       donde no dice nada. */
    .kctp-firma .kctp-entrada-par > .kctp-firma-campo > .kctp-firma-fila {
        align-self: end;
    }
    /* La ayuda que cuelga de la pareja entera es pie de FILA, no media celda:
       cruza las dos columnas y cae sola en la cuarta fila, debajo de las tres
       compartidas. */
    .kctp-firma .kctp-entrada-par > .kctp-ayuda { grid-column: 1 / -1; }
}

/* Dentro de una pareja manda el gap de la rejilla, no el margen del campo. Y
   hay que apagar a proposito la regla del bloque 6 que le da --f1-aire-btn al
   ultimo campo del formulario: ese :last-of-type es un DESCENDIENTE, o sea
   tambien acierta al segundo campo de CADA pareja (son dos div hermanos), y
   ese margen extra desalineaba la columna derecha. Es el mismo defecto que la
   hoja de produccion documenta. */
.kctp-firma .kctp-firma-form .kctp-entrada-par > .kctp-firma-campo,
.kctp-firma .kctp-firma-form .kctp-entrada-grupo > .kctp-firma-campo:last-child {
    margin-bottom: 0;
}
.kctp-firma .kctp-firma-form .kctp-entrada-grupo > .kctp-firma-campo + .kctp-entrada-par {
    margin-top: var(--f1-aire);
}


/* --- 6d. LA PAREJA COLGADA DEL FORMULARIO, SIN GRUPO EN MEDIO -------------
   AGREGADO EN LA VUELTA DE LOS DOS TIEMPOS. Hasta aqui una pareja siempre
   vivia dentro de un .kctp-entrada-grupo, y era el grupo el que ponia los dos
   huecos: el de siempre entre piezas y el de otra velocidad antes del boton.
   Con cinco campos los tres nombres de grupo se van -"Quién eres" sobre un
   solo campo es una seccion que no es una seccion- y las parejas quedan como
   hijas directas del <form>, o sea sin nadie que les ponga margen.
   Se les pone aqui, con las MISMAS DOS VELOCIDADES y las mismas variables: no
   se estrena ninguna medida.
   El :last-of-type acierta a la ultima pareja y no al boton, que es un
   <button> y no un <div>. Y no alcanza a la puerta del personal por
   construccion: f1.html no instancia .kctp-entrada-par ni una vez. */
.kctp-firma .kctp-firma-form > .kctp-entrada-par { margin: 0 0 var(--f1-aire); }
.kctp-firma .kctp-firma-form > .kctp-entrada-par:last-of-type {
    margin-bottom: var(--f1-aire-btn);
}


/* ==========================================================================
   7. EL BOTON

   Con body delante para empatar la especificidad de body:not(.kctp-portal)
   .kctp-btn (0,2,1) y de body .kctp-acceso .kctp-btn (0,2,1), y llegar despues.
   Sin sombra en reposo, sin resplandor de 24px al pasar el raton y sin
   translateY(1px) al pulsar: un boton que se hunde 1px es un tic de plantilla,
   no una respuesta.
   ========================================================================== */

body .kctp-firma .kctp-firma-btn {
    width: 100%;
    min-height: var(--f1-btn);
    padding: 0 24px;
    border-radius: var(--kctp-r-campo);  /* 6px, el mismo de los campos */
    font-size: var(--paso-4);            /* 17 */
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.008em;
    box-shadow: none;
    transform: none;
    transition: background-color var(--kctp-mov-hover);
}
body .kctp-firma .kctp-firma-btn:hover { background: var(--kctp-acento-os); box-shadow: none; }
body .kctp-firma .kctp-firma-btn:active { transform: none; }

/* Estado de envio: el boton no se deshabilita (deshabilitarlo antes de que
   salga el POST cancela el envio), cambia de texto y avisa por aria-busy. */
body .kctp-firma .kctp-firma-btn[aria-busy="true"] {
    background: var(--kctp-acento-os);
    cursor: progress;
}


/* ==========================================================================
   7b. LAS SALIDAS DE LA COLUMNA (solo la puerta de la paciente)

   La puerta del personal termina en el boton y no tiene una sola linea de gris
   debajo, porque no existe ninguna ruta verdadera que ofrecer: no hay
   recuperacion de clave para el personal, y un control que no lleva a ningun
   lado en un sistema clinico es peor que su ausencia.

   La de la paciente tiene DOS que existen -/portal/registro y
   /portal/recuperar- y las necesita quien entra por primera vez. Tres
   decisiones sobre ellas:

     1. VAN DEBAJO DEL BOTON. Ahi no cuestan pliegue: el criterio es que el
        boton cierre dentro de la primera pantalla, y lo que va despues del
        boton no lo empuja. Medido en las tres pantallas del informe.
     2. "CREA TU CUENTA" VA PRIMERO, aunque olvidar la clave sea mas frecuente
        a lo largo de la vida del producto. Esta es la unica pantalla que ve
        alguien que todavia no tiene cuenta; para quien ya la tiene, el
        navegador rellena el correo y la clave y esta linea no se lee nunca.
        El orden lo decide quien necesita leerlo, no quien pasa mas veces.
     3. SIN FILETE ARRIBA. La tarjeta vieja separaba sus salidas con un borde
        de 1px y con eso el pie parecia otra seccion. Con el hueco de otra
        velocidad ya se separan, y la pantalla se queda sin ninguna raya que no
        haga falta.
   ========================================================================== */

.kctp-firma .kctp-firma-salidas {
    margin: var(--f1-aire-btn) 0 0;
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.5;
    color: var(--kctp-guia);             /* 7,1:1 sobre blanco */
}
.kctp-firma .kctp-firma-salidas p { margin: 0; }

/* 32px ENTRE LAS DOS SALIDAS, Y LA CIFRA LA DECIDE EL DEDO, NO EL OJO. Medido
   en el telefono: las dos lineas son enlaces de 15px, o sea 20px de alto de
   caja. La regla 2.5.8 de WCAG 2.2 (24x24) las exime por ser enlaces dentro de
   una frase, pero el contrato de KARA pide 48px de area tactil y esta es la
   salida que una primeriza va a pulsar en un telefono: es justo el caso para el
   que existe el numero.
   Asi que el area se estira a 48px con relleno vertical y el estiron se cancela
   con un margen negativo del mismo tamano, o sea NO mueve ni un pixel de la
   composicion. Y los 32px de separacion no son estetica: 20 + 14 + 14 = 48, asi
   que con menos de 28px las dos areas tactiles se SOLAPARIAN y un dedo grueso
   podria pedir "crear cuenta" queriendo "recuperar la clave". Dos blancos que
   se pisan son peores que dos blancos chicos. */
.kctp-firma .kctp-firma-salidas p + p { margin-top: var(--kctp-e6); }

/* EL SUBRAYADO PASA A text-decoration Y NO A UN BORDE. Con borde inferior, el
   borde sigue a la caja de relleno y se dibujaba 14px por debajo del texto en
   cuanto la caja crecio para el dedo. El subrayado de texto sigue al TEXTO, con
   su desplazamiento de 3px y su grosor de 1px declarados para que no corte las
   descendentes -que es lo que se evitaba con el borde-. Y de paso el elemento
   se queda sin borde y sin sombra, o sea la regla 4 del contrato ni se roza. */
.kctp-firma .kctp-firma-salidas a {
    display: inline-block;
    padding: 14px 2px;                   /* 20 + 14 + 14 = 48px de area tactil */
    margin: -14px 0;                     /* y la composicion no se entera */
    color: var(--kctp-acento);           /* 10,4:1 sobre blanco */
    font-weight: var(--kctp-peso-medio);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--kctp-acento) 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--kctp-mov-hover), color var(--kctp-mov-hover);
}
.kctp-firma .kctp-firma-salidas a:hover {
    color: var(--kctp-tinto);
    text-decoration-color: currentColor;
}


/* ==========================================================================
   7c. LA LINEA QUE ANUNCIA LO QUE SIGUE (solo el paso 1)

   AGREGADA EN LA VUELTA DE LOS DOS TIEMPOS. Al partir el registro hace falta
   decirle a la paciente que despues de crear la cuenta todavia pasan cosas.
   DOS_PASOS.md prohibe con nombre y apellido el contador "1 de 2": el recorrido
   real tiene TRES tiempos -cuenta, autorizaciones, ficha- y dos seria mentira.
   Asi que es una FRASE y no un indicador de progreso, y por eso no estrena
   ninguna forma nueva: mismo cuerpo de 15px y mismo color guia que la linea
   bajo el titulo y que las salidas.

   NO ES UN AVISO. Nada de filete de color ni de relleno tenido: no informa de
   un estado ni de un fallo, cuenta lo que viene. Se distingue de las salidas
   que tiene debajo por lo unico que hace falta: no lleva ningun enlace.

   VA DEBAJO DEL BOTON y comparte la cuenta del bloque 7b: ahi cuesta 0px de
   pliegue. Encima del boton costaba 85,3px MEDIDOS en 360x640 -tres lineas de
   15px, 65,3px, mas su hueco de 20- y esa es la moneda exacta que esta vuelta
   vino a comprar: habria dejado el boton en y=1.006 en vez de en y=921.
   El margen se declara con --f1-aire-btn, el mismo que ya separa el boton de
   las salidas: los dos margenes de 20px se colapsan entre hermanos de flujo
   normal, o sea la linea se mete en la pila SIN abrir un tercer hueco.
   ========================================================================== */

.kctp-firma .kctp-firma-sigue {
    margin: var(--f1-aire-btn) 0 0;
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.45;
    color: var(--kctp-guia);             /* 7,1:1 sobre blanco */
}


/* ==========================================================================
   8. EL PANEL: UNA COSA Y UN CONTROL

   En telefono va DEBAJO del formulario, sobre tinto solido y sin fotografia
   detras: el titular de 34px llega a 19,1:1 y el legal a 12,7:1 sin un solo
   pixel de velo. Es la contrapartida honesta de la franja muda de arriba: la
   fotografia se ve donde se puede ver y el texto se lee donde se puede leer.

   Y aqui esta el cuarto tamano del telefono: el hero se queda en su 34 nativo
   en vez de bajar a los 28 del titulo de la tarea, que aplanaba la jerarquia
   entre la marca y la tarea a tres tamanos.

   EL PANEL DICE UNA COSA Y OFRECE UN CONTROL, en las dos puertas. La cosa es
   la misma afirmacion en dos cuerpos (titular y linea de prueba, con las
   palabras que el contrato obliga a conservar). El control es la OTRA puerta:
   en el personal, la del paciente; en la paciente, la del personal
   (/auth/login). El aviso de urgencias no es una tercera afirmacion: es la
   placa obligatoria de la plataforma y va al pie, detras de un filete.

   EL ORDEN EN TELEFONO ES LO UNICO QUE SE BIFURCA, y no por gusto:
     personal   CONTROL -> titular -> prueba -> placa
     paciente   titular -> prueba -> CONTROL -> placa
   En la puerta del personal el control sube al primer puesto para quedar
   pegado al boton, porque quien se equivoca de puerta ALLI es una paciente con
   un telefono en la mano y ese es el sitio donde lo va a buscar. En la de la
   paciente, quien se equivoca es del equipo clinico y entra por un escritorio:
   adelantarle el control le robaria a la primeriza el sitio pegado al boton,
   que aqui ya lo ocupan sus dos salidas verdaderas. Ver el bloque 12.
   No hay desajuste entre orden visual y orden de tabulacion en ninguno de los
   dos casos, porque el control es el UNICO elemento enfocable del panel.
   ========================================================================== */

.kctp-firma .kctp-firma-dicho {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--kctp-tinto);
    color: #fff;
    padding: 28px var(--f1-pad-x) 32px;
    /* UN SOLO EJE, tambien apilado. La columna centra una pista de 480px, asi
       que en una tableta de 768 el formulario arranca en x=137 mientras el
       panel arrancaba en x=24: dos ejes en la misma pantalla. Este max() le da
       al panel el mismo arranque que la pista de la columna cuando sobra ancho,
       y el margen normal cuando no sobra (telefono). */
    padding-inline: max(var(--f1-pad-x), calc((100% - 480px) / 2));
}

/* 34px en telefono, 64 desde 1075px. Peso 400, interlineado 1,02 y tracking
   -.034em: es lo unico de la pantalla de hoy que ya se veia caro.

   LA MEDIDA DE LINEA SE BIFURCA POR VARIABLE Y NO POR REGLA, y esto se
   descubrio midiendo. La medida es lo unico del titular que depende de la
   frase, asi que el primer intento fue sacarla a una regla del modificador
   (bloque 12). Rompio la puerta del personal: en escritorio manda
   `.kctp-firma-dicho > * { max-width: 34rem }` del bloque 9, que empata en
   especificidad (0,2,0) con esta regla y le gana POR VENIR DESPUES; una regla
   de modificador puesta al final de la hoja se colaba delante y el titular
   pasaba de 528px a 510,66. O sea: en la puerta del personal el 13ch solo vive
   en telefono, y en escritorio es codigo muerto a proposito.
   Con una variable el valor viaja desde el modificador pero la DECLARACION se
   queda aqui, en su sitio del orden, y el 34rem sigue ganando donde ganaba.

   Y LA VARIABLE LLEVA RESPALDO (arreglo 6). Sin el, una pagina que se porte sin
   modificador deja `max-width: var(--f1-hero-medida)` sin valor, o sea invalido
   en tiempo de calculo, o sea `max-width: none`: el titular se estiraria a los
   dos cantos del panel en telefono y nadie se enteraria. Con el respaldo cae en
   los 34rem, la misma medida que ya manda en escritorio. Los dos modificadores
   declaran su cifra, asi que el respaldo no dispara nunca en las dos puertas
   reales: cero pixeles de cambio, medido. */
.kctp-firma .kctp-firma-hero {
    margin: 0;
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-hero);
    line-height: var(--kctp-lh-hero);
    letter-spacing: var(--kctp-ls-hero);
    color: #fff;
    max-width: var(--f1-hero-medida, 34rem);
    text-wrap: balance;
}

/* LA PRUEBA NO ES UNA SEGUNDA AFIRMACION: es la misma, en cuerpo de lectura y
   con las palabras que el contrato obliga a conservar. Por eso van juntas y
   sin nada en medio.
   El filete de 40x2px va en ORO: es la unica aparicion de #9c7433 en la
   pantalla (hoy, a 1440px, esta puerta tiene cero), y va como elemento aparte
   y no como borde lateral, para que no desalinee el bloque. */
.kctp-firma .kctp-firma-prueba {
    margin: 24px 0 0;
    max-width: 46ch;
    font-size: var(--paso-4);            /* 17 */
    line-height: 1.55;
    letter-spacing: -.004em;
    color: rgba(255, 255, 255, .92);
}
.kctp-firma .kctp-firma-prueba::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--kctp-oro);
    margin-bottom: 12px;
}

/* --- EL CONTROL ---------------------------------------------------------

   Boton fantasma, y las tres cosas que lo hacen un control de verdad:
     1. BORDE. 1px a rgba(255,255,255,.78). Sobre el suelo mas claro que este
        velo permite da 4,1:1, o sea cumple 1.4.11 (3:1) sin depender de la
        fotografia. La vara pone su borde al 40% de blanco, que sobre su foto
        clara no llega a 3:1.
     2. AREA TACTIL DE 48px. La de la vara mide 40. El contrato de KARA pide 48
        y en la puerta de la paciente lo va a pulsar alguien en un telefono,
        que es justo el caso para el que existe el numero.
     3. ANILLO DE FOCO propio, claro, declarado arriba en el bloque 1.
   Ancho automatico y no al 100%: un fantasma que ocupa todo el ancho se lee
   como un segundo boton primario y le pelea el turno al principal. Este dice,
   por su forma, "esta es la otra puerta, no la tuya".
   -------------------------------------------------------------------------- */

/* LA LINEA QUE PRESENTA EL CONTROL. Marca el cambio de publico -de aqui para
   abajo el panel le habla al otro lado- para que el boton no tenga que
   presentarse a si mismo. Va en el cuerpo menor que ya existe y con el mismo
   `order` que el control, asi que los dos se mueven juntos.

   BLANCO AL 86% Y NO AL 74% (arreglo 5, y es lo unico de esta vuelta que
   repinta tambien la puerta del personal). El 74% cumplia de sobra sobre las
   dos fotografias reales -10,4:1 y 10,7:1 medidos- pero no sobre el SUELO QUE
   ESTA HOJA DECLARA en el bloque 9: un pixel blanco puro detras del velo. Ahi
   la cuenta es esta, y se hizo midiendo donde cae esta linea dentro del degradado
   en 45 ventanas de escritorio distintas:
     el velo bajo esta linea nunca baja de alpha 0,6534 (piso en 960px de ancho)
     blanco 74% sobre ese suelo = 4,23:1   -> por debajo del 4,5 del contrato
     blanco 86% sobre ese suelo = 5,06:1   -> 12,4% de margen
   El 86% queda entre la placa legal (82%) y la linea de prueba (92%), o sea la
   jerarquia del panel no se invierte. Sobre tinto solido -el telefono- pasa de
   10,38:1 a 13,90:1.
   Es un cambio de COLOR y nada mas: ni una caja se mueve, y esta comprobado
   elemento por elemento contra f1.html. */
.kctp-firma .kctp-firma-cambio {
    order: -1;
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .86);
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.5;
    letter-spacing: -.006em;
}

.kctp-firma .kctp-firma-control {
    order: -1;                           /* en telefono, pegado al boton */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0 0 28px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: var(--kctp-r-campo);
    background: transparent;
    color: #fff;
    font-size: var(--paso-3);            /* 15 */
    font-weight: var(--kctp-peso-medio);
    line-height: 1.3;
    letter-spacing: -.006em;
    text-align: center;
    text-decoration: none;
    /* A 320px la etiqueta no siempre cabe en una linea. Con balance parte donde
       tiene sentido en vez de dejar una palabra sola en la segunda linea. */
    text-wrap: balance;
    transition: background-color var(--kctp-mov-hover), border-color var(--kctp-mov-hover);
}
.kctp-firma .kctp-firma-control:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* LA PLACA. El aviso de urgencias no es lo que el panel dice: es lo que la
   plataforma esta obligada a declarar. Por eso va detras de un filete, al pie
   y en el cuerpo menor -pero ENTERO y verbatim, y una sola vez en la pantalla:
   hoy en la puerta de la paciente esta frase aparece dos veces, y la segunda
   copia repite ademas la linea de prueba del panel-.
   Sube de los 13px de produccion, donde pasaba el 4,5:1 con un 4% de margen. */
.kctp-firma .kctp-firma-legal {
    width: 100%;
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .20);
    max-width: 56ch;
    font-size: var(--paso-3);            /* 15 */
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}
.kctp-firma .kctp-firma-legal strong {
    color: #fff;
    font-weight: var(--kctp-peso-medio);
}


/* ==========================================================================
   9. DESDE 960px: LAS DOS COLUMNAS

   Entra en el mismo punto que el chasis (kctp.css:2252) para no pelear con el.
   Por debajo de 960 la pantalla apilada de arriba sigue siendo la buena: en una
   tableta en vertical, una fotografia a sangre de media pantalla con el titular
   encima obliga a los mismos velos espesos que aqui se acaban de quitar.

   LA DIRECCION DEL SPLIT NO ESTA AQUI. Es lo unico estructural que se
   bifurca -imagen a la derecha en el personal, a la izquierda en la paciente-
   y por eso vive en el modificador, no en el cuerpo comun. Ver el bloque 12.
   ========================================================================== */

@media (min-width: 960px) {

    /* Juego de escritorio: aqui no hay pliegue que pelear, hay composicion. */
    .kctp-acceso.kctp-firma {
        --f1-aire: 16px;
        --f1-aire-btn: 24px;
        --f1-campo: 56px;
        --f1-btn: 64px;

        /* minmax(min-content, 1fr) Y NO minmax(0, 1fr), y esto lo encontro la
           pantalla de ocho campos.

           EL DEFECTO: con el minimo en 0 la fila nunca crece por encima del
           alto de la ventana, asi que un formulario mas alto que la ventana se
           SALE de su celda: en "crear tu cuenta" a 1440x900 la columna medida
           pide 1.322px, la fila se quedaba en 900 y el formulario desbordaba
           hacia abajo sobre el blanco del documento mientras el panel de la
           izquierda se quedaba en 900 -o sea la fotografia terminaba a media
           pagina y debajo quedaba una franja blanca-.
           Con el minimo en min-content la fila crece hasta lo que pide la
           columna y el panel crece con ella: la fotografia llega al pie y el
           dicho, que va alineado al final, sigue apoyado en el borde inferior.

           NO MUEVE LA PUERTA DEL PERSONAL. Ahi la columna mide 731px contra
           una ventana de 900, o sea el 1fr sigue mandando y la fila sigue
           midiendo 900px exactos. Verificado: pac2_personal.html sigue
           dando la misma caja que f1.html en los 41 elementos. Y de paso le
           quita el mismo desbordamiento latente a las ventanas muy bajas. */
        grid-template-rows: minmax(min-content, 1fr);

        /* LA RED DE LA REJILLA (arreglo 6). Hasta esta vuelta las dos columnas
           de escritorio SOLO existian dentro de los dos modificadores: si al
           portar se olvidaba la clase en el <div>, la pantalla se caia a la
           columna unica del telefono en un monitor de 1440 y nadie se enteraba
           hasta que un medico lo veia. Aqui la puerta declara dos columnas por
           omision, con el reparto del personal -que es el que sale de la
           colocacion automatica, porque el <main> es el primer hijo del arbol-.
           NO ES UN LADO POR DEFECTO Y OTRO EXCEPCION: los dos modificadores
           siguen declarando su direccion, y como valen (0,3,0) contra el
           (0,2,0) de aqui, los dos le ganan siempre. Esta cifra no se aplica
           nunca en las dos puertas reales; solo salva a la que llegue sin
           clase. Comprobado: cero diferencias contra f1.html. */
        grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    }

    /* EL PANEL VUELVE A SER UNA CAJA. Dos capas y no cuatro: la fotografia
       detras (z-index 1) y el dicho -que trae su propio fundido de fondo-
       encima (z-index 3). El apilado se declara, no se hereda del orden de
       pintado: en el panel de produccion el ::after comparte z-index con los
       hijos, gana por ser el ultimo en pintarse y el velo se dibuja ENCIMA del
       titular. */
    .kctp-firma .kctp-firma-panel {
        display: grid;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        align-content: end;
        background-color: var(--kctp-tinto);
        /* Sin relleno: el relleno lo lleva el dicho, para que su fundido llegue
           de canto a canto del panel. */
        padding: 0;

        /* EL VELO SE DECLARA AQUI, EN EL PADRE, y no dentro del elemento que lo
           usa: una variable declarada dentro de un ::after solo existe dentro
           de ese ::after, y esa es la causa exacta del defecto que hoy deja al
           telefono del personal con los velos de escritorio. */
        --velo-alto:  104px;   /* cuanto sube el fundido por encima del titular */
        --velo-medio: .58;     /* opacidad justo bajo la primera linea */
        --velo-pie:   .74;     /* al fondo, donde va la placa legal */
    }

    .kctp-firma .kctp-firma-marco {
        position: absolute;
        inset: 0;
        height: auto;
        z-index: 1;
    }

    /* EL VELO ES UNA RED DECLARADA, NO UN AJUSTE AL RECORTE.

       Las dos fotografias de esta sesion traen su propio negro abajo, y sin
       nada encima el titular ya cumple. Pero el margen se movia del doble
       entre ventanas -12,07:1 a 1440x900 y 5,39:1 a 1024x768- porque el bloque
       de texto, mas alto en un panel estrecho, sube por encima del tercio
       negro y aterriza sobre la parte iluminada. O sea: el cumplimiento
       dependia del recorte.

       Aqui el velo se dimensiona por el PEOR CASO POSIBLE, que no depende de
       ninguna foto: un pixel blanco puro detras de cada texto.
         titular  #fff sobre alpha .58 de tinto sobre blanco puro = 4,75:1 (pide 3)
         prueba   .92 de blanco sobre alpha ~.63                  = 5,07:1 (pide 4,5)
         placa    .82 de blanco sobre alpha .74                   = 6,34:1 (pide 4,5)
       Con las fotografias reales los numeros son mucho mejores, y estan
       medidos en el informe. Lo que importa es que el minimo esta declarado en
       la hoja: si manana entra otra foto, o se cambia el encuadre, el suelo
       sigue ahi. Y por eso mismo el velo es COMUN a las dos puertas: es una red
       de seguridad, no un retoque de una foto.

       Y VA ANCLADO AL TEXTO, NO AL PANEL. Un degradado con paradas en
       porcentaje del panel se descalibra al cambiar el alto de la ventana.
       Poniendo el fundido en el propio bloque con 104px de relleno superior, la
       rampa nace SIEMPRE 104px por encima de la primera linea, mida lo que mida
       la ventana. */
    .kctp-firma .kctp-firma-dicho {
        position: relative;
        z-index: 3;
        order: 0;
        max-width: none;
        padding: var(--velo-alto) clamp(32px, 4vw, 56px) clamp(40px, 6vh, 64px);
        background-color: transparent;
        background-image: linear-gradient(180deg,
            rgba(38, 5, 20, 0) 0,
            rgba(38, 5, 20, var(--velo-medio)) var(--velo-alto),
            rgba(38, 5, 20, var(--velo-pie)) 100%);
    }
    /* La medida de lectura vive en los parrafos, no en la caja: la caja tiene
       que llegar a los dos cantos para que el fundido no tenga bordes. */
    .kctp-firma .kctp-firma-dicho > * { max-width: 34rem; }

    /* En escritorio el control esta en su sitio del arbol en las dos puertas:
       despues de lo que el panel dice y antes de la placa legal. Es el remate
       del bloque, igual que en la vara. */
    .kctp-firma .kctp-firma-cambio  { order: 0; margin: 28px 0 10px; }
    .kctp-firma .kctp-firma-control { order: 0; margin: 0; }
    .kctp-firma .kctp-firma-legal   { margin-top: 28px; }

    .kctp-firma .kctp-firma-tarea { padding: 64px clamp(32px, 4vw, 56px); }
    .kctp-firma .kctp-firma-logo { height: 34px; margin-bottom: 48px; }
    .kctp-firma .kctp-firma-titulo { margin-bottom: 8px; }
    .kctp-firma .kctp-firma-sub { margin-bottom: 32px; }
    .kctp-firma .kctp-firma-error { margin-bottom: 32px; padding: 14px 16px; }
}

/* La misma red, en el punto donde el panel se congela. */
@media (min-width: 1200px) {
    .kctp-acceso.kctp-firma { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); }
}

/* ==========================================================================
   9b. EL PANEL SE QUEDA EN LA VENTANA CUANDO EL FORMULARIO NO CABE (arreglo 2)

   EL DEFECTO, medido en "crear tu cuenta" a 1440x900: los ocho campos piden
   1.321,6px de columna, la fila crece con ellos (es el minmax(min-content, 1fr)
   de arriba) y el panel crece tambien, asi que el dicho -que va alineado al
   final- se va al pie del DOCUMENTO. Resultado: el titular arrancaba en y=816,9
   y terminaba en y=947,4 sobre una ventana de 900. La segunda linea, «KARA de
   tu lado.», salia cortada por el borde en el portatil mas comun. Un titular
   partido por el pliegue es peor que un titular que no se ve.

   EL ARREGLO: cuando el formulario es mas alto que la ventana, el panel deja de
   ser una columna de la altura del documento y pasa a ser una LAMINA DEL ALTO DE
   LA VENTANA que el formulario recorre por al lado. El dicho queda apoyado en el
   borde inferior de la ventana, no del documento, asi que el titular entra
   entero -mismas coordenadas que en la pantalla de entrar- y sigue entero
   mientras se baja.
   La fotografia va en position:absolute inset:0 dentro del panel, o sea cubre
   exactamente la lamina: como la lamina viaja pegada al borde superior de la
   ventana, NUNCA aparece la franja blanca debajo de la foto que se veria con un
   simple max-height.

   CORREGIDO: LA REGLA SE ATA AL LADO, NO AL ALTO.
   Aqui decia `@media (min-width: 960px) and (min-height: 660px)`, y ese candado
   por altura protegia a la puerta del personal a costa de volver a romper la de
   la paciente justo debajo: a 1366x659 el titular del registro caia en 686->817
   sobre una ventana de 659 -fuera del pliegue, con la primera pantalla en vino
   vacio- y a 1024x600 salia PARTIDO por el borde, que es el defecto exacto que
   esta vuelta vino a eliminar. Y la franja rota no era rara: un portatil de
   1366x768 con Chrome y la barra de tareas deja entre 630 y 660px de ventana,
   que es la maquina mas comun donde esto se va a usar.

   Atada al modificador de la paciente, el selector no puede alcanzar a la
   puerta del personal por construccion -no hace falta razonar sobre alturas- y
   la paciente conserva el titular entero en toda ventana. Es mas fuerte que el
   argumento anterior, que ademas se apoyaba en un numero mal leido: los "659px
   que pide la columna del personal" eran el ALTO DE LA VENTANA donde se midio,
   no lo que la columna necesita (631,6 comprimida y 711,6 sin comprimir).
   Comprobado elemento por elemento en 960, 1024, 1200, 1440 y 1920 de ancho.
   ========================================================================== */

@media (min-width: 960px) {
    .kctp-firma--paciente .kctp-firma-panel {
        position: sticky;
        top: 0;
        height: 100svh;
    }
}

/* ALTO, NO ANCHO. Un portatil de 1440x800 tiene el mismo ancho que uno de
   1440x900 y 100px menos de alto: es el alto el que decide si la columna cabe
   sin barra de desplazamiento. Se aprietan solo los huecos, nunca los tamanos
   de letra ni las areas tactiles. */
@media (min-width: 960px) and (max-height: 820px) {
    .kctp-firma .kctp-firma-tarea { padding-block: 40px; }
    .kctp-firma .kctp-firma-logo { margin-bottom: 32px; }
    .kctp-firma .kctp-firma-sub { margin-bottom: 24px; }
    .kctp-firma .kctp-firma-error { margin-bottom: 24px; }
    .kctp-firma .kctp-firma-prueba { margin-top: 16px; }
    .kctp-firma .kctp-firma-control { margin-top: 20px; }
    .kctp-firma .kctp-firma-legal { margin-top: 20px; padding-top: 16px; }
}

/* El formulario de ocho campos es el unico que puede pasarse de alto en un
   portatil bajo, porque tiene tres grupos y dos parejas mas que el de entrar.
   Se aprietan los mismos huecos y por el mismo criterio: nada de tamanos. */
@media (min-width: 960px) and (max-height: 820px) {
    .kctp-firma .kctp-firma-form .kctp-entrada-grupo + .kctp-entrada-grupo {
        margin-top: var(--f1-aire);
        padding-top: var(--f1-aire);
    }
}


/* ==========================================================================
   10. MOVIMIENTO: NO HAY ANIMACION DE ENTRADA, Y ESO ES UNA DECISION

   Se intentaron las dos salidas -atar la animacion a una clase que ponga el
   guion, o quitarla- y solo una sobrevive a la medicion.

   ATARLA A UNA CLASE NO ALCANZA. Se construyo asi -clase puesta por el guion
   solo con el documento visible, y quitada al esconderse la pestana, al
   terminar la animacion o a los 1.200ms por temporizador- y se probo en el
   navegador: cuando la pestana se esconde despues de arrancar, el motor no
   congela solo la animacion, congela TAMBIEN los temporizadores y los eventos.
   Medido: opacity 0,0103 tres segundos despues, con la clase todavia puesta y
   ningun rescate ejecutandose. Ninguna red escrita en JS puede salvar una
   pantalla cuyo JS esta congelado.

   Asi que la puerta de un sistema clinico no arranca en opacity 0. Nunca. El
   movimiento que queda es el que responde a un dedo -relleno del campo, borde,
   fondo del boton y del control-, que no puede dejar nada invisible porque
   parte del estado visible.
   La fotografia tampoco se mueve: una foto que respira se lee como carrusel.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kctp-firma .kctp-firma-campo input,
    .kctp-firma .kctp-firma-campo .kctp-tel,
    .kctp-firma .kctp-firma-ver,
    .kctp-firma .kctp-firma-salidas a,
    .kctp-firma .kctp-firma-control,
    body .kctp-firma .kctp-firma-btn { transition-duration: 0s; }
}


/* ==========================================================================
   11. ALTO CONTRASTE FORZADO

   El sistema no tiene un solo bloque de forced-colors, y en esta pantalla el
   canto del campo, el ojo, el filete de oro, el borde del control y el anillo
   de foco dependen todos de colores que ese modo sustituye. La fotografia y su
   velo se apagan: en modo forzado un panel de imagen con texto encima es texto
   sobre nada.
   ========================================================================== */

@media (forced-colors: active) {
    .kctp-firma :focus-visible,
    .kctp-firma .kctp-firma-campo .kctp-tel:focus-within,
    .kctp-firma .kctp-firma-dicho .kctp-firma-control:focus-visible { outline-color: Highlight; }
    .kctp-firma .kctp-firma-campo input,
    .kctp-firma .kctp-firma-campo .kctp-tel { border-color: CanvasText; }
    .kctp-firma .kctp-tel-pais { border-right-color: CanvasText; }
    .kctp-firma .kctp-firma-error { border-left-color: CanvasText; }
    .kctp-firma .kctp-entrada-grupo + .kctp-entrada-grupo { border-top-color: CanvasText; }
    .kctp-firma .kctp-firma-prueba::before { background: CanvasText; }
    body .kctp-firma .kctp-firma-btn { border: 1px solid ButtonText; }
    .kctp-firma .kctp-firma-marco { display: none; }
    /* `background` y no `background-color`: el atajo borra tambien el fundido,
       que es una imagen y por eso el modo forzado no lo sustituye solo. */
    .kctp-firma .kctp-firma-panel,
    .kctp-firma .kctp-firma-dicho { background: Canvas; }
    .kctp-firma .kctp-firma-hero,
    .kctp-firma .kctp-firma-prueba,
    .kctp-firma .kctp-firma-legal,
    .kctp-firma .kctp-firma-legal strong { color: CanvasText; }
    .kctp-firma .kctp-firma-control,
    .kctp-firma .kctp-firma-salidas a {
        color: LinkText;
        border-color: LinkText;
    }
    .kctp-firma .kctp-firma-legal { border-top-color: CanvasText; }
}


/* ==========================================================================
   12. LOS DOS MODIFICADORES DE LADO

   Aqui termina la hoja y aqui esta TODO lo que se bifurca. Si esta seccion
   creciera, la simetria que Paul decidio seria falsa.

   La cuenta, contada: el modificador del personal son 5 declaraciones; el de
   la paciente, 11. El cuerpo comun tiene 394. Ni una de las dos toca un campo,
   un boton, una esquina, un tamano de letra ni un hueco del ritmo. Lo que
   cambian es la direccion del split, la colocacion en la rejilla, el encuadre
   de su propia fotografia, el punto de corte de su propio titular y -solo la
   paciente, y solo en telefono- el orden de dos piezas del panel.

   LOS DOS DECLARAN, Y ADEMAS HAY RED (arreglo 6). La vuelta anterior dejo las
   dos columnas de escritorio viviendo SOLO aqui, y con eso una pagina portada
   sin la clase se caia a una sola columna en un monitor de 1440 sin que
   saltara nada. Ahora el bloque 9 declara dos columnas por omision -con el
   reparto que sale de la colocacion automatica, o sea el del personal- y el
   bloque 8 le pone respaldo a la medida del titular.
   Eso NO convierte al personal en "el lado por defecto" y a la paciente en "la
   excepcion", que es la forma que tenia el problema que esta vuelta cierra: los
   dos siguen declarando su direccion aqui, los dos selectores valen (0,3,0)
   contra el (0,2,0) de la red, y por eso en las dos puertas reales la red no se
   aplica jamas. Es un piso para la pagina que llegue sin clase, no un lado.
   Elegido asi -y no "que sin modificador se vea aceptable en una columna"-
   porque una puerta de escritorio en una columna unica no es un fallo suave: es
   la pantalla del telefono estirada a 1440px, y eso se ve barato antes de que
   nadie lea una palabra, que es justo lo que la regla 9 del contrato prohibe.
   ========================================================================== */

/* --- EL PERSONAL -------------------------------------------------------

   EL ORDEN DE ESTAS REGLAS IMPORTA, y esto tambien salio de medir. Los dos
   encuadres -telefono y escritorio- empatan en especificidad (0,2,0), asi que
   el de escritorio tiene que ir DESPUES para ganar dentro de su media query.
   Con el orden al reves el escritorio se quedaba con el encuadre del telefono
   (50% 46% sobre la foto vertical) y la puerta del personal cambiaba de
   composicion. Por eso primero va el telefono, como en toda la hoja.
   -------------------------------------------------------------------------- */

/* 46% en vertical centra la ventana del recorte apaisado (750x517) en la mano
   que escribe y el papel, que es donde esta el sujeto de esta foto. */
.kctp-firma--personal .kctp-firma-foto { object-position: 50% 46%; }
/* "Nada sale sin tu firma." parte en dos lineas llenas a 13ch. Solo actua en
   telefono: en escritorio gana el 34rem del bloque 9. Ver el bloque 8. */
.kctp-acceso.kctp-firma--personal { --f1-hero-medida: 13ch; }

/* 800 de trabajo / 640 de fotografia sobre 1440 = 55,6% / 44,4%. Hoy la
   pantalla de la paciente reparte 770/670 al reves: 53,5% para la mitad donde
   no hay ninguna tarea. La colocacion es la automatica -la columna de trabajo
   es el primer hijo del arbol y cae en la primera pista-, asi que no hace
   falta declararla. */
@media (min-width: 960px) {
    .kctp-acceso.kctp-firma.kctp-firma--personal {
        grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    }
    /* Encuadre centrado: cubriendo 640x900 desde una fuente de 1280x1920 solo
       se recortan 60px de alto, o sea se ve el 97% del cuadro. Esta fotografia
       ya trae su propia composicion -la figura arriba, el negro abajo- asi que
       no hace falta ningun zoom con posicionamiento absoluto. */
    .kctp-firma--personal .kctp-firma-foto { object-position: 50% 50%; }
}
/* A partir de 1200 el panel se congela en 640px y todo lo que sobra se lo lleva
   la columna de trabajo. */
@media (min-width: 1200px) {
    .kctp-acceso.kctp-firma.kctp-firma--personal {
        grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    }
}


/* --- LA PACIENTE ------------------------------------------------------- */

/* 52% en el recorte apaisado (750x585): centra la franja en las manos y el
   papel, que estan un poco por debajo del centro del cuadro. */
.kctp-firma--paciente .kctp-firma-foto { object-position: 50% 52%; }
/* "Tu piel, con KARA de tu lado." es seis palabras y una es la marca: a 13ch
   parte en tres lineas y deja "lado." solo en la tercera. Ver el bloque 8: en
   escritorio manda el 34rem, o sea esta cifra decide el telefono. */
.kctp-acceso.kctp-firma--paciente { --f1-hero-medida: 15ch; }

/* MISMAS MEDIDAS, ESPEJADAS: 640 de fotografia / 800 de trabajo. La decision
   de Paul es que la foto vaya a la izquierda en esta puerta, y asi cada mitad
   del producto tiene su propia orientacion y las dos se leen como una pareja
   hecha a proposito.
   LA COLOCACION SE DECLARA Y EL ARBOL NO SE TOCA. El <main> sigue siendo el
   primer hijo, o sea el tabulador y el lector de pantalla siguen llegando
   primero a la tarea y despues al panel, igual que en la puerta del personal.
   Invertir el arbol para invertir la pantalla habria puesto un panel
   complementario delante del formulario en el orden de lectura.
   Y va dentro de la media query a proposito: un grid-column: 2 sobre la
   rejilla de una sola pista del telefono crearia una segunda columna implicita
   y dejaria la primera vacia.

   LA FILA SE DECLARA JUNTO CON LA COLUMNA, y esto costo una medicion. Con solo
   la columna puesta, la rejilla resolvia dos filas de 786,6 y 608,55px: el
   panel se iba a una SEGUNDA fila debajo del formulario, la columna 1 de la
   primera fila quedaba en blanco y la pagina crecia a 1.395px de alto con
   barra de desplazamiento. La causa es la colocacion automatica: el <main>
   ocupa (fila 1, columna 2), el cursor de la rejilla queda pasada la columna 1
   de esa fila, y el empaquetado "sparse" que trae CSS por defecto no vuelve
   atras a rellenar el hueco. Con la fila explicita en los dos, los dos caen en
   la unica fila que hay. */
@media (min-width: 960px) {
    .kctp-acceso.kctp-firma.kctp-firma--paciente {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    }
    .kctp-firma--paciente .kctp-firma-panel { grid-area: 1 / 1; }
    .kctp-firma--paciente .kctp-firma-tarea { grid-area: 1 / 2; }
    /* 42% y no 50%: el sujeto de esta foto -las dos manos y el plan impreso-
       vive en la mitad de arriba del cuadro, y el tercio de abajo es casi
       negro. Subiendo la ventana un 8% el sujeto queda por encima del arranque
       del velo y el negro queda justo detras del texto, que es donde sirve. */
    .kctp-firma--paciente .kctp-firma-foto { object-position: 50% 42%; }
}
@media (min-width: 1200px) {
    .kctp-acceso.kctp-firma.kctp-firma--paciente {
        grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    }
}

/* EL CONTROL DEL PANEL NO SE ADELANTA EN TELEFONO. Ver el bloque 8: en la
   puerta del personal se adelanta porque quien se equivoca de puerta alli es
   una paciente con un telefono en la mano; aqui quien se equivoca es del
   equipo clinico y entra por un escritorio, y el sitio pegado al boton ya lo
   ocupan las dos salidas verdaderas de la primeriza.
   Va dentro de max-width para no pisar las reglas de escritorio del bloque 9,
   que valen (0,2,0) y perderian contra un (0,3,0) sin condicion. */
@media (max-width: 959.98px) {
    .kctp-firma--paciente .kctp-firma-cambio  { order: 0; margin: 28px 0 10px; }
    .kctp-firma--paciente .kctp-firma-control { order: 0; margin: 0; }
}


/* ==========================================================================
   13. EL PASO 2: LA MISMA LETRA, PERO YA DENTRO  (.kctp-firma--dentro)

   AGREGADO EN LA VUELTA DE LOS DOS TIEMPOS, para propuesta/pac2_ficha.html.

   NO ES UNA TERCERA PUERTA, Y POR ESO NO ES UN TERCER LADO. Los dos
   modificadores del bloque 12 reparten una pantalla PARTIDA en dos: fotografia
   de campana y formulario. Este no reparte nada, porque cuando la paciente
   llega aqui ya paso por la puerta: PortalController::registro() llama a
   AuthPaciente::attempt y la manda a portal/consentimientos, o sea que el paso
   2 ocurre con la sesion abierta y despues de las autorizaciones.
   Vestirlo de puerta seria mentirle sobre donde esta, y ademas el panel ofrece
   -por diseno de la puerta- el acceso del equipo clinico: invitar a una
   paciente que acaba de entrar a irse al panel del personal es un control que
   no puede llevar a ningun lado.

   QUE CONSERVA: TODO EL VOCABULARIO. Cuelga de .kctp-firma, asi que hereda el
   anillo de foco del bloque 1, el juego de medidas por alto de pantalla del
   bloque 2 -campo de 56px y boton de 64 en escritorio, 52 y 60 en telefono-,
   la tipografia de la tarea del bloque 4, los cuatro estados del campo del
   bloque 6, la ayuda y el error del 6c, el boton del 7 y las salidas del 7b.
   Ni una medida nueva, ni un tamano de letra nuevo, ni un radio nuevo.

   QUE APAGA: la rejilla de dos columnas y las tres filas del telefono, que sin
   <aside> no tienen a quien repartir. Basta una declaracion, y va FUERA de toda
   media query a proposito: con (0,3,0) le gana igual al (0,2,0) del bloque 2 y
   al del bloque 9 -la especificidad no cambia por estar dentro de un @media-,
   asi que una regla sustituye a dos y no queda ningun ancho sin cubrir.

   NO ROZA NI LA PUERTA DEL PERSONAL NI LA DE LA PACIENTE: es una clase nueva
   que ninguna de las cinco pantallas anteriores lleva puesta.
   ========================================================================== */

.kctp-acceso.kctp-firma.kctp-firma--dentro {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}