/* Fold · avi-17 · LA BANDEJA DE «LO QUE NECESITA TU ATENCIÓN» (bandeja.js, PC-C, 18/10/2026). Va dentro de la hoja de siempre
   (overlay, hoja-overlay: estilos.css), con los colores del tema (--texto, --texto-2, --acento-texto) en los dos modos. Una lista
   sin tarjetas, separada por costuras finas, sin barra de desplazamiento propia (se desplaza la hoja, como todas) y sin versalitas.
   Ni rojo ni candados: el orden ya dice qué va antes y el texto dice qué es (el color nunca es la única señal). Clases con el
   prefijo bj-; nada de lo de las demás pantallas se retoca. */

.bj-hoja .bj-titulo { margin: 0; }
/* El total y el aviso de fallo van FUERA del cuerpo de la hoja (bandeja.js: entre la cabecera y .cuerpo-overlay), así que no heredan su
   margen y salían pegados al borde: llevan el mismo margen lateral que el cuerpo (20px, estilos.css › .cuerpo-overlay). (e35, 20/10/2026,
   H10 del recorrido de cliente de e29; lo mira probar-bandeja-pantalla › P16.) */
.bj-total { margin: 0; padding: 16px 20px 0; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.bj-total:focus { outline: none; }
.bj-error { margin: 0; padding: 10px 20px 0; color: var(--ambar-texto); line-height: 1.45; overflow-wrap: anywhere; }
.bj-error:empty { display: none; }
/* (19/10/2026) Lo que no se ha podido mirar: una línea discreta (pequeña y en el gris de los textos de apoyo), sin color de alarma. */
.bj-no-mirado { margin: 0 0 var(--e-3, 12px); font-size: .84rem; line-height: 1.45; color: var(--texto-2); overflow-wrap: anywhere; }

.bj-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--costura); }
.bj-el { padding: var(--e-3, 12px) 0; border-bottom: 1px solid var(--costura); min-width: 0; }
.bj-el:focus { outline: none; }
.bj-el:focus-visible { box-shadow: var(--anillo-foco); border-radius: var(--r-control, 8px); }
/* (decisión de David, 03/11/2026) El aviso que agrupa lo que vence hoy: su lista, dentro y un poco metida. */
.bj-hoy-vencen { margin: 6px 0 0 16px; }
.bj-hoy-vencen > .bj-el:last-child { border-bottom: 0; padding-bottom: 0; }

.bj-que { margin: 0 0 2px; font-weight: 650; line-height: 1.35; color: var(--texto); overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.bj-porque { margin: 0 0 2px; font-size: .9rem; line-height: 1.45; color: var(--texto-2); overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.bj-quien { margin: 0 0 2px; font-size: .84rem; line-height: 1.45; color: var(--texto-2); overflow-wrap: anywhere; }
.bj-estado { font-weight: 600; color: var(--texto); }
.bj-fuente { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; font-size: .8rem; line-height: 1.45; color: var(--texto-2); font-feature-settings: 'tnum' 1; }
.bj-fuente-texto { min-width: 0; overflow-wrap: anywhere; }
.bj-gestos { margin: 4px 0 0; display: flex; flex-wrap: wrap; column-gap: var(--e-2, 8px); }

/* Los botones de texto de la interfaz en calma (calma-texto), con el cobalto que se lee en los dos temas. */
.bj-accion, .bj-hecho, .bj-posponer, .bj-anterior, .bj-siguiente { min-height: 36px; padding: 0 6px; font-size: .84rem; color: var(--acento-texto); white-space: nowrap; }
.bj-accion:hover, .bj-hecho:hover, .bj-posponer:hover, .bj-anterior:hover, .bj-siguiente:hover { text-decoration: underline; }
.bj-accion:focus-visible, .bj-hecho:focus-visible, .bj-posponer:focus-visible, .bj-anterior:focus-visible, .bj-siguiente:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }
.bj-hecho:disabled, .bj-posponer:disabled, .bj-anterior:disabled, .bj-siguiente:disabled { color: var(--texto-3); text-decoration: none; cursor: default; }
.bj-gestos .bj-hecho { margin-left: -6px; }
@media (pointer: coarse) { .bj-accion, .bj-hecho, .bj-posponer, .bj-anterior, .bj-siguiente { min-height: 44px; } }

.bj-paginas { margin: var(--e-3, 12px) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2, 8px); }
.bj-rango { font-size: .84rem; color: var(--texto-2); font-feature-settings: 'tnum' 1; }

/* (b1, 02/11/2026) Los avisos que sirven: lo quitado y el resumen de la lista aparte, en el gris de apoyo; la lista aparte, plegada, con
   el título de cada grupo pequeño y sin versalitas. */
.bj-fuera, .bj-aparte-linea { margin: var(--e-3, 12px) 0 0; font-size: .84rem; line-height: 1.45; color: var(--texto-2); overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.bj-ver-aparte { min-height: 36px; margin: 4px 0 0 -6px; padding: 0 6px; font-size: .84rem; color: var(--acento-texto); }
.bj-ver-aparte:hover { text-decoration: underline; }
.bj-ver-aparte:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 1px; }
.bj-grupo { margin: var(--e-3, 12px) 0 4px; font-size: .9rem; font-weight: 650; color: var(--texto); }
@media (pointer: coarse) { .bj-ver-aparte { min-height: 44px; } }

/* El número del botón del menú «Más». */
.bj-menu-cuenta { margin-left: 6px; padding: 0 6px; border-radius: var(--r-pastilla, 999px); background: var(--cobalto-tenue); color: var(--acento-texto); font-size: .78rem; font-feature-settings: 'tnum' 1; }

/* En estrecho, el texto de la fuente va en su línea y el botón debajo, a la izquierda (se alcanza con el pulgar). */
@media (max-width: 640px) {
  .bj-fuente { flex-direction: column; align-items: flex-start; }
  .bj-accion { margin-left: -6px; }
}