/* ==========================================================================
   BANDEJA DE CASOS  ·  /consultas  ·  interfaz v2

   Vara: la UI real de Stripe incrustada en /payments y /billing. Panel de
   datos: una sola linea de pelo, radios de 6-8px, cero sombra, interlineado
   comodo y una escalera de tinta de tres escalones. La densidad es el punto:
   un medico abre esto veinte veces al dia y lo que necesita es encontrar el
   caso urgente sin leer, no admirar la pantalla.

   TODO cuelga de .bj a proposito. Las hojas de css/v2/ se cargan en TODAS las
   pantallas (el header las mete con un glob), asi que un selector sin prefijo
   de aqui se colaria en la pantalla de otro agente. Si algo no empieza por
   .bj, esta mal.

   Los tokens (--kctp-*) son del sistema base y no se redefinen aqui: esta
   hoja solo compone con ellos.

   Siete decisiones que vale la pena explicar:

     1. La pantalla no tenia H1. Se abria con ocho pastillas flotando sobre el
        hueso y se leia como un fragmento, no como una pagina. Ahora abre con
        un display en serif de 400 y una bajada a 8px: el bloque de entrada de
        las dos referencias.
     2. Los filtros de estado y el de banderas criticas son DOS ejes distintos
        y antes eran ocho pastillas identicas en fila. Se separan con una
        linea y el de banderas se pinta en rojo, no en vino.
     3. LA REJILLA INVISIBLE. Es la decision que sostiene la pantalla y son
        tres reglas que trabajan juntas; sueltas no sirven de nada:
          a. `table-layout: fixed` con seis anchos medidos, para que las
             columnas no se muevan cuando cambian los datos;
          b. una sola linea por celda y alto de fila constante (60px), para
             que no haya filas de 59 y filas de 70,5 alternandose;
          c. la columna "Señales" en ranuras fijas, con el carril de las FOTOS
             primero porque es el unico dato que traen las 24 filas: asi la
             cabecera siempre cae sobre algo. Y el carril que ninguna fila usa
             se apaga entero, para no dejar un hueco permanente en medio.
        Un panel de datos se ve caro cuando cada elemento aterriza sobre una
        rejilla que no se ve; se ve barato en cuanto un solo numero se corre.
     4. En telefono la tabla de siete columnas deja de ser tabla y pasa a ser
        una lista de tarjetas. Antes habia que desplazarse a lo ancho para
        llegar al boton "Abrir", que es la unica accion de la pantalla.
     5. LA BARRA TIENE DOS LADOS OCUPADOS. Medido: entre el filtro de banderas
        y la busqueda quedaban 547px de nada, el 53% del ancho del elemento
        mas grande de la pagina, y dentro de la tarjeta. Los dos controles se
        juntan a la izquierda y el resumen de la cola cierra la derecha. De
        paso, "Buscar" deja de ser texto vino con una raya al lado y pasa a
        ser el unico boton solido de la pantalla.
     6. LA TARJETA TIENE PIE. La fila 24 quedaba pegada al borde inferior y la
        tabla parecia cortada. El pie dice cuantas se ven de cuantas hay y
        devuelve arriba. Con el, el panel es un emparedado: cromo crema en los
        dos pisos de la cabecera, blanco en los datos, cromo crema abajo.
     7. La cabecera de columnas se queda pegada al desplazarse (solo de 1401px
        para arriba, donde la tabla cabe sin desplazarse a lo ancho: el motivo
        tecnico esta en la seccion 4.7).
   ========================================================================== */

.bj {
    /* Medida de parrafo del bloque de entrada: Stripe corre 410-490px. */
    --bj-medida: 60ch;
    /* Alto de fila comoda de panel de datos (Stripe: 40-48px de contenido).
       --bj-fila-h es el ALTO EXACTO de TODAS las filas del cuerpo, no un
       minimo: es la promesa de la que cuelga el resto de la hoja. */
    --bj-fila-h: 60px;
    --bj-fila-y: 8px;
    --bj-fila-x: 16px;
    /* Alto de una linea de cuerpo (15px x 1.45). Se nombra porque de el sale
       el desplome de la celda del caso, que es lo que pone su primera linea a
       la misma altura que el resto de la fila. */
    --bj-linea: 1.45em;

    /* Las tres ranuras de la columna "Señales". Se declaran aqui porque el
       ancho de la columna es la suma de las tres mas los huecos: si cambia
       una, tiene que cambiar el otro numero, y asi se ven juntos. */
    /* El carril 1 es el de las FOTOS y no el de la alerta, y ese orden es la
       correccion de la vuelta anterior: el contador de fotos se imprime en
       las 24 filas, la bandera solo en 9. Con la bandera delante, en 15 filas
       la ranura 1 quedaba vacia y la cabecera "Señales" no caia sobre nada.
       El unico dato que existe SIEMPRE es el que tiene que anclar la columna. */
    --bj-r1: 30px;   /* fotos aprobadas: el ancla, presente en todas las filas */
    --bj-r2: 30px;   /* espera del paciente */
    --bj-r3: 48px;   /* alerta: la pastilla roja con dos digitos (13+5+14+16) */
    --bj-r-hueco: 6px;

    /* El aire lateral de .kr-content. Lo necesita la cinta de filtros en
       telefono para sangrar hasta el filo de la pantalla. */
    --bj-sangria: 32px;
}

/* Utilidad de accesibilidad: texto que lee el lector de pantalla y no ocupa
   pixeles. Se usa para los rotulos que en pantalla ya dice el contexto. */
.bj .bj-oculto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   1. Bloque de entrada

   Ritmo de dos velocidades: 8px del titulo a su bajada (son UN bloque) y
   32px de ahi a la barra de filtros. Repartir 24px por igual es el error.
   ========================================================================== */

.bj-cabeza { margin: 0 0 var(--kctp-e6); }

.bj-cabeza h1 {
    font-family: var(--kctp-serif);
    font-size: var(--kctp-t-display);      /* 28 -> 40px */
    font-weight: var(--kctp-peso-normal);  /* 400. La jerarquia la da el tamano */
    line-height: var(--kctp-lh-display);   /* 1.06 */
    letter-spacing: var(--kctp-ls-display);/* -.028em */
    color: var(--kctp-tinto);
    margin: 0 0 var(--kctp-e2);            /* 8px: titulo y bajada son un bloque */
    text-wrap: balance;
}

/* El recurso de redaccion de Stripe: la frase que abre va en peso medio y
   casi negro, y el resto sigue en tinta de apoyo AL MISMO TAMANO. El peso y
   el color hacen la jerarquia dentro del parrafo, sin inventar un h4. */
/* Va con .bj delante a proposito: el sistema trae `.kr-content p {max-width:
   68ch}` y, con la misma especificidad, la bajada salia a 643px. Las dos
   referencias corren la medida de parrafo entre 410 y 490px. */
