/* ==========================================================================
   INICIO DEL PORTAL Y AUTORIZACIONES  ·  css/v2/inicio.css

   Cubre dos pantallas del lado del paciente:
     /portal                    -> body.pantalla-inicio
     /portal/consentimientos    -> body.pantalla-consentimientos

   Se carga DESPUES de kctp.css, asi que aqui se puede pisar el sistema.

   La vara es lovi.care. El TELEFONO ya ganaba en la vuelta anterior y NO SE
   TOCA: salvo el borrado de unos arcos decorativos invisibles, todo lo que
   cambia esta vuelta vive dentro de @media (min-width: 1000px).

   ESTA VUELTA ARREGLA EL ESCRITORIO. El diagnostico, medido a 1440x900:

     NO HABIA UN PROBLEMA DE VACIO. HABIA CAJAS MUCHO MAS GRANDES QUE SU
     CONTENIDO.
       · la banda del titulo:    932 x 244 px para 308 px de texto
       · la primera tarjeta:     932 px de ancho para un bloque de 135 px,
                                 con 485 px muertos entre el texto y el boton
       · la tarjeta de permiso:  932 px, con una columna de titulo de 324 px
                                 que se queda vacia 180 px hacia abajo
     Cuando una caja mide tres o seis veces lo que mide su contenido, el ojo
     no lee "aire": lee una plantilla estirada. Lovi tiene el MISMO aire y no
     se ve asi porque alli cada caja mide lo que mide su contenido y el vacio
     queda FUERA de las cajas, donde se lee como margen.

   Las cuatro decisiones de la vuelta:

     1. LA BANDA TENIDA MUERE EN ESCRITORIO. Era el objeto mas grande del
        pliegue (27%) y no daba ni un dato. En su lugar hay un ENCABEZADO DE
        PAGINA de 132 px: el titulo en serif a 56 px y peso 400, su bajada a
        8 px, el boton apoyado en la misma linea de abajo y UNA linea de pelo
        cerrando el bloque. La jerarquia la da el tamano, no un rectangulo de
        color. (En telefono la banda tenida se queda: alli funciona.)

     2. HAY DOS COLUMNAS DE VERDAD. A partir de 1340 px el cuerpo pasa a ser
        una rejilla de 660 + 312. Deja de ser una columna de movil ensanchada.

     3. EL AVISO DE SEGURIDAD SE MUDA A LA SEGUNDA COLUMNA. Era lo ultimo que
        veia el ojo: un parrafo gris, sin contenedor, huerfano en el vacio del
        fondo del pliegue. Y es la frase mas importante de una plataforma
        clinica ("no atiende urgencias"). Ahora es un panel de marca al lado
        de las consultas, pegajoso al hacer scroll. Ni una palabra cambia: se
        movio con CSS, el HTML del pie es el mismo y sigue siendo el ultimo
        del documento para el teclado y para un lector de pantalla.

     4. LAS CAJAS SE ENCOGEN HASTA SU CONTENIDO. La columna baja de 932 a
        660 px (la medida de lectura de Lovi), el boton de cada consulta baja
        debajo de su informacion en vez de flotar a 485 px, y la tarjeta de
        permiso deja de partirse en dos columnas: a 660 px esa particion era
        justo lo que abria el canalon muerto.

   Nada de esto cambia una palabra ni quita informacion clinica: el asterisco
   de obligatoria, la marca "Opcional", la constancia de version, el aviso de
   urgencias y el de revision profesional siguen diciendo lo mismo. El unico
   cambio de HTML es que el aviso de "faltan tus autorizaciones" pasa a ir
   DEBAJO del titulo en vez de encima: habla de la lista, no de la pantalla.
   ========================================================================== */

:root {
    --v2-riel:      268px;   /* ancho del riel lateral en escritorio */

    /* Escritorio estrecho (1000-1339): una columna, a medida de lectura.
       Antes eran 980 px, que es donde nacia el problema de las cajas. */
    --v2-ancho:     720px;

    /* Escritorio ancho (>=1340): dos columnas de verdad.
       660 + 40 + 312 = 1012; con el riel de 268 son 1280, asi que a 1440
       quedan 80 px de margen a cada lado. */
    --v2-col:       660px;   /* columna de contenido */
    --v2-aside:     312px;   /* columna del aviso de seguridad */
    --v2-hueco:      40px;

    --v2-texto:      34rem;  /* medida del bloque de titular (544px, como Lovi) */
    --v2-r-banda:    28px;   /* radio de la banda tenida, ya solo en telefono */
    --v2-sangria:    36px;   /* margen interior de las tarjetas */

    /* El alto del encabezado de escritorio esta CLAVADO, no calculado: asi el
       panel de la derecha se cuelga de el y arranca exactamente a la altura
       de la primera tarjeta, sin numeros magicos sueltos por el archivo. */
    --v2-cabeza-h:  132px;
    --v2-cabeza-s:   40px;   /* del encabezado a lo que venga debajo */
}



