/* ==========================================================================
   KCTP / KARA - SISTEMA VISUAL BASE

   Esta hoja es el suelo de las dos mitades del producto. Se carga despues de
   bootstrap y de styles.css, y ANTES de las hojas por pantalla de css/v2/,
   para que cada pantalla pueda pisarla sin pelear con la especificidad.

   EL CONTRATO, en nueve lineas. Si una pantalla necesita romper algo de esto,
   que lo rompa en SU hoja de css/v2/ y con un comentario que diga por que.

     1. Dos familias y DOS pesos: 400 y 500. No existe el 600 ni el 700.
        La jerarquia la da el tamano y el color, nunca el grosor.
     2. UNA escala de nueve peldanos (--paso-1..9: 12/13/15/17/21/28/40/56/64)
        y siete papeles que la usan (--kctp-t-*). Ninguna pantalla escribe un
        font-size suelto; si le falta un peldano, es que le falta un papel.
     3. Cero mayusculas y cero tracking positivo. El tracking negativo solo
        por encima de 20px, y mas negativo cuanto mas grande.
     4. Interlineado inversamente proporcional al tamano: 1.02 en hero, 1.06
        en display, 1.18 en titulo, 1.6 en cuerpo.
     5. Borde O sombra, jamas los dos en el mismo elemento. Paciente = sombra
        (dos capas, tenida de tinto). Personal = una linea de pelo #ebe1e4.
        Sobre el panel vino de la puerta manda tambien la sombra, y va mas
        profunda: sobre oscuro una sombra suave no despega nada.
     6. Radios por lado: paciente 10/12/20px; personal 6/8px; pastilla 999px.
     7. Ritmo de dos velocidades: 8-24px dentro de un bloque, 48-96px entre
        bloques. Repartir 40px por igual en todas partes es el error tipico.
     8. El oro (#9c7433) aparece TRES veces en toda la aplicacion: el filo de
        la tarjeta de videoconsulta, el punto de un hito y el punto de 6px que
        firma la tarjeta de la puerta de entrada ("lo reviso una persona").
        Nunca como fondo, y nunca dos veces en la misma pantalla.
     9. Las dos mitades entran por la MISMA puerta (.kctp-acceso, al final de
        la hoja): mismo split, mismo campo, mismo boton. Ahi no aplica la
        division denso/comodo.

   Y una advertencia: un style="font-weight:700" en una vista gana siempre.
   Si algo se ve fuera del sistema, mira primero si trae estilo en linea.

   Movil primero (PRD 18) y WCAG 2.2 AA: contraste alto, un unico anillo de
   foco de 2px, areas tactiles de 48px y nada que dependa solo del color.
   ========================================================================== */

/* ==========================================================================
   1. FICHAS DEL SISTEMA (tokens)

   Todo el sistema sale de aqui. Dos lados con reglas distintas a proposito:

     PACIENTE (body.kctp-portal)  -> se separa con SOMBRA, radios grandes,
                                     titulos grandes y livianos, mucho aire.
     PERSONAL (el resto)          -> se separa con una LINEA DE PELO, radios
                                     chicos, densidad de datos, cero sombras.

   Un panel de datos con 20px de radio se ve blando; una tarjeta emocional con
   6px se ve administrativa. Por eso son dos escaleras y no una.
   ========================================================================== */

:root {
    /* --- Marca KARA (no se toca) ---------------------------------------- */
    --kctp-fondo:      #fbf7f5;   /* hueso */
    --kctp-blanco:     #ffffff;
    --kctp-crema:      #f9f4f5;
    --kctp-panel:      #f5edef;   /* superficie suave de marca */
    --kctp-acento:     #5b0c2f;   /* vino: el color principal */
    --kctp-acento-cl:  #8a2a50;   /* vino claro */
    --kctp-acento-os:  #3d0820;   /* vino oscuro: hover del boton primario */
    --kctp-acento-sw:  #f5edef;   /* piso del vino, su tinte al ~8% */
    --kctp-tinto:      #260514;   /* el del logo, para titulos */
    --kctp-oro:        #9c7433;   /* CUENTAGOTAS. Nunca fondo grande. */
    --kctp-nude:       #d8cbbe;   /* beige de las ilustraciones */
    /* El mint apunta al MISMO verde que el estado "aprobado". Antes habia dos
       verdes distintos: uno para el borde de una fila resuelta y otro para el
       aviso de exito. Un sistema no tiene dos veces el mismo color. */
    --kctp-mint:       #c8e6da;

    /* --- Una sola familia de tinta, cuatro escalones ---------------------
       Nunca se mezclan grises neutros con estos: todos estan tenidos de
       tinto, y por eso el conjunto se lee como un solo material. */
    --kctp-tinta:      #2a1a21;   /* primaria  (12.4:1 sobre blanco) */
    --kctp-tenue:      #7e6a73;   /* apoyo     (4.9:1, el minimo legible) */
    --kctp-tenue-2:    #a9989f;   /* solo iconos y adornos, nunca texto */

    /* --- Una sola linea de pelo en toda la interfaz ---------------------- */
    --kctp-borde:      #ebe1e4;   /* el unico borde visible */
    --kctp-linea:      #f3ecee;   /* divisor interno, mas suave todavia */
    --kctp-borde-f:    #dbc9d0;   /* borde marcado (campo activo) */
    /* El borde de un campo DENTRO de una tarjeta blanca. El #ebe1e4 general
       nace para separar del hueso; sobre blanco puro se vuelve invisible y el
       campo se lee como un hueco, no como un control. */
    --kctp-borde-c:    #e3d5da;

    /* --- Estados -------------------------------------------------------- */
    --kctp-ok:         #1f7a58;
    --kctp-ok-sw:      #e9f5f0;
    --kctp-ok-bd:      #c8e6da;
    --kctp-aviso:      #8a5a00;
    --kctp-aviso-sw:   #fdf5e8;
    --kctp-aviso-bd:   #f0dcb4;
    --kctp-alerta:     #a5231f;
    --kctp-alerta-sw:  #fdeeed;
    --kctp-alerta-bd:  #f2cac8;

    /* --- LA ESCALA: ocho peldanos y ni uno mas --------------------------
       Antes no habia escala: habia --kctp-t-* y ademas .82rem, .83rem,
       .84rem, .85rem, .88rem, .92rem repartidos a ojo por la hoja. Medido en
       vivo, el portal renderizaba 5 tamanos y el panel del personal DOS, con
       un maximo de 24.8px en una pantalla de 1440. Las dos referencias corren
       12 y 22 tamanos y abren en 44-48px.

       La razon entre peldanos ronda 1.15 abajo (donde hay que leer datos) y
       1.4 arriba (donde hay que ver jerarquia de un vistazo). Los nombres
       --paso-N son la escala cruda; los --kctp-t-* de abajo son los papeles
       que se le asignan. Una pantalla usa los papeles, nunca los pasos. */
    --paso-1: .75rem;      /* 12 - pastillas, sellos de hora */
    --paso-2: .8125rem;    /* 13 - etiquetas de campo, meta, pie legal */
    --paso-3: .9375rem;    /* 15 - texto de apoyo y cuerpo del panel denso */
    --paso-4: 1.0625rem;   /* 17 - cuerpo del portal, campos, botones */
    --paso-5: 1.3125rem;   /* 21 - titulo de seccion */
    --paso-6: 1.75rem;     /* 28 - titulo de tarjeta / display en telefono */
    --paso-7: 2.5rem;      /* 40 - display de pantalla */
    --paso-8: 3.5rem;      /* 56 - display de la puerta en tableta */
    /* El noveno peldano existe por una sola razon medida: a 1440 las dos
       referencias abren en 44-48px de grotesca; una serif de display necesita
       mas cuerpo para pesar lo mismo, y a 56px nuestro titular se quedaba a
       media altura del panel. 64px es donde el titular ocupa tres lineas
       llenas y el panel deja de leerse como un rectangulo con una firma. */
    --paso-9: 4rem;        /* 64 - hero: solo la puerta de entrada */

    /* Los papeles. El salto de cuerpo (17) a hero (56) es 3.3x: la jerarquia
       la da el TAMANO, no el peso (por eso no hay un solo 700 en la hoja). */
    --kctp-t-hero:     clamp(2.125rem, 1.05rem + 4.4vw, 4rem);     /* 34 -> 64 */
    --kctp-t-display:  clamp(1.75rem, 1.05rem + 2.9vw, 2.5rem);   /* 28 -> 40 */
    --kctp-t-titulo:   clamp(1.3125rem, 1.13rem + .78vw, 1.75rem);/* 21 -> 28 */
    --kctp-t-seccion:  var(--paso-5);   /* 21 */
    --kctp-t-cuerpo:   var(--paso-4);   /* 17 en el portal */
    --kctp-t-densa:    var(--paso-3);   /* 15 en el panel del personal */
    /* Antes valia 14px, un peldano que no existia en ninguna escala y que
       convivia con el de 15 sin que nadie supiera cual tocaba. Se fusionaron
       hacia arriba: uno menos que elegir y un punto mas de legibilidad. */
    --kctp-t-menor:    var(--paso-3);   /* 15 */
    --kctp-t-meta:     var(--paso-2);   /* 13 */
    --kctp-t-micro:    var(--paso-1);   /* 12 */

    /* Interlineado inversamente proporcional al tamano. Un lh unico para todo
       es la firma del panel de administracion. */
    --kctp-lh-hero:    1.02;
    --kctp-lh-display: 1.06;
    --kctp-lh-titulo:  1.18;
    --kctp-lh-cuerpo:  1.6;

    /* Tracking negativo solo por encima de 20px, y mas negativo cuanto mas
       grande. Por debajo, practicamente neutro. */
    --kctp-ls-hero:    -.034em;
    --kctp-ls-display: -.028em;
    --kctp-ls-titulo:  -.022em;
    --kctp-ls-cuerpo:  -.006em;

    --kctp-peso-normal: 400;
    --kctp-peso-medio:  500;   /* este es el "negrita" del sistema */

    --kctp-serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
    --kctp-sans:  Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* --- Ritmo vertical de dos velocidades -------------------------------
       Tacano adentro (8-24px), generoso afuera (48-64px). Repartir 40px por
       igual en todas partes es el error tipico. */
    --kctp-e1:  4px;
    --kctp-e2:  8px;
    --kctp-e3:  12px;
    --kctp-e4:  16px;
    --kctp-e5:  24px;
    --kctp-e6:  32px;
    --kctp-e7:  48px;
    --kctp-e8:  64px;
    /* Entre secciones grandes. Lovi corre 120px y Stripe 96-128px; el error
       tipico es repartir 40px por igual adentro y afuera. */
    --kctp-e9:  96px;

    /* --- Escaleras de radio, una por lado -------------------------------- */
    --kctp-radio:      20px;   /* tarjeta del paciente */
    --kctp-radio-ch:   12px;   /* control del paciente */
    --kctp-r-panel:     8px;   /* panel del personal */
    --kctp-r-campo:     6px;   /* campo y boton del personal */
    --kctp-r-pastilla: 999px;

    /* --- Sombra: SIEMPRE dos capas, y tenida de tinto --------------------
       Una capa de contacto de 1px mas una difusa y ancha. Una sola capa
       borrosa se ve barata. El tinte nunca es negro neutro. */
    --kctp-sombra:      0 1px 2px rgba(38, 5, 20, .05), 0 8px 30px -6px rgba(38, 5, 20, .08);
    --kctp-sombra-alt:  0 2px 4px rgba(38, 5, 20, .06), 0 20px 48px -12px rgba(38, 5, 20, .15);
    /* La tarjeta que FLOTA de verdad (el formulario de la puerta sobre el
       hueso). Spread negativo y grande, como las dos referencias: la sombra
       queda debajo de la tarjeta en vez de derramarse por los lados. */
    --kctp-sombra-caja: 0 1px 2px rgba(38, 5, 20, .05), 0 28px 56px -24px rgba(38, 5, 20, .22);
    /* Y la que flota sobre el VINO. Mismo principio (contacto corto + difusa
       ancha con spread negativo) pero mucho mas profunda: sobre un fondo
       oscuro una sombra suave no despega nada. */
    --kctp-sombra-flota: 0 3px 8px rgba(14, 1, 7, .28), 0 36px 68px -18px rgba(14, 1, 7, .62);

    /* --- Movimiento en tres velocidades, nunca linear -------------------- */
    --kctp-mov-hover: .15s cubic-bezier(.215, .61, .355, 1);
    --kctp-mov:       .3s cubic-bezier(.33, 1, .68, 1);
    --kctp-mov-entra: .6s cubic-bezier(.7, 0, 0, 1);
}

/* --- Bootstrap y el modulo de rutinas, repintados desde aqui --------------
   styles.css y bootstrap.min.css se cargan ANTES que esta hoja, asi que
   redefinir sus variables aqui repinta los dos sin tocar ningun otro archivo.
   El panel del personal era rosa #e091aa de punta a punta: ese rosa no es de
   KARA, venia del tema pastel viejo del modulo de rutinas. */
:root {
    --bs-link-color:            #5b0c2f;
    --bs-link-color-rgb:        91, 12, 47;
    --bs-link-hover-color:      #260514;
    --bs-link-hover-color-rgb:  38, 5, 20;
    --bs-border-color:          #ebe1e4;
    --bs-body-color:            #2a1a21;
    --bs-emphasis-color:        #260514;
    --bs-border-radius:         8px;
    --bs-border-radius-sm:      6px;
    --bs-border-radius-lg:      12px;
    --bs-focus-ring-color:      rgba(91, 12, 47, .2);
    /* Bootstrap pinta <code> con SU rosa (#d63384). En la lista de rutinas el
       numero de fila salia en fucsia y nadie sabia de donde venia. */
    --bs-code-color:            #5b0c2f;

    --kr-bg:        #fbf7f5;
    --kr-surface:   #ffffff;
    --kr-rosa:      #5b0c2f;
    --kr-rosa-d:    #260514;
    --kr-rosa-soft: #f5edef;
    --kr-nude:      #d8cbbe;
    --kr-crema:     #faf6f7;
    --kr-text:      #2a1a21;
    --kr-muted:     #7e6a73;
    --kr-border:    #ebe1e4;
    --kr-radius:    8px;
    --kr-shadow:    none;
}

