/* visual.css - Las preguntas que se contestan mirando.
 *
 * Acompana a views/portal/_respuestas_visuales.php. Va en su propia hoja, como
 * el resto de v2, para que ninguna pieza pise a otra.
 *
 * Cuelga de DOS envoltorios: `.kctp-cuest` (el alta y el cuestionario) y
 * `.kctp-cita` (pedir una videoconsulta). Son formularios distintos pero las
 * piezas son las mismas -- fichas, escalas, opciones con icono -- y duplicar
 * la hoja para el segundo garantizaria que un dia se vean distinto.
 *
 * REGLAS QUE SE RESPETAN AQUI
 * - El color elegido sale SIEMPRE de las variables de marca. Ni un hex suelto,
 *   salvo los seis tonos de piel, que son datos clinicos y no decoracion.
 * - Solo se animan transform y opacity, y todo se apaga si el sistema pide
 *   menos movimiento.
 * - En pantalla tactil ningun blanco de toque baja de 48px.
 * - El estado se pinta con :checked, no con clases que ponga un script: si el
 *   JavaScript no corre, la pantalla se sigue viendo y contestando bien.
 */

/* --- Piezas comunes ------------------------------------------------------ */

:is(.kctp-cuest, .kctp-cita) .kctp-tonos input,
:is(.kctp-cuest, .kctp-cita) .kctp-pieltipo input,
:is(.kctp-cuest, .kctp-cita) .kctp-sintomas input,
:is(.kctp-cuest, .kctp-cita) .kctp-escala input,
:is(.kctp-cuest, .kctp-cita) .kctp-cara-chips input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* El anillo de foco se dibuja sobre la ficha, porque la casilla real esta
   escondida. Sin esto, quien navega con teclado no ve donde esta parado. */
:is(.kctp-cuest, .kctp-cita) .kctp-tono:has(input:focus-visible),
:is(.kctp-cuest, .kctp-cita) .kctp-pt:has(input:focus-visible),
:is(.kctp-cuest, .kctp-cita) .kctp-sintoma:has(input:focus-visible),
:is(.kctp-cuest, .kctp-cita) .kctp-tramo:has(input:focus-visible),
:is(.kctp-cuest, .kctp-cita) .kctp-chip:has(input:focus-visible) {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 2px;
}

/* --- El tono de piel (Fitzpatrick) --------------------------------------- */

:is(.kctp-cuest, .kctp-cita) .kctp-tonos {
    display: grid;
    gap: 8px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-tono {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1.5px solid var(--kctp-borde);
    border-radius: 14px;
    background: var(--kctp-blanco);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease;
}

:is(.kctp-cuest, .kctp-cita) .kctp-tono:hover { transform: translateY(-1px); }
:is(.kctp-cuest, .kctp-cita) .kctp-tono:active { transform: translateY(0) scale(.995); }

:is(.kctp-cuest, .kctp-cita) .kctp-tono:has(input:checked) {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
}

/* La muestra de color. Lleva un borde interior tenue para que el tono I, que
   es casi blanco, no desaparezca sobre el fondo de la tarjeta. */
:is(.kctp-cuest, .kctp-cita) .kctp-tono-muestra {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--tono);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12),
                0 1px 3px rgb(38 5 20 / .16);
}

:is(.kctp-cuest, .kctp-cita) .kctp-tono-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--kctp-tinta);
}

:is(.kctp-cuest, .kctp-cita) .kctp-tono-txt b {
    font-size: .74rem;
    letter-spacing: .1em;
    color: var(--kctp-tenue);
}

:is(.kctp-cuest, .kctp-cita) .kctp-marca {
    opacity: 0;
    transform: scale(.6);
    color: var(--kctp-acento);
    font-size: 1.15rem;
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, 1.5, .4, 1);
}

:is(.kctp-cuest, .kctp-cita) .kctp-tono:has(input:checked) .kctp-marca {
    opacity: 1;
    transform: scale(1);
}

/* --- El mapa del rostro --------------------------------------------------- */