/* ==========================================================================
   1. RIEL LATERAL DEL PORTAL  (chrome, >= 1000px)

   OJO, esto no esta encerrado en .pantalla-*: es la cabecera del portal, y la
   cabecera vive en views/layouts/portal_header.php, que es de esta pantalla.
   Se aplica a TODO el portal a proposito: una navegacion que desaparece
   cuando tocas "Mi ficha" es peor que cualquiera de los dos males.

   Tres formas de la MISMA lista, y nunca dos a la vez:
     < 700px   barra de pestanas abajo + desplegable "Menu" arriba
     700-999   desplegable "Menu" arriba
     >= 1000   riel lateral fijo (y la barra de arriba se apaga)
   ========================================================================== */

.kctp-riel { display: none; }

/* La flechita gris del dropdown y la caja redondeada del boton "Menu" hacian
   que la unica pieza de navegacion visible en telefono pareciera sacada de un
   panel de administracion. El icono de tres rayas ya dice que abre un menu. */
.kctp-portal .kctp-boton-menu {
    background: transparent;
    border-color: transparent;
    color: var(--kctp-tinta);
    padding: .4rem .6rem;
    gap: var(--kctp-e2);
}
.kctp-portal .kctp-boton-menu::after { display: none; }
.kctp-portal .kctp-boton-menu:hover {
    background: var(--kctp-crema);
    border-color: transparent;
    color: var(--kctp-tinto);
}
.kctp-portal .kctp-boton-menu i { font-size: 1.1rem; color: var(--kctp-tenue); }

@media (min-width: 1000px) {
    /* El hueco de la izquierda deja de ser vacio y pasa a ser el riel. Se
       cuelga de :has(.kctp-riel) para que la puerta de entrada -que no tiene
       sesion y por tanto no dibuja riel- siga siendo pantalla completa. */
    body.kctp-portal:has(.kctp-riel) { padding-left: var(--v2-riel); }
    body.kctp-portal:has(.kctp-riel) > header.kctp-portal-top { display: none; }

    .kctp-riel {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--v2-riel);
        z-index: 30;
        display: flex;
        flex-direction: column;
        background: var(--kctp-blanco);
        /* Borde O sombra: el riel es chrome pegado al borde de la ventana, y
           lo que le toca es la linea de pelo, no una sombra flotando. */
        border-right: 1px solid var(--kctp-borde);
        padding: 30px 20px 24px;
        overflow-y: auto;
    }

    .kctp-riel-marca {
        display: block;
        padding: 0 12px;
        margin-bottom: 40px;
        text-decoration: none;
    }
    .kctp-riel-logo { display: block; height: 26px; width: auto; }
    .kctp-riel-bajada {
        display: block;
        margin-top: 7px;
        font-size: var(--kctp-t-micro);
        letter-spacing: -.002em;
        color: var(--kctp-tenue);
    }

    .kctp-riel-nav { display: flex; flex-direction: column; gap: 2px; }

    .kctp-riel-item {
        display: flex;
        align-items: center;
        gap: var(--kctp-e3);
        padding: 10px 12px;
        border-radius: 10px;
        text-decoration: none;
        color: var(--kctp-tinta);
        font-size: var(--kctp-t-menor);
        line-height: 1.3;
        letter-spacing: -.004em;
        transition: background var(--kctp-mov-hover), color var(--kctp-mov-hover);
    }
    /* 16px con trazo fino, que es la base medida en el lado de datos. */
    .kctp-riel-item i {
        flex: 0 0 auto;
        width: 1rem;
        font-size: 1rem;
        line-height: 1;
        color: var(--kctp-tenue-2);
        transition: color var(--kctp-mov-hover);
    }
    .kctp-riel-item:hover { background: var(--kctp-crema); color: var(--kctp-tinto); }
    .kctp-riel-item:hover i { color: var(--kctp-acento-cl); }
    /* La seccion en la que estas: el tinte de vino al 8% que ya existe en el
       sistema (--kctp-acento-sw) mas la tinta de marca. Sin barras de color ni
       rellenos saturados. */
    .kctp-riel-item.activo {
        background: var(--kctp-acento-sw);
        color: var(--kctp-acento);
        font-weight: var(--kctp-peso-medio);
    }
    .kctp-riel-item.activo i { color: var(--kctp-acento); }

    .kctp-riel-raya {
        display: block;
        height: 1px;
        margin: var(--kctp-e3) 12px;
        background: var(--kctp-linea);
    }

    /* La firma de abajo: quien entro. Es lo que convierte una lista de
       enlaces en la ventana de alguien. */
    .kctp-riel-pie { margin-top: auto; padding-top: var(--kctp-e5); }
    .kctp-riel-yo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 var(--kctp-e3);
        padding: 0 12px;
    }
    .kctp-riel-disco {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border-radius: var(--kctp-r-pastilla);
        background: var(--kctp-acento);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: var(--kctp-t-meta);
        letter-spacing: 0;
        line-height: 1;
    }
    .kctp-riel-nombre {
        min-width: 0;
        font-size: var(--kctp-t-meta);
        line-height: 1.3;
        color: var(--kctp-tenue);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .kctp-riel-salir { color: var(--kctp-tenue); }

    /* Columna falsa. El riel esta en position:fixed, asi que solo cubre lo
       alto de la ventana: en una pagina mas larga que la pantalla su blanco
       se corta a mitad del documento y el costado izquierdo se ve partido en
       dos. Se pinta la misma columna (blanco + la linea de pelo) en el fondo
       del cuerpo, que si mide lo que mide el documento entero. */
    body.kctp-portal:has(.kctp-riel) {
        --v2-columna: linear-gradient(
            to right,
            var(--kctp-blanco) 0, var(--kctp-blanco) calc(var(--v2-riel) - 1px),
            var(--kctp-borde)  calc(var(--v2-riel) - 1px), var(--kctp-borde) var(--v2-riel),
            transparent var(--v2-riel)
        );
        background-image: var(--v2-columna);
        background-repeat: no-repeat;
    }
}