/* --- Enlaces del portal ---------------------------------------------------
   No habia ninguna regla, asi que todo enlace salia en el azul de Bootstrap,
   justo al lado de botones vino. Se define aqui y no en cada pantalla para que
   un enlace nuevo nazca con la marca puesta.

   Se excluyen los que YA son un boton o una tarjeta: esos traen su propio
   color y este selector se lo pisaria. */
/* El enlace de TEXTO se subraya; una tarjeta que ademas es enlace, NO. Antes
   la lista de exclusiones no incluia .kctp-categoria ni .kctp-fila, y por eso
   los titulos de las doce categorias del expediente salian en vino y con raya
   debajo, como si fueran doce enlaces sueltos. Se invirtio la regla: en vez de
   pintar todo y perdonar a unos pocos, se pinta solo lo que es prosa. */
.kctp-enlace,
.kctp-portal a:not([class]),
.kctp-portal p > a,
.kctp-portal li > a,
.kctp-portal dd > a,
.kctp-portal td > a,
.kctp-portal .kctp-ayuda a,
.kctp-portal .kctp-legal a {
    color: var(--kctp-acento);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--kctp-acento) 30%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color var(--kctp-mov-hover), text-decoration-color var(--kctp-mov-hover);
}
.kctp-enlace:hover,
.kctp-portal a:not([class]):hover,
.kctp-portal p > a:hover,
.kctp-portal li > a:hover,
.kctp-portal dd > a:hover,
.kctp-portal td > a:hover {
    color: var(--kctp-tinto);
    text-decoration-color: currentColor;
}

/* Foco visible: requisito de accesibilidad, no decoracion. UN solo anillo de
   2px en toda la aplicacion; antes convivian tres grosores distintos. */
/* Objetivo tactil de los enlaces dentro de frases.
   Medidos tras el gauntlet: 21px de alto, y la guia pide 44. El relleno agranda
   el area y el margen negativo lo compensa, asi que el dedo gana sitio sin que
   se mueva ni una linea de texto. Solo donde hay dedos. */
@media (pointer: coarse) {
    .kctp-portal a:not([class]),
    .kctp-portal .kctp-legal-mas,
    .kctp-portal .kctp-ya-contestadas button,
    .kctp-portal p a:not([class]),
    .kctp-portal li a:not([class]),
    .kctp-portal label a:not([class]) {
        display: inline-block;
        padding-block: .62rem;
        margin-block: -.62rem;
    }
}

.kctp-portal :focus-visible,
.kctp-ficha :focus-visible,
.kctp-panel :focus-visible,
.kr-shell :focus-visible {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Los titulos van en la serif de marca; el texto corrido en Inter.
   Es la misma pareja del material de KARA. */
/* Los titulos van en la serif de marca, SIEMPRE en peso 400. Un display de
   40px en 400 se ve caro; el mismo texto a 21px en 700 se ve a plantilla.
   Es la diferencia mas barata de aplicar de toda la hoja. */
.kctp-encabezado h1,
.kctp-tarjeta h2,
.kctp-panel-cabeza h3,
.kctp-vacio-ilustrado h3,
.kctp-repaso-cabeza h3,
.kctp-video h3,
.kr-content h1,
.kr-content h2 {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    text-wrap: balance;
}

/* La marca, ahora con el logo de verdad en vez de texto. */
.kctp-portal-top .kctp-logo {
    display: block;
    height: 26px;
    width: auto;
}
/* Sin mayusculas y sin tracking positivo: es la senal numero uno de
   plantilla barata, y ninguna de las dos referencias la usa ni una vez. */
.kctp-portal-top .kctp-marca-texto {
    display: block;
    font-family: var(--kctp-sans);
    font-weight: var(--kctp-peso-normal);
    letter-spacing: -.002em;
    font-size: var(--kctp-t-micro);
    color: var(--kctp-tenue);
    margin-top: 6px;
}

/* ==========================================================================
   Portal del paciente
   ========================================================================== */

.kctp-portal {
    background: var(--kctp-fondo);
    color: var(--kctp-tinta);
    min-height: 100vh;
    font-family: var(--kctp-sans);
    font-size: var(--kctp-t-cuerpo);
    line-height: var(--kctp-lh-cuerpo);
    letter-spacing: var(--kctp-ls-cuerpo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kctp-portal-top {
    background: var(--kctp-blanco);
    border-bottom: 1px solid var(--kctp-borde);
    padding: var(--kctp-e3) var(--kctp-e4);
    position: sticky;
    top: 0;
    z-index: 30;
}
.kctp-portal-top .kctp-marca {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    letter-spacing: -.01em;
    font-size: var(--paso-5);
    color: var(--kctp-acento);
}
.kctp-portal-top .kctp-marca small {
    display: block;
    font-family: var(--kctp-sans);
    font-weight: var(--kctp-peso-normal);
    letter-spacing: -.002em;
    font-size: var(--kctp-t-micro);
    color: var(--kctp-tenue);
    margin-top: 4px;
}

/* Ritmo de dos velocidades: generoso AFUERA (32px en telefono, 64px en
   escritorio) y tacano ADENTRO. Es lo que separa una pagina de producto de
   una pagina de tramite. */
.kctp-lienzo {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--kctp-e6) var(--kctp-e4) 6rem;
}
.kctp-lienzo-ancho { max-width: 1200px; }
@media (min-width: 700px) {
    .kctp-lienzo { padding: var(--kctp-e8) var(--kctp-e5) 6rem; }
}
/* La cabecera pegajosa no lleva ese aire encima. */
.kctp-portal-top .kctp-lienzo { padding-top: 0; padding-bottom: 0; }

/* Medida de parrafo: nunca el ancho del contenedor. Entre 46 y 62 caracteres
   es donde el ojo salta de linea sin perderse. */
.kctp-portal p { max-width: 62ch; }

/* Borde O sombra, nunca los dos. Del lado del paciente manda la SOMBRA: la
   tarjeta blanca flota sobre el hueso y no hay una sola linea dura.
   (Antes llevaba borde de 1px Y sombra en la misma regla.) */
.kctp-tarjeta {
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio);
    box-shadow: var(--kctp-sombra);
    padding: var(--kctp-e5);
    margin-bottom: var(--kctp-e5);
}
@media (min-width: 700px) {
    .kctp-tarjeta { padding: var(--kctp-e6); }
}
/* Del titulo a su bajada, 8px: son un solo bloque. Despues si viene el aire. */
.kctp-tarjeta h2 {
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    margin: 0 0 var(--kctp-e2);
}
/* Sin el '>' a proposito: en varias vistas la bajada vive dentro de un div de
   maquetacion junto al boton de la derecha, y con el selector de hijo directo
   se quedaba en 17px, casi del tamano de su propio titulo. */
.kctp-sub {
    color: var(--kctp-tenue);
    margin: 0 0 var(--kctp-e5);
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    max-width: 54ch;
}

/* Consulta en camino dentro de "Mis planes": en que va y que puede hacer.
   Se apila en movil, que es donde la usan (el tester la vio en el telefono). */
.kctp-fila-estado {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 0;
    border-top: 1px solid var(--kctp-borde);
}
.kctp-fila-estado:first-of-type { border-top: 0; }
@media (max-width: 480px) {
    .kctp-fila-estado { align-items: flex-start; flex-direction: column; }
    .kctp-fila-estado .kctp-btn { width: 100%; justify-content: center; }
}

/* ---------- Encabezado de pantalla, estilo app ---------- */

.kctp-encabezado {
    display: flex;
    align-items: flex-start;
    gap: var(--kctp-e3);
    margin-bottom: var(--kctp-e6);
}
.kctp-volver {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--kctp-blanco);
    border: 0;
    display: grid;
    place-content: center;
    color: var(--kctp-tinta);
    text-decoration: none;
    font-size: 1rem;
    box-shadow: var(--kctp-sombra);
    transition: box-shadow var(--kctp-mov), color var(--kctp-mov-hover);
}
.kctp-volver:hover { box-shadow: var(--kctp-sombra-alt); color: var(--kctp-acento); }

/* El titular de pantalla es el display del sistema: 28px en telefono, 40px en
   escritorio, peso 400, interlineado 1.08 y tracking negativo. Antes eran
   21px en peso 700: el error exactamente inverso. */
.kctp-encabezado h1 {
    font-size: var(--kctp-t-display);
    line-height: var(--kctp-lh-display);
    letter-spacing: var(--kctp-ls-display);
    margin: 0;
}
.kctp-encabezado p {
    margin: var(--kctp-e2) 0 0;
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    max-width: 52ch;
}

/* ==========================================================================
   Categorías del expediente (patrón Yano)
   ========================================================================== */

.kctp-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: var(--kctp-e3);
    margin-bottom: var(--kctp-e6);
}

.kctp-categoria {
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio);
    box-shadow: var(--kctp-sombra);
    padding: var(--kctp-e4);
    text-decoration: none;
    color: var(--kctp-tinta);
    display: flex;
    flex-direction: column;
    gap: var(--kctp-e3);
    min-height: 138px;
    transition: transform var(--kctp-mov), box-shadow var(--kctp-mov);
}
.kctp-categoria:hover {
    transform: translateY(-2px);
    box-shadow: var(--kctp-sombra-alt);
    color: var(--kctp-tinta);
}
.kctp-categoria .kctp-icono {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-content: center;
    font-size: 1.05rem;
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
}
.kctp-categoria strong {
    font-size: var(--kctp-t-densa);
    line-height: 1.35;
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.01em;
    color: var(--kctp-tinto);
}
/* La segunda linea de la tarjeta no es un contador: es una frase entera
   ("Contacto, fecha de nacimiento, tipo de piel y fototipo"). A 12px se leia
   como letra chica de contrato. Sube a 14 y la jerarquia la sostienen el peso
   y el color, no el tamano: 12px de diferencia no hacen falta. */
.kctp-categoria .kctp-cuenta {
    margin-top: auto;
    font-size: var(--kctp-t-menor);
    line-height: 1.45;
    color: var(--kctp-tenue);
}
.kctp-categoria .kctp-cuenta b { color: var(--kctp-acento); font-weight: var(--kctp-peso-medio); }
.kctp-categoria.vacia .kctp-icono { background: var(--kctp-crema); color: var(--kctp-tenue-2); }

/* Antes habia cuatro tintes distintos (menta, lila, nude y durazno) "para que
   la parrilla no fuera un muro rosa". El resultado era un arcoiris: seis
   colores de superficie en una sola pantalla. La paleta de las dos
   referencias cabe en un acento mas su tinte al 10%, y eso es lo que se
   aplica ahora. Las clases siguen existiendo para no romper ninguna vista;
   simplemente dejaron de pintar. */
.kctp-categoria.tono-mint  .kctp-icono,
.kctp-categoria.tono-lila  .kctp-icono,
.kctp-categoria.tono-nude  .kctp-icono,
.kctp-categoria.tono-peach .kctp-icono { background: var(--kctp-acento-sw); color: var(--kctp-acento); }

/* ---------- Lista de entradas ---------- */

.kctp-lista { display: flex; flex-direction: column; gap: var(--kctp-e2); }

.kctp-fila {
    display: flex;
    align-items: center;
    gap: var(--kctp-e3);
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio-ch);
    box-shadow: var(--kctp-sombra);
    padding: var(--kctp-e3) var(--kctp-e4);
    text-decoration: none;
    color: var(--kctp-tinta);
    min-height: 68px;
    transition: box-shadow var(--kctp-mov), transform var(--kctp-mov);
}
.kctp-fila:hover { box-shadow: var(--kctp-sombra-alt); transform: translateY(-1px); color: var(--kctp-tinta); }
.kctp-fila .kctp-icono {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
    display: grid;
    place-content: center;
    font-size: 1.02rem;
}
.kctp-fila-cuerpo { flex: 1; min-width: 0; }
.kctp-fila-cuerpo strong {
    display: block;
    font-size: var(--kctp-t-menor);
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tinto);
    letter-spacing: -.008em;
}
.kctp-fila-cuerpo span {
    display: block;
    font-size: var(--kctp-t-micro);
    color: var(--kctp-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kctp-fila .kctp-chevron { flex: 0 0 auto; color: var(--kctp-tenue-2); font-size: var(--kctp-t-menor); }

/* Marca lateral por estado de la entrada */
.kctp-fila.est-ACTIVO     { border-left: 4px solid var(--kctp-acento-cl); }
.kctp-fila.est-RESUELTO   { border-left: 4px solid var(--kctp-mint); }
.kctp-fila.est-SUSPENDIDO { border-left: 4px solid var(--kctp-nude); }

/* ---------- Estado vacío ilustrado ---------- */

.kctp-vacio-ilustrado {
    text-align: center;
    padding: var(--kctp-e8) var(--kctp-e5);
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio);
    box-shadow: var(--kctp-sombra);
}
.kctp-vacio-ilustrado svg { width: 120px; height: auto; margin-bottom: var(--kctp-e5); }
.kctp-vacio-ilustrado h3 {
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    margin: 0 0 var(--kctp-e2);
}
.kctp-vacio-ilustrado p {
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    max-width: 42ch;
    margin: 0 auto var(--kctp-e5);
}

/* ---------- Barra de acción fija ---------- */

.kctp-barra-accion {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--kctp-fondo) 62%, rgba(251, 247, 245, 0));
    padding: var(--kctp-e5) 0 var(--kctp-e3);
    margin-top: var(--kctp-e6);
    display: flex;
    gap: var(--kctp-e3);
    flex-wrap: wrap;
    z-index: 10;
}
.kctp-barra-accion .kctp-btn { flex: 1 1 auto; }

