/*
 * Estilos propios del RIS.
 *
 * --ris-color-institucion lo define cada institución (M1) y se inyecta desde
 * la cabecera; acá solo se deja un valor por defecto para cuando no hay
 * ninguna resuelta, por ejemplo en la pantalla de acceso.
 */
:root {
    --ris-color-institucion: #0d6efd;
    /* El fondo de la página, que no es el de las tarjetas: en claro es un gris
     * suave y en oscuro uno más oscuro que la tarjeta, que es lo que la despega
     * del fondo en vez de dejarla flotando en un tono parecido. */
    --ris-fondo: #f6f7f9;
    /* El ancho del menú lateral —abierto y cerrado—, que es el mismo número con
     * el que se corre el cuerpo para que el contenido no quede debajo: una sola
     * medida para las dos cosas, o se desfasan. */
    --ris-menu-ancho: 15rem;
    --ris-menu-ancho-cerrado: 4.25rem;
    --ris-ancho-menu: var(--ris-menu-ancho);
}

[data-bs-theme="dark"] {
    --ris-fondo: #16181b;
}

body {
    background-color: var(--ris-fondo);
    color: var(--bs-body-color);
}

/*
 * La barra de arriba y el menú lateral (26/09).
 *
 * El menú va fijo al costado y el cuerpo se corre con `padding-left`, así que el
 * ancho de los dos sale de una sola variable —`--ris-ancho-menu`—, que cambia
 * con el atributo que deja la cabecera antes del primer dibujo.
 */
[data-ris-menu="cerrado"] {
    --ris-ancho-menu: var(--ris-menu-ancho-cerrado);
}

body.ris-con-menu {
    padding-left: var(--ris-ancho-menu);
    transition: padding-left .15s ease;
}

.ris-barra {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 3.5rem;
    padding: .5rem 1rem;
    background-color: var(--ris-color-institucion);
    color: #fff;
}

/*
 * La marca: el nombre de la institución, que lleva a la pantalla de inicio, así
 * que el blanco y la falta de subrayado van también en el hover y el foco, que
 * son los que pone Bootstrap.
 */