/* Al imprimir no hay ventana ni navegacion. El sistema ya apaga la barra de
   arriba en su bloque de impresion; el riel es nuevo y hay que apagarlo aqui,
   junto con el hueco que le reserva el cuerpo. */
@media print {
    .kctp-riel { display: none !important; }
    body.kctp-portal:has(.kctp-riel) { padding-left: 0; }
}


/* ==========================================================================
   2. MARCO DE ESCRITORIO DE ESTAS DOS PANTALLAS
   ========================================================================== */

/* El hueso deja de ser plano. Lovi hace lo mismo con blanco -> blanco lavanda:
   la parte de abajo de la pagina se hunde medio tono. En una pantalla con una
   sola consulta eso es la diferencia entre "sobra sitio" y "hay un campo de
   color". Es medio tono, no un degradado de fondo de pantalla. */
.pantalla-inicio,
.pantalla-consentimientos {
    --v2-lecho: linear-gradient(
        to bottom,
        var(--kctp-fondo) 0%,
        var(--kctp-fondo) 38%,
        #f7f0f1 100%
    );
    background-image: var(--v2-lecho);
    background-repeat: no-repeat;
}

/* --- 2a. Escritorio estrecho (1000-1339): una columna a medida de lectura -- */
@media (min-width: 1000px) {
    body.pantalla-inicio,
    body.pantalla-consentimientos {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        /* El bloque entero se centra en la ventana cuando sobra sitio. Antes
           el <main> llevaba flex:1 0 auto y empujaba el pie hasta el fondo:
           entre la ultima tarjeta y el aviso quedaban 220 px de nada y el
           parrafo gris terminaba solo, al final de un vacio. Repartido arriba
           y abajo, ese mismo sobrante se lee como margen. */
        justify-content: safe center;
    }

    /* El pie legal es OTRO .kctp-lienzo, hermano del <main>: si no se abre
       con el, el aviso queda desalineado con el titulo. */
    body.pantalla-inicio > main.kctp-lienzo,
    body.pantalla-inicio > footer.kctp-pie-legal,
    body.pantalla-consentimientos > main.kctp-lienzo,
    body.pantalla-consentimientos > footer.kctp-pie-legal {
        width: 100%;
        max-width: var(--v2-ancho);
    }
    body.pantalla-inicio > main.kctp-lienzo,
    body.pantalla-consentimientos > main.kctp-lienzo {
        padding-top: var(--kctp-e8);
        padding-bottom: var(--kctp-e8);
    }
    /* En columna unica el panel se apoya justo debajo del contenido, con su
       propio relleno: el del lienzo lo dejaria descuadrado con las tarjetas. */
    body.pantalla-inicio > footer.kctp-pie-legal,
    body.pantalla-consentimientos > footer.kctp-pie-legal {
        margin-bottom: var(--kctp-e8);
        padding: var(--kctp-e6) var(--kctp-e5);
    }

    /* Las dos capas juntas: la columna del riel encima y el lecho debajo. Sin
       esta regla la de la columna (que vale para todo el portal) borraria el
       degradado del lecho: background-image no se acumula entre reglas. */
    body.pantalla-inicio:has(.kctp-riel),
    body.pantalla-consentimientos:has(.kctp-riel) {
        background-image: var(--v2-columna), var(--v2-lecho);
    }
}