/* ==========================================================================
   Progreso del triaje
   ========================================================================== */

.kctp-progreso { margin-bottom: var(--kctp-e6); }
/* Barra de 4px y color plano: el degradado en una barra de progreso es
   decoracion, y la decoracion es justo lo que hay que quitar. */
.kctp-progreso-barra {
    height: 4px;
    background: var(--kctp-borde);
    border-radius: var(--kctp-r-pastilla);
    overflow: hidden;
}
.kctp-progreso-barra span {
    display: block;
    height: 100%;
    background: var(--kctp-acento);
    border-radius: var(--kctp-r-pastilla);
    transition: width var(--kctp-mov-entra);
}
.kctp-progreso-texto {
    display: flex;
    justify-content: space-between;
    font-size: var(--kctp-t-micro);
    color: var(--kctp-tenue);
    margin-bottom: var(--kctp-e2);
}

.kctp-pasos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--kctp-e6); }
.kctp-paso {
    font-size: var(--kctp-t-micro);
    padding: 5px 11px;
    border-radius: var(--kctp-r-pastilla);
    border: 1px solid var(--kctp-borde);
    background: var(--kctp-blanco);
    color: var(--kctp-tenue);
}
.kctp-paso.hecho  { background: var(--kctp-ok-sw); border-color: var(--kctp-ok-bd); color: var(--kctp-ok); }
.kctp-paso.actual { background: var(--kctp-acento); border-color: var(--kctp-acento); color: #fff; font-weight: var(--kctp-peso-medio); }

/* ==========================================================================
   Preguntas y formularios
   ========================================================================== */

.kctp-pregunta { padding: var(--kctp-e5) 0; border-bottom: 1px solid var(--kctp-linea); }
.kctp-pregunta:last-child { border-bottom: 0; padding-bottom: 0; }

/* Sin raya doble: el ultimo campo de una tanda no lleva borde abajo, porque
   justo despues viene la fila de botones que ya trae el suyo arriba. El
   ':last-child' de arriba no lo cubre, porque el ultimo hijo del formulario es
   esa fila y no el campo. */
.kctp-pregunta:has(+ .kctp-acciones),
.kctp-pregunta:has(+ .kctp-paso-botones) { border-bottom: 0; }
/* Etiqueta pegada a su campo (8px) y ayuda pegada a la etiqueta: los tres son
   un solo bloque. El aire va ENTRE preguntas, no dentro de una. */
.kctp-pregunta > label.kctp-etiqueta,
.kctp-pregunta > .kctp-etiqueta {
    display: block;
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-menor);
    color: var(--kctp-tinto);
    letter-spacing: -.006em;
    margin-bottom: var(--kctp-e2);
}
.kctp-ayuda {
    font-size: var(--kctp-t-menor);
    line-height: 1.5;
    color: var(--kctp-tenue);
    margin: -4px 0 var(--kctp-e3);
    max-width: 56ch;
}

/* Texto legal recortado a dos lineas, con boton para abrirlo.
   La clase 'recortado' la pone JavaScript, nunca el servidor: sin script el
   texto se ve entero, que es la unica direccion aceptable aqui. */
.kctp-legal {
    font-size: var(--kctp-t-menor);
    line-height: 1.5;
    color: var(--kctp-tenue);
    margin-bottom: .5rem;
}
.kctp-legal.recortado {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kctp-legal-mas {
    background: none;
    border: 0;
    padding: 0 0 .7rem;
    font: inherit;
    font-size: var(--kctp-t-menor);
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-acento);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.kctp-legal-mas:hover { color: var(--kctp-tinta); }
.kctp-legal-mas:focus-visible { outline: 2px solid var(--kctp-acento); outline-offset: 2px; }
.kctp-obligatoria::after { content: " *"; color: var(--kctp-alerta); }

.kctp-pregunta input[type="text"],
.kctp-pregunta input[type="number"],
.kctp-pregunta input[type="date"],
.kctp-pregunta input[type="time"],
.kctp-pregunta input[type="email"],
.kctp-pregunta input[type="url"],
.kctp-pregunta input[type="password"],
.kctp-pregunta textarea,
.kctp-pregunta select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--kctp-borde);
    border-radius: 10px;
    background: var(--kctp-blanco);
    color: var(--kctp-tinta);
    font-size: 1rem;   /* 16px: por debajo de esto iOS hace zoom al enfocar */
    line-height: 1.5;
    font-family: inherit;
    min-height: 48px;
    box-shadow: none;
    transition: border-color var(--kctp-mov-hover), background var(--kctp-mov-hover);
}
.kctp-pregunta input:focus,
.kctp-pregunta textarea:focus,
.kctp-pregunta select:focus {
    /* Solo cambia el fondo. El borde se queda como esta a proposito: el anillo
       de foco de accesibilidad ya marca cual es el campo activo, y pintar
       ademas el borde de vino dibujaba dos anillos concentricos. */
    background: var(--kctp-blanco);
    border-color: var(--kctp-borde-f);
}
.kctp-pregunta textarea { min-height: 110px; resize: vertical; }

.kctp-opciones { display: grid; gap: var(--kctp-e2); }
.kctp-opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--kctp-e3);
    padding: 12px 14px;
    border: 1px solid var(--kctp-borde);
    border-radius: 10px;
    background: var(--kctp-blanco);
    cursor: pointer;
    min-height: 48px;
    font-size: var(--kctp-t-menor);
    transition: border-color var(--kctp-mov-hover), background var(--kctp-mov-hover), box-shadow var(--kctp-mov-hover);
}
.kctp-opcion:hover { border-color: var(--kctp-borde-f); background: var(--kctp-crema); }

/* Campo de archivo escondido tras un boton bonito.
   No se usa display:none ni visibility:hidden a proposito: con eso varios
   navegadores de movil dejan de dispararlo al tocar la etiqueta. */
/* Boton de menu de la cabecera. */
.kctp-boton-menu { padding: .4rem .85rem; min-height: 38px; font-size: var(--kctp-t-menor); }

/* Barra de secciones fija abajo, solo en telefono.
   El acceso al menu era un icono de persona arriba a la derecha y la gente no
   lo encontraba. Esto pone lo importante donde llega el pulgar. */
.kctp-barra-abajo { display: none; }

@media (max-width: 699px) {
    .kctp-barra-abajo {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: color-mix(in srgb, var(--kctp-blanco) 88%, transparent);
        backdrop-filter: saturate(1.4) blur(14px);
        border-top: 1px solid var(--kctp-borde);
        box-shadow: none;
        /* Que no lo tape la barra del navegador en iPhone. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .kctp-barra-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        padding: .5rem .2rem .55rem;
        text-decoration: none;
        color: var(--kctp-tenue);
        font-size: var(--kctp-t-micro);
        line-height: 1.2;
        text-align: center;
        min-height: 58px;
    }
    .kctp-barra-item i { font-size: 1.15rem; }
    .kctp-barra-item.activo { color: var(--kctp-acento); font-weight: var(--kctp-peso-medio); }
    .kctp-barra-item:active { background: var(--kctp-acento-sw); }

    /* Sitio para que la barra no tape el final de la pagina. */
    body.kctp-portal { padding-bottom: 4.6rem; }
    /* Pero SOLO si la barra existe. La barra se dibuja unicamente con sesion
       abierta, asi que en la puerta, en el registro y en la recuperacion de
       clave ese hueco de 73px quedaba al pie del documento como una banda de
       color vacia: se veia como un error de maquetacion, y lo era. Escrito
       como negacion a proposito: si un navegador no entiende :has(), se queda
       con la regla de arriba, que es la conservadora. */
    body.kctp-portal:not(:has(.kctp-barra-abajo)) { padding-bottom: 0; }
}

/* Las fotos de perfil, plegadas. */
.kctp-opcionales {
    margin: var(--kctp-e5) 0;
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-radio-ch);
    background: var(--kctp-blanco);
    padding: 2px 16px;
}
.kctp-opcionales > summary {
    cursor: pointer;
    padding: .8rem 0;
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-menor);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.kctp-opcionales > summary span {
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-micro);
    color: var(--kctp-tenue);
    border: 1px solid var(--kctp-borde);
    border-radius: 999px;
    padding: .05rem .5rem;
}
.kctp-opcionales[open] > summary { border-bottom: 1px solid var(--kctp-borde); margin-bottom: .8rem; }

.kctp-archivo-oculto {
    position: absolute;
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* La opcion elegida.
   Existia la clase y se aplicaba desde el 28-ago, pero nunca tuvo estilo: la
   unica senal de haber elegido era el punto del radio. En un telefono, con el
   dedo encima, no se ve. (01-sep-2026) */
/* Lo elegido se marca con el GROSOR y la oscuridad del borde, no rellenando
   la tarjeta de color: rellenar satura la pantalla y baja el contraste del
   texto. Es como marca Stripe la opcion elegida en su checkout. */
.kctp-opcion.elegida {
    border-color: var(--kctp-acento);
    background: var(--kctp-blanco);
    box-shadow: inset 0 0 0 1px var(--kctp-acento);
}

/* ---------- Una pregunta por pantalla ----------
   Pedido de Paul el 01-sep-2026 tras probarla Carlos: el cuestionario no era
   largo por tener preguntas de mas, sino por presentarlas todas de golpe. Aqui
   NO se quita ninguna pregunta clinica: se muestran de una en una.
   El servidor sigue trabajando por bloques; esto es solo como se ve. Sin
   JavaScript la pantalla vuelve a mostrarlas todas y nada se rompe. */
.kctp-uno .kctp-pregunta { border-bottom: 0; padding: .2rem 0 0; }
.kctp-uno .kctp-paso-oculto { display: none; }

/* La pregunta unica ES el titular de esa pantalla: se comporta como display. */
.kctp-uno .kctp-pregunta > .kctp-etiqueta,
.kctp-uno .kctp-pregunta > label.kctp-etiqueta {
    font-family: var(--kctp-serif);
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    margin-bottom: var(--kctp-e2);
    text-wrap: balance;
}
.kctp-uno .kctp-ayuda { font-size: var(--kctp-t-menor); margin: 0 0 var(--kctp-e5); }
.kctp-uno .kctp-opciones,
.kctp-uno .kctp-sino { gap: var(--kctp-e2); }
.kctp-uno .kctp-opcion { padding: 15px 16px; font-size: var(--kctp-t-cuerpo); }

/* Contador y barra del paso actual. */
/* "3 respuestas ya las teníamos de antes · Ver y corregir" */
.kctp-ya-contestadas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .9rem;
    padding: .6rem .8rem;
    background: var(--kctp-ok-sw);
    border-radius: var(--kctp-radio-ch);
    font-size: var(--kctp-t-menor);
    color: var(--kctp-tinta);
}
.kctp-ya-contestadas .kctp-legal-mas { padding: 0; }

.kctp-paso-cuenta {
    display: block;
    font-size: var(--kctp-t-micro);
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
    margin-bottom: var(--kctp-e3);
}
.kctp-paso-falta {
    margin: .7rem 0 0;
    font-size: var(--kctp-t-menor);
    color: var(--kctp-alerta);
}
.kctp-paso-botones {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-top: 1.4rem;
}
.kctp-paso-botones .kctp-btn-primario { flex: 1 1 8rem; justify-content: center; }

/* "Seguir despues" baja a su propia linea y deja de ser un boton: compite con
   el que si queremos que pulse. En la captura del telefono se salia por la
   derecha, cortado a la mitad. */
.kctp-paso-botones > a {
    flex: 1 0 100%;
    order: 3;
    justify-content: center;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-menor);
    font-weight: 500;
    padding: .3rem 0;
}
.kctp-paso-botones > a:hover { color: var(--kctp-acento); background: none; }

/* Las pestanas de seccion se van del telefono mientras se contesta.
   Son ocho, ocupaban media pantalla, y decirle "te faltan ocho secciones" es
   exactamente la sensacion de cuestionario largo que veniamos a quitar. La
   barra de progreso de arriba ya dice donde va. En pantalla ancha si caben. */
@media (max-width: 699px) {
    .kctp-modo-uno .kctp-pasos { display: none; }
    .kctp-modo-uno .kctp-tarjeta > h2 { font-family: var(--kctp-sans); font-size: var(--kctp-t-menor); color: var(--kctp-tenue); font-weight: var(--kctp-peso-normal); }
    .kctp-modo-uno .kctp-tarjeta > p.kctp-sub { display: none; }
}

@media (min-width: 700px) {
    .kctp-uno .kctp-pregunta { min-height: 20rem; }
}
.kctp-opcion input { margin-top: .18rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: var(--kctp-acento); }
.kctp-opcion input:checked + span { font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); }
.kctp-opcion:has(input:checked) {
    border-color: var(--kctp-acento);
    background: var(--kctp-blanco);
    box-shadow: inset 0 0 0 1px var(--kctp-acento);
}

.kctp-sino { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kctp-e2); max-width: 340px; }

.kctp-error {
    display: block;
    color: var(--kctp-alerta);
    font-size: var(--kctp-t-menor);
    margin-top: var(--kctp-e2);
    font-weight: var(--kctp-peso-medio);
}
.kctp-pregunta.con-error input,
.kctp-pregunta.con-error textarea,
.kctp-pregunta.con-error select { border-color: var(--kctp-alerta); background: var(--kctp-alerta-sw); }

/* ==========================================================================
   Avisos
   ========================================================================== */