.bj .bj-bajada {
    margin: 0;
    max-width: var(--bj-medida);
    font-size: var(--kctp-t-densa);        /* 15px */
    line-height: var(--kctp-lh-cuerpo);    /* 1.6 */
    letter-spacing: var(--kctp-ls-cuerpo);
    color: var(--kctp-tenue);
    /* Sin esto la bajada deja "criticas." sola en la segunda linea. Los
       titulares de las dos referencias estan equilibrados a mano; aqui lo
       hace el navegador, y donde no lo soporte simplemente no pasa nada. */
    text-wrap: pretty;
}
.bj-bajada strong {
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tinta);
}

/* ==========================================================================
   2. Barra de filtros

   Una sola fila en escritorio: estados a la izquierda, el interruptor de
   banderas y la busqueda a la derecha, separados por una linea de pelo.
   ========================================================================== */

/* Las pestañas de estado son navegacion de la PAGINA: van fuera del panel. */
.bj-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kctp-e2);
    min-width: 0;
    margin-bottom: var(--kctp-e4);
}

/* La barra del panel es su primer piso: acota lo que ya esta abajo. Antes el
   interruptor y la busqueda flotaban sueltos sobre el hueso, alineados a la
   derecha bajo una fila de pastillas alineada a la izquierda, y el hueco en
   forma de L era lo primero que veia el ojo. */
/* DOS GRUPOS, no dos controles sueltos en las esquinas. Medido en la vuelta
   anterior: el filtro de banderas terminaba en x=500 y la busqueda arrancaba
   en x=1047. 547px de nada seguidos, dentro de la tarjeta y justo encima de la
   fila de encabezados: el ojo lo leia como una fila rota, no como una barra.
   Ahora los dos CONTROLES van juntos a la izquierda (son la misma tarea:
   acotar la lista) y el lado derecho lo cierra el resumen de la cola. */
.bj-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kctp-e3) var(--kctp-e5);
    padding: 12px var(--bj-fila-x);
    border-bottom: 1px solid var(--kctp-borde);
    /* CABECERA DE DOS PISOS, como la de Stripe: la barra de controles y la
       fila de nombres de columna comparten el mismo crema y las separa una
       linea de pelo; el pie repite ese crema abajo. Antes la barra era blanca
       y el encabezado crema, asi que el unico bloque tintado de la tarjeta
       estaba EN MEDIO y el panel se leia partido. Ahora el cromo esta arriba y
       abajo, los datos en blanco al medio, y el ojo sabe donde empieza y donde
       termina la tabla sin leer una palabra. */
    background: var(--kctp-crema);
}
.bj-controles {
    display: flex;
    align-items: center;
    gap: var(--kctp-e2);
    min-width: 0;
}

/* --- Resumen de la cola --------------------------------------------------
   Es la lectura de las dos ultimas columnas de la tabla (espera y señales),
   que sin el hay que contar a ojo fila por fila. Cifra en tinta primaria y
   peso medio, rotulo en tinta de apoyo AL MISMO TAMANO: el recurso de
   redaccion de Stripe, con el peso y el color haciendo la jerarquia.
   Los separadores son la MISMA linea de pelo del resto de la pantalla. */
.bj-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    font-size: var(--kctp-t-meta);
    line-height: 1.3;
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
    white-space: nowrap;
}
.bj-resumen li { padding: 2px 14px; border-left: 1px solid var(--kctp-borde); }
.bj-resumen li:first-child { border-left: 0; padding-left: 0; }
.bj-resumen li:last-child  { padding-right: 0; }
.bj-cifra {
    font-variant-numeric: tabular-nums;
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tinta);
}
/* Un cero es informacion -no hay nadie esperando- pero es la que menos pesa:
   se atenua, no se borra. Misma regla que el cero de la columna de señales. */
.bj-resumen .bj-cero .bj-cifra { font-weight: var(--kctp-peso-normal); color: var(--kctp-tenue); }

/* --- Pastilla de estado --------------------------------------------------
   Radio = alto/2, texto de 13px, una linea de pelo. Sin sombra: siete
   pastillas con sombra propia son ruido, no jerarquia. */
.bj-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 13px;
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-pastilla);
    background: var(--kctp-blanco);
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-meta);         /* 13px */
    line-height: 1.3;
    letter-spacing: -.004em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: border-color var(--kctp-mov-hover),
                background var(--kctp-mov-hover),
                color var(--kctp-mov-hover);
}
/* El conteo es un dato, no parte del rotulo: va en cifras tabulares y un
   escalon mas tenue, para que la vista salte de nombre en nombre. */
.bj-pastilla .n {
    font-variant-numeric: tabular-nums;
    color: var(--kctp-tenue);
    transition: color var(--kctp-mov-hover);
}
.bj-pastilla:hover {
    border-color: var(--kctp-borde-f);
    background: var(--kctp-crema);
    color: var(--kctp-tinta);
}
.bj-pastilla.activa {
    background: var(--kctp-acento);
    border-color: var(--kctp-acento);
    color: #fff;
    font-weight: var(--kctp-peso-medio);
}
.bj-pastilla.activa .n { color: rgba(255, 255, 255, .62); }

/* --- Interruptor de banderas criticas ------------------------------------
   RADIO DE CAMPO, NO DE PASTILLA, y no es un descuido: este filtro ya no vive
   en la cinta de pastillas de arriba sino en la barra del panel, pegado a la
   caja de busqueda. Una pastilla de 999px al lado de una caja de 6px se ve
   como dos piezas de dos sistemas. Queda un reparto limpio: pastilla = pestaña
   de la pagina, radio de campo = control del panel. El eje lo sigue
   distinguiendo el color (rojo, no vino). */
.bj-bandera {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 36px, no 32: es el alto de la caja de busqueda de al lado. Dos controles
       de la misma tarea con dos alturas distintas es la firma de la barra
       improvisada. */
    min-height: 36px;
    padding: 5px 14px;
    border: 1px solid var(--kctp-borde-c);
    border-radius: var(--kctp-r-campo);
    background: var(--kctp-blanco);
    color: var(--kctp-tinta);
    font-size: var(--kctp-t-meta);
    line-height: 1.3;
    letter-spacing: -.004em;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--kctp-mov-hover),
                background var(--kctp-mov-hover),
                color var(--kctp-mov-hover);
}
/* Un escalon por encima de la tinta de adorno: apagado a media asta, el
   control parecia deshabilitado al lado del boton solido. */
.bj-bandera i { font-size: 12px; line-height: 1; color: var(--kctp-tenue); transition: color var(--kctp-mov-hover); }
.bj-bandera:hover { border-color: var(--kctp-alerta-bd); background: var(--kctp-alerta-sw); color: var(--kctp-alerta); }
.bj-bandera:hover i { color: var(--kctp-alerta); }
/* Encendido: el estado seleccionado lo lleva el BORDE y el color del texto,
   no un relleno saturado. */
.bj-bandera.activa {
    border-color: var(--kctp-alerta);
    background: var(--kctp-alerta-sw);
    color: var(--kctp-alerta);
    font-weight: var(--kctp-peso-medio);
}
.bj-bandera.activa i { color: var(--kctp-alerta); }