/* --- 2b. Escritorio ancho (>=1340): dos columnas de verdad -----------------
   El cuerpo pasa a ser la rejilla. <main> ocupa la columna izquierda y el pie
   legal -que en el HTML es su hermano- se muda a la derecha SIN tocar el
   HTML: sigue siendo el ultimo elemento del documento para el teclado y para
   un lector de pantalla, solo que se pinta al lado.
   1340 y no 1280 para que sobren al menos 60 px de margen a cada lado; por
   debajo manda la columna unica de 2a, que a esa anchura respira mas.
   --------------------------------------------------------------------------- */
@media (min-width: 1340px) {
    body.pantalla-inicio,
    body.pantalla-consentimientos {
        display: grid;
        grid-template-columns: var(--v2-col) var(--v2-aside);
        column-gap: var(--v2-hueco);
        justify-content: center;
        /* CENTRADO VERTICAL, y esto es una decision de fondo.
           Con una sola consulta la pagina tiene UN objeto: el contenido medía
           553 px en un pliegue de 900 y los 350 que sobraban se apilaban todos
           abajo, asi que lo ultimo que veia el ojo era un agujero. El mismo
           vacio repartido arriba y abajo deja de leerse como falta de
           contenido y pasa a leerse como margen, que es exactamente lo que
           hace Lovi con su bloque de entrada.
           "safe" es la parte importante: cuando la lista es larga y no cabe en
           el pliegue, el centrado se apaga solo y vuelve a alinear arriba, en
           vez de recortar el titulo por encima del borde de la ventana. */
        align-content: safe center;
    }

    body.pantalla-inicio > main.kctp-lienzo,
    body.pantalla-consentimientos > main.kctp-lienzo {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        max-width: none;
        /* .kctp-lienzo trae margin: 0 auto. Dentro de una celda de rejilla un
           margen automatico gana a justify-self:stretch, asi que el lienzo se
           encogia a su contenido -523 px medidos en vez de los 660 de la
           columna- y quedaba flotando en el centro de su propia celda. */
        margin-left: 0;
        margin-right: 0;
        /* La rejilla ya define el ancho: el relleno lateral del lienzo solo
           encogeria las tarjetas dentro de su propia columna. */
        padding-left: 0;
        padding-right: 0;
    }

    body.pantalla-inicio > footer.kctp-pie-legal,
    body.pantalla-consentimientos > footer.kctp-pie-legal {
        grid-column: 2;
        grid-row: 1;
        align-self: start;   /* si se estira, position:sticky no hace nada */
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        /* En dos columnas el panel se apoya arriba, no debajo del contenido. */
        margin-bottom: 0;
        /* Arranca a la MISMA altura que la primera tarjeta: el aire de arriba
           del lienzo, mas el encabezado (que tiene el alto clavado), mas su
           separacion. Sin esto el aviso flota junto al titular y compite. */
        margin-top: calc(var(--kctp-e8) + var(--v2-cabeza-h) + var(--v2-cabeza-s));
        position: sticky;
        top: var(--kctp-e6);
    }
}

/* En telefono sobraban 96px entre la ultima tarjeta y el aviso legal: el
   lienzo trae 6rem de padding abajo pensados para que la barra de pestanas no
   tape el final, pero de eso ya se encarga el padding del <body>. */
@media (max-width: 699px) {
    body.pantalla-inicio > main.kctp-lienzo,
    body.pantalla-consentimientos > main.kctp-lienzo { padding-bottom: var(--kctp-e6); }
}


/* ==========================================================================
   3. EL AVISO DE SEGURIDAD  (el pie legal del layout, mudado a la derecha)

   Estaba en gris, a 13 px, sin contenedor y detras de 220 px de fondo vacio.
   Es la frase mas importante de una plataforma clinica. Aqui pasa a ser un
   panel de marca: superficie tenida, SIN sombra y SIN borde.

   Sin sombra a proposito: en el lado del paciente la sombra significa "esto
   es una cosa de tu expediente y flota". El aviso no flota, esta clavado a la
   pagina. Superficie hundida contra tarjeta que flota es la misma distincion
   que hace Lovi entre su fondo lavanda y sus tarjetas blancas.

   La primera frase en peso medio y tinta de titulo, el resto al MISMO tamano
   en tinta de apoyo: es el recurso de redaccion medido en Stripe (la jerarquia
   dentro del parrafo la ponen el peso y el color, no un titulo nuevo). Ese
   <strong> ya estaba en el HTML; aqui solo se le hace caso.
   ========================================================================== */