.kctp-aviso {
    display: flex;
    gap: var(--kctp-e3);
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid;
    margin-bottom: var(--kctp-e5);
    align-items: flex-start;
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
}
.kctp-aviso p { margin-bottom: 0; max-width: 62ch; }
.kctp-aviso i { font-size: 1rem; line-height: 1.4; flex: 0 0 auto; }
.kctp-aviso-info     { background: var(--kctp-acento-sw); border-color: #ead4dc;             color: #7a2843; }
.kctp-aviso-ok       { background: var(--kctp-ok-sw);     border-color: var(--kctp-ok-bd);     color: #185f45; }
.kctp-aviso-atencion { background: var(--kctp-aviso-sw);  border-color: var(--kctp-aviso-bd);  color: var(--kctp-aviso); }
.kctp-aviso-alerta   { background: var(--kctp-alerta-sw); border-color: var(--kctp-alerta-bd); color: var(--kctp-alerta); }
.kctp-detiene { border-width: 2px; }

/* ==========================================================================
   Botones
   ========================================================================== */

.kctp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kctp-e2);
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-menor);
    letter-spacing: -.006em;
    font-family: inherit;
    min-height: 48px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--kctp-mov-hover), border-color var(--kctp-mov-hover), color var(--kctp-mov-hover);
}
/* El boton primario NO lleva sombra: ninguna de las dos referencias se la
   pone. La que traia era ademas de un rosa (#c9758f) que no es de KARA. */
.kctp-btn-primario {
    background: var(--kctp-acento);
    color: #fff;
    box-shadow: none;
}
.kctp-btn-primario:hover { background: var(--kctp-acento-os); color: #fff; }
.kctp-btn-suave { background: var(--kctp-blanco); border-color: var(--kctp-borde); color: var(--kctp-tinta); }
.kctp-btn-suave:hover { border-color: var(--kctp-borde-f); background: var(--kctp-crema); color: var(--kctp-tinto); }
.kctp-btn-peligro { background: var(--kctp-alerta); color: #fff; }
.kctp-btn-peligro:hover { background: #8d1e1a; color: #fff; }
/* Deshabilitado no es "el mismo boton mas palido": el vino al 40% se lee como
   un malva, o sea como OTRO color de marca. Un boton inerte se pinta inerte. */
.kctp-btn:disabled, .kctp-btn.deshabilitado { opacity: 1; pointer-events: none; box-shadow: none; }
.kctp-btn-primario:disabled, .kctp-btn-primario.deshabilitado,
.kctp-btn-peligro:disabled,  .kctp-btn-peligro.deshabilitado {
    background: var(--kctp-panel);
    color: var(--kctp-tenue);
}
.kctp-btn-suave:disabled, .kctp-btn-suave.deshabilitado { color: var(--kctp-tenue-2); border-color: var(--kctp-linea); }
.kctp-btn-bloque { width: 100%; }
.kctp-btn-chico { padding: 6px 12px; min-height: 34px; font-size: var(--kctp-t-micro); border-radius: var(--kctp-r-campo); }

/* Del lado del personal el boton se aprieta: 40px de alto y radio de 6px, que
   es lo correcto cuando hay veinte controles en la misma pantalla. */
body:not(.kctp-portal) .kctp-btn { min-height: 40px; padding: 9px 16px; border-radius: var(--kctp-r-campo); }
body:not(.kctp-portal) .kctp-btn-chico { min-height: 32px; padding: 5px 10px; }

.kctp-acciones {
    display: flex;
    gap: var(--kctp-e3);
    flex-wrap: wrap;
    margin-top: var(--kctp-e6);
    padding-top: var(--kctp-e5);
    border-top: 1px solid var(--kctp-linea);
}

/* ==========================================================================
   Estados
   ========================================================================== */

/* Pastilla: radio = alto/2, texto de 12px. El punto se queda porque la
   informacion no puede depender solo del color (WCAG 2.2). */
.kctp-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
    line-height: 1;
    padding: 6px 10px;
    border-radius: var(--kctp-r-pastilla);
    border: 1px solid;
    white-space: nowrap;
    letter-spacing: -.004em;
}
.kctp-estado::before { content: "●"; font-size: .5rem; opacity: .8; }
/* Cinco familias y ni una mas, cada una con su significado. Antes habia
   ademas un lila (#6b4f96) y un azul (#1d4f8f) que no salen de la marca:
   en la bandeja convivian seis colores de pastilla a la vez.

     neutro  el caso esta quieto (borrador, cerrada, cancelada)
     vino    le toca al profesional (lista para revision, en revision)
     ambar   se espera algo del paciente
     verde   terminado bien
     rojo    salio de la via remota                                          */
.kctp-e-BORRADOR,
.kctp-e-ENVIADA,
.kctp-e-CERRADA,
.kctp-e-CANCELADA,
.kctp-e-REALIZADA,
.kctp-e-CANCELADA_V { background: var(--kctp-crema); border-color: var(--kctp-borde); color: var(--kctp-tenue); }

.kctp-e-LISTA_REVISION { background: var(--kctp-acento-sw); border-color: #e3cdd6; color: var(--kctp-acento); }
.kctp-e-EN_REVISION    { background: var(--kctp-blanco);    border-color: var(--kctp-acento-cl); color: var(--kctp-acento); }

.kctp-e-INFO_PENDIENTE,
.kctp-e-SOLICITADA  { background: var(--kctp-aviso-sw); border-color: var(--kctp-aviso-bd); color: var(--kctp-aviso); }

.kctp-e-APROBADA,
.kctp-e-AGENDADA    { background: var(--kctp-ok-sw); border-color: var(--kctp-ok-bd); color: var(--kctp-ok); }

.kctp-e-DERIVADA    { background: var(--kctp-alerta-sw); border-color: var(--kctp-alerta-bd); color: var(--kctp-alerta); }

/* ==========================================================================
   Imágenes
   ========================================================================== */

.kctp-capturas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }
/* La fotografia no se enmarca: ninguna de las dos referencias le pone borde
   a una imagen. Aqui la caja existe solo para colgar el rotulo. */
.kctp-captura {
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-panel);
    background: var(--kctp-blanco);
    box-shadow: none;
    overflow: hidden;
}
.kctp-captura-cabeza { padding: 12px 16px; border-bottom: 1px solid var(--kctp-linea); background: var(--kctp-blanco); }
.kctp-captura-cabeza strong { display: block; font-size: var(--kctp-t-menor); font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); }
.kctp-captura-cabeza small { color: var(--kctp-tenue); font-size: var(--kctp-t-micro); }
.kctp-captura-cuerpo { padding: 16px; }
.kctp-portal .kctp-captura { border: 0; box-shadow: var(--kctp-sombra); border-radius: var(--kctp-radio-ch); }
.kctp-miniatura {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--kctp-radio-ch);
    background: #f1ecee;
    display: block;
}
.kctp-vacio {
    aspect-ratio: 3 / 4;
    border: 2px dashed var(--kctp-borde);
    border-radius: var(--kctp-radio-ch);
    display: grid;
    place-content: center;
    color: var(--kctp-tenue);
    text-align: center;
    padding: 1rem;
    font-size: var(--kctp-t-menor);
}
.kctp-motivos { margin: .7rem 0 0; padding-left: 1.1rem; font-size: var(--kctp-t-menor); }
.kctp-motivos li { margin-bottom: .35rem; }
.kctp-motivos em { color: var(--kctp-tenue); font-style: normal; display: block; }

/* Galería longitudinal */
.kctp-galeria-fecha {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 1.4rem 0 .7rem;
    font-size: var(--kctp-t-menor);
    color: var(--kctp-tenue);
}
.kctp-galeria-fecha::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--kctp-borde);
}
.kctp-galeria-fecha strong { color: var(--kctp-tinto); font-size: var(--kctp-t-menor); font-weight: var(--kctp-peso-medio); }

/* ==========================================================================
   Ficha del profesional
   ========================================================================== */

.kctp-ficha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--kctp-e5); align-items: start; }
@media (max-width: 991px) { .kctp-ficha { grid-template-columns: 1fr; } }

/* Del lado del personal manda el BORDE: una sola linea de pelo, radio de 8px
   y cero sombra. La sombra se reserva para lo que de verdad flota (menus). */
.kctp-panel {
    background: var(--kctp-blanco);
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-panel);
    box-shadow: none;
    margin-bottom: var(--kctp-e4);
    overflow: hidden;
}
.kctp-panel-cabeza {
    padding: 14px 20px;
    border-bottom: 1px solid var(--kctp-linea);
    background: var(--kctp-blanco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--kctp-e3);
    flex-wrap: wrap;
}
.kctp-panel-cabeza h3 {
    font-size: var(--kctp-t-seccion);
    letter-spacing: -.015em;
    margin: 0;
}
.kctp-panel-cuerpo { padding: 20px; font-size: var(--kctp-t-densa); }
.kctp-panel.kctp-cerrado .kctp-panel-cabeza { border-bottom-color: transparent; }
.kctp-panel-cuerpo > :last-child { margin-bottom: 0; }

.kctp-datos { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--kctp-e5); font-size: var(--kctp-t-densa); }
.kctp-datos dt { color: var(--kctp-tenue); font-weight: var(--kctp-peso-normal); }
.kctp-datos dd { margin: 0; color: var(--kctp-tinta); }

.kctp-respuestas { width: 100%; font-size: var(--kctp-t-densa); border-collapse: collapse; }
.kctp-respuestas th {
    text-align: left;
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tenue);
    padding: 10px var(--kctp-e4) 10px 0;
    vertical-align: top;
    width: 46%;
}
.kctp-respuestas td { padding: 10px 0; vertical-align: top; color: var(--kctp-tinta); }
.kctp-respuestas tr + tr th, .kctp-respuestas tr + tr td { border-top: 1px solid var(--kctp-linea); }
/* Rotulo de bloque sin mayusculas ni tracking abierto: lo distingue el color
   y el peso, no el grito. */
.kctp-bloque-titulo {
    font-size: var(--kctp-t-menor);
    letter-spacing: -.008em;
    color: var(--kctp-tinto);
    padding-top: var(--kctp-e5);
    font-weight: var(--kctp-peso-medio);
}

.kctp-nivel {
    display: inline-block;
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
    padding: 3px 8px;
    border-radius: var(--kctp-r-campo);
    letter-spacing: -.004em;
}
.kctp-n-ausente  { background: var(--kctp-crema); color: var(--kctp-tenue); }
.kctp-n-leve     { background: var(--kctp-ok-sw); color: var(--kctp-ok); }
.kctp-n-moderado { background: var(--kctp-aviso-sw); color: var(--kctp-aviso); }
.kctp-n-marcado  { background: var(--kctp-alerta-sw); color: var(--kctp-alerta); }

.kctp-componente {
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-panel);
    padding: 14px 16px;
    margin-bottom: var(--kctp-e3);
    background: var(--kctp-blanco);
}
.kctp-componente.est-APROBADO { border-left: 4px solid var(--kctp-ok); }
.kctp-componente.est-EDITADO  { border-left: 4px solid var(--kctp-acento); }
.kctp-componente.est-RETIRADO { border-left: 4px solid var(--kctp-borde); opacity: .58; }
.kctp-componente.est-PROPUESTO{ border-left: 4px solid var(--kctp-aviso); }
.kctp-componente h4 { font-size: var(--kctp-t-densa); font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); margin: 0 0 var(--kctp-e1); }
.kctp-componente .kctp-meta { font-size: var(--kctp-t-meta); color: var(--kctp-tenue); }
.kctp-original {
    background: var(--kctp-crema);
    border-left: 3px solid var(--kctp-nude);
    padding: .5rem .75rem;
    font-size: var(--kctp-t-menor);
    color: var(--kctp-tenue);
    margin-top: .6rem;
    border-radius: 0 6px 6px 0;
}

.kctp-nota { border: 1px solid var(--kctp-borde); border-radius: var(--kctp-r-panel); padding: 16px; margin-bottom: var(--kctp-e3); }
.kctp-nota.firmada { border-left: 4px solid var(--kctp-ok); }
.kctp-nota-meta { font-size: var(--kctp-t-meta); color: var(--kctp-tenue); margin-bottom: .5rem; }
.kctp-nota-cuerpo { white-space: pre-wrap; }
.kctp-adenda {
    margin: .85rem 0 0 1.1rem;
    padding: .75rem .9rem;
    border-left: 3px solid var(--kctp-acento-cl);
    background: var(--kctp-acento-sw);
    border-radius: 0 8px 8px 0;
    font-size: var(--kctp-t-menor);
}

.kctp-bitacora { font-size: var(--kctp-t-menor); }
.kctp-bitacora li { padding: .5rem 0; border-bottom: 1px solid var(--kctp-borde); list-style: none; }
.kctp-bitacora li:last-child { border-bottom: 0; }
.kctp-bitacora time { color: var(--kctp-tenue); }
.kctp-bitacora .kctp-actor-IA { color: var(--kctp-acento); font-weight: var(--kctp-peso-medio); }

/* ==========================================================================
   Bandeja
   ========================================================================== */

.kctp-tabs { display: flex; gap: var(--kctp-e2); flex-wrap: wrap; margin-bottom: var(--kctp-e5); }
/* Sin sombra: siete pastillas con sombra propia son ruido, no jerarquia. */
.kctp-tab {
    padding: 7px 14px;
    border-radius: var(--kctp-r-pastilla);
    border: 1px solid var(--kctp-borde);
    background: var(--kctp-blanco);
    color: var(--kctp-tinta);
    text-decoration: none;
    font-size: var(--kctp-t-menor);
    line-height: 1.35;
    box-shadow: none;
    transition: border-color var(--kctp-mov-hover), background var(--kctp-mov-hover);
}
.kctp-tab:hover { border-color: var(--kctp-borde-f); background: var(--kctp-crema); color: var(--kctp-tinta); }
.kctp-tab.activa { background: var(--kctp-acento); border-color: var(--kctp-acento); color: #fff; font-weight: var(--kctp-peso-medio); }
.kctp-tab .n { opacity: .55; margin-left: 6px; }

.kctp-tabla { width: 100%; border-collapse: collapse; background: var(--kctp-blanco); font-size: var(--kctp-t-densa); }
/* Cabecera de tabla: 12px en peso medio y color tenue. Sin mayusculas ni
   tracking abierto, y con UNA linea de pelo debajo en vez de dos grosores. */
.kctp-tabla th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--kctp-borde);
    font-size: var(--kctp-t-micro);
    letter-spacing: -.004em;
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tenue);
    background: var(--kctp-blanco);
}
.kctp-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--kctp-linea); vertical-align: middle; }
.kctp-tabla tr:last-child td { border-bottom: 0; }
.kctp-tabla tbody tr { transition: background var(--kctp-mov-hover); }
.kctp-tabla tr:hover td { background: var(--kctp-crema); }
.kctp-tabla .kctp-alerta-fila { border-left: 4px solid var(--kctp-alerta); }