.ris-marca {
    min-width: 0;
    color: #fff;
    text-decoration: none;
    /* El logo y el nombre, uno al lado del otro: en flex quedan centrados entre
       sí —una imagen alineada a la línea de base se ve corrida— y el nombre
       puede partirse en un teléfono. */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.ris-marca:hover,
.ris-marca:focus {
    color: #fff;
}

.ris-marca-nombre {
    font-size: 1.05rem;
}

/* El logo de la institución en la barra (M1): la altura del renglón, y ancho
   libre hasta un tope, porque cada clínica manda su imagen con la proporción que
   tiene. */
.ris-marca-logo {
    max-height: 28px;
    max-width: 160px;
    object-fit: contain;
}

/* El mismo logo, más grande, en la pantalla que lo carga. */
.ris-marca-logo-preview {
    max-height: 80px;
    max-width: 240px;
    object-fit: contain;
}

/* Quien entró va del otro lado de la barra, y puede ser largo: en un teléfono
 * tiene que poder partirse en vez de desbordar la pantalla. */
.ris-usuario {
    font-size: 0.9rem;
    opacity: 0.9;
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * El menú. Fijo y de alto completo, con el contenido a su derecha: el color va
 * sobre el fondo del tema, no sobre el de la institución —el color lo elige el
 * reseller y un amarillo con texto blanco no se lee—, y la marca queda en el
 * enlace de la sección abierta, como en las tablas.
 */
.ris-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: var(--ris-ancho-menu);
    padding: .5rem;
    overflow-y: auto;
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    transition: width .15s ease;
}

.ris-menu-boton,
.ris-menu-accion,
.ris-menu-lista a {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .625rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: var(--bs-body-color);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.ris-menu i {
    flex: 0 0 auto;
    width: 1.25rem;
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
}

/* Los dos SVG del tema se dibujan con el mismo alto que los íconos de la
 * tipografía, que si no la columna no queda alineada. */
.ris-menu svg {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

.ris-menu-lista {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .95rem;
}

/* El pie: el tema y «Salir». Va abajo del todo con su línea —no son destinos,
 * son de quien está adentro—, y la lista se lleva el espacio que sobra. */
.ris-menu-pie {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin-top: auto;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-border-color);
}

.ris-menu-pie form {
    margin: 0;
}

/* La sección en la que se está, que marca app.js leyendo la dirección. Va por
 * `aria-current` y no por una clase: es lo mismo que anuncia el lector de
 * pantalla y no pelea con ningún `.active` de Bootstrap. */
.ris-menu-lista a[aria-current="page"] {
    background-color: var(--bs-secondary-bg);
    font-weight: 500;
}

.ris-menu-boton:hover,
.ris-menu-accion:hover,
.ris-menu-lista a:hover {
    background-color: var(--bs-tertiary-bg);
}

/*
 * Cerrado: los íconos solos, centrados en la franja. La palabra no se esconde
 * con `display: none` —desaparecería también para el lector de pantalla—, sino
 * que sale de la vista como el `.visually-hidden` de Bootstrap.
 */
[data-ris-menu="cerrado"] .ris-menu-boton,
[data-ris-menu="cerrado"] .ris-menu-accion,
[data-ris-menu="cerrado"] .ris-menu-lista a {
    justify-content: center;
    padding-right: .5rem;
    padding-left: .5rem;
}

[data-ris-menu="cerrado"] .ris-menu-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* El botón del menú, como el del tema: los dos íconos van adentro y cuál se ve
 * lo decide el atributo, para que el que corresponde esté desde el primer
 * dibujo; el texto lo pone app.js. */
.ris-icono-abrir-menu {
    display: none;
}

[data-ris-menu="cerrado"] .ris-icono-cerrar-menu {
    display: none;
}

[data-ris-menu="cerrado"] .ris-icono-abrir-menu {
    display: inline;
}

/* El ícono del menú en la barra: es el del teléfono, donde la franja no ocupa
 * lugar. En una pantalla ancha manda el botón de la franja y este se esconde. */
.ris-boton-barra {
    display: none;
}

/* El oscurecido del resto, que solo existe cuando el menú se abre encima del
 * contenido —en un teléfono—: en una pantalla ancha el menú no tapa nada. */
.ris-menu-fondo {
    display: none;
}

@media (max-width: 991.98px) {
    /* En el teléfono el menú no ocupa lugar: el contenido va a todo el ancho —los
       formularios y las tablas, completos— y el menú entra entero al tocar el
       ícono de la barra, por encima. Cerrado queda fuera de la pantalla y con
       `visibility: hidden`, que además lo saca del recorrido del teclado; el
       `visibility` va con transición para que no se adelante al deslizamiento de
       salida. */
    body.ris-con-menu {
        padding-left: 0;
    }

    .ris-menu {
        visibility: hidden;
        width: var(--ris-menu-ancho);
        transform: translateX(-100%);
        transition: transform .15s ease, visibility .15s;
    }

    [data-ris-menu="abierto"] .ris-menu {
        visibility: visible;
        transform: none;
        box-shadow: var(--bs-box-shadow);
    }

    .ris-boton-barra {
        display: inline-block;
    }

    [data-ris-menu="abierto"] .ris-menu-fondo {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1035;
        background-color: rgba(0, 0, 0, .5);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ris-con-menu,
    .ris-menu {
        transition: none;
    }
}

/*
 * El botón del tema (claro/oscuro). Los dos íconos van adentro y cuál se ve lo
 * decide el atributo que deja la cabecera: el que corresponde está desde el
 * primer dibujo, sin esperar a que corra el JavaScript. La luna ofrece el modo
 * oscuro y el sol el claro.
 */
.ris-icono-sol {
    display: none;
}

[data-bs-theme="dark"] .ris-icono-luna {
    display: none;
}

[data-bs-theme="dark"] .ris-icono-sol {
    display: inline;
}

/* La palabra del tema, por lo mismo: dice lo que va a pasar si se toca, y las
 * dos están en el HTML para que la que corresponde esté desde el primer dibujo. */
.ris-texto-sol {
    display: none;
}

[data-bs-theme="dark"] .ris-texto-luna {
    display: none;
}

[data-bs-theme="dark"] .ris-texto-sol {
    display: inline;
}

.ris-pie {
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--bs-border-color);
}

.ris-fondo-acceso {
    background-color: var(--ris-fondo);
}

.ris-alto-completo {
    min-height: 100vh;
}

.card {
    border: 1px solid var(--bs-border-color);
}

/*
 * Muestra del color elegido al crear una institución (M1): el cuadradito que
 * va al lado del combo. Enseña el color que va a tomar la barra de navegación
 * —que es donde se usa—, así que el fondo lo pone el script de la pantalla y
 * acá solo van el tamaño y el borde, que si no corta el combo en dos.
 */
.ris-muestra-color {
    width: 2.75rem;
    border-right: 0;
}

/*
 * El estilo de las tablas (25/09; llano desde el 03/10): todas van iguales —
 * filas sobre el blanco del tema, líneas finas y 12px de aire— y la fila bajo
 * el puntero se tiñe apenas, para seguir la lectura exacta sin recargar la
 * vista. Se pone con la clase `ris-tabla` en cada tabla.
 *
 * El tinte del color de la institución —cabecera y filas alternadas— se retiró
 * a pedido de Jairo: en estas pantallas se pasa el día leyendo datos y la
 * jerarquía la hacen el aire y la línea, no el color. La marca sigue en la
 * barra de arriba (M1) y en el visor. La ficha del informe (`informe.html`)
 * queda afuera del estilo a propósito: es una ficha, no una lista.
 *
 * El fondo de la cabecera y el del hover van por las variables de Bootstrap
 * (`--bs-table-bg-type` y `--bs-table-bg-state`): las celdas pintan su fondo
 * con un box-shadow interior, así que un `background-color` propio quedaría
 * debajo y no se vería. El hover es el mismo mecanismo del `.table-hover`.
 */
.ris-tabla {
    /* Las filas, sobre el blanco del tema: la página es gris y acá el dato va
       en limpio —todas las filas iguales, sin bloques alternados—. Es también
       la base sobre la que se nota el hover. */
    --bs-table-bg: var(--bs-body-bg);
}

.ris-tabla thead th {
    --bs-table-bg-type: var(--ris-fondo-sutil);
    color: var(--ris-tinta);
    border-bottom: 1px solid var(--ris-linea);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ris-tabla > :not(caption) > * > * {
    /* 12px de aire vertical: la fila respira y la línea la separa. */
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--ris-linea);
}

/* La fila bajo el puntero: apenas teñida —el mismo gris ultra claro de la
 * cabecera—. */
.ris-tabla > tbody > tr:hover > * {
    --bs-table-bg-state: var(--ris-fondo-sutil);
}

/* La última fila no lleva línea: la pone el marco, no cada fila. */
.ris-tabla > tbody > tr:last-child > * {
    border-bottom: 0;
}

/*
 * Estado de un estudio (M4/M6). El color va por código de estado y no por
 * etiqueta: sigue al paso del flujo —recién llegado, en informe, informado,
 * entregado— y sobrevive a que cambie el texto que se muestra.
 *
 * Los colores son los «subtle» de Bootstrap —el fondo apenas teñido y su texto
 * oscuro—, que se dan vuelta solos con el tema: en claro son los pasteles de
 * siempre y en oscuro los mismos tonos apagados sobre fondo oscuro, sin tener
 * que mantener dos juegos. El de «Recibido» es el gris de la paleta, que sobre
 * la fila impar de la tabla —teñida con el color de la institución— es el único
 * que no tiene de dónde agarrarse.
 */
.ris-estado {
    font-weight: 500;
    /* Pastilla entera y no rectángulo: el estado se lee de un vistazo, sin
       competir con los datos (03/10). */
    border-radius: 9999px;
}

.ris-estado-recibido {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
}

.ris-estado-en_informe {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.ris-estado-informado {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.ris-estado-entregado {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

/*
 * Un estudio sin paciente es una tarea pendiente —la worklist existe para
 * asociarlo—, así que se señala en vez de dejar la celda vacía.
 */
.ris-sin-paciente {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font-weight: 500;
    border-radius: 9999px;
}

/*
 * Aviso de HTMX mientras una petición está en curso. htmx agrega la clase
 * .htmx-request al elemento que disparó la petición.
 */
.htmx-request .ris-cargando,
.htmx-request.ris-cargando {
    visibility: visible;
}

.ris-cargando {
    visibility: hidden;
}

/*
 * Zona de arrastre de la carga manual (M5). Mientras se arrastra un archivo
 * encima se marca, para que se vea dónde va a caer: sin eso, soltar el archivo
 * parece que no hizo nada hasta que termina de subir.
 */
.ris-zona-soltar {
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.ris-zona-inactiva {
    opacity: .5;
    pointer-events: none;
}

.ris-zona-soltar.ris-arrastrando {
    border-color: var(--ris-color-institucion, #0d6efd);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/*
 * El informe (M9). El texto que se imprime se escribe con el editor y se muestra
 * tal cual —con su formato—: es lo que sale en el PDF, así que la pantalla no
 * puede mostrarlo distinto. Lo que llega acá ya está limpio (la lista blanca se
 * aplica al guardar), y los párrafos no suman aire de más, que es lo que haría el
 * reinicio de Bootstrap dentro de la vista previa.
 */
.ris-informe-texto p {
    margin-bottom: 0;
}

.ris-informe-texto ul,
.ris-informe-texto ol {
    margin-bottom: 0;
}

/*
 * El editor con formato (M9): las tres secciones del informe y la información clínica
 * del estudio. Quill, servido local como todo lo demás.
 *
 * La letra y el alto son los del textarea que había antes. La letra, porque la
 * hoja de Quill trae la suya —Helvetica 13px— y al lado del resto de la pantalla
 * se ve chica: acá se usa la de la aplicación y el tamaño del `form-control` (1rem).
 * El alto, uno por sección, es el **doble** de los `rows` del textarea que había
 * (2, 10 y 4) —lo pidió Jairo al verlo: más lugar para escribir sin que la caja
 * crezca—. El texto que no entra se desplaza adentro con su barra: así la barra del
 * editor queda siempre a la vista. Creciendo con el texto —lo primero que se probó—
 * se va arriba apenas el informe se hace largo y hay que bajar y subir por la página
 * para seguir escribiendo.
 *
 * El tema oscuro se ajusta acá abajo: Quill trae su tema en claro y la aplicación
 * se usa en los dos.
 */
/*
 * La caja del editor: Quill le pone sus clases **a este mismo elemento** —el div que
 * se le pasa es su `.ql-container`— y le deja `height: 100%`. Como su hoja carga
 * después de esta, para pisarla hay que usar las dos clases (si no, gana Quill en el
 * empate de especificidad: es lo que dejaba la letra en Helvetica 13px).
 *
 * El alto va acá y con las dos clases por lo mismo. Dentro de una fila de Bootstrap
 * —la ficha del estudio— la columna tiene alto definido por el estirado de la fila, y
 * el `100%` de Quill hacía que la caja quedara tan alta como la columna: más de lo que
 * ocupa, así que se salía de su lugar y se dibujaba encima de lo que sigue (los
 * adjuntos). En la pantalla del informe no se veía porque ese formulario no es una
 * fila flexible. La barra del editor queda afuera, arriba de la caja.
 *
 * El área de escritura (`.ql-editor`) ya viene con `height: 100%` y su desplazamiento:
 * llena la caja y el texto se mueve adentro.
 */
.ris-editor.ql-container {
    font-family: inherit;
    font-size: 1rem;
}

.ris-editor.ql-editor {
    line-height: 1.5;
}

.ris-editor.ris-editor-tecnica {
    height: 9rem;
}

.ris-editor.ris-editor-hallazgos {
    height: 33rem;
}

.ris-editor.ris-editor-conclusion {
    height: 15rem;
}

.ris-editor.ris-editor-informacion-clinica {
    height: 15rem;
}

.ris-editor.is-invalid .ql-toolbar.ql-snow,
.ris-editor.is-invalid .ql-container.ql-snow {
    border-color: var(--bs-form-invalid-border-color);
}

.ris-informe-membrete {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: .75rem;
}

.ris-informe-membrete-logo {
    max-height: 60px;
    max-width: 180px;
    object-fit: contain;
}

.ris-informe-seccion {
    margin-top: 1rem;
}

.ris-informe-seccion h3 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: .25rem;
    margin-bottom: .5rem;
}

.ris-informe-firma {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 1.5rem;
    padding-top: .5rem;
    max-width: 18rem;
}

.ris-informe-firma-imagen {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
}

.ris-borrador {
    position: relative;
}

.ris-visor-pantalla {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
    background: #111;
}

.ris-visor-imagen {
    display: block;
    max-width: 100%;
    max-height: 70vh;
}

.ris-visor-cargando {
    position: absolute;
    color: #fff;
    font-size: .875rem;
}

.ris-visor-boton {
    min-width: 4rem;
}

/* La información clínica del estudio, en la ficha del informe (26/09): es texto
 * escrito en un cuadro de varias líneas —«descartar fractura, descartar
 * apendicitis»— y los saltos son parte de lo que dice, así que se respetan. */
.ris-texto-clinico {
    white-space: pre-line;
}

/* Las acciones de una fila de tabla, en un menú de tres puntos (03/10): con
 * tres o más botones la fila se llena de ruido y el ancho aprieta, así que van
 * adentro de un desplegable. El menú es el de Bootstrap —servido local, como
 * todo— y lo que se ajusta acá es el aire entre el ícono y su palabra, el
 * mismo que en el resto de la aplicación, y un alto de fila más liviano. */
.ris-menu-acciones .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* El botón del kebab: solo el ícono. El `title` y el `aria-label` —con el
 * nombre de la fila— los pone cada pantalla, como en toda acción sin palabra. */
.ris-acciones-boton {
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Las tintas y el aire de las tablas (03/10)
 * ---------------------------------------------------------------------------
 * Las variables que usan el estilo de tabla (`ris-tabla`) y la lista de
 * estudios: la tinta principal, la secundaria —horas, edades, identificadores:
 * un gris neutro y sólido, más firme que el `text-secondary` de Bootstrap, que
 * quedaba pálido—, la línea fina y el gris ultra claro de la cabecera y del
 * hover. En oscuro, un escalón cada uno.
 */
:root {
    --ris-suave: #64748B;
    --ris-tinta: #1E293B;
    --ris-linea: #E2E8F0;
    --ris-fondo-sutil: #F8FAFC;
}

[data-bs-theme="dark"] {
    --ris-suave: #94A3B8;
    --ris-tinta: #E2E8F0;
    --ris-linea: #343A40;
    --ris-fondo-sutil: #2B3035;
}

.ris-suave {
    color: var(--ris-suave);
}

/* La modalidad del estudio, como etiqueta destacada, con el identificador al
 * lado y la descripción debajo: es lo primero que se mira de la fila. */
.ris-modalidad {
    display: inline-block;
    padding: .1rem .5rem;
    border: 1px solid var(--ris-linea);
    border-radius: .5rem;
    background-color: var(--ris-fondo-sutil);
    color: var(--ris-tinta);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
}

/* Lo que no está, dicho sin drama. */
.ris-sin-asignar {
    color: var(--ris-suave);
    font-style: italic;
}

/* Las acciones de la fila, fantasma: sin borde ni fondo hasta que el puntero
 * las busca; el `title` y el `aria-label` los pone la pantalla. */
.ris-accion {
    border: 0;
    background: transparent;
    color: var(--ris-suave);
    line-height: 1;
    padding: .35rem .5rem;
    border-radius: .375rem;
}

.ris-accion:hover,
.ris-accion:focus-visible {
    background-color: var(--bs-tertiary-bg);
    color: var(--ris-tinta);
}

/* El desplegable del combobox de CIE-10 (M25): cuelga del campo —la columna es
 * `position-relative`—, por encima de lo que sigue, y solo ocupa lugar cuando
 * tiene resultados: vacío queda oculto (`:empty`), que es como htmx lo deja
 * entre búsquedas. */
.ris-cie-lista {
    position: absolute;
    z-index: 1080;
    width: 100%;
    max-height: 14rem;
    overflow-y: auto;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.ris-cie-lista:empty {
    display: none;
}