@media (min-width: 1000px) {
    body.pantalla-inicio > footer.kctp-pie-legal,
    body.pantalla-consentimientos > footer.kctp-pie-legal {
        background: var(--kctp-panel);
        border-radius: var(--kctp-radio);
        padding: var(--kctp-e6) var(--kctp-e5);
        font-size: var(--kctp-t-menor);   /* 15, no 13: ahora se lee */
        line-height: 1.6;
        letter-spacing: -.004em;
        color: var(--kctp-tenue);
    }
    /* La raya era del pie de pagina; dentro de un panel sobra. */
    body.pantalla-inicio > footer.kctp-pie-legal > hr,
    body.pantalla-consentimientos > footer.kctp-pie-legal > hr { display: none; }

    body.pantalla-inicio > footer.kctp-pie-legal p + p,
    body.pantalla-consentimientos > footer.kctp-pie-legal p + p {
        margin-top: var(--kctp-e4);
        padding-top: var(--kctp-e4);
        border-top: 1px solid rgba(91, 12, 47, .10);
    }

    body.pantalla-inicio > footer.kctp-pie-legal strong,
    body.pantalla-consentimientos > footer.kctp-pie-legal strong {
        display: block;
        margin-bottom: var(--kctp-e1);
        font-weight: var(--kctp-peso-medio);
        color: var(--kctp-tinto);
    }
}


/* ==========================================================================
   4. EL ENCABEZADO DE LA PANTALLA

   TELEFONO (< 1000px): sigue siendo la banda tenida de la vuelta anterior,
   que es la que gana la comparacion. No se toca.

   ESCRITORIO (>= 1000px): la banda tenida MUERE. Medida, era 932 x 244 px
   -el objeto mas grande del pliegue, el 27%- para 308 px de texto y unos
   arcos decorativos que a esa opacidad no se veian. Un rectangulo de color
   que no dice nada es la senal numero uno de plantilla barata. En su lugar:
   el titulo a 56 px en serif y peso 400, su bajada a 12 px, el boton apoyado
   en la linea de base de abajo, y UNA linea de pelo cerrando el bloque.
   ========================================================================== */

.pantalla-inicio .v2-cabecera,
.pantalla-consentimientos .v2-cabecera {
    position: relative;
    border-radius: var(--v2-r-banda);
    background:
        radial-gradient(135% 150% at 90% -25%, rgba(91, 12, 47, .14), rgba(91, 12, 47, 0) 60%),
        radial-gradient(115% 135% at -8% 125%, rgba(216, 203, 190, .38), rgba(216, 203, 190, 0) 58%),
        var(--kctp-panel);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kctp-e5);
    padding: var(--kctp-e6) var(--kctp-e5);
    margin: 0 0 var(--kctp-e7);
}
@media (min-width: 700px) and (max-width: 999px) {
    .pantalla-inicio .v2-cabecera,
    .pantalla-consentimientos .v2-cabecera {
        align-items: center;
        gap: var(--kctp-e6);
        padding: var(--kctp-e7) var(--v2-sangria);
    }
}

.pantalla-inicio .v2-cabecera-texto,
.pantalla-consentimientos .v2-cabecera-texto {
    /* En rem, NO en ch: el ch se resolvia contra Inter de 17px y dejaba el
       bloque en ~290px lo mismo en un telefono que en un monitor de 1440. */
    max-width: var(--v2-texto);
    min-width: 0;
}

/* El titular de la pantalla. Serif de marca, peso 400: la jerarquia la da el
   tamano, nunca el grosor. */
.pantalla-inicio .v2-cabecera h1,
.pantalla-consentimientos .v2-cabecera h1 {
    font-family: var(--kctp-serif);
    font-weight: var(--kctp-peso-normal);
    font-size: var(--kctp-t-display);       /* 28 -> 40px */
    line-height: var(--kctp-lh-display);    /* 1.06 */
    letter-spacing: var(--kctp-ls-display); /* -.028em */
    color: var(--kctp-tinto);
    text-wrap: balance;
    margin: 0;
}

/* El titulo y su bajada son UN bloque: 8px, no 24. */
.pantalla-inicio .v2-cabecera-sub,
.pantalla-consentimientos .v2-cabecera-sub {
    margin: var(--kctp-e2) 0 0;
    max-width: none;
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.5;
    color: var(--kctp-tenue);
}

.pantalla-inicio .v2-cabecera-accion { flex: 0 0 auto; }
@media (max-width: 559px) {
    .pantalla-inicio .v2-cabecera { gap: var(--kctp-e5); }
    .pantalla-inicio .v2-cabecera-accion { width: 100%; }
}