/* --- Campo de busqueda ---------------------------------------------------
   Campo + boton son UNA caja con una sola linea de pelo, no dos controles
   sueltos con un hueco de 8px en medio. La lupa vive dentro del campo. */
.bj-buscar {
    display: flex;
    align-items: stretch;
    position: relative;
    /* 23.25rem es lo que mide el marcador de posicion entero mas la lupa y el
       boton: con 19 se cortaba en "codigo o..." y con 21.5 el boton solido,
       que es mas ancho que el rotulo de antes, se comia el final. Se encoge
       en portatil angosto, donde la barra tiene que caber en una sola fila. */
    flex: 0 1 23.25rem;
    width: 23.25rem;
    max-width: 100%;
    /* El `min-width: 0` es OBLIGATORIO desde que la caja dejo de recortar:
       un elemento flexible con `overflow` distinto de `visible` recibe minimo
       automatico 0 de regalo, y al quitar el recorte volvio el minimo por
       contenido. A 320px eso sacaba el filtro de banderas 22px fuera de la
       pantalla y el documento entero se desplazaba a lo ancho. */
    min-width: 0;
    border: 1px solid var(--kctp-borde-c);
    border-radius: var(--kctp-r-campo);
    background: var(--kctp-blanco);
    /* SIN `overflow: hidden`, y no es un olvido: recortando la caja se
       recortaba tambien el anillo de foco del boton al llegar con el tabulador
       y solo quedaba visible un pedazo del lado izquierdo. Las esquinas
       redondas del boton se las pone el boton. */
    transition: border-color var(--kctp-mov-hover), box-shadow var(--kctp-mov-hover);
}
.bj-buscar:focus-within {
    border-color: var(--kctp-acento);
    box-shadow: 0 0 0 3px rgba(91, 12, 47, .12);
}
.bj-buscar-icono {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    color: var(--kctp-tenue-2);
    pointer-events: none;
}
.bj-buscar input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 6px 10px 6px 32px;
    border: 0;
    background: transparent;
    color: var(--kctp-tinta);
    font-family: inherit;
    font-size: var(--kctp-t-meta);
    line-height: 1.4;
    letter-spacing: var(--kctp-ls-cuerpo);
    /* Va en el CAMPO y no en `::placeholder`, donde el navegador lo ignora. A
       390px el marcador no cabe y se cortaba en seco a media palabra
       ("...codigo o motiv"), el mismo defecto que las pastillas y que la
       tabla; asi termina en puntos suspensivos, como corta todo lo demas. */
    text-overflow: ellipsis;
}
.bj-buscar input[type="text"]::placeholder { color: var(--kctp-tenue-2); }
/* Foco: el anillo lo pinta la caja entera, no el campo por dentro. */
.bj-buscar input[type="text"]:focus { outline: none; }
/* BOTON SOLIDO, no texto vino pegado al campo con una linea de un pixel. En
   toda la pantalla de escritorio no habia un solo elemento solido salvo la
   pastilla activa: la unica accion de la barra parecia un enlace. El margen
   negativo lo hace salir por encima del borde de la caja en tres lados, asi
   que el vino llega hasta el filo y no queda un halo rosa alrededor; como su
   filo exterior coincide entonces con el de la caja, el mismo radio de 6px le
   cierra las dos esquinas de la derecha. */
.bj-buscar button {
    position: relative;   /* contiene el rotulo oculto de la version telefono */
    flex: 0 0 auto;
    margin: -1px -1px -1px 0;
    border-radius: 0 var(--kctp-r-campo) var(--kctp-r-campo) 0;
    border: 0;
    background: var(--kctp-acento);
    color: #fff;
    font-family: inherit;
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    padding: 0 16px;
    cursor: pointer;
    transition: background var(--kctp-mov-hover);
}
.bj-buscar button:hover { background: var(--kctp-acento-os); }
/* En escritorio manda la palabra; la lupa del boton solo aparece en telefono. */
.bj-buscar-lupa { display: none; }

/* ==========================================================================
   3. Panel y tabla

   Del lado del personal manda el BORDE: una linea de pelo, radio de 8px y
   cero sombra. La sombra se reserva para lo que de verdad flota.
   ========================================================================== */

.bj-panel {
    background: var(--kctp-blanco);
    border: 1px solid var(--kctp-borde);
    border-radius: var(--kctp-r-panel);
    box-shadow: none;
    overflow: hidden;
}
/* El `position: relative` no es adorno y costo un rato encontrarlo: los textos
   de .bj-oculto son `position: absolute`, y sin un ancestro posicionado su
   caja se cuelga del bloque contenedor inicial. Es decir, SE ESCAPAN de esta
   caja con desplazamiento y suman al ancho del documento: a 1280px la pagina
   entera se corria 22px a un lado aunque la tabla ya se desplazara sola por
   dentro. Con esto, lo que sobra se queda aqui. */
.bj-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* El mismo velo de la cinta de filtros, por el mismo motivo. En un portatil de
   1024 la tabla no cabe y se cortaba a mitad de la columna "Señales" contra el
   filo del panel, sin nada que dijera que seguia: identico defecto al de las
   pastillas en telefono, y no se arregla en un sitio y se deja en el otro.

   VA SIN VELO FIJO DE RESPALDO, y eso es deliberado: cuando la tabla SI cabe
   (1440 y arriba) no hay linea de tiempo de desplazamiento, la animacion no se
   aplica y el borde derecho queda limpio. Un degradado permanente insinuando
   contenido que no existe seria peor que no poner nada. */
@supports (animation-timeline: scroll(self inline)) {
    .bj-scroll {
        animation: bj-velo linear both;
        animation-timeline: scroll(self inline);
    }
}

/* `table-layout: fixed` es la decision de fondo de esta pantalla y no un
   detalle de rendimiento. Con el reparto automatico, el ancho de cada columna
   lo decide el texto mas largo que le toque en suerte, asi que las columnas se
   mueven al filtrar, al buscar o al entrar un caso nuevo. Con el reparto fijo,
   los anchos los decide esta hoja y el texto se recorta: la cabecera "Señales"
   y su numero caen SIEMPRE en la misma x, pase lo que pase con los datos.
   Es la rejilla invisible sobre la que se apoyan los paneles de Stripe. */
.bj-tabla {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    background: var(--kctp-blanco);
    font-size: var(--kctp-t-densa);        /* 15px */
    line-height: 1.45;
}

/* Cabecera: 12px en peso medio y tinta de apoyo. Cero mayusculas y cero
   tracking abierto, que es la firma de la plantilla barata. Un fondo apenas
   crema la ancla sin meter un segundo gris en el sistema. */
.bj-tabla th {
    text-align: left;
    padding: 11px var(--bj-fila-x);
    background: var(--kctp-crema);
    border-bottom: 1px solid var(--kctp-borde);
    font-size: var(--kctp-t-micro);        /* 12px */
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
    white-space: nowrap;
}
/* `height` en una celda es un MINIMO, no una orden. Vale como candado solo
   porque la regla de abajo garantiza que ningun contenido lo supera: toda
   celda del cuerpo mide una linea, salvo la del caso, que mide dos SIEMPRE.
   Sin las dos reglas juntas, esta sola no sirve de nada. */