.kctp-chip-alerta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--kctp-alerta-sw);
    color: var(--kctp-alerta);
    border-radius: var(--kctp-r-pastilla);
    padding: 3px 9px;
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
}

.kctp-vacio-mensaje { text-align: center; padding: 3rem 1rem; color: var(--kctp-tenue); }
.kctp-vacio-mensaje i { font-size: 2.2rem; display: block; margin-bottom: .6rem; opacity: .45; }

/* ==========================================================================
   Guía de captura de fotos
   ========================================================================== */

.kctp-tutorial {
    background: var(--kctp-blanco);
    border: 0;
    border-radius: var(--kctp-radio);
    box-shadow: var(--kctp-sombra);
    margin-bottom: var(--kctp-e5);
    overflow: hidden;
}
.kctp-tutorial > summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-menor);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--kctp-e2);
    background: var(--kctp-blanco);
    color: var(--kctp-tinto);
}
.kctp-tutorial > summary::-webkit-details-marker { display: none; }
.kctp-tutorial > summary span { font-weight: var(--kctp-peso-normal); font-size: var(--kctp-t-menor); color: var(--kctp-tenue); }
.kctp-tutorial > summary::after {
    content: "\F282";
    font-family: bootstrap-icons;
    margin-left: auto;
    font-size: var(--kctp-t-menor);
    transition: transform .2s ease;
}
.kctp-tutorial[open] > summary::after { transform: rotate(180deg); }
.kctp-tutorial-cuerpo { padding: 20px; border-top: 1px solid var(--kctp-linea); }

.kctp-pasos-guia { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.kctp-pasos-guia li {
    display: flex;
    gap: .85rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--kctp-borde);
}
.kctp-pasos-guia li:last-child { border-bottom: 0; padding-bottom: 0; }
.kctp-paso-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
    display: grid;
    place-content: center;
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-micro);
}
.kctp-pasos-guia strong { display: block; margin-bottom: 2px; font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); }
.kctp-pasos-guia p { margin: 0; font-size: var(--kctp-t-menor); color: var(--kctp-tenue); }

.kctp-guia-titulo {
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-alerta);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .8rem;
}

.kctp-errores { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .9rem; }
.kctp-errores figure { margin: 0; }
.kctp-errores figcaption { margin-top: .4rem; font-size: var(--kctp-t-meta); line-height: 1.45; }
.kctp-errores figcaption strong { display: block; color: var(--kctp-alerta); font-weight: var(--kctp-peso-medio); }
.kctp-errores figcaption span { color: var(--kctp-tenue); }

.kctp-diagrama {
    width: 100%;
    max-width: 160px;
    height: auto;
    display: block;
    background: var(--kctp-blanco);
    border-radius: 8px;
}
.kctp-diagrama-mal { max-width: 100%; }

.kctp-guia-nota {
    margin: 1.4rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--kctp-borde);
    font-size: var(--kctp-t-menor);
    color: var(--kctp-tenue);
}

.kctp-referencia {
    display: flex;
    gap: .8rem;
    align-items: center;
    background: var(--kctp-crema);
    border: 1px dashed var(--kctp-nude);
    border-radius: var(--kctp-radio-ch);
    padding: .6rem .7rem;
    margin-bottom: .8rem;
}
.kctp-referencia .kctp-diagrama { max-width: 74px; flex: 0 0 auto; background: transparent; }
.kctp-referencia p { margin: 0; font-size: var(--kctp-t-meta); color: var(--kctp-tenue); }

/* ==========================================================================
   Repaso, ficha y línea de tiempo
   ========================================================================== */

.kctp-repaso-bloque { border-bottom: 1px solid var(--kctp-borde); padding: 1rem 0; }
.kctp-repaso-bloque:last-child { border-bottom: 0; }
.kctp-repaso-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .5rem;
}
.kctp-repaso-cabeza h3 { font-size: var(--kctp-t-seccion); margin: 0; letter-spacing: -.015em; }
.kctp-repaso-cabeza a { font-size: var(--kctp-t-meta); white-space: nowrap; color: var(--kctp-acento); }

.kctp-repaso { width: 100%; font-size: var(--kctp-t-menor); border-collapse: collapse; }
.kctp-repaso th {
    text-align: left;
    font-weight: 400;
    color: var(--kctp-tenue);
    padding: .4rem .8rem .4rem 0;
    vertical-align: top;
    width: 52%;
}
.kctp-repaso td { padding: 8px 0; vertical-align: top; font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); }
.kctp-repaso tr + tr th, .kctp-repaso tr + tr td { border-top: 1px solid #f4f0f1; }
.kctp-repaso .kctp-sin-responder { color: var(--kctp-tenue); font-weight: 400; font-style: italic; }

.kctp-linea-tiempo { list-style: none; padding: 0; margin: 0; }
.kctp-linea-tiempo li {
    position: relative;
    padding: 0 0 1.2rem 1.6rem;
    border-left: 2px solid var(--kctp-borde);
}
.kctp-linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.kctp-linea-tiempo li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: .3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--kctp-blanco);
    border: 2px solid var(--kctp-borde-f);
}
/* SEGUNDA aparicion del oro: el punto de un hito. Un circulo de 12px por
   pantalla es exactamente la dosis de cuentagotas. */
.kctp-linea-tiempo li.hito::before { background: var(--kctp-oro); border-color: var(--kctp-oro); }
.kctp-linea-tiempo time { font-size: var(--kctp-t-micro); color: var(--kctp-tenue); display: block; }

.kctp-etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }
.kctp-etiqueta-dato {
    font-size: var(--kctp-t-meta);
    padding: .25rem .6rem;
    border-radius: 6px;
    background: var(--kctp-crema);
    border: 1px solid var(--kctp-borde);
}
.kctp-etiqueta-dato.ojo { background: var(--kctp-alerta-sw); border-color: var(--kctp-alerta-bd); color: var(--kctp-alerta); font-weight: var(--kctp-peso-medio); }

/* ==========================================================================
   Videoconsulta
   ========================================================================== */

/* PRIMERA de las dos apariciones del oro en todo el sistema: una linea de 2px
   arriba de la llamada a la videoconsulta, que es el momento caro del
   producto. Oro como filo, jamas como superficie. */
.kctp-video {
    background: var(--kctp-blanco);
    border: 0;
    border-top: 2px solid var(--kctp-oro);
    border-radius: 2px 2px var(--kctp-radio) var(--kctp-radio);
    padding: var(--kctp-e5);
    margin-bottom: var(--kctp-e5);
    box-shadow: var(--kctp-sombra);
}
.kctp-video h3 {
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    margin: 0 0 var(--kctp-e2);
}
.kctp-video p  { color: var(--kctp-tenue); font-size: var(--kctp-t-menor); margin-bottom: var(--kctp-e5); max-width: 52ch; }
.kctp-video-cita {
    background: var(--kctp-panel);
    border-radius: var(--kctp-radio-ch);
    padding: 14px 16px;
    margin-bottom: var(--kctp-e3);
    display: flex;
    align-items: center;
    gap: var(--kctp-e3);
}
.kctp-video-cita .kctp-icono {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: var(--kctp-acento);
    color: #fff;
    display: grid; place-content: center;
    font-size: 1.2rem;
    flex: 0 0 auto;
}
.kctp-video-cita strong { display: block; font-size: var(--kctp-t-menor); font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); }
.kctp-video-cita span { font-size: var(--kctp-t-micro); color: var(--kctp-tenue); }

/* Impresión */
@media print {
    .kctp-portal-top, .kctp-acciones, .kctp-no-imprimir, .kctp-barra-accion { display: none !important; }
    .kctp-lienzo { max-width: none; padding: 0; }
    .kctp-tarjeta, .kctp-panel { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   Ficha plegable (agregado 2026-08-26)
   12 secciones en un scroll largo obligaban a bajar mucho para encontrar algo.
   Ahora arrancan plegadas salvo Resumen y Decision, y cada profesional deja
   abiertas las que usa: app.js recuerda su eleccion.
   ========================================================================== */
.kctp-panel-cabeza.kctp-plegable {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.kctp-panel-cabeza.kctp-plegable:hover { background: var(--kctp-acento-sw); }
.kctp-panel-cabeza.kctp-plegable:focus-visible {
    outline: 2px solid var(--kctp-acento);
    outline-offset: -2px;
}
.kctp-flecha {
    flex: 0 0 auto;
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-meta);
    transition: transform .18s ease;
}
.kctp-panel.kctp-cerrado .kctp-flecha { transform: rotate(-90deg); }
.kctp-panel.kctp-cerrado .kctp-panel-cuerpo { display: none; }
@media (prefers-reduced-motion: reduce) { .kctp-flecha { transition: none; } }

/* Aviso de contradicciones: va arriba del todo porque es lo que el
   profesional tiene que resolver antes de decidir nada. */
.kctp-choques { margin-bottom: 1rem; }
.kctp-choques-lista { margin: .5rem 0 0; padding-left: 1.1rem; }
.kctp-choques-lista li { margin-bottom: .35rem; }
.kctp-choque-cat {
    display: inline-block; font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto);
    margin-right: .35rem;
}
.kctp-choque-pero {
    display: block; font-size: var(--kctp-t-menor); color: var(--kctp-tenue);
}

/* --- Sala de videoconsulta ------------------------------------------------
   La llamada tiene que ser lo mas alta posible sin empujar la pagina a hacer
   scroll: por eso la altura sale del viewport y no de una medida fija. El
   minimo esta para que en un telefono en horizontal siga siendo usable. */
.kctp-sala {
    position: relative;
    width: 100%;
    height: min(72vh, 720px);
    min-height: 320px;
    background: #16181d;
    border: 0;
    border-radius: var(--kctp-radio);
    overflow: hidden;
    box-shadow: var(--kctp-sombra);
    margin-bottom: var(--kctp-e3);
}
.kctp-sala iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.kctp-sala-pie {
    font-size: var(--kctp-t-meta);
    color: var(--kctp-tenue);
    margin-bottom: 1rem;
}
.kctp-sala-pie i { margin-right: .3rem; }

@media (max-width: 700px) {
    /* En el telefono la barra del navegador se come alto real, y una sala de
       72vh deja los controles de Jitsi fuera de la pantalla. */
    .kctp-sala { height: min(62vh, 520px); }
}

/* --- Categoria del expediente sin revisar --------------------------------
   Tres estados y no dos: sin revisar, revisada sin registros, y con
   registros. El del medio es el que hace justa la exigencia de completar
   las doce, y por eso "falta revisar" tiene que verse distinto de "vacia". */
.kctp-categoria.kctp-pendiente {
    border-color: var(--kctp-aviso);
    background: var(--kctp-aviso-sw);
}
.kctp-falta {
    color: var(--kctp-aviso);
    font-weight: var(--kctp-peso-medio);
}

/* --- Lo que el paciente declaro no tener ---------------------------------
   Doce renglones que el clinico descarta de un vistazo: por eso van juntos,
   en dos columnas y con la fecha alineada a la derecha. */
.kctp-declaradas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .15rem .9rem;
}
.kctp-declaradas li {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: var(--kctp-t-menor);
    padding: .28rem 0;
    border-bottom: 1px solid var(--kctp-borde);
}
.kctp-declaradas li span {
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-meta);
    white-space: nowrap;
}

/* ==========================================================================
   EL LADO DEL PERSONAL: el mismo sistema, en modo denso

   Todo lo de abajo repinta piezas que viven en styles.css y en bootstrap, sin
   tocar ninguno de esos dos archivos: kctp.css se carga despues, asi que gana
   por orden de cascada. Se hace aqui y no alla porque styles.css es la hoja
   del modulo de rutinas y no es de este agente.

   El panel entero era rosa pastel (#e091aa) con tarjetas de metricas en cuatro
   colores. No era la marca de KARA y no se parecia en nada al portal del
   paciente: parecian dos productos distintos con el mismo login.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */
body {
    font-family: var(--kctp-sans);
    font-size: var(--kctp-t-densa);
    line-height: 1.55;
    letter-spacing: -.004em;
    color: var(--kctp-tinta);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.kctp-portal { font-size: var(--kctp-t-cuerpo); }

.kr-content h1 { font-size: var(--kctp-t-titulo); line-height: var(--kctp-lh-titulo); letter-spacing: var(--kctp-ls-titulo); }
.kr-content h2 { font-size: var(--kctp-t-seccion); letter-spacing: -.015em; }
.kr-content p  { max-width: 68ch; }

/* --- Barra lateral -------------------------------------------------------
   Sin degradado y sin bloque de color: la seccion abierta se marca con el
   tinte del vino al 8% y el texto en vino, no con un rectangulo saturado. */
.kr-sidebar {
    width: 244px;
    background: var(--kctp-blanco);
    border-right: 1px solid var(--kctp-borde);
}
.kr-brand {
    padding: var(--kctp-e5) var(--kctp-e5) var(--kctp-e4);
    font-family: var(--kctp-serif);
    font-size: var(--paso-5);
    font-weight: var(--kctp-peso-normal);
    letter-spacing: -.015em;
    color: var(--kctp-tinto);
    border-bottom: 1px solid var(--kctp-linea);
}
.kr-brand small {
    display: block;
    font-family: var(--kctp-sans);
    font-size: var(--kctp-t-micro);
    letter-spacing: -.002em;
    text-transform: none;
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tenue);
    margin-top: 4px;
}
.kr-nav { padding: var(--kctp-e3) var(--kctp-e3); }
.kr-nav-sep {
    font-size: var(--kctp-t-micro);
    text-transform: none;
    letter-spacing: -.002em;
    color: var(--kctp-tenue-2);
    font-weight: var(--kctp-peso-normal);
    padding: var(--kctp-e5) var(--kctp-e3) var(--kctp-e2);
}
.kr-nav-link {
    gap: var(--kctp-e3);
    padding: 8px var(--kctp-e3);
    margin-bottom: 1px;
    border-radius: var(--kctp-r-campo);
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-menor);
    transition: background var(--kctp-mov-hover), color var(--kctp-mov-hover);
}
.kr-nav-link:hover  { background: var(--kctp-crema); color: var(--kctp-tinto); }
.kr-nav-link.active {
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
    font-weight: var(--kctp-peso-medio);
}
.kr-nav-link i { font-size: 1rem; color: var(--kctp-tenue); }
.kr-nav-link.active i { color: var(--kctp-acento); }
.kr-sidebar-foot {
    padding: var(--kctp-e4) var(--kctp-e5);
    font-size: var(--kctp-t-micro);
    color: var(--kctp-tenue-2);
    border-top: 1px solid var(--kctp-linea);
}