/* --- el encabezado de escritorio --- */
@media (min-width: 1000px) {
    .pantalla-inicio .v2-cabecera,
    .pantalla-consentimientos .v2-cabecera {
        background: none;
        border-radius: 0;
        /* Alto CLAVADO: de el se cuelga el panel de la derecha. */
        min-height: var(--v2-cabeza-h);
        box-sizing: border-box;
        padding: 0 0 var(--kctp-e5);
        margin: 0 0 var(--v2-cabeza-s);
        /* Titulo y boton se apoyan en la MISMA linea de abajo. */
        align-items: flex-end;
        gap: var(--kctp-e6);
        /* La unica linea de la pagina, y es la que convierte el titulo en
           cabecera en vez de en un parrafo suelto. */
        border-bottom: 1px solid var(--kctp-linea);
    }

    .pantalla-inicio .v2-cabecera h1,
    .pantalla-consentimientos .v2-cabecera h1 {
        font-size: var(--paso-8);   /* 56 */
        line-height: .95;           /* interlineado sub-1 en display */
        letter-spacing: -.032em;
    }

    .pantalla-inicio .v2-cabecera-sub,
    .pantalla-consentimientos .v2-cabecera-sub { margin-top: var(--kctp-e3); }

    /* El boton baja con el titulo. */
    .pantalla-inicio .v2-cabecera-accion { margin-bottom: 2px; }
}

/* En la maqueta de dos columnas la linea del encabezado CRUZA LAS DOS.
   Dentro de <main> solo puede medir 660 px, y una raya que se corta a dos
   tercios del ancho deja el trozo de arriba a la derecha suelto, sin nada que
   lo cierre. Cruzandola entera la pagina se lee como debe: un mastil arriba y
   dos columnas debajo. Se dibuja con un pseudoelemento que se sale por la
   derecha exactamente lo que miden la segunda columna y su hueco, asi que
   termina justo en el borde del panel y no provoca scroll horizontal. */
@media (min-width: 1340px) {
    .pantalla-inicio .v2-cabecera,
    .pantalla-consentimientos .v2-cabecera { border-bottom: 0; }

    .pantalla-inicio .v2-cabecera::after,
    .pantalla-consentimientos .v2-cabecera::after {
        content: "";
        position: absolute;
        left: 0;
        right: calc(-1 * (var(--v2-aside) + var(--v2-hueco)));
        bottom: 0;
        height: 1px;
        background: var(--kctp-linea);
    }
}

/* El aviso de "faltan tus autorizaciones" ahora vive debajo del titulo, ya
   dentro de la columna de la lista: habla de la lista, no de la pantalla. */
.pantalla-inicio > main > .kctp-aviso { margin-bottom: var(--kctp-e5); }


/* ==========================================================================
   5. LISTA DE CONSULTAS  (/portal)
   ========================================================================== */

.pantalla-inicio .v2-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kctp-e5);
}

/* La ficha de una consulta.
   Telefono y tableta: una columna, el boton abajo a todo el ancho.
   Escritorio: informacion a la izquierda, accion a la derecha y centrada.

   El reparto en dos no era el error de la vuelta anterior; el error era el
   ANCHO. A 932 px la tarjeta dejaba 485 px muertos entre el texto y el boton,
   asi que parecia que sobraba media tarjeta. A 660 px el mismo reparto deja
   un hueco de 30-90 px, que ya no se lee como agujero sino como la separacion
   normal entre dos cosas, y ademas la tarjeta baja de 238 a 150 px de alto.
   Los botones de toda la lista caen ademas sobre la misma vertical derecha,
   que es lo que hace que cuatro tarjetas se lean como una lista y no como
   cuatro cajas sueltas. */
.pantalla-inicio .v2-consulta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--kctp-e5);
    margin-bottom: 0;   /* el hueco lo pone el gap de la lista */
    transition: box-shadow var(--kctp-mov), transform var(--kctp-mov);
}
@media (min-width: 700px) {
    .pantalla-inicio .v2-consulta { padding: var(--v2-sangria); }
}
@media (min-width: 1000px) {
    .pantalla-inicio .v2-consulta {
        flex-direction: row;
        /* Centrado, no pegado arriba: en una ficha alta -la que trae el aviso
           de "te pidio 2 datos mas"- el boton se quedaba flotando arriba del
           todo, a tres lineas de lo ultimo que se lee. */
        align-items: center;
        justify-content: space-between;
        gap: var(--kctp-e6);
    }
    .pantalla-inicio .v2-consulta-info { flex: 1 1 auto; }
    /* La medida ya la marca el boton de al lado: el bloque de texto queda
       entre 320 y 410 px, que es justo el rango en el que Lovi escribe dentro
       de una tarjeta. Un tope propio aqui solo lo estrecharia dos veces. */
    .pantalla-inicio .v2-consulta-motivo { max-width: none; }
}
/* La tarjeta del paciente se separa con SOMBRA, nunca con borde: al pasar por
   encima sube medio milimetro y la sombra se abre. 300ms, nunca linear. */