.bj-tabla td {
    height: var(--bj-fila-h);
    padding: var(--bj-fila-y) var(--bj-fila-x);
    border-bottom: 1px solid var(--kctp-linea);
    vertical-align: middle;
    color: var(--kctp-tinta);
}

/* El ancho de la columna manda sobre el texto, nunca al reves. Lo que no
   quepa se recorta con puntos suspensivos y el texto entero sigue en el
   `title` de cada celda. */
.bj-tabla tbody td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bj-tabla tbody tr:last-child td { border-bottom: 0; }
.bj-tabla tbody tr { transition: background var(--kctp-mov-hover); }
.bj-tabla tbody tr:hover td { background: var(--kctp-crema); }

/* --- Reparto de columnas -------------------------------------------------
   Seis anchos en pixeles y el motivo se queda con lo que sobre. Cada numero
   sale de MEDIR en pantalla el contenido mas ancho que le toca y sumarle los
   32px de aire de la celda, no de repartir porcentajes a ojo:

     caso     164 = "Dra. Especialista KARA" a 12px (129); el codigo pide 108
     paciente 196 = "Paciente Bandera Roja" (159) con holgura para uno mas
     estado   190 = la pastilla "Derivada a presencial" (156), la mas ancha
     señales  152 = las tres ranuras (48+30+30) y sus dos huecos de 6
     espera    78 = aqui manda la CABECERA (43), no el dato ("11 h" mide 28)
     accion    84 = el boton "Abrir" (57) con su borde de reposo

   Suman 864. A 1440 el area util es 1130, asi que al motivo le quedan ~266px:
   unos 35 caracteres, que es lo que se alcanza a leer de un vistazo antes de
   decidir si el caso se abre o no. El resto vive en el `title` y en la ficha.

   OJO con la trampa de la columna "Espera": con reparto fijo, un rotulo de
   cabecera mas ancho que su columna no la ensancha, se DESBORDA. Por eso el
   piso de varias columnas no lo pone el dato sino su titulo. */
/* LA CELDA DEL CASO ES LA UNICA DE DOS LINEAS, y por eso es la unica que no
   se centra. Centrada, su bloque de 40px quedaba a 19px del techo mientras el
   nombre del paciente caia a 28,1: 9px de desnivel entre la primera y la
   segunda columna de CADA fila. Anclandola arriba con medio renglon de
   relleno, su primera linea cae exactamente donde caeria si fuera hija unica,
   y el medico cuelga debajo sin mover a nadie. Las siete columnas comparten
   una linea base y el codigo sigue a la misma altura en las 24 filas. */
/* El relleno de abajo se va a cero A PROPOSITO: en una celda de tabla el
   `height` es un minimo, asi que el relleno inferior NO se come el sobrante,
   se le suma. Con los 8px de rigor la fila se iba a 67,5px y arrastraba con
   ella el centro de las otras seis columnas, que es justo el desnivel que
   esta regla venia a quitar. Sin el, mandan los 60px y el aire de abajo lo
   pone el sobrante del bloque. */
/* `td.` y no `.bj-c-caso` a secas: la clase la lleva TAMBIEN la celda de
   cabecera, y con el desplome puesto el rotulo "Caso" bajaba 19px y quedaba
   desalineado de "Paciente" y "Motivo". El desplome es de las filas. */
.bj-tabla td.bj-c-caso {
    vertical-align: top;
    padding-top: calc((var(--bj-fila-h) - var(--bj-linea)) / 2);
    padding-bottom: 0;
}
.bj-tabla .bj-c-caso     { width: 164px; }
.bj-tabla .bj-c-paciente { width: 196px; }
.bj-tabla .bj-c-motivo   { width: auto; }
.bj-tabla .bj-c-estado   { width: 190px; }
/* El `max()` es el piso de la CABECERA, no del dato: con reparto fijo, un
   rotulo mas ancho que su columna no la ensancha, se desborda. Si se apagan
   los dos carriles opcionales la suma baja a 72px y "Señales" mide 76 con su
   aire. */
.bj-tabla .bj-c-senales  { width: max(76px, calc(var(--bj-r1) + var(--bj-r2) + var(--bj-r3)
                                      + 2 * var(--bj-r-hueco) + 2 * var(--bj-fila-x))); }
/* Carriles fijos SI, carriles muertos NO. Los tres carriles existen para que
   el numero de una fila caiga bajo el de la de arriba; pero si ninguna de las
   24 filas usa uno, queda un hueco permanente en medio de la columna, que es
   el mismo defecto al reves. La vista mira los casos ya cargados y apaga el
   carril que nadie ocupa: sigue siendo fijo PARA TODA LA TABLA -que es lo que
   hace falta- y el ancho sobrante se lo lleva el motivo. */
.bj-tabla.bj-sin-espera  { --bj-r2: 0px; --bj-r-hueco: 5px; }
.bj-tabla.bj-sin-bandera { --bj-r3: 0px; }
.bj-tabla.bj-sin-espera .bj-senales,
.bj-tabla.bj-sin-bandera .bj-senales { column-gap: var(--bj-r-hueco); }
.bj-tabla .bj-c-espera   { width: 78px; text-align: right; }
.bj-tabla .bj-c-accion   { width: 84px; text-align: right; padding-left: var(--kctp-e2); }

/* --- Contenido de las celdas --------------------------------------------
   Escalera de tinta de tres escalones dentro de la fila: codigo y paciente en
   tinta primaria (lo que se busca), motivo y meta en tinta de apoyo. */
.bj-codigo {
    display: block;
    line-height: 1.45;
    font-weight: var(--kctp-peso-medio);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.006em;
    color: var(--kctp-tinta);
}
/* Alto FIJO de una linea, con medico o sin el. El span se imprime siempre, y
   cuando viene vacio esta caja de 16px sigue ocupando su sitio: por eso el
   codigo cae a la misma altura en las 24 filas y no solo en las cinco que
   tienen medico asignado. Es la mitad barata del alto constante de fila. */
.bj-medico {
    display: block;
    height: 1.3em;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--kctp-t-micro);       /* 12px */
    line-height: 1.3;
    color: var(--kctp-tenue);
}
/* UNA linea y ni una mas. Antes eran dos, y ademas se recortaba: las filas con
   motivo corto median 59px y las de texto real 70,5 (un salto del 19,5% que se
   repetia a lo largo de toda la tabla), asi que la vista se leia como una pila
   de parrafos en vez de una rejilla de datos. El texto entero sigue en el
   `title` del span, que es donde tiene que estar: un motivo clinico se lee en
   la ficha, no de reojo en la bandeja. */
.bj-motivo {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--kctp-tenue);
}