:is(.kctp-cuest, .kctp-cita) .kctp-cara {
    display: grid;
    justify-items: center;
    gap: 14px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-cara-svg {
    width: 168px;
    height: auto;
    overflow: visible;
}

/* El relleno de la cara es UNA pieza. Las zonas nacen transparentes encima y
   solo se pinta la elegida: si cada zona trajera su propio relleno, los bordes
   donde se solapan se verian como parches y la cara quedaria manchada. */
:is(.kctp-cuest, .kctp-cita) .kctp-cara-base { fill: var(--kctp-panel); }

:is(.kctp-cuest, .kctp-cita) .kctp-z {
    fill: transparent;
    transition: fill .22s ease, fill-opacity .22s ease;
}

:is(.kctp-cuest, .kctp-cita) .kctp-cara-borde {
    fill: none;
    stroke: var(--kctp-acento);
    stroke-width: 2.2;
    opacity: .5;
}

:is(.kctp-cuest, .kctp-cita) .kctp-cara-rasgo {
    fill: none;
    stroke: var(--kctp-acento);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .38;
}

/* Cada zona se enciende mirando su propia casilla. Value-based y no por id: si
   manana el formulario agrega una zona, basta anadir su regla aqui. */
:is(.kctp-cuest, .kctp-cita) .kctp-cara:has(input[value="frente"]:checked)           .z-frente,
:is(.kctp-cuest, .kctp-cita) .kctp-cara:has(input[value="contorno_ojos"]:checked)    .z-ojos,
:is(.kctp-cuest, .kctp-cita) .kctp-cara:has(input[value="nariz"]:checked)            .z-nariz,
:is(.kctp-cuest, .kctp-cita) .kctp-cara:has(input[value="mejillas"]:checked)         .z-mejillas,
:is(.kctp-cuest, .kctp-cita) .kctp-cara:has(input[value="menton_mandibula"]:checked) .z-menton,
:is(.kctp-cuest, .kctp-cita) .kctp-cara:has(input[value="cuello"]:checked)           .z-cuello,
:is(.kctp-cuest, .kctp-cita) .kctp-cara:has(input[value="rostro_completo"]:checked)  .kctp-z:not(.z-cuello) {
    fill: var(--kctp-acento-cl);
    /* Translucido a proposito: la zona se ve elegida sin tapar las cejas, la
       nariz y la boca, que son lo que hace que el dibujo se lea como una cara. */
    fill-opacity: .58;
}

:is(.kctp-cuest, .kctp-cita) .kctp-cara-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-chip,
:is(.kctp-cuest, .kctp-cita) .kctp-sintoma {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 15px;
    border: 1.5px solid var(--kctp-borde);
    border-radius: 999px;
    background: var(--kctp-blanco);
    font-size: .88rem;
    color: var(--kctp-tinta);
    cursor: pointer;
    transition: transform .16s cubic-bezier(.2, .8, .3, 1), border-color .16s ease;
}

:is(.kctp-cuest, .kctp-cita) .kctp-chip:hover,
:is(.kctp-cuest, .kctp-cita) .kctp-sintoma:hover { transform: translateY(-1px); }

:is(.kctp-cuest, .kctp-cita) .kctp-chip:has(input:checked),
:is(.kctp-cuest, .kctp-cita) .kctp-sintoma:has(input:checked) {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
}

/* El palomito de la ficha ocupa su sitio desde el principio, para que marcar
   una zona no empuje a las de al lado. */
:is(.kctp-cuest, .kctp-cita) .kctp-chip > .bi-check-lg {
    width: 0;
    opacity: 0;
    transform: scale(.5);
    transition: width .16s ease, opacity .16s ease, transform .16s cubic-bezier(.2, 1.5, .4, 1);
}

:is(.kctp-cuest, .kctp-cita) .kctp-chip:has(input:checked) > .bi-check-lg {
    width: 1em;
    opacity: 1;
    transform: scale(1);
}

:is(.kctp-cuest, .kctp-cita) .kctp-cara-pie {
    margin: 0;
    font-size: .84rem;
    color: var(--kctp-tenue);
    text-align: center;
}

/* --- Los sintomas --------------------------------------------------------- */

:is(.kctp-cuest, .kctp-cita) .kctp-sintomas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-sintoma i { color: var(--kctp-tenue-2); }
:is(.kctp-cuest, .kctp-cita) .kctp-sintoma:has(input:checked) i { color: var(--kctp-acento); }

/* --- El tipo de piel ------------------------------------------------------ */

:is(.kctp-cuest, .kctp-cita) .kctp-pieltipo {
    display: grid;
    gap: 8px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-pt {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 11px 14px;
    border: 1.5px solid var(--kctp-borde);
    border-radius: 14px;
    background: var(--kctp-blanco);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease;
}

:is(.kctp-cuest, .kctp-cita) .kctp-pt:hover { transform: translateY(-1px); }

:is(.kctp-cuest, .kctp-cita) .kctp-pt:has(input:checked) {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
}

/* La muestra no es un icono: es la textura de la que habla la opcion. Grasa
   brilla, seca se cuartea, mixta se parte en dos, sensible se enrojece. */
:is(.kctp-cuest, .kctp-cita) .kctp-pt-muestra {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--kctp-nude);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}

:is(.kctp-cuest, .kctp-cita) .pt-normal   .kctp-pt-muestra { background: var(--kctp-nude); }
:is(.kctp-cuest, .kctp-cita) .pt-seca     .kctp-pt-muestra {
    background:
        repeating-linear-gradient(58deg, rgb(38 5 20 / .16) 0 1px, transparent 1px 6px),
        #e0d3c6;
}
:is(.kctp-cuest, .kctp-cita) .pt-grasa    .kctp-pt-muestra {
    background: radial-gradient(circle at 32% 28%, #fff 0 22%, transparent 55%), #d3bfa9;
}
:is(.kctp-cuest, .kctp-cita) .pt-mixta    .kctp-pt-muestra {
    background: linear-gradient(101deg, #d3bfa9 0 50%, #e2d6c9 50% 100%);
}
:is(.kctp-cuest, .kctp-cita) .pt-sensible .kctp-pt-muestra {
    background: radial-gradient(circle at 50% 58%, #e2a294 0 34%, transparent 62%), #ddccc0;
}

:is(.kctp-cuest, .kctp-cita) .kctp-pt-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

:is(.kctp-cuest, .kctp-cita) .kctp-pt-txt b {
    font-size: .96rem;
    color: var(--kctp-tinta);
}

:is(.kctp-cuest, .kctp-cita) .kctp-pt-txt small {
    font-size: .82rem;
    line-height: 1.35;
    color: var(--kctp-tenue);
}

/* --- Escalas ordenadas ---------------------------------------------------- */

:is(.kctp-cuest, .kctp-cita) .kctp-escala {
    display: grid;
    grid-template-columns: repeat(var(--tramos), 1fr);
    gap: 6px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-tramo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-height: 76px;
    padding: 11px 5px;
    border: 1.5px solid var(--kctp-borde);
    border-radius: 12px;
    background: var(--kctp-blanco);
    text-align: center;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease;
}

:is(.kctp-cuest, .kctp-cita) .kctp-tramo:hover { transform: translateY(-2px); }

:is(.kctp-cuest, .kctp-cita) .kctp-tramo:has(input:checked) {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
}

/* La marca crece a lo largo de la escala: el primer tramo la trae chica y el
   ultimo grande, asi el orden se ve antes de leer una sola palabra. Va sin
   icono a proposito -- repetir el mismo dibujo en los cuatro tramos no aporta
   nada y el tamano ya cuenta la escala. */
:is(.kctp-cuest, .kctp-cita) .kctp-tramo-marca {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--kctp-panel);
    color: var(--kctp-tenue-2);
    transform: scale(calc(.5 + var(--paso) * .5));
    transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), color .18s ease, background-color .18s ease;
}

/* Cuando cada opcion trae SU icono no hay rampa que mostrar: el icono es la
   informacion, y achicarlo lo volveria ilegible. */
:is(.kctp-cuest, .kctp-cita) .kctp-escala-iconos .kctp-tramo-marca {
    transform: none;
    font-size: 1.02rem;
}

:is(.kctp-cuest, .kctp-cita) .kctp-tramo:has(input:checked) .kctp-tramo-marca {
    background: var(--kctp-acento);
    color: var(--kctp-blanco);
}

:is(.kctp-cuest, .kctp-cita) .kctp-tramo-txt {
    font-size: .78rem;
    line-height: 1.25;
    color: var(--kctp-tinta);
    text-wrap: balance;
}

/* Cuatro tramos o mas no caben de frente en un telefono angosto: se parten en
   dos filas antes que aplastar el texto hasta lo ilegible. Con tres tramos no
   se toca, porque caben y partirlos se ve peor. */
@media (max-width: 420px) {
    :is(.kctp-cuest, .kctp-cita) .kctp-escala-larga { grid-template-columns: repeat(2, 1fr); }
}

/* --- La portada de cada paso del alta ------------------------------------- */

/* Compacta a proposito. Con el dibujo grande la portada comia 90px y empujaba
   el boton "Siguiente" fuera de la pantalla: en un cuestionario de una pregunta
   por pantalla, tener que desplazarse para avanzar arruina justamente lo que se
   gano. Medido: el boton terminaba en 849px con la ventana en 844. */
:is(.kctp-cuest, .kctp-cita) .kctp-paso-portada {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 2px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-paso-dibujo {
    flex: 0 0 auto;
    width: 50px;
    line-height: 0;
}

:is(.kctp-cuest, .kctp-cita) .kctp-paso-dibujo svg { width: 100%; height: auto; }

:is(.kctp-cuest, .kctp-cita) .kctp-paso-aliento {
    min-width: 0;
    font-size: .85rem;
    line-height: 1.35;
    color: var(--kctp-tenue);
    text-wrap: balance;
}

/* La tarjeta entra desde abajo. Es lo unico que se anima en la pantalla, y
   dura poco: sirve para que se note que cambio el paso, no para lucirse. */
:is(.kctp-cuest, .kctp-cita) .kctp-entra {
    animation: kctpEntra .34s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes kctpEntra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --- Pedir cita: elegir entre tus consultas ------------------------------- */
/*
 * Antes esto era un <select>. En el telefono un desplegable nativo es una
 * ruedita que tapa media pantalla y obliga a leer los codigos de consulta de
 * uno en uno; aqui se ven todos a la vez, con su motivo debajo.
 */
:is(.kctp-cuest, .kctp-cita) .kctp-elige {
    display: grid;
    gap: 8px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-op {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    min-height: 58px;
    padding: 11px 14px;
    border: 1.5px solid var(--kctp-borde);
    border-radius: 14px;
    background: var(--kctp-blanco);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease;
}

:is(.kctp-cuest, .kctp-cita) .kctp-op input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

:is(.kctp-cuest, .kctp-cita) .kctp-op:hover { transform: translateY(-1px); }

:is(.kctp-cuest, .kctp-cita) .kctp-op:has(input:checked) {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
}

:is(.kctp-cuest, .kctp-cita) .kctp-op:has(input:focus-visible) {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 2px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-op-icono {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--kctp-panel);
    color: var(--kctp-tenue);
    font-size: 1.02rem;
    transition: background-color .18s ease, color .18s ease;
}

:is(.kctp-cuest, .kctp-cita) .kctp-op:has(input:checked) .kctp-op-icono {
    background: var(--kctp-acento);
    color: var(--kctp-blanco);
}

:is(.kctp-cuest, .kctp-cita) .kctp-op-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

:is(.kctp-cuest, .kctp-cita) .kctp-op-txt b {
    font-size: .94rem;
    color: var(--kctp-tinta);
}

/* El motivo de la consulta puede ser largo: se recorta a DOS lineas en vez de
   estirar la ficha hasta que dejen de verse juntas. En una sola linea se cortaba
   hasta un texto corto y fijo como "No es sobre una consulta concreta", que
   cabia de sobra en dos. */
:is(.kctp-cuest, .kctp-cita) .kctp-op-txt small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: .82rem;
    line-height: 1.3;
    color: var(--kctp-tenue);
}

:is(.kctp-cuest, .kctp-cita) .kctp-op .kctp-marca { font-size: 1.15rem; }

:is(.kctp-cuest, .kctp-cita) .kctp-op:has(input:checked) .kctp-marca {
    opacity: 1;
    transform: scale(1);
}

/* --- Pedir cita: arranques para el recuadro en blanco --------------------- */
/*
 * No son respuestas hechas: cada boton escribe el COMIENZO de la frase y deja
 * el cursor listo. Una lista de motivos enlatados le daria al profesional
 * cuatro solicitudes identicas que no dicen nada; esto solo quita el susto del
 * recuadro vacio, que es donde la gente abandona.
 */
:is(.kctp-cuest, .kctp-cita) .kctp-arranques {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-arranque {
    font-family: inherit;
    font-size: .84rem;
    min-height: 40px;
    padding: 7px 13px;
}

:is(.kctp-cuest, .kctp-cita) .kctp-arranque i { color: var(--kctp-tenue-2); }

:is(.kctp-cuest, .kctp-cita) .kctp-arranque:hover {
    border-color: var(--kctp-borde-f);
    color: var(--kctp-acento);
}

:is(.kctp-cuest, .kctp-cita) .kctp-arranque:hover i { color: var(--kctp-acento); }

/* El aviso de "escribe un poco mas" nace vacio y solo ocupa sitio cuando dice
   algo, para que la caja no salte al escribir la primera letra. */
:is(.kctp-cuest, .kctp-cita) .kctp-cuenta:empty { display: none; }

:is(.kctp-cuest, .kctp-cita) .kctp-cuenta {
    margin: 6px 0 0;
    color: var(--kctp-aviso);
}

@media (pointer: coarse) {
    :is(.kctp-cuest, .kctp-cita) .kctp-op { min-height: 64px; }
    :is(.kctp-cuest, .kctp-cita) .kctp-arranque { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.kctp-cuest, .kctp-cita) .kctp-op,
    :is(.kctp-cuest, .kctp-cita) .kctp-op-icono { transition: none; }
    :is(.kctp-cuest, .kctp-cita) .kctp-op:hover { transform: none; }
}

/* --- Sobre el boton de avanzar: lo que se probo y por que NO quedo ---------
 *
 * En un telefono de 844px el boton "Siguiente" cae 32-44px por debajo del borde
 * en las pantallas mas cargadas (el primer paso del alta y la primera del
 * cuestionario, que ademas llevan aviso de bienvenida). Se probo dejar la fila
 * pegada al fondo con position: sticky para que estuviera siempre a la vista.
 *
 * NO SE DEJO. La fila mide 138px porque lleva "Siguiente", "Atras" y "Seguir
 * despues", y pegada al fondo se dibujaba ENCIMA de las respuestas: medido en
 * un recorrido de 43 pantallas, tapaba el "Si"/"No" en varias, y en algunas ni
 * bajando del todo se despejaban. Cambiar medio gesto de desplazamiento por una
 * respuesta que no se puede tocar es un mal negocio.
 *
 * Lo que si se hizo fue achicar la portada del paso, que recupero ~28px. Si
 * algun dia se quiere volver a intentar, primero hay que acortar la fila (los
 * tres controles en una sola linea) y recien despues pegarla.
 */

/* --- Pantalla tactil ------------------------------------------------------ */

@media (pointer: coarse) {
    :is(.kctp-cuest, .kctp-cita) .kctp-tono,
    :is(.kctp-cuest, .kctp-cita) .kctp-pt      { min-height: 62px; }
    :is(.kctp-cuest, .kctp-cita) .kctp-chip,
    :is(.kctp-cuest, .kctp-cita) .kctp-sintoma { min-height: 48px; padding: 10px 17px; }
    :is(.kctp-cuest, .kctp-cita) .kctp-tramo   { min-height: 84px; }
    :is(.kctp-cuest, .kctp-cita) .kctp-cara-svg { width: 196px; }
}

/* --- Menos movimiento ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    :is(.kctp-cuest, .kctp-cita) .kctp-tono,
    :is(.kctp-cuest, .kctp-cita) .kctp-pt,
    :is(.kctp-cuest, .kctp-cita) .kctp-chip,
    :is(.kctp-cuest, .kctp-cita) .kctp-sintoma,
    :is(.kctp-cuest, .kctp-cita) .kctp-tramo,
    :is(.kctp-cuest, .kctp-cita) .kctp-marca,
    :is(.kctp-cuest, .kctp-cita) .kctp-tramo-marca,
    :is(.kctp-cuest, .kctp-cita) .kctp-z,
    :is(.kctp-cuest, .kctp-cita) .kctp-chip > .bi-check-lg {
        transition: none;
    }
    :is(.kctp-cuest, .kctp-cita) .kctp-tono:hover,
    :is(.kctp-cuest, .kctp-cita) .kctp-pt:hover,
    :is(.kctp-cuest, .kctp-cita) .kctp-chip:hover,
    :is(.kctp-cuest, .kctp-cita) .kctp-sintoma:hover,
    :is(.kctp-cuest, .kctp-cita) .kctp-tramo:hover { transform: none; }

    :is(.kctp-cuest, .kctp-cita) .kctp-entra { animation: none; }
}