@media (hover: hover) {
    .pantalla-inicio .v2-consulta:hover {
        box-shadow: var(--kctp-sombra-alt);
        transform: translateY(-1px);
    }
}

.pantalla-inicio .v2-consulta-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* La pastilla de estado sube a primera linea: es el dato que la paciente
   viene a buscar. Debajo, 12px de aire hasta el codigo. */
.pantalla-inicio .v2-consulta-info > .kctp-estado { margin-bottom: var(--kctp-e3); }

/* El codigo hace de nombre de la ficha. En escritorio crece a 28px: es el
   nombre del objeto, tiene que pesar mas que su fecha, y ese peso lo pone el
   tamano y no el grosor. */
.pantalla-inicio .v2-consulta-codigo {
    margin: 0;
    font-size: var(--paso-5);            /* 21 */
    line-height: 1.2;
    letter-spacing: -.018em;
    color: var(--kctp-tinto);
}
@media (min-width: 1000px) {
    .pantalla-inicio .v2-consulta-codigo {
        font-size: var(--paso-6);        /* 28 */
        line-height: 1.14;
        letter-spacing: -.024em;
    }
}

/* La fecha es apoyo: pegada al codigo (4px) y en la tinta tenue. */
.pantalla-inicio .v2-consulta-fecha {
    margin: var(--kctp-e1) 0 0;
    font-size: var(--kctp-t-meta);       /* 13 */
    line-height: 1.4;
    color: var(--kctp-tenue);
}

.pantalla-inicio .v2-consulta-motivo {
    margin: var(--kctp-e3) 0 0;
    font-size: var(--kctp-t-menor);      /* 15 */
    line-height: 1.55;
    color: var(--kctp-tinta);
    max-width: 52ch;
}

.pantalla-inicio .v2-consulta-pide { margin: var(--kctp-e4) 0 0; }

.pantalla-inicio .v2-consulta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kctp-e3);
    flex: 0 0 auto;
}
@media (max-width: 699px) {
    .pantalla-inicio .v2-consulta-acciones .kctp-btn { flex: 1 1 12rem; }
}

/* Un boton blanco sobre una tarjeta blanca se lee como un hueco: el #ebe1e4
   general nace para separar del hueso y sobre blanco puro casi desaparece.
   Para eso existe --kctp-borde-c en el sistema. */
.pantalla-inicio .v2-consulta-acciones .kctp-btn-suave { border-color: var(--kctp-borde-c); }
.pantalla-inicio .v2-consulta-acciones .kctp-btn-suave:hover { border-color: var(--kctp-acento-cl); }


/* ==========================================================================
   6. SIN CONSULTAS TODAVIA  (/portal)
   ========================================================================== */

.pantalla-inicio .v2-vacio {
    padding: var(--kctp-e8) var(--kctp-e5);
    margin-bottom: 0;
    color: var(--kctp-tenue);
}
.pantalla-inicio .v2-vacio i {
    font-size: 2rem;
    color: var(--kctp-nude);
    opacity: 1;
    margin-bottom: var(--kctp-e4);
}
/* La frase de entrada en la serif de marca y en grande: un estado vacio es
   una pantalla de bienvenida, no un mensaje de error. */