/* --- Señales -------------------------------------------------------------
   Antes eran tres iconos sueltos con font-size en linea y tres colores: una
   fila con foto y otra con bandera no alineaban. Ahora son ranuras de la
   misma geometria, con cifras tabulares, y solo la critica lleva relleno. */
.bj-senales {
    display: grid;
    grid-template-columns: var(--bj-r1) var(--bj-r2) var(--bj-r3);
    align-items: center;
    gap: var(--bj-r-hueco);
}
/* Cada senal tiene su carril y no lo abandona. Una fila sin bandera deja la
   primera ranura VACIA en vez de correr las otras dos hacia la izquierda, que
   es lo que hacia el flex: el contador de fotos se movia 53,7px entre una fila
   con bandera y la de al lado sin ella. */
/* El `grid-row: 1` no es de adorno y costo una captura: en el HTML la alerta
   va PRIMERO (es lo que debe oir un lector de pantalla) pero ocupa el carril
   3, y el colocador automatico no retrocede. Sin fijar la fila, ponia la
   alerta en la fila 1 y empujaba el contador de fotos a una SEGUNDA fila
   debajo. Con la fila fija, el orden del HTML y el de los carriles pueden
   discrepar sin consecuencias. */
.bj-senal-foto   { grid-column: 1; grid-row: 1; }
.bj-senal-espera { grid-column: 2; grid-row: 1; }
.bj-senal-roja,
.bj-senal-ambar  { grid-column: 3; grid-row: 1; }

/* Y dentro de la ranura, otra rejilla de dos carriles: el icono ocupa 13px
   fijos aunque sea mas angosto, asi que la cifra arranca en la misma x tenga
   uno o dos digitos. Con `tabular-nums` encima, la columna de numeros se lee
   como una sola linea vertical. */
.bj-senal {
    display: inline-grid;
    grid-template-columns: 13px auto;
    align-items: center;
    justify-self: start;
    gap: 5px;
    font-size: var(--kctp-t-micro);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--kctp-tenue);
}
.bj-senal i { font-size: 13px; line-height: 1; text-align: center; }
.bj-senal-roja {
    padding: 4px 8px;
    border-radius: var(--kctp-r-pastilla);
    background: var(--kctp-alerta-sw);
    color: var(--kctp-alerta);
    font-weight: var(--kctp-peso-medio);
}
.bj-senal-ambar { color: var(--kctp-aviso); font-weight: var(--kctp-peso-medio); }
/* Un cero es informacion, pero es la que menos pesa: se atenua, no se borra. */
.bj-senal-cero { color: var(--kctp-tenue-2); }

/* --- Espera --------------------------------------------------------------
   Cifras tabulares y a la derecha: asi la columna se lee como una escalera y
   el caso viejo salta sin tener que leer el numero.

   El caso pasado de 48h se marca con PESO Y TINTA, no con rojo. La regla de
   negocio no cambia; cambia quien la dibuja. En rojo, con veinte de veintitres
   casos por encima del umbral, la columna entera se encendia y competia con la
   bandera critica, que es la senal que de verdad manda. Queda un reparto
   limpio: el rojo es alerta clinica, el peso es antiguedad. Y sigue sin
   depender solo del color, que es lo que pide la WCAG. */
.bj-tabla .bj-c-espera {
    font-size: var(--kctp-t-meta);
    font-variant-numeric: tabular-nums;
    color: var(--kctp-tenue);
}
.bj-tabla .bj-c-espera.bj-tarde {
    color: var(--kctp-tinta);
    font-weight: var(--kctp-peso-medio);
}

/* --- Accion de fila ------------------------------------------------------
   Veintitres botones con borde son veintitres cajas compitiendo con los
   datos. En reposo el control es un enlace tranquilo; al posarse sobre la
   fila se convierte en boton. Es lo que hace Stripe en sus tablas. */
.bj-abrir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: var(--kctp-r-campo);
    background: transparent;
    color: var(--kctp-acento);
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--kctp-mov-hover),
                background var(--kctp-mov-hover),
                color var(--kctp-mov-hover);
}
.bj-tabla tbody tr:hover .bj-abrir {
    border-color: var(--kctp-borde);
    background: var(--kctp-blanco);
}
.bj-abrir:hover {
    border-color: var(--kctp-borde-f);
    background: var(--kctp-blanco);
    color: var(--kctp-acento-os);
}

/* --- Fila con bandera critica -------------------------------------------
   Antes era un borde izquierdo de 4px en la fila. Con tres casos criticos
   seguidos se soldaba en un riel continuo pegado al filo del panel y dejaba
   de leerse por fila. Ahora es una marca corta, con aire arriba y abajo, que
   empieza y termina DENTRO de cada fila. */
.bj-tabla .bj-fila-roja td:first-child { position: relative; }
.bj-tabla .bj-fila-roja td:first-child::before {
    content: "";
    position: absolute;
    left: 0; top: 7px; bottom: 7px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--kctp-alerta);
}

/* --- Pie del panel -------------------------------------------------------
   La tabla terminaba en seco: la fila 24 pegada al borde inferior de la
   tarjeta, sin pie y sin recuento, y la tarjeta parecia cortada a mitad como
   si faltara una pagina. El pie dice las dos cosas que un pie de tabla tiene
   que decir -cuantas se ven de cuantas hay y que no hay mas- y devuelve
   arriba, que en una tabla de 1.500px de alto no es adorno.

   Mismo lenguaje que la barra de arriba: linea de pelo, 12px de aire y el
   fondo apenas crema que ancla el borde del panel por dentro. */
.bj-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kctp-e2) var(--kctp-e4);
    padding: 12px var(--bj-fila-x);
    border-top: 1px solid var(--kctp-borde);
    background: var(--kctp-crema);
}
.bj-pie-txt {
    margin: 0;
    max-width: none;
    font-size: var(--kctp-t-meta);
    line-height: 1.4;
    letter-spacing: -.004em;
    color: var(--kctp-tenue);
}
.bj-arriba {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    color: var(--kctp-acento);
    text-decoration: none;
    transition: color var(--kctp-mov-hover);
}
.bj-arriba i { font-size: 17px; line-height: 1; }
.bj-arriba:hover { color: var(--kctp-acento-os); text-decoration: underline; }

/* ==========================================================================
   4. Vacio
   ========================================================================== */

.bj-vacio {
    text-align: center;
    padding: var(--kctp-e8) var(--kctp-e5);
    max-width: 24rem;
    margin: 0 auto;
}
.bj-vacio i {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: var(--kctp-e4);
    color: var(--kctp-tenue-2);
}
.bj-vacio-titulo {
    margin: 0 0 6px;
    font-size: var(--kctp-t-densa);
    font-weight: var(--kctp-peso-medio);
    color: var(--kctp-tinta);
}
.bj-vacio-pie {
    margin: 0;
    font-size: var(--kctp-t-densa);
    line-height: var(--kctp-lh-cuerpo);
    color: var(--kctp-tenue);
}
/* Boton secundario del sistema: fondo transparente, linea de pelo marcada y
   texto vino. La geometria es la del boton solido de la busqueda (misma
   altura, mismo radio) porque son la misma familia de control. */