/* --- Barra superior ------------------------------------------------------
   El titulo de aqui es cromo de navegacion, no el titular de la pagina: por
   eso va en Inter de 15px y no en la serif grande. */
.kr-topbar {
    padding: var(--kctp-e3) var(--kctp-e6);
    border-bottom: 1px solid var(--kctp-borde);
    min-height: 60px;
}
.kr-topbar-title {
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-menor);
    color: var(--kctp-tinta);
    letter-spacing: -.008em;
}
.kr-content { padding: var(--kctp-e6); }
@media (min-width: 1200px) { .kr-content { padding: var(--kctp-e7) var(--kctp-e6); } }

.kr-avatar {
    width: 30px; height: 30px;
    background: var(--kctp-acento);
    font-weight: var(--kctp-peso-medio);
    font-size: var(--kctp-t-micro);
}
.kr-user-name { font-size: var(--kctp-t-menor); font-weight: var(--kctp-peso-medio); }
.kr-user-rol  { font-size: var(--kctp-t-micro); color: var(--kctp-tenue); }
.kr-menu-btn {
    border: 1px solid var(--kctp-borde);
    color: var(--kctp-tinta);
    border-radius: var(--kctp-r-campo);
}

/* --- Tarjetas y paneles del personal: borde, nunca sombra ---------------- */
.kr-card {
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-panel);
    box-shadow: none;
}
.kr-sec-titulo {
    font-family: var(--kctp-serif);
    color: var(--kctp-tinto);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-seccion);
    letter-spacing: -.015em;
    margin-bottom: var(--kctp-e4);
    padding-bottom: var(--kctp-e3);
    border-bottom: 1px solid var(--kctp-linea);
}
.kr-sec-titulo i { color: var(--kctp-tenue); font-size: .9em; }

/* --- Metricas del panel --------------------------------------------------
   Eran cuatro rectangulos pastel (rosa, lila, menta, durazno). Ahora son
   cuatro paneles iguales y lo que cambia es el NUMERO: la jerarquia la da el
   tamano de la cifra, no un color de fondo por cada una. */
.kr-metricas { gap: var(--kctp-e4); margin-bottom: var(--kctp-e6); }
.kr-metrica,
.kr-m-rosa, .kr-m-mint, .kr-m-lila, .kr-m-peach {
    background: var(--kctp-blanco);
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-panel);
    padding: var(--kctp-e5);
    color: var(--kctp-tinta);
}
.kr-metrica-num {
    font-family: var(--kctp-serif);
    font-size: var(--paso-7);
    font-weight: var(--kctp-peso-normal);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--kctp-tinto);
}
.kr-metrica-lbl {
    font-size: var(--kctp-t-menor);
    text-transform: none;
    letter-spacing: -.006em;
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tenue);
    margin-top: var(--kctp-e2);
}

/* --- Chips, insignias y avisos ------------------------------------------- */
.kr-chip, .kr-chip-nude, .kr-chip-equipo {
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento);
    border-radius: var(--kctp-r-pastilla);
    padding: 3px 10px;
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
}
.kr-badge {
    border-radius: var(--kctp-r-campo);
    padding: 3px 8px;
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
}
.kr-b-ok   { background: var(--kctp-ok-sw);     color: var(--kctp-ok); }
.kr-b-info { background: var(--kctp-acento-sw); color: var(--kctp-acento); }
.kr-b-def  { background: var(--kctp-crema);     color: var(--kctp-tenue); }
.kr-b-warn { background: var(--kctp-aviso-sw);  color: var(--kctp-aviso); }
.kr-b-off  { background: var(--kctp-crema);     color: var(--kctp-tenue); }

.kr-aviso {
    border-radius: 10px;
    padding: 14px 16px;
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    gap: var(--kctp-e3);
}
.kr-aviso-demo   { background: var(--kctp-acento-sw); border-color: #ead4dc;               color: #7a2843; }
.kr-aviso-ok     { background: var(--kctp-ok-sw);     border-color: var(--kctp-ok-bd);     color: #185f45; }
.kr-aviso-alerta { background: var(--kctp-aviso-sw);  border-color: var(--kctp-aviso-bd);  color: var(--kctp-aviso); }

/* --- Tablas del modulo de rutinas ---------------------------------------- */
.kr-table thead th {
    font-size: var(--kctp-t-micro);
    text-transform: none;
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
    font-weight: var(--kctp-peso-medio);
    border-bottom: 1px solid var(--kctp-borde);
    background: var(--kctp-blanco);
    padding: 12px 16px;
}
.kr-table td {
    font-size: var(--kctp-t-densa);
    padding: 14px 16px;
    border-bottom-color: var(--kctp-linea);
}

/* --- Boton del modulo de rutinas ----------------------------------------- */
.btn-kr {
    background: var(--kctp-acento);
    border-radius: var(--kctp-r-campo);
    padding: 9px 16px;
    font-size: var(--kctp-t-menor);
    font-weight: var(--kctp-peso-medio);
    min-height: 40px;
    justify-content: center;
    transition: background var(--kctp-mov-hover);
}
.btn-kr:hover  { background: var(--kctp-acento-os); }
.btn-kr:active { transform: none; }
.btn-kr.btn-sm { padding: 5px 10px; min-height: 32px; font-size: var(--kctp-t-micro); }

/* --- Entrada del personal ------------------------------------------------
   Ya no hay nada que repintar: /medico dejo de tener su propia tarjeta de
   login y entra por la puerta comun (.kctp-acceso, mas abajo). Las reglas
   .kr-login-* de styles.css se quedan huerfanas a proposito; ese archivo es
   del modulo de rutinas y no se toca desde aqui. */

/* --- Documento de la rutina ---------------------------------------------- */
.kr-doc-cab    { border-bottom: 1px solid var(--kctp-borde); padding-bottom: var(--kctp-e5); margin-bottom: var(--kctp-e6); }
.kr-doc-titulo {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-titulo);
    letter-spacing: var(--kctp-ls-titulo);
}
.kr-doc-sub { color: var(--kctp-tenue); font-size: var(--kctp-t-menor); }
.kr-doc-logo {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    letter-spacing: -.015em;
    color: var(--kctp-tinto);
    background: transparent;
    padding: 0;
}
.kr-doc-h {
    font-size: var(--kctp-t-menor);
    font-weight: var(--kctp-peso-medio);
    text-transform: none;
    letter-spacing: -.006em;
    color: var(--kctp-tenue);
    margin-bottom: var(--kctp-e3);
}
.kr-doc-p { font-size: var(--kctp-t-densa); line-height: 1.65; max-width: 68ch; }
.kr-dia, .kr-dia-edit { border-color: var(--kctp-borde); border-radius: var(--kctp-r-panel); }
.kr-dia-cab, .kr-dia-cab-edit { background: var(--kctp-blanco); border-bottom-color: var(--kctp-linea); }
.kr-dia-nombre { color: var(--kctp-tinto); font-weight: var(--kctp-peso-medio); }
.kr-dia-enfoque { text-transform: none; letter-spacing: -.004em; font-size: var(--kctp-t-micro); }
.kr-turno-h {
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
    text-transform: none;
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
}
.kr-paso-t   { font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); }
.kr-paso-min { background: var(--kctp-acento-sw); color: var(--kctp-acento); font-weight: var(--kctp-peso-medio); font-size: var(--kctp-t-micro); }
.kr-reco     { border: 1px solid var(--kctp-borde); border-radius: var(--kctp-r-panel); padding: var(--kctp-e4); }
.kr-reco h6  { font-size: var(--kctp-t-menor); font-weight: var(--kctp-peso-medio); text-transform: none; letter-spacing: -.006em; }
.kr-reco-mint, .kr-reco-lila, .kr-reco-peach { background: var(--kctp-blanco); color: var(--kctp-tinta); }
.kr-reco-mint  h6 { color: var(--kctp-ok); }
.kr-reco-lila  h6 { color: var(--kctp-acento); }
.kr-reco-peach h6 { color: var(--kctp-aviso); }
.kr-ficha-medica { background: var(--kctp-acento-sw); border-left: 3px solid var(--kctp-acento); border-radius: 0 var(--kctp-r-panel) var(--kctp-r-panel) 0; }
.kr-dl dt { font-size: var(--kctp-t-micro); text-transform: none; letter-spacing: -.004em; color: var(--kctp-tenue); font-weight: var(--kctp-peso-normal); }
.kr-dl dd { font-size: var(--kctp-t-densa); }
.kr-print-hoja { border-radius: var(--kctp-r-panel); box-shadow: var(--kctp-sombra); padding: var(--kctp-e7); }
.kr-toast { border-radius: var(--kctp-r-panel); box-shadow: var(--kctp-sombra-alt); font-size: var(--kctp-t-menor); }
.kr-empty { color: var(--kctp-tenue); font-size: var(--kctp-t-menor); padding: var(--kctp-e8) var(--kctp-e4); }

/* ==========================================================================
   Bootstrap, vestido de KARA

   Hay 112 .form-control, 26 .form-select y 21 .table en las vistas. Sin esto
   conviven un campo de Bootstrap (radio 6px, foco azul) y uno del sistema
   (radio 10px, foco vino) en la misma pantalla, que es exactamente la mezcla
   que hace que algo se vea armado con piezas ajenas.
   ========================================================================== */

.form-control, .form-select {
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-campo);
    background-color: var(--kctp-blanco);
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-densa);
    padding: 8px 12px;
    min-height: 40px;
    box-shadow: none;
    transition: border-color var(--kctp-mov-hover), box-shadow var(--kctp-mov-hover);
}
.form-control:focus, .form-select:focus {
    border-color: var(--kctp-acento-cl);
    box-shadow: 0 0 0 3px rgba(91, 12, 47, .1);
    color: var(--kctp-tinta);
}
.form-control::placeholder { color: var(--kctp-tenue-2); }
.form-control-sm, .form-select-sm { min-height: 32px; padding: 4px 10px; font-size: var(--kctp-t-micro); }
.form-label { font-size: var(--kctp-t-menor); font-weight: var(--kctp-peso-medio); color: var(--kctp-tinto); margin-bottom: var(--kctp-e2); }
.form-text  { font-size: var(--kctp-t-micro); color: var(--kctp-tenue); }
.form-check-input:checked { background-color: var(--kctp-acento); border-color: var(--kctp-acento); }
.form-check-input:focus   { border-color: var(--kctp-acento-cl); box-shadow: 0 0 0 3px rgba(91, 12, 47, .1); }
.form-check-label { font-size: var(--kctp-t-menor); }

.btn {
    border-radius: var(--kctp-r-campo);
    font-size: var(--kctp-t-menor);
    font-weight: var(--kctp-peso-medio);
    padding: 9px 16px;
    transition: background-color var(--kctp-mov-hover), border-color var(--kctp-mov-hover), color var(--kctp-mov-hover);
}
.btn-sm { padding: 5px 10px; font-size: var(--kctp-t-micro); }
.btn-light {
    background: var(--kctp-blanco);
    border: 1px solid var(--kctp-borde);
    color: var(--kctp-tinta);
}
.btn-light:hover, .btn-light:focus {
    background: var(--kctp-crema);
    border-color: var(--kctp-borde-f);
    color: var(--kctp-tinto);
}
.btn-outline-secondary {
    border-color: var(--kctp-borde);
    color: var(--kctp-tinta);
}
.btn-outline-secondary:hover {
    background: var(--kctp-crema);
    border-color: var(--kctp-borde-f);
    color: var(--kctp-tinto);
}
.btn-primary { background: var(--kctp-acento); border-color: var(--kctp-acento); }
.btn-primary:hover, .btn-primary:focus { background: var(--kctp-acento-os); border-color: var(--kctp-acento-os); }

.card {
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-panel);
    box-shadow: none;
}
.card-header { background: var(--kctp-blanco); border-bottom: 1px solid var(--kctp-linea); padding: 14px 20px; }
.card-body   { padding: 20px; }

.table { --bs-table-color: var(--kctp-tinta); --bs-table-border-color: var(--kctp-linea); font-size: var(--kctp-t-densa); }
.table > :not(caption) > * > * { padding: 12px 16px; }
.table > thead { border-bottom: 1px solid var(--kctp-borde); }

.badge { font-weight: var(--kctp-peso-medio); font-size: var(--kctp-t-micro); border-radius: var(--kctp-r-campo); padding: 4px 8px; }

code, kbd, samp {
    font-family: ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
    font-size: .88em;
    letter-spacing: 0;
}