.pantalla-inicio .v2-vacio p:first-of-type strong {
    display: block;
    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-bottom: var(--kctp-e2);
}
.pantalla-inicio .v2-vacio p:last-of-type {
    font-size: var(--kctp-t-menor);
    line-height: 1.6;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   7. AUTORIZACIONES  (/portal/consentimientos)
   ========================================================================== */

.pantalla-consentimientos .v2-consent-forma {
    display: grid;
    gap: var(--kctp-e5);
}

.pantalla-consentimientos .v2-consent { margin-bottom: 0; }
@media (min-width: 700px) {
    .pantalla-consentimientos .v2-consent { padding: var(--v2-sangria); }
}

/* Aqui vivia el reparto titulo-izquierda / texto-derecha, y se cae por una
   medida: la columna del titulo eran 324 px y el titulo llenaba 81 px de los
   261 de alto de la tarjeta. 180 px de canalon muerto, justo al lado de lo
   que hay que leer. Ese patron es de Stripe y funciona cuando la etiqueta y
   el campo tienen alturas parecidas; una clausula legal de seis lineas contra
   un titulo de dos, no. Con la columna a 660 px el texto queda en 580 px
   -que es la medida de lectura- y la tarjeta se lee de arriba abajo. */

/* El titulo de cada autorizacion. Especificidad de dos clases a proposito:
   .kctp-tarjeta h2 del sistema lo pondria en la serif de display, y una
   clausula legal no es un titular de portada. Va en Inter a 21px, un peldano
   por encima del texto legal (15px): la jerarquia dentro de la tarjeta la
   pone el TAMANO. */
.pantalla-consentimientos .v2-consent .v2-consent-titulo {
    font-family: var(--kctp-sans);
    font-weight: var(--kctp-peso-medio);
    font-size: var(--paso-5);            /* 21 */
    line-height: 1.28;
    letter-spacing: -.016em;
    color: var(--kctp-tinto);
    margin: 0 0 var(--kctp-e3);
    text-wrap: balance;
}

/* "Opcional" como pastilla de verdad (radio = alto/2, 12px), no como badge
   prestada de Bootstrap con su propio gris. */
.pantalla-consentimientos .v2-consent-opcional {
    display: inline-block;
    vertical-align: 2px;
    margin-left: var(--kctp-e2);
    padding: 3px 9px;
    border-radius: var(--kctp-r-pastilla);
    background: var(--kctp-crema);
    border: 1px solid var(--kctp-borde);
    color: var(--kctp-tenue);
    font-size: var(--kctp-t-micro);      /* 12 */
    font-weight: var(--kctp-peso-normal);
    line-height: 1.4;
    letter-spacing: 0;
}

/* EL TEXTO LEGAL SUBE DE TINTA.
   Estaba en --kctp-tenue, o sea era lo mas apagado de la pantalla; y es justo
   lo que la paciente esta firmando. Tinta primaria, interlineado 1.65 y
   medida de 58 caracteres para que se lea de corrido. */
.pantalla-consentimientos .v2-consent-legal {
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-menor);      /* 15 */
    line-height: 1.65;
    max-width: 58ch;
    margin-bottom: var(--kctp-e2);
}
/* Cuando esta recortado a dos lineas, el ultimo renglon se desvanece: dice
   "sigue" sin necesidad de leer el boton. */
.pantalla-consentimientos .v2-consent-legal.recortado {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, .55) 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, .55) 100%);
}
.pantalla-consentimientos .kctp-legal-mas { padding-bottom: var(--kctp-e5); }

/* La casilla. Lo marcado se senala con el GROSOR y la oscuridad del borde
   (regla del sistema), pero con mas aire dentro y el texto a tamano de
   cuerpo: aceptar no es una opcion mas de un formulario. */
.pantalla-consentimientos .v2-consent-casilla {
    align-items: flex-start;
    gap: var(--kctp-e4);
    padding: var(--kctp-e4) var(--kctp-e4);
    border-radius: var(--kctp-radio-ch);
    border-color: var(--kctp-borde-c);
    font-size: var(--kctp-t-cuerpo);
    line-height: 1.45;
}
.pantalla-consentimientos .v2-consent-casilla input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .12rem;
}

/* La constancia de cuando quedo registrado y con que version: dato de
   archivo, no parte de la frase que se acepta. */
.pantalla-consentimientos .v2-consent-constancia {
    display: inline-block;
    margin-top: var(--kctp-e1);
    font-size: var(--kctp-t-meta);      /* 13 */
    line-height: 1.4;
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tenue);
}
.pantalla-consentimientos .v2-consent-casilla input:checked + span .v2-consent-constancia {
    font-weight: var(--kctp-peso-normal);
    color: var(--kctp-tenue);
}

/* La casilla ya aceptada se marca con UNA linea de vino de 1px, no con dos.
   El sistema le pone borde de 1px MAS un anillo interior de otro 1px, que es
   la regla de Stripe para elegir entre varias tarjetas de pago: ahi el grosor
   tiene que gritar cual de tres esta elegida. Aqui hay una sola casilla por
   tarjeta y ademas se ve el tilde, asi que el segundo pixel solo hace ruido. */
.pantalla-consentimientos .v2-consent-casilla:has(input:checked),
.pantalla-consentimientos .v2-consent-casilla.elegida {
    box-shadow: none;
    border-color: var(--kctp-acento);
}

/* Los botones se apoyan en el hueso, fuera de las tarjetas: valen para todas
   las autorizaciones, no para la ultima. Por eso se apaga la raya de arriba
   que .kctp-acciones dibuja cuando vive dentro de una tarjeta.

   Y ya NO llevan la sangria de 36 px que tenian antes. Esa sangria existia
   para alinearlos con el titulo de la pantalla, que vivia metido dentro de la
   banda tenida y por tanto empezaba 40 px adentro. Ahora el titulo se apoya
   en el borde de la columna, asi que la vertical de la pagina es una sola
   -titulo, borde de las tarjetas y botones- y meterlos hacia dentro seria el
   escalon que aquella regla queria evitar. */
.pantalla-consentimientos .v2-acciones {
    border-top: 0;
    padding-top: 0;
    margin-top: var(--kctp-e6);
    align-items: center;
}
@media (max-width: 559px) {
    .pantalla-consentimientos .v2-acciones { flex-direction: column; align-items: stretch; }
}