/* Identidad y disposición de la página propia de SABIA.
 *
 * Los valores vienen del sitio real, leídos del DOM de www.cra.gov.co: la barra
 * de Gov.co es #3366CC, los titulares van en Montserrat 600 del mismo azul y el
 * texto corriente en #5B5B5B. No son una aproximación de diseño.
 *
 * El widget trae de fábrica #00539F, que NO es el azul del sitio: lo puso el
 * proveedor. Aquí se reemplaza por el real, porque en una página dedicada dos
 * azules distintos se leen como un error, no como una decisión.
 *
 * Solo la carga la página propia, así que ninguna corrección de aquí sale fuera:
 * el bloque embebido en Drupal sigue viéndose exactamente igual que hoy. Y se
 * mantiene fuera del bundle a propósito, porque clases como .govco existen
 * también en su Drupal y mezclarlas rompería su sitio.
 */

:root {
    --cra-azul: #3366cc;
    --cra-azul-oscuro: #26489a;
    --cra-azul-tenue: #eef3fc;
    --cra-texto: #5b5b5b;
    --cra-titulo: #1f2d3d;
    --cra-borde: #dfe3e8;
    --cra-fondo: #f4f6f9;
    --cra-tipografia: Montserrat, 'Helvetica Neue', Arial, sans-serif;

    /* La sombra crece con la superficie: la tarjeta es un elemento pequeño, el
       chat es la pieza principal y tiene que leerse por encima del fondo. */
    --sombra-tarjeta: 0 1px 2px rgb(16 32 64 / 0.04);
    --sombra-panel: 0 12px 32px rgb(51 102 204 / 0.10), 0 2px 8px rgb(16 32 64 / 0.05);
}