/* Lo unico que de verdad flota es un menu: aqui si va la sombra de dos capas. */
.dropdown-menu {
    border: 1px solid var(--kctp-borde);
    border-radius: 10px;
    box-shadow: var(--kctp-sombra-alt);
    padding: 6px;
    font-size: var(--kctp-t-menor);
}
.dropdown-item {
    border-radius: var(--kctp-r-campo);
    padding: 8px 12px;
    color: var(--kctp-tinta);
    display: flex;
    align-items: center;
    gap: var(--kctp-e2);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--kctp-crema); color: var(--kctp-tinto); }
.dropdown-item:active { background: var(--kctp-acento); color: #fff; }
.dropdown-divider { border-top-color: var(--kctp-linea); margin: 4px 0; }

.modal-content { border: 1px solid var(--kctp-borde); border-radius: var(--kctp-radio-ch); box-shadow: var(--kctp-sombra-alt); }
.modal-header  { border-bottom: 1px solid var(--kctp-linea); padding: var(--kctp-e5); }
.modal-title   { font-family: var(--kctp-serif); font-weight: var(--kctp-peso-normal); font-size: var(--kctp-t-seccion); color: var(--kctp-tinto); letter-spacing: -.015em; }
.modal-body    { padding: var(--kctp-e5); }
.modal-footer  { border-top: 1px solid var(--kctp-linea); padding: var(--kctp-e4) var(--kctp-e5); }

/* Nadie pidio animacion: quien la desactiva en su sistema no la ve. */
@media (prefers-reduced-motion: reduce) {
    .kctp-categoria, .kctp-fila, .kctp-volver, .kctp-tab, .kctp-btn,
    .kr-nav-link, .btn, .form-control, .form-select {
        transition: none;
    }
    .kctp-categoria:hover, .kctp-fila:hover { transform: none; }
    .kctp-progreso-barra span { transition: none; }
}


/* ==========================================================================
   Cierre del sistema: lo que se cuela por herencia

   Estas dos reglas van al final y con :where() a proposito. :where() no suma
   especificidad, asi que cualquier regla concreta de mas arriba (y cualquier
   hoja de pantalla en css/v2/) las pisa sin pelear.
   ========================================================================== */

/* Un titulo suelto en una vista, sin clase, tambien es un titulo del sistema.
   "Mis antecedentes" salia en Inter de 17px en negrita al lado de "Mi ficha
   clinica" en serif de 28px: parecian de dos productos distintos. */
.kctp-portal :where(h1) {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-display);
    line-height: var(--kctp-lh-display);
    letter-spacing: var(--kctp-ls-display);
}
.kctp-portal :where(h2) {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    margin-bottom: var(--kctp-e2);
}
.kctp-portal :where(h3),
.kr-content :where(h3) {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tinto);
    font-size: var(--kctp-t-seccion);
    line-height: 1.3;
    letter-spacing: -.015em;
}

/* El "negrita" del sistema es 500, no 700. Bootstrap le pone 'bolder' a todo
   <strong> y <b>, y con Inter eso son 700: en una tabla de veinte filas cada
   codigo de caso gritaba mas que el titulo de la pagina. */
/* Sin :where(): Bootstrap declara 'b, strong { font-weight: bolder }' con
   especificidad de elemento, y :where() vale cero. Igualando la especificidad
   gana esta hoja, que se carga despues. */
strong, b { font-weight: var(--kctp-peso-medio); }

/* Una tabla de siete columnas dentro de un telefono no se "adapta": se
   aplasta. En 390px cada celda quedaba en una columna de 40px y "KC-26-00016"
   se partia en tres renglones. app.js ya envuelve toda <table> en un cajon que
   desplaza; aqui se le da a la tabla el ancho que necesita para leerse, y la
   pagina sigue sin desplazarse a lo ancho porque quien se mueve es el cajon.
   Si no hay JavaScript no hay envoltorio, y entonces esta regla no aplica: por
   eso el selector exige el cajon. */
.kr-tabla-scroll { overscroll-behavior-x: contain; }
.kr-tabla-scroll > .kctp-tabla,
.kr-tabla-scroll > .table { min-width: 720px; }
/* Un identificador es una palabra sola aunque lleve guiones: "KC-26-00016" no
   se parte en "KC-26-" y "00016". Sin esto el navegador usa los guiones como
   punto de corte y la primera columna se estrangula. */
.kctp-tabla th:first-child,
.kctp-tabla td:first-child strong { white-space: nowrap; }




/* La puerta va DESPUES del cierre a proposito: las reglas :where(h1/h2/h3) de
   arriba valen (0,1,0) por culpa del .kctp-portal que las precede, o sea lo
   mismo que .kctp-acceso-hero. En un empate gana la ultima, y el titular de
   64px se quedaba en los 40px del display. */
/* ==========================================================================
   LA PUERTA DE ENTRADA (.kctp-acceso)

   Las dos mitades del producto entran por aqui: el paciente por /portal/login
   y el personal por /medico. Es UNA sola puerta con dos textos: mismo chasis,
   mismo campo, mismo boton, mismo pie legal. Un producto con dos disenos se ve
   barato antes de que nadie lea una palabra.

   La composicion es un split de dos columnas a partir de 960px:

     IZQUIERDA  panel de marca a sangre. TRES filas: logo arriba, la obra en el
                centro y el titular abajo. La fila del centro es la que importa:
                antes eran 489px de vino liso entre el logo y el titular, y un
                vacio que no es simetrico ni sostiene nada no se lee como lujo,
                se lee como una plantilla a la que le falta la foto.
     DERECHA    fondo hueso, el formulario en una tarjeta blanca de 420px que
                flota con sombra, y debajo el aviso legal alineado a esa misma
                columna de 420px.

   LA OBRA (.kctp-acceso-obra) es lo que las dos referencias tienen y nosotros
   no teniamos: un objeto renderizado que ocupa el centro del pliegue. Lovi
   pone un telefono con un rostro; Stripe pone una tarjeta de pago con datos,
   elevacion y jerarquia. Aqui va lo unico que este producto tiene que ensenar
   en la puerta: la ficha del plan, con su sello de estado, sus pasos y la
   firma de que un profesional lo reviso. No es adorno: es el producto.

   Por que no hay una fotografia debajo del vino: en la aplicacion no existe
   ni un solo archivo de imagen aparte del logo, y meter una foto de piel
   inventada en la puerta de una plataforma clinica es exactamente lo que no
   se debe hacer. La sustancia la dan tres capas reales -degradado de dos
   focos, grano fino y una tarjeta de vidrio con contenido dentro- que es lo
   que impide que el panel se lea como pintura plana.

   En telefono colapsa a una columna: el panel se vuelve una banda y la obra
   baja a su version compacta (cabecera y firma, sin los pasos) para no empujar
   el formulario fuera de la primera pantalla. Ni una sola pieza desaparece.

   Aqui se ignora a proposito la division denso/comodo del resto de la hoja:
   la puerta se ve igual en los dos lados.
   ========================================================================== */

.kctp-acceso {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--kctp-fondo);
    min-height: 100%;
}
/* El split entra a 960 y no a 900: por debajo, la columna del formulario se
   queda en 320px utiles y el campo de correo pierde la medida. Entre 960 y
   1200 las dos columnas van a partes iguales; a partir de ahi la marca gana
   el 53% que le corresponde. */
@media (min-width: 960px) {
    .kctp-acceso { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
    .kctp-acceso { grid-template-columns: 1.15fr 1fr; }
}

/* --- Columna de marca ---------------------------------------------------- */

/* Tres capas de color, no una: un foco caliente arriba a la izquierda, un
   rebote abajo a la derecha y un eje diagonal de vino a tinto. Un solo
   degradado se lee como un rectangulo pintado; tres focos se leen como una
   superficie con luz encima. Todos los colores salen de la marca. */
.kctp-acceso-marca {
    position: relative;
    isolation: isolate;
    background-color: #2a0616;
    background-image:
        radial-gradient(122% 88% at 2% -10%, rgba(104, 16, 53, .82) 0%, rgba(68, 10, 35, .44) 44%, rgba(38, 5, 20, 0) 78%),
        radial-gradient(72% 56% at 102% 106%, rgba(92, 14, 47, .50) 0%, rgba(92, 14, 47, 0) 62%),
        linear-gradient(162deg, #360a1f 0%, #260614 56%, #190409 100%);
    color: #fff;
    /* Logo arriba, obra en el centro y titular abajo. La fila del medio es la
       elastica: es la que absorbe el alto sobrante de la pantalla en vez de
       dejarlo como un hueco al azar entre dos bloques. */
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: start;
    align-content: start;
    gap: var(--kctp-e5);
    /* El margen lateral crece con la pantalla en vez de saltar de golpe en el
       punto de quiebre: 24px en telefono, 40px en tableta. */
    padding: var(--kctp-e5) clamp(24px, 5vw, 40px) var(--kctp-e6);
}
/* El grano. Es la diferencia entre "un color" y "un material": sin el, un
   degradado a pantalla completa muestra bandas y se lee como plantilla. Va en
   su propia capa para poder dejarlo al 5% sin destenir el vino. */
.kctp-acceso-marca::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: .055;
}
.kctp-acceso-marca > * { position: relative; z-index: 1; }

@media (min-width: 960px) {
    .kctp-acceso-marca {
        /* Y aqui la fila del centro pasa a 1fr: la obra queda centrada en el
           alto libre y el titular anclado abajo. Es lo que convierte el hueco
           muerto en una composicion de tres tiempos. */
        grid-template-rows: auto 1fr auto;
        align-content: stretch;
        gap: var(--kctp-e6);
        /* El margen de arriba y abajo se mide contra el ALTO de la pantalla,
           no contra su ancho: en un portatil de 1440x800 un relleno fijo de
           72px dejaba la composicion 11px mas alta que el pliegue y salia una
           barra de desplazamiento en una pantalla de acceso. */
        padding: clamp(40px, 7vh, 72px) var(--kctp-e7);
    }
}
@media (min-width: 1200px) {
    .kctp-acceso-marca { padding-inline: var(--kctp-e8); }
}
@media (min-width: 1440px) {
    .kctp-acceso-marca { padding-inline: 80px; }
}
/* La medida del titular: 30rem, no el ancho de la columna. */
.kctp-acceso-marca-pie { width: 100%; max-width: 30rem; }

/* El orden en telefono es logo -> titular -> obra, para que la tarjeta quede
   apoyada justo en la costura con el formulario. En escritorio es logo ->
   obra -> titular, porque ahi el hueco a llenar esta en el centro. */
.kctp-acceso-logo      { order: 1; }
.kctp-acceso-marca-pie { order: 2; }
.kctp-acceso-obra      { order: 3; }
@media (min-width: 960px) {
    .kctp-acceso-obra      { order: 2; align-self: center; }
    .kctp-acceso-marca-pie { order: 3; align-self: end; }
}

/* El logo es un trazado solido en #260514: invertirlo lo deja en blanco puro
   sin necesidad de un segundo archivo. */
.kctp-acceso-logo {
    display: block;
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
}
@media (min-width: 960px) { .kctp-acceso-logo { height: 34px; } }

/* El titular del sistema: peldano 9 (64px), peso 400, interlineado 1.02 y
   tracking -.034em. Un display de 64px en peso 400 se ve caro; el mismo texto
   a 21px en peso 700 se ve a plantilla. Es la palanca mas fuerte y la mas
   barata de aplicar. */
.kctp-acceso-hero {
    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;
    margin: 0;
    max-width: 15ch;
    text-wrap: balance;
}

/* La linea de prueba, separada por un filete de 40px por 2px. Iba en oro; el
   oro se mudo al sello de la obra, que es donde ese punto significa algo
   ("esto lo firmo una persona"). Aqui basta una linea de luz. */
.kctp-acceso-prueba {
    margin: var(--kctp-e4) 0 0;
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    letter-spacing: -.004em;
    color: rgba(255, 255, 255, .70);
    max-width: 44ch;
}
.kctp-acceso-prueba::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, .28);
    margin-bottom: var(--kctp-e3);
}

/* --- La obra: la ficha del plan, flotando sobre el vino ------------------ */

/* La obra NO es un cristal tintado: es la superficie del producto, en hueso,
   con los mismos colores, los mismos radios y las mismas pastillas que va a
   ver el usuario cuando entre. Se probo primero en vidrio (fondo blanco al
   7% con desenfoque) y el resultado era un rectangulo turbio: el canto se
   perdia contra el vino y la tarjeta no llegaba a leerse como un objeto. Las
   dos referencias hacen justo esto -Lovi ensena la interfaz dentro de un
   telefono, Stripe ensena el panel de pago blanco- porque un objeto claro
   sobre un fondo oscuro es lo unico que despega de verdad.

   Solo sombra, cero borde, como manda la regla 5: la sombra es la profunda
   de dos capas, que sobre oscuro es lo que separa. */
.kctp-acceso-obra {
    margin: 0;
    width: 100%;
    max-width: 25rem;
    padding: 20px 22px;
    border-radius: var(--kctp-radio);
    background: var(--kctp-fondo);
    box-shadow: var(--kctp-sombra-flota);
    color: var(--kctp-tinta);
}
@media (min-width: 960px) { .kctp-acceso-obra { padding: 22px 24px; } }

.kctp-acceso-obra-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kctp-e4);
}
.kctp-acceso-obra-ojo {
    margin: 0 0 3px;
    font-size: var(--kctp-t-micro);
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
}
/* La serif tambien aqui: la obra es una pieza del producto, no un widget. */
.kctp-acceso-obra-nombre {
    margin: 0;
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--paso-5);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    color: var(--kctp-tinto);
}
/* Pastilla de estado: radio = alto/2, fondo tintado, 12px. Y con los colores
   de estado que ya existen en la hoja, no con unos inventados para la puerta:
   es la misma pastilla que la de un caso aprobado en el panel. */