.bj-vacio-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: var(--kctp-e5);
    padding: 6px 18px;
    border: 1px solid var(--kctp-borde-c);
    border-radius: var(--kctp-r-campo);
    background: var(--kctp-blanco);
    color: var(--kctp-acento);
    font-size: var(--kctp-t-meta);
    font-weight: var(--kctp-peso-medio);
    letter-spacing: -.004em;
    text-decoration: none;
    transition: border-color var(--kctp-mov-hover),
                background var(--kctp-mov-hover),
                color var(--kctp-mov-hover);
}
.bj-vacio-accion:hover {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
    color: var(--kctp-acento-os);
}

/* ==========================================================================
   4.5 Portatil angosto (901-1400px)

   Aqui la tabla todavia es tabla, pero el area util baja a 700-970px y las
   siete columnas piden 1040. Antes de mandarla a desplazarse a lo ancho se le
   quita grasa: 12px de aire lateral en vez de 16 y minimos mas cortos. El
   techo son 1400 y no 1200 porque el portatil comun es de 1280 y 1366: es
   justo ahi donde la tabla pasaba de caber a no caber por unos pocos pixeles.
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1400px) {
    .bj { --bj-fila-x: 12px; }
    /* Con 12px de aire las cuentas cambian: el piso de "estado" es la
       pastilla (156+24=180) y el de "espera" sigue siendo su cabecera
       (43+24=67). Suman 786 y dejan ~184px de motivo a 1280. */
    /* El codigo (108) manda aqui, no el nombre del medico (129): a este ancho
       la segunda linea se recorta con puntos suspensivos y conserva su title,
       que es un precio mucho menor que dejar el motivo en 164px. */
    .bj { --bj-r2: 28px; --bj-r3: 28px; }
    .bj-tabla .bj-c-caso     { width: 134px; }
    .bj-tabla .bj-c-paciente { width: 180px; }
    .bj-tabla .bj-c-estado   { width: 182px; }
    .bj-tabla .bj-c-espera   { width: 70px; }
    .bj-tabla .bj-c-accion   { width: 80px; }
    /* Debajo de este piso el motivo dejaria de decir nada util, asi que la
       tabla prefiere desplazarse a lo ancho dentro de .bj-scroll antes que
       recortar la unica columna que explica de que va el caso. Aplastar
       columnas hasta el absurdo es peor que un desplazamiento honesto. */
    .bj-tabla { min-width: 950px; }

    /* La barra tiene que caber en UNA fila tambien aqui: el campo cede ancho
       antes que partirse en dos pisos, y el resumen aprieta sus separadores. */
    .bj-buscar { flex: 0 1 16.5rem; width: 16.5rem; }
    .bj-resumen li { padding-inline: 10px; }
}

/* ==========================================================================
   4.7 Escritorio ancho (1401px y arriba): la cabecera se queda

   Veinticuatro filas miden 1.481px en una pantalla de 900: al llegar al caso
   quince ya no se sabe cual columna es "Espera" y cual "Señales", y hay que
   volver arriba a mirar. La cabecera pegada al borde superior es lo que hace
   cualquier tabla de producto y aqui cuesta cuatro reglas.

   POR QUE SOLO A PARTIR DE 1401. `position: sticky` deja de funcionar en
   cuanto un ancestro es contenedor con desplazamiento, y .bj-scroll lo es:
   `overflow-x: auto` obliga al eje vertical a computar `auto` tambien, asi que
   la cabecera se pegaria al borde de una caja que no se desplaza y no se
   moveria nunca. Por encima de 1400 la tabla SIEMPRE cabe (los seis anchos
   fijos suman 864 y el area util pasa de 1.100), asi que ahi el envoltorio no
   necesita desplazarse y se le puede devolver el desbordamiento visible.
   El panel pasa a `clip` en vez de `hidden`: recorta las esquinas igual pero
   no crea contenedor con desplazamiento, que es lo que romperia el pegado. */
@media (min-width: 1401px) {
    .bj-panel  { overflow: clip; }
    .bj-scroll { overflow: visible; animation: none; }
    .bj-tabla thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        /* Con `border-collapse: collapse` el navegador pinta el borde de la
           celda en la rejilla de la tabla y NO lo arrastra con la celda
           pegada: al desplazarse, la cabecera flotaba sin su linea de abajo.
           La sombra interior si viaja con el elemento. */
        border-bottom: 0;
        box-shadow: inset 0 -1px 0 var(--kctp-borde);
    }
}

/* ==========================================================================
   5. Telefono y tableta angosta

   Por debajo de 900px la tabla de siete columnas deja de ser tabla. No es un
   capricho: a 390px habia que desplazarse a lo ancho para alcanzar el unico
   boton de la pantalla, y el motivo se rompia en diez lineas de dos palabras.

   La tarjeta ordena la fila por lo que un medico busca primero: nombre, hace
   cuanto, de que caso se trata, en que estado esta y que dice.
   ========================================================================== */