body.pagina-sabia {
    /* Redefine los colores del widget, declarados en :root por index.css. Gana
       por especificidad, no por orden de carga. */
    --primary-color: #3366cc;
    --primary-hover-color: #26489a;
    --user-message-bg: #eef3fc;

    font-family: var(--cra-tipografia);
    background-color: var(--cra-fondo);
    color: var(--cra-texto);
    margin: 0;

    /* El pie tiene que quedarse abajo aunque el contenido no llegue. Sin esto
       flota a media pantalla con el fondo asomando debajo, que es justo lo que
       hace que una página parezca rota. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Barra de Gov.co ------------------------------------------------------- */

.govco {
    background-color: var(--cra-azul);
    padding: 12px 24px;
}

.govco img {
    height: 26px;
    display: block;
}

/* Cabecera de la CRA ---------------------------------------------------- */

.cra-cabecera {
    background: #fff;
    border-bottom: 1px solid var(--cra-borde);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cra-cabecera img {
    height: 54px;
    width: auto;
}

.cra-cabecera .titulo {
    font-weight: 600;
    color: var(--cra-azul);
    font-size: 1rem;
    line-height: 1.3;
}

.cra-cabecera .subtitulo {
    font-size: 0.8rem;
    color: var(--cra-texto);
    margin-top: 2px;
}

/* Disposición ------------------------------------------------------------
 *
 * Dos columnas: a la izquierda de qué se puede preguntar, a la derecha el chat.
 * Apiladas, el chat quedaba debajo del pliegue y la página parecía tratar de
 * otra cosa. Lado a lado, la relación entre el texto y el chat es evidente sin
 * explicarla, y el chat no se pierde.
 */

.cra-contenido {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 32px 24px 40px;
    box-sizing: border-box;
    flex: 1 0 auto;

    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* Columna de texto ------------------------------------------------------- */

.columna-texto h1 {
    font-family: var(--cra-tipografia);
    font-weight: 600;
    color: var(--cra-azul);
    /* El interletrado no puede ser uno solo para todos los tamaños: al crecer,
       las letras se leen demasiado separadas. */
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.columna-texto .entradilla {
    line-height: 1.65;
    font-size: 0.95rem;
    margin: 0 0 28px;
}

.rotulo {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a949f;
    margin: 0 0 12px;
}

.consultas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.consulta {
    display: block;
    background: #fff;
    border: 1px solid var(--cra-borde);
    border-left: 3px solid var(--cra-borde);
    border-radius: 8px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sombra-tarjeta);
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out,
                transform 0.12s ease-out;
}

.consulta .nombre {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cra-titulo);
    margin-bottom: 4px;
}

.consulta .detalle {
    display: block;
    font-size: 0.83rem;
    line-height: 1.5;
}

.consulta:hover,
.consulta:focus-visible {
    border-color: #bcd0f2;
    border-left-color: var(--cra-azul);
    box-shadow: 0 4px 14px rgb(51 102 204 / 0.10);
}

/* La respuesta va en el momento de pulsar, no al soltar: esperar al clic se
   siente muerto. */
.consulta:active {
    transform: scale(0.99);
}

.consulta[aria-current='true'] {
    background: var(--cra-azul-tenue);
    border-color: #bcd0f2;
    border-left-color: var(--cra-azul);
}

.consulta[aria-current='true'] .nombre {
    color: var(--cra-azul-oscuro);
}

.aviso {
    margin-top: 28px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--cra-borde);
    border-radius: 8px;
    box-shadow: var(--sombra-tarjeta);
    font-size: 0.8rem;
    line-height: 1.6;
}

.aviso strong { color: var(--cra-azul); }
.aviso a { color: var(--cra-azul); }

/* Columna del chat -------------------------------------------------------
 *
 * Se queda fija al desplazar: es lo que el ciudadano vino a usar, y perderlo de
 * vista al bajar a leer el aviso legal sería justo lo contrario de lo que busca
 * esta disposición.
 */

.columna-chat {
    position: sticky;
    top: 24px;
}

/* El widget ---------------------------------------------------------------
 *
 * De fábrica es un panel de 400 px anclado a una esquina, encima de la página
 * de la CRA. Aquí ocupa su columna entera.
 */

body.pagina-sabia .chat-widget {
    position: static;
    width: 100%;
    max-width: none;
    height: clamp(520px, calc(100vh - 200px), 760px);
    max-height: none;
    margin: 0;
    box-shadow: var(--sombra-panel);
    border: 1px solid var(--cra-borde);
}

/* Sin "Cerrar chat": en esta página no hay nada detrás a lo que volver. La
   salida es "Finalizar sesión", que además guarda el registro. */
body.pagina-sabia .chat-header [aria-label='Cerrar chat'] {
    display: none;
}

/* Los textos de bienvenida traen max-width: 300px, medida para el panel
   estrecho. En esta columna quedaban en un hilo en medio de mucho blanco. */
body.pagina-sabia .initial-view p,
body.pagina-sabia .needs-file-view p,
body.pagina-sabia .inactivity-view p,
body.pagina-sabia .form-view p {
    max-width: 620px;
}

/* Pie -------------------------------------------------------------------- */

.cra-pie {
    border-top: 1px solid var(--cra-borde);
    background: #fff;
    padding: 20px 24px;
    font-size: 0.78rem;
    text-align: center;
    margin-top: auto;
}

/* Pantallas estrechas -----------------------------------------------------
 *
 * Apiladas, el chat va primero: es a lo que se viene. El texto queda debajo,
 * para quien quiera saber qué más puede preguntar.
 */

@media (max-width: 980px) {
    .cra-contenido {
        /* minmax(0, 1fr) y no 1fr: el mínimo automático de una pista deja que
           el contenido la ensanche, y el aviso legal lleva dentro una URL
           larga que no parte. En móvil eso sacaba el chat fuera de la
           pantalla. */
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 24px 16px 32px;
    }

    .columna-chat {
        position: static;
        order: -1;
    }

    body.pagina-sabia .chat-widget {
        height: clamp(460px, 72vh, 640px);
    }
}

/* Movimiento reducido ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .consulta {
        transition: border-color 0.15s ease-out;
    }

    .consulta:active {
        transform: none;
    }
}

/* Medida de lectura ------------------------------------------------------
 *
 * Las burbujas van al 80% del panel, que en la columna ancha son más de 600 px
 * por línea: el ojo pierde el renglón al volver. Se acota en ch, que es la
 * unidad del texto y no del contenedor, así que la medida aguanta cualquier
 * ancho. El aire también sube: en un panel grande, el margen de 1 rem del
 * widget estrecho se queda corto.
 */

body.pagina-sabia .message-bubble {
    max-width: min(80%, 68ch);
}

body.pagina-sabia .message-list {
    padding: 1.25rem 1.5rem;
}

/* El aviso legal lleva la URL del formulario escrita entera. Sin permiso para
 * partirla, obliga a la caja a ser tan ancha como ella. */
body.pagina-sabia .chat-widget p,
body.pagina-sabia .message-bubble {
    overflow-wrap: anywhere;
}