.kctp-acceso-obra-sello {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border-radius: var(--kctp-r-pastilla);
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    background: var(--kctp-ok-sw);
    border: 1px solid var(--kctp-ok-bd);
    color: var(--kctp-ok);
    white-space: nowrap;
}
.kctp-acceso-obra-sello::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* Del lado del personal el caso todavia no esta aprobado: seria mentir. */
.kctp-acceso-obra-sello.esperando {
    background: var(--kctp-aviso-sw);
    border-color: var(--kctp-aviso-bd);
    color: var(--kctp-aviso);
}

/* Los pasos. Divisor punteado, como el de Stripe entre secciones de un panel
   de datos: separa sin meter otra linea solida en la composicion. */
.kctp-acceso-obra-lista {
    list-style: none;
    margin: 18px 0 0;
    padding: 15px 0 0;
    border-top: 1px dashed var(--kctp-borde);
    display: grid;
    gap: 2px;
}
.kctp-acceso-obra-lista li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: var(--kctp-e3);
    min-height: 34px;
    font-size: var(--kctp-t-meta);
}
.kctp-acceso-obra-n {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--kctp-borde);
    font-size: var(--kctp-t-micro);
    color: var(--kctp-tenue);
    letter-spacing: 0;
}
.kctp-acceso-obra-t {
    color: var(--kctp-tinta);
    letter-spacing: -.004em;
}
.kctp-acceso-obra-m {
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-micro);
    letter-spacing: -.004em;
    white-space: nowrap;
}

/* La firma. Y AQUI va el oro de esta pantalla: 6px de punto, una sola vez,
   sobre la frase que es la promesa entera del producto. */
.kctp-acceso-obra-pie {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--kctp-linea);
    font-size: var(--kctp-t-micro);
    line-height: 1.5;
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
}
.kctp-acceso-obra-pie::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--kctp-oro);
    box-shadow: 0 0 0 3px rgba(156, 116, 51, .22);
}

/* En telefono la obra se colapsa a su CABECERA: nombre y sello, la misma
   forma que tiene esa tarjeta cuando aparece en una lista dentro del
   producto. No es amputarla, es su densidad compacta. La razon es de
   producto y no de estilo: la version completa mide 154px y empuja el primer
   campo del formulario 200px hacia abajo, y una puerta en la que hay que
   desplazarse para escribir el correo esta rota. */
@media (max-width: 719px) {
    .kctp-acceso-obra { padding: 13px 16px; border-radius: var(--kctp-radio-ch); }
    .kctp-acceso-obra-top { align-items: center; }
    .kctp-acceso-obra-ojo { display: none; }
    .kctp-acceso-obra-nombre { font-size: var(--paso-4); letter-spacing: -.018em; }
    .kctp-acceso-obra-lista { display: none; }
    .kctp-acceso-obra-pie { display: none; }
    /* Y el oro vuelve al filete del titular: una marca de oro por pantalla,
       siempre; en escritorio es el punto que firma la obra, y aqui -donde esa
       firma no cabe- es esta linea de 40px. */
    .kctp-acceso-prueba::before { background: var(--kctp-oro); }
}

/* --- Columna del formulario ---------------------------------------------- */

/* La tarjeta y la letra chica son UN grupo, y el grupo va centrado en el alto
   de la columna. No la tarjeta centrada por un lado y el aviso pegado abajo
   por otro: eso dejaba 92px de aire arriba y 250px abajo, o sea ni centrado ni
   anclado, que es exactamente como se ve un formulario que nadie compuso.
   Y el aviso legal alineado a la MISMA columna de 420px que la tarjeta: antes
   era una franja blanca a todo lo ancho que cortaba el split a los 785px de
   900 y arrancaba en una x que no coincidia con ninguna de las dos columnas. */
.kctp-acceso-forma {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--kctp-e5);
    padding: var(--kctp-e6) clamp(20px, 5vw, 40px);
    background: var(--kctp-fondo);
}
@media (min-width: 960px) {
    .kctp-acceso-forma {
        gap: var(--kctp-e6);
        padding: clamp(32px, 5.5vh, 48px) var(--kctp-e6);
    }
}
@media (min-width: 1200px) {
    .kctp-acceso-forma { padding-inline: var(--kctp-e7); }
}

/* El formulario ES una superficie. Antes no tenia fondo, ni borde, ni sombra:
   flotaba a la deriva en el beige, y sin un contenedor que lo sostenga la
   mitad derecha de la pantalla no tiene ancla. Sombra y no borde: este es el
   lado que se separa por elevacion. Spread negativo y grande para que la
   sombra quede DEBAJO de la tarjeta y no se derrame por los lados. */
.kctp-acceso-caja {
    width: 100%;
    max-width: 420px;
    background: var(--kctp-blanco);
    border-radius: var(--kctp-radio);
    padding: clamp(24px, 5.2vw, 40px);
    box-shadow: var(--kctp-sombra-caja);
}

/* Rotulo de a que lado del producto estas entrando. Sin mayusculas y sin
   tracking positivo, que es la senal numero uno de plantilla barata. */
.kctp-acceso-ojo {
    margin: 0 0 var(--kctp-e3);
    /* El peldano mas chico de todos: es un rotulo de orientacion, tiene que
       pesar MENOS que la etiqueta de un campo. */
    font-size: var(--kctp-t-micro);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
    text-transform: none;
}
.kctp-acceso-titulo {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-titulo);
    line-height: var(--kctp-lh-titulo);
    letter-spacing: var(--kctp-ls-titulo);
    color: var(--kctp-tinto);
    margin: 0 0 var(--kctp-e2);
    text-wrap: balance;
}
/* Del titulo a su bajada, 8px: son un solo bloque. El aire viene despues. */
.kctp-acceso-sub {
    margin: 0 0 var(--kctp-e6);
    font-size: var(--kctp-t-menor);
    line-height: 1.55;
    color: var(--kctp-tenue);
    max-width: 42ch;
}
.kctp-acceso .kctp-aviso { margin-bottom: var(--kctp-e5); }

/* --- Campos: uno solo para las dos mitades ------------------------------- */

/* Antes habia dos sistemas de control: 48px de alto y radio 10px en el portal
   contra 41px y radio 6px en /medico, y en una pantalla el campo no tenia
   marcador de posicion y en la otra decia "Tu usuario". Aqui hay uno solo. */
.kctp-acceso-campo { margin-bottom: var(--kctp-e4); }
.kctp-acceso-campo label,
.kctp-acceso-campo .form-label {
    display: block;
    margin: 0 0 6px;
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    color: var(--kctp-tinto);
}
.kctp-acceso-campo input {
    width: 100%;
    height: 52px;
    min-height: 52px;
    padding: 0 15px;
    /* Borde de campo DENTRO de tarjeta blanca, no el borde general: el
       #ebe1e4 nace para separar del hueso y sobre blanco desaparece, con lo
       que el campo se lee como un hueco y no como un control. */
    border: 1px solid var(--kctp-borde-c);
    border-radius: var(--kctp-radio-ch);
    background: var(--kctp-blanco);
    color: var(--kctp-tinta);
    font-family: inherit;
    font-size: var(--kctp-t-cuerpo);
    letter-spacing: -.006em;
    box-shadow: none;
    transition: border-color var(--kctp-mov-hover), box-shadow var(--kctp-mov-hover);
}
.kctp-acceso-campo input::placeholder { color: var(--kctp-tenue-2); }
.kctp-acceso-campo input:hover { border-color: var(--kctp-borde-f); }
/* El estado activo lo lleva el borde, no un relleno de color: es como marcan
   la seleccion las dos referencias. */
.kctp-acceso-campo input:focus {
    outline: none;
    border-color: var(--kctp-acento);
    /* Un filete interior en vez de un halo por fuera: el borde pasa a leerse
       de 2px sin que el campo cambie de tamano. */
    box-shadow: inset 0 0 0 1px var(--kctp-acento);
}
/* Y el anillo de accesibilidad sigue existiendo para quien navega con teclado.
   Sin border-radius forzado: que siga el radio del propio control. */
.kctp-acceso :focus-visible {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 2px;
}

/* --- Boton -------------------------------------------------------------- */

/* Con body delante a proposito: la regla que aprieta el boton a 40px del lado
   del personal empieza por body y tiene un elemento de mas en la cuenta de
   especificidad. Empatarla y llegar despues es lo que hace que la puerta se
   vea igual en los dos lados. Y va al ancho de la TARJETA (340px), no al de
   la columna: un boton de 550px se lee como formulario generico. */
body .kctp-acceso .kctp-btn {
    min-height: 52px;
    padding: 14px 22px;
    border-radius: var(--kctp-radio-ch);
    font-size: var(--kctp-t-cuerpo);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.008em;
    width: 100%;
    box-shadow: 0 1px 2px rgba(38, 5, 20, .18);
    transition: background-color var(--kctp-mov-hover), box-shadow var(--kctp-mov-hover), transform var(--kctp-mov-hover);
}
body .kctp-acceso .kctp-btn:hover {
    box-shadow: 0 2px 4px rgba(38, 5, 20, .20), 0 10px 24px -10px rgba(38, 5, 20, .45);
}
body .kctp-acceso .kctp-btn:active { transform: translateY(1px); }
.kctp-acceso-form { margin: 0; }
.kctp-acceso-form .kctp-acceso-campo:last-of-type { margin-bottom: var(--kctp-e5); }

/* --- Pie de la caja ------------------------------------------------------ */

/* Los enlaces iban centrados y con el subrayado por defecto del navegador.
   Ahora son una linea de prosa alineada con el formulario, y el unico filete
   de la tarjeta esta aqui, separando el formulario de sus salidas. */
.kctp-acceso-pie {
    margin: var(--kctp-e5) 0 0;
    padding-top: var(--kctp-e5);
    border-top: 1px solid var(--kctp-borde);
    font-size: var(--kctp-t-menor);
    line-height: 1.7;
    color: var(--kctp-tenue);
}
.kctp-acceso-pie p { margin: 0; max-width: none; }
.kctp-acceso-pie a {
    color: var(--kctp-acento);
    font-weight: var(--kctp-peso-medio);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--kctp-acento) 28%, transparent);
    transition: border-color var(--kctp-mov-hover), color var(--kctp-mov-hover);
}
.kctp-acceso-pie a:hover { color: var(--kctp-tinto); border-bottom-color: currentColor; }

/* --- El aviso legal, dentro de la columna hueso --------------------------- */

/* Mismo bloque y mismas palabras en las dos puertas. Sin fondo propio: la
   franja blanca casi pura contra el #fbf7f5 creaba una costura horizontal a
   media pantalla, y encima cortaba el split a los 785px de 900. Aqui es letra
   chica alineada con la tarjeta, que es donde va la letra chica. */
.kctp-acceso-legal {
    width: 100%;
    max-width: 420px;
    font-size: var(--kctp-t-meta);
    line-height: 1.6;
    letter-spacing: -.002em;
    color: var(--kctp-tenue);
}
.kctp-acceso-legal p { margin: 0 0 6px; max-width: none; }
.kctp-acceso-legal p:last-child { margin-bottom: 0; }
.kctp-acceso-legal strong {
    color: var(--kctp-tinta);
    font-weight: var(--kctp-peso-medio);
}

/* --- Como se monta en cada lado ------------------------------------------ */

/* Lado del personal: la pagina se arma sola, sin layout, asi que la puerta ES
   la pagina. */
body.kctp-acceso-pagina {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--kctp-fondo);
}
body.kctp-acceso-pagina > .kctp-acceso { flex: 1 1 auto; }

/* Lado del paciente: la puerta vive dentro del layout del portal, que envuelve
   todo en un lienzo de 720px. Es la unica pantalla que rompe ese lienzo, y lo
   hace anulando el ancho y el relleno del main en vez de con margenes
   negativos de 100vw (que ademas sacan una barra de desplazamiento). */
body.kctp-portal:has(.kctp-acceso) {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}
/* La cabecera del portal se esconde SOLO aqui: en la puerta no aporta nada
   (no hay sesion, o sea no hay menu) y su unico contenido es el mismo logo que
   ya preside el panel de marca. Dos KARA en la misma pantalla. */
body.kctp-portal:has(.kctp-acceso) > header.kctp-portal-top { display: none; }
body.kctp-portal:has(.kctp-acceso) > main.kctp-lienzo {
    max-width: none;
    /* width y margin explicitos: el body es flex en columna y el 'margin: 0
       auto' del lienzo hace que el main se encoja al ancho de su contenido en
       vez de estirarse. Salia una franja de 107px de beige a la izquierda. */
    width: 100%;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
body.kctp-portal:has(.kctp-acceso) > main.kctp-lienzo > .kctp-acceso { flex: 1 1 auto; }
/* Un aviso de sesion caducada aparece antes de la puerta: sin esto quedaria
   pegado a los cuatro bordes de la pantalla. */
body.kctp-portal:has(.kctp-acceso) > main.kctp-lienzo > .kctp-aviso {
    margin: var(--kctp-e4) var(--kctp-e5) 0;
}

/* El pie legal del layout se apaga SOLO en la puerta, y no se pierde una sola
   palabra: el mismo texto, literal, vive dentro de .kctp-acceso-legal en la
   columna del formulario. Fuera de la puerta el pie del layout sigue igual. */
body.kctp-portal:has(.kctp-acceso) > footer.kctp-pie-legal { display: none; }

.kctp-pie-legal {
    padding-top: 0;
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-meta);
    line-height: 1.6;
}
.kctp-pie-legal strong { color: var(--kctp-tinta); }


/* Los tres enlaces sueltos del portal que la regla general no alcanzaba, porque
   llevan clase propia: "Seguir despues" en el paginador del cuestionario, el
   desplegable "Lo que respondiste" de la consulta, y "Editar" en tus datos.
   Se les da altura de dedo sin cambiar como se ven. */
@media (pointer: coarse) {
    .kctp-portal .kctp-paso-botones > a,
    .kctp-portal summary,
    .kctp-portal .kctp-tarjeta > a.kctp-btn-suave {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .kctp-portal summary { padding-block: .5rem; }
}