@media (max-width: 900px) {

    /* Aire mas corto entre el titulo y los controles: en telefono cada salto
       de 32px es un caso menos a la vista. Entre bloques sigue habiendo mas
       que dentro de un bloque, que es la regla; solo baja un peldano. */
    .bj-cabeza  { margin-bottom: var(--kctp-e5); }
    .bj-filtros { margin-bottom: var(--kctp-e3); }

    /* Los filtros pasan a ser una cinta que se desliza. Ocho pastillas
       apiladas comian 500px de alto antes de mostrar un solo caso.

       LO QUE FALTABA: la cinta terminaba a 32px del filo, dentro del aire de
       la pagina, asi que la ultima pastilla se cortaba a media palabra ("En
       revisi") y el corte parecia un error de maquetacion, no un "sigue".
       Ahora SANGRA hasta el borde fisico de la pantalla. Que una fila de
       pastillas se salga de la pantalla lo entiende cualquiera; que se corte
       en seco a 32px del borde, nadie. El relleno devuelve la primera
       pastilla a la vertical del titulo, asi que la columna no se mueve. */
    .bj-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--bj-sangria) * -1);
        padding-inline: var(--bj-sangria);
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        /* Sin esto el ajuste automatico ignora el relleno y arranca la cinta
           ya desplazada 32px: "Todas" quedaba pegada al filo de la pantalla y
           el titulo 32px mas adentro, o sea dos margenes izquierdos en la
           misma pantalla. El ajuste tiene que respetar el mismo aire. */
        scroll-padding-inline: var(--bj-sangria);
        /* Y encima el velo. Van los tres descriptores (image/size/repeat)
           porque la forma corta deja el tamano en `auto` y en un contenedor
           con desplazamiento eso no recorta nada. */
        /* 72px y no 44: con el velo corto la ultima pastilla se cortaba casi
           en seco contra el filo y la cinta parecia desbordada, no
           deslizable. A 72 el degradado empieza ANTES del borde y se ve que
           el texto se apaga, que es la pista de que sigue habiendo mas. */
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 72px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 72px), transparent 100%);
        -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    }
    .bj-filtros::-webkit-scrollbar { display: none; }
    .bj-pastilla { flex: 0 0 auto; min-height: 38px; scroll-snap-align: start; }

    /* El velo fijo miente en los extremos: al llegar al final sigue borrando
       la ultima pastilla, como si quedara algo mas. Donde el navegador sabe
       animar con el desplazamiento, el velo pasa al lado que de verdad tiene
       contenido escondido: derecha al principio, ambos en medio, izquierda al
       final. Es el detalle que separa una cinta hecha de una improvisada, y
       donde no hay soporte queda el velo fijo de arriba, que ya sirve. */
    @supports (animation-timeline: scroll(self inline)) {
        .bj-filtros {
            animation: bj-velo linear both;
            animation-timeline: scroll(self inline);
        }
    }

    /* EL PRIMER CASO TIENE QUE VERSE. Medido en la vuelta anterior: titulo,
       cinta de pastillas, buscador y filtro de banderas se comian 413 de los
       844px de la primera pantalla -la mitad justa- antes del primer caso.
       Tres cambios lo bajan a poco mas de un tercio:

         a. buscador y filtro comparten fila en vez de apilarse (-48px);
         b. el filtro se queda en la bandera, con el rotulo entero en el arbol
            de accesibilidad (title + el span recortado): con las palabras
            puestas no caben los dos en 326px;
         c. el resumen de la cola no se lee antes que la lista, asi que baja
            al final con `order`. Para que pueda salirse de la barra, la barra
            se vuelve `display: contents` y sus dos hijos pasan a ser hijos
            directos del panel, que aqui es una columna flexible. */
    .bj-panel  { display: flex; flex-direction: column; }
    .bj-barra  { display: contents; }
    .bj-controles {
        order: 1;
        display: flex;
        align-items: center;
        gap: var(--kctp-e2);
        margin-bottom: var(--kctp-e4);
    }
    .bj-scroll  { order: 2; }
    .bj-vacio   { order: 2; }
    .bj-resumen { order: 3; }
    .bj-pie     { order: 4; }

    .bj-buscar { flex: 1 1 auto; width: auto; }
    /* 42 + los 2px del borde de la caja = 44, el mismo alto exacto que el
       boton de la bandera de al lado. */
    .bj-buscar input[type="text"] {
        min-height: 42px;
        padding-left: 12px;              /* la lupa se mudo al boton */
        font-size: var(--kctp-t-densa);
    }
    .bj-buscar-icono { display: none; }
    .bj-buscar-lupa  { display: inline; font-size: 16px; line-height: 1; }
    .bj-buscar button { padding: 0; width: 46px; }
    .bj-buscar button span {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    /* Cuadrado de 44px: area tactil de sobra y la bandera sola dice de que va
       el filtro, sobre todo encendida, que es cuando se pinta en rojo. El
       rotulo no se borra, se recorta: sigue en el title y en el lector.

       El icono crece de 12 a 15px porque aqui es lo unico que queda: a 12
       flotaba perdido en un cuadrado de 46. */
    .bj-bandera {
        flex: 0 0 auto;
        width: 46px;
        min-height: 44px;
        padding: 0;
        gap: 0;
    }
    .bj-bandera i { font-size: 15px; }
    .bj-bandera-txt {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Debajo de la pila de tarjetas, el resumen y el pie cierran la lista con
       una sola linea de pelo entre los dos. */
    /* Los separadores verticales se van: al envolverse, la linea del segundo
       renglon arrancaba con una raya suelta colgando del margen. Aqui separa
       el aire, que no se rompe al pasar de linea. */
    .bj-resumen {
        margin-top: var(--kctp-e4);
        padding-top: var(--kctp-e3);
        border-top: 1px solid var(--kctp-borde);
        white-space: normal;
        gap: 4px 18px;
    }
    .bj-resumen li { border-left: 0; padding: 0; }
    .bj-pie {
        padding: var(--kctp-e2) 0 0;
        border-top: 0;
        background: transparent;
    }

    /* --- Tableta (561-900px): vuelven las palabras -----------------------
       Los dos recortes de arriba -la lupa en vez de "Buscar" y la bandera sin
       rotulo- son un peaje del telefono, no un gusto. Aqui ya caben los dos
       controles con sus palabras (209 del filtro + 240 minimos del campo + el
       aire de pagina piden 521px) y un boton con su nombre siempre se entiende
       mejor que un icono. De paso el campo deja de estirarse hasta 700px, que
       es un ancho de buscador que nadie usa. */
    @media (min-width: 561px) {
        /* 25.5rem y no 23.25 como en escritorio: aqui el campo escribe a 15px
           en vez de 13 (dedo, no raton) y el marcador de posicion crece con
           el. Con el ancho de escritorio se cortaba en "codigo o mo...". */
        .bj-buscar { flex: 0 1 25.5rem; }
        .bj-buscar input[type="text"] { padding-left: 32px; }
        .bj-buscar-icono { display: block; }
        .bj-buscar-lupa  { display: none; }
        .bj-buscar button { width: auto; padding: 0 16px; }
        .bj-bandera { width: auto; padding: 5px 14px; gap: 7px; }
        .bj-bandera i { font-size: 12px; }
        .bj-buscar button span,
        .bj-bandera-txt {
            position: static;
            width: auto; height: auto;
            clip-path: none;
        }
    }

    /* Las tarjetas traen su propio borde: el panel se quita para no encuadrar
       un marco dentro de otro. */
    .bj-panel { border: 0; background: transparent; border-radius: 0; overflow: visible; }
    .bj-scroll { overflow: visible; }
    .bj-tabla, .bj-tabla tbody { display: block; width: 100%; }
    .bj-tabla thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    /* EL RESET QUE HACE FALTA: los anchos de columna de arriba (width:1%,
       min-width, nowrap) siguen aplicando a los td cuando dejan de ser celdas,
       y en una rejilla los aplastan. Sin esto, "Paul G" cae en dos lineas y el
       boton se sale de la tarjeta. */
    .bj-tabla .bj-c-caso,
    .bj-tabla .bj-c-paciente,
    .bj-tabla .bj-c-motivo,
    .bj-tabla .bj-c-estado,
    .bj-tabla .bj-c-senales,
    .bj-tabla .bj-c-espera,
    .bj-tabla .bj-c-accion {
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;                /* el alto fijo de fila es cosa de la tabla */
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        text-align: left;
    }

    /* Cuatro filas, no cinco, y el ritmo NO es parejo: nombre y codigo son un
       solo bloque (2px), el motivo se separa mas (10px) y el pie de acciones
       mas todavia (12px). Un row-gap unico en todas las juntas es la version
       chica de repartir 40px por igual. */
    .bj-tabla tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 2px;
        column-gap: var(--kctp-e3);
        padding: 12px 14px;
        margin-bottom: 9px;
        border: 1px solid var(--kctp-borde);
        border-radius: var(--kctp-r-panel);
        background: var(--kctp-blanco);
    }
    .bj-tabla tbody tr:last-child { margin-bottom: 0; }
    .bj-tabla tbody tr:hover td { background: transparent; }

    .bj-tabla td {
        display: block;
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
    }

    /* El nombre es el titular de la tarjeta. */
    .bj-tabla .bj-c-paciente {
        grid-column: 1; grid-row: 1;
        font-size: var(--kctp-t-cuerpo);      /* 17px */
        font-weight: var(--kctp-peso-medio);
        line-height: 1.25;
        letter-spacing: -.012em;
        color: var(--kctp-tinto);
    }
    .bj-tabla .bj-c-espera {
        grid-column: 2; grid-row: 1;
        justify-self: end;
        align-self: start;
        padding-top: 2px;
    }

    /* Codigo y medico bajan a una linea de meta, separados por un punto. */
    /* `td.` para empatarle la especificidad al desplome de la tabla: sin el
       punto, esta regla pierde por 0,2,0 contra 0,2,1 y las tarjetas se
       llevaban 21px de relleno fantasma heredado de escritorio. */
    .bj-tabla td.bj-c-caso {
        grid-column: 1 / -1; grid-row: 2;
        padding-top: 0;              /* el desplome es cosa de la tabla */
        vertical-align: baseline;
        display: flex;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        font-size: var(--kctp-t-meta);
        white-space: nowrap;
        overflow: hidden;
    }
    .bj-codigo { display: inline; flex: 0 0 auto; color: var(--kctp-tenue); }
    .bj-medico {
        display: inline-block;
        height: auto;                /* aqui no hace falta reservar la linea */
        margin-top: 0;
        min-width: 0;
        font-size: var(--kctp-t-meta);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bj-medico::before { content: "· "; color: var(--kctp-tenue-2); }
    /* En la tarjeta el codigo y el medico van en la MISMA linea, asi que el
       span vacio que en la tabla reserva el renglon aqui solo dejaria un punto
       suelto colgando detras del codigo. */
    .bj-medico:empty { display: none; }

    /* La pastilla ocupa una fila entera y arranca a la izquierda. Compartirla
       con el nombre o con el codigo se probo y no cabe: "Derivada a
       presencial" mide 190 de los 302px utiles, y la columna que la aloja
       obliga a la otra a partir el nombre del paciente en dos lineas. Un
       nombre partido cuesta mas que una fila de mas. */
    .bj-tabla .bj-c-estado  {
        grid-column: 1 / -1; grid-row: 3;
        justify-self: start;
        margin-top: 8px;
    }
    .bj-tabla .bj-c-motivo  {
        grid-column: 1 / -1; grid-row: 4;
        margin-top: 8px;
        font-size: var(--kctp-t-meta);
    }
    /* Una linea, igual que en la tabla, y por el mismo motivo: asi todas las
       tarjetas de la pila miden lo mismo y la lista se desliza con pulso
       parejo (antes alternaban 184,9 y 203,8px segun lo que hubiera escrito
       el paciente). Se probo con una caja de dos lineas reservadas y se veia
       peor: en "aaa" o "adasdad" el renglon de repuesto queda vacio dentro de
       la tarjeta y parece un error de maquetacion. Y no se pierde nada: la
       tarjeta mide 302px de ancho, asi que en una linea a 13px caben unos 45
       caracteres, MAS de los que muestra la tabla en escritorio. */
    .bj-tabla .bj-c-motivo,
    .bj-tabla .bj-c-motivo .bj-motivo {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .bj-tabla .bj-c-senales { grid-column: 1; grid-row: 5; margin-top: 10px; }
    .bj-tabla .bj-c-accion  { grid-column: 2; grid-row: 5; justify-self: end; margin-top: 10px; }

    /* Las ranuras fijas son una necesidad de la TABLA, donde el numero de una
       fila tiene que caer bajo el de la de arriba. En la tarjeta no hay nada
       encima con que alinearse y tres carriles reservados solo dejarian huecos
       raros, asi que las senales vuelven a apretarse en fila. */
    .bj-senales {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kctp-e3);
    }
    .bj-senal-roja,
    .bj-senal-ambar,
    .bj-senal-espera,
    .bj-senal-foto { grid-column: auto; }

    /* En una pantalla tactil no hay "posarse encima": el boton se pinta
       siempre, y con area de 40px. */
    .bj-abrir {
        min-height: 40px;
        padding: 8px 18px;
        border-color: var(--kctp-borde);
        background: var(--kctp-blanco);
    }

    /* La marca de bandera critica pasa de la celda a la tarjeta entera. */
    .bj-tabla .bj-fila-roja {
        border-color: var(--kctp-alerta-bd);
        box-shadow: inset 3px 0 0 var(--kctp-alerta);
    }
    .bj-tabla .bj-fila-roja td:first-child::before { display: none; }
}

/* ==========================================================================
   6. Movimiento y accesibilidad
   ========================================================================== */

/* El velo de la cinta de filtros. Los cuatro topes se declaran en los tres
   fotogramas aunque sobren, porque el navegador solo sabe interpolar dos
   degradados si tienen la misma forma: con tres topes en un lado y cuatro en
   el otro, el velo saltaria de golpe en vez de correrse. */
@keyframes bj-velo {
    0% {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 0, #000 calc(100% - 72px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 0, #000 calc(100% - 72px), transparent 100%);
    }
    50% {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
    }
    100% {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 100%, #000 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 100%, #000 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bj-pastilla, .bj-bandera, .bj-abrir, .bj-buscar,
    .bj-tabla tbody tr, .bj-buscar button,
    .bj-arriba, .bj-vacio-accion {
        transition: none;
    }
    /* El velo NO se apaga aqui a proposito: no es decoracion en movimiento
       sino la unica pista de que la cinta sigue, y se mueve solo cuando el
       usuario la desliza. Quitarlo dejaria la pantalla peor, que es lo
       contrario de lo que pide la preferencia. */
}


/* --------------------------------------------------------------------------
   MOVIL: el desborde de 32px  (02-sep-2026)
   --------------------------------------------------------------------------
   Medido en un telefono de 390px: el contenedor .bj media 422px de contenido
   dentro de 390 de vista, y NO se podia deslizar, asi que 32px de la bandeja
   quedaban fuera de alcance. La fila de filtros si esta bien resuelta -- esa
   se desliza a proposito.
   min-width:0 es la parte que de verdad arregla: sin el, un hijo de grid o
   flex se niega a encogerse por debajo de su contenido y empuja al padre.     */
@media (max-width: 900px) {
    .bj {
        max-width: 100%;
        overflow-x: clip;
    }
    .bj > *,
    .bj-tabla,
    .bj-tabla tr,
    .bj-tabla td {
        min-width: 0;
        max-width: 100%;
    }
    /* El motivo se recorta con puntos suspensivos en vez de empujar la fila. */
    .bj-motivo {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}