/*
.z-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}*/

/* Variables del sistema de estilos del builder ("V35"). Las reglas scopeadas de los formularios
   (.scope-form-XX .z-combobox/.z-datebox/.z-bandbox) usan var(--bpm-border) y var(--bpm-bg-input)
   para el borde y fondo, pero su DEFINICIÓN (bloque V35 en ModeloBuild) quedó comentada → la
   variable quedaba sin valor y el borde salía transparente (combos "sin borde", #13xxx). Se definen
   acá, respetando el tema (--bs-*) con fallback concreto. */
:root {
    --bpm-primary: var(--bs-primary, #c05f36);
    --bpm-secondary: var(--bs-secondary, #64748b);
    --bpm-bg-input: var(--bs-gray-100, #f8fafc);
    --bpm-border: var(--bs-border-color, #dee2e6);
    /* Texto (contraste WCAG AA). Un tema de cliente puede redefinirlos en su colores.css. */
    --sg-texto: #1e293b;
    --sg-texto-secundario: #475569;
}

.item {
    margin: 5px;
}
.boton {
    padding: 3px 5px;
    font-size: 12px;
    margin: 8px;
    box-shadow: 1px 2px 4px #555;
    border-radius: 6px;
}

body{
    padding:0;
}
.z-window {
    padding:0;
}
.z-window-content {
    padding:0;
}
.z-combobox-readonly > input {
    background: #00000007;
}
.z-combobox-input {
    border: none;
    background: #00000007;
}
.z-combobox-readonly .z-combobox-button {
    background: transparent;
}
.z-combobox-button {
    border: none;
    background: transparent;
    height: auto;
}
.z-tabbox {
    border: none;
}
.z-tabpanel {
    border: none;
    padding:0;
}
.z-window-header {
    text-align:center;
    font-size: 18px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: 1px;
}

.icono .z-listcell-content{
    padding:4px 0;
}

.fa-solid{
    vertical-align:middle !important;
}
.sinBordes .z-column{
    border:none;
}
.sinBordes .z-listheader{
    border:none;
}

.linea {
    padding:10px;
}
.label{
    display:inline-block;
    width:60px;
    text-align:right;
}
.recuadro {
    box-shadow: 0px 1px 1px;
    border-radius: 2px 2px 10px 10px;
    display:inline-block;
    vertical-align: top;
    margin: 10px;
    width:365px;
    min-height:220px;
}
.tituloRecuadro {
    background: var(--bs-secondary);
    border-radius: 2px 2px 0 0;
    color:#fff;
}
.tituloRecuadro .z-label {
    line-height: 34px;
}
.filtro-usuario {
    vertical-align:middle;
    margin:5px;
}
.centrado .z-tabs-content {
    justify-content: center;
}
.botonCombo{
    line-height: 36px;
    margin-right: 5px;
}
.bandejas{
    border-radius: 4px 30px 0 0;
    border-top: 0.5px solid var(--bs-secondary);
    margin-right: 4px;
}
.bandejasExternas{
    border-radius: 4px 30px 0 0;
    border-top: 0.5px solid var(--bs-primary);
    margin-right: 4px;
    color: var(--bs-primary);
}
.z-checkbox-switch > .z-checkbox-mold {
  margin: 0 8px;
  zoom: 0.8;
}
.z-caption-content, .z-caption .z-label{
  line-height: 20px;
}
.z-bandbox-popup{
    max-width:500px;
}
.z-bandbox-popup .z-listbox{
    margin-top:8px;
}
.fondoSecundario .z-window-header {
    background: var(--bs-secondary);
    color:#fff;
}

.fondoSecundario .z-window-icon {
    color:#fff;
}

.z-messagebox-window{
    z-index:1900 !important;
}

/* Grilla de observaciones (runtime). Cuando el listbox tiene altura fija y el body
 * supera esa altura, ZK inyecta una celda sintetica al final del header (.z-listbox-bdfaker)
 * para alinear las columnas con el ancho de la barra de scroll. Esa celda no recibe el
 * estilo inline que aplicamos a los Listheader desde Java y queda con el fondo por defecto
 * del tema (que en este caso pinta verde/teal sobre la barra). La forzamos al mismo gris
 * claro de la cabecera para que se integre visualmente. */
html body .obs-runtime-grid .z-listbox-bdfaker,
html body .obs-runtime-grid .z-listbox-header .z-listbox-bdfaker {
    background: #f1f5f9 !important;
    border: 0 !important;
}

/* Observaciones con estado (S7, motor nativo): pastilla + plazo + íconos de acción en la línea
 * de estado de la fila, y la respuesta de la persona indentada debajo de su observación. Mismos
 * cuatro colores que el plazo de la pieza (.pz-plazo-pill) y que los badges de tipo. */
/* Alto automático (sin height fijo en Java): la grilla crece con las filas, las respuestas y el cuadro
 * «Responder»; con muchas filas, tope y scroll interno en el cuerpo. */
html body .obs-runtime-grid .z-listbox-body { max-height: 560px; overflow-y: auto !important; }
html body .obs-runtime-grid .obs-meta {
    display: flex; align-items: center; gap: 8px; margin-top: 6px; white-space: normal;
}
html body .obs-runtime-grid .obs-estado,
html body .obs-modal .obs-estado {
    display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; line-height: 18px;
    font-weight: 600; white-space: nowrap; border: 1px solid #e2e8f0; background: #f8fafc; color: var(--sg-texto-secundario);
}
html body .obs-runtime-grid .obs-estado-abierta, html body .obs-modal .obs-estado-abierta { color: #b45309; background: #fffbeb; border-color: #fde68a; }
html body .obs-runtime-grid .obs-estado-respondida, html body .obs-modal .obs-estado-respondida { color: #185fa5; background: #e6f1fb; border-color: #bfdbfe; }
html body .obs-runtime-grid .obs-estado-vencida, html body .obs-modal .obs-estado-vencida { color: #dc3545; background: #fef2f2; border-color: #fecaca; }
html body .obs-runtime-grid .obs-estado-cerrada, html body .obs-modal .obs-estado-cerrada { color: #0f6e56; background: #e1f5ee; border-color: #a7e3cc; }
html body .obs-runtime-grid .obs-plazo { font-size: 11px; color: var(--sg-texto-secundario); white-space: nowrap; }
html body .obs-runtime-grid .obs-plazo-vencido { color: #dc3545; font-weight: 600; }
html body .obs-runtime-grid .obs-falta { display: block; margin-top: 4px; font-size: 12px; color: #92400e; white-space: pre-wrap; word-break: break-word; }
html body .obs-runtime-grid .obs-acciones { margin-left: auto; display: flex; align-items: center; gap: 2px; }
html body .obs-runtime-grid .obs-accion.z-toolbarbutton { padding: 2px 5px; color: var(--sg-texto-secundario); font-size: 12px; }
html body .obs-runtime-grid .obs-accion.z-toolbarbutton:hover { color: #0f6e56; background: #f1f5f9; }
html body .obs-runtime-grid .obs-fila-respuesta .z-listcell { background: #fbfdff; }
html body .obs-runtime-grid .obs-respuesta {
    margin-left: 18px; padding: 4px 0 4px 10px; border-left: 2px solid #cbd5e1; white-space: normal;
}
html body .obs-runtime-grid .obs-respuesta-cab {
    display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #185fa5;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}
html body .obs-runtime-grid .obs-respuesta-txt { font-size: 13px; color: #1e293b; white-space: pre-wrap; word-break: break-word; }
/* Modales de S7 («Observar de nuevo» e «Historial de la observación»): mismo lenguaje que el diálogo
 * «Antes de pasar a …» (datosPase.zul): texto guía gris, la observación citada en una tarjeta suave con su
 * pastilla, etiqueta en mayúsculas chicas, área de texto con borde neutro y botonera a la derecha. */
html body .obs-modal .obs-modal-intro {
    display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; color: #475569;
}
html body .obs-modal .obs-modal-cita {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px;
    padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0;
}
html body .obs-modal .obs-modal-cita-txt {
    font-size: 13px; line-height: 1.45; color: #1e293b; white-space: pre-wrap; word-break: break-word;
}
html body .obs-modal .obs-modal-etiqueta { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; margin-bottom: 6px; }
html body .obs-modal .obs-modal-lbl {
    font-size: 11px; font-weight: 700; color: var(--sg-texto-secundario); text-transform: uppercase; letter-spacing: 0.6px;
}
html body .obs-modal .obs-modal-req { color: #dc3545; font-weight: 700; font-size: 12px; }
html body .obs-modal .obs-modal-contador { margin-left: auto; font-size: 11px; color: var(--sg-texto-secundario); }
html body .obs-modal textarea.obs-modal-txt.z-textbox {
    width: 100%; min-height: 96px; box-sizing: border-box; padding: 8px 10px; font-size: 14px; line-height: 1.45;
    color: #334155; background: #ffffff; border: 1px solid #ced4da; border-radius: 6px; box-shadow: none; resize: vertical;
}
html body .obs-modal textarea.obs-modal-txt.z-textbox:focus { border-color: #94a3b8; outline: none; box-shadow: 0 0 0 3px #f1f5f9; }
html body .obs-modal textarea.obs-modal-txt.z-textbox-invalid { border-color: #dc3545; }
html body .obs-modal .obs-modal-botones {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid #f1f5f9;
}
html body .obs-modal .obs-modal-botones .z-button { height: 38px; border-radius: 6px; padding: 0 18px; font-weight: 600; }
/* Historial: línea de tiempo vertical (punto de color por tipo de movimiento, título, fecha · usuario y el
 * detalle en un bloque suave). Alto automático con scroll interno si hay muchos movimientos. */
html body .obs-hist .obs-hist-tl { max-height: 52vh; overflow-y: auto; padding: 2px 4px 2px 0; }
html body .obs-hist .obs-hist-ev { position: relative; padding: 0 0 16px 26px; }
html body .obs-hist .obs-hist-ev::before {
    content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: #e2e8f0; border-radius: 2px;
}
html body .obs-hist .obs-hist-ev:last-child { padding-bottom: 2px; }
html body .obs-hist .obs-hist-ev:last-child::before { display: none; }
html body .obs-hist .obs-hist-punto {
    position: absolute; left: 1px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
    background: #94a3b8; box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px #e2e8f0;
}
html body .obs-hist .obs-hist-ev-creada .obs-hist-punto { background: #64748b; }
html body .obs-hist .obs-hist-ev-vinculada .obs-hist-punto { background: #3b82f6; }
html body .obs-hist .obs-hist-ev-respondida .obs-hist-punto { background: #0d9488; }
html body .obs-hist .obs-hist-ev-vencida .obs-hist-punto { background: #dc3545; }
html body .obs-hist .obs-hist-ev-cerrada .obs-hist-punto { background: #16a34a; }
html body .obs-hist .obs-hist-ev-reabierta .obs-hist-punto { background: #d97706; }
html body .obs-hist .obs-hist-ev-prorrogada .obs-hist-punto { background: #7c3aed; }
html body .obs-hist .obs-hist-ev-plazo .obs-hist-punto { background: #7c3aed; }
html body .obs-hist .obs-hist-ev-anulada .obs-hist-punto { background: #cbd5e1; }
html body .obs-hist .obs-hist-cuerpo { display: flex; flex-direction: column; gap: 2px; }
html body .obs-hist .obs-hist-tit { font-size: 13px; font-weight: 700; color: #0f172a; }
html body .obs-hist .obs-hist-meta { font-size: 11.5px; color: var(--sg-texto-secundario); }
html body .obs-hist .obs-hist-det {
    display: block; margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: #f8fafc;
    border: 1px solid #eef2f7; font-size: 12.5px; line-height: 1.45; color: #334155;
    white-space: pre-wrap; word-break: break-word;
}
html body .obs-hist .obs-hist-vacio { display: block; padding: 12px 0; font-size: 13px; color: var(--sg-texto-secundario); }
/* Persona en Observa (portal, S7): encabezado con lo que falta responder, botón «Responder» por
 * observación y el cuadro de respuesta que se despliega debajo de ella. */
html body .obs-resumen-persona {
    display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: #b45309;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 2px 10px;
}
html body .obs-resumen-persona.obs-resumen-ok { color: #0f6e56; background: #e1f5ee; border-color: #a7e3cc; }
html body .obs-runtime-grid .obs-btn-responder.z-button {
    height: 24px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: 6px;
    color: #185fa5; background: #ffffff; border: 1px solid #bfdbfe; box-shadow: none;
}
html body .obs-runtime-grid .obs-btn-responder.z-button:hover { background: #e6f1fb; }
html body .obs-runtime-grid .obs-responder-caja {
    display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px 18px; padding-left: 10px;
    border-left: 2px solid #bfdbfe; white-space: normal;
}
html body .obs-runtime-grid .obs-responder-botones { display: flex; justify-content: flex-end; gap: 8px; }

/* #14746 (prueba en Chrome de Residuos): la fila de la observación que espera respuesta quedaba pintada con el naranja
 * del tema del sistema interno (selección/foco/hover de ZK en las celdas) y encima iban textos grises, la pastilla y
 * el cuadro de respuesta: fuerte y poco legible. Ahora, como la tarjeta y el diálogo del borrador: filas blancas, un
 * tinte muy suave al elegir o pasar el mouse, y el estado se marca con una barra a la izquierda (ámbar = espera tu
 * respuesta, verde suave = respondida). Vale para el agente y para la persona; la persona además lee más grande. */
html body .obs-runtime-grid .z-listitem > .z-listcell { background: #ffffff; }
html body .obs-runtime-grid .z-listitem:hover > .z-listcell,
html body .obs-runtime-grid .z-listitem.z-listitem-selected > .z-listcell,
html body .obs-runtime-grid .z-listitem.z-listitem-focus > .z-listcell,
html body .obs-runtime-grid .z-listitem.z-listitem-selected:hover > .z-listcell {
    background: #f8fafc !important; background-image: none !important; color: inherit !important;
}
html body .obs-runtime-grid .z-listitem.z-listitem-selected,
html body .obs-runtime-grid .z-listitem.z-listitem-focus { outline: none !important; }
html body .obs-runtime-grid .z-listitem-selected .z-listcell-content,
html body .obs-runtime-grid .z-listitem:hover .z-listcell-content { color: #1e293b !important; }
html body .obs-runtime-grid .obs-fila-pendiente > .z-listcell:first-child { box-shadow: inset 4px 0 0 #d97706; }
html body .obs-runtime-grid .obs-fila-pendiente > .z-listcell { background: #fffdf8; }
html body .obs-runtime-grid .obs-fila-respondida > .z-listcell:first-child { box-shadow: inset 4px 0 0 #86efac; }
html body .obs-runtime-grid .obs-fila-cerrada > .z-listcell:first-child { box-shadow: inset 4px 0 0 #cbd5e1; }
html body .obs-runtime-grid .obs-fila > .z-listcell .z-listcell-content { color: #1e293b; }
/* Autor (y fecha): compactos, alineados a la izquierda, sin renglones sueltos con huecos. */
html body .obs-runtime-grid .obs-fila > .z-listcell:nth-child(2) .z-listcell-content,
html body .obs-runtime-grid .obs-fila > .z-listcell:nth-child(3) .z-listcell-content {
    line-height: 1.3; white-space: normal; text-align: left; color: #334155;
}
html body .obs-runtime-grid .obs-plazo { color: #475569; }
/* La persona (portal): texto de 16 px, pastilla y plazo legibles y botones de 44 px de alto. La acción principal con el
 * azul institucional, el mismo de la tarjeta «Lo que tenés que hacer» (TarjetaTarea.COLOR_INSTITUCIONAL) y del diálogo
 * del borrador de la librería de formularios: todas las acciones principales del ciudadano iguales. */
html body { --syg-accion-principal: #1f4e8c; --syg-accion-principal-borde-suave: #b6c8e3; }
html body .obs-runtime-grid.obs-persona .z-listcell-content { font-size: 16px; line-height: 1.45; }
html body .obs-runtime-grid.obs-persona .obs-fila > .z-listcell:nth-child(2) .z-listcell-content,
html body .obs-runtime-grid.obs-persona .obs-fila > .z-listcell:nth-child(3) .z-listcell-content { font-size: 14px; }
html body .obs-runtime-grid.obs-persona .obs-meta { gap: 10px; margin-top: 8px; flex-wrap: wrap; }
html body .obs-runtime-grid.obs-persona .obs-estado { font-size: 13px; line-height: 22px; padding: 1px 10px; }
html body .obs-runtime-grid.obs-persona .obs-plazo { font-size: 14px; color: #334155; }
html body .obs-runtime-grid.obs-persona .obs-plazo-vencido { color: #b91c1c; }
html body .obs-runtime-grid.obs-persona .obs-falta { font-size: 15px; }
html body .obs-runtime-grid.obs-persona .obs-btn-responder.z-button {
    min-height: 44px; height: auto; padding: 0 16px; font-size: 15px;
    color: var(--syg-accion-principal); border-color: var(--syg-accion-principal-borde-suave);
}
html body .obs-runtime-grid.obs-persona .obs-btn-responder.z-button .z-button-icon { color: var(--syg-accion-principal); }
html body .obs-runtime-grid.obs-persona .obs-btn-responder.z-button:hover { background: #eef3fa; }
html body .obs-runtime-grid.obs-persona .obs-responder-caja { border-left-color: var(--syg-accion-principal-borde-suave); gap: 10px; margin-top: 10px; }
html body .obs-runtime-grid.obs-persona .obs-responder-botones .z-button.btn-brand-solid,
html body .obs-runtime-grid.obs-persona .obs-responder-botones .btn-brand-solid {
    background-color: var(--syg-accion-principal) !important; border-color: var(--syg-accion-principal) !important;
}
html body .obs-runtime-grid.obs-persona .obs-responder-caja textarea { font-size: 16px; line-height: 1.45; }
html body .obs-runtime-grid.obs-persona .obs-responder-botones .z-button { min-height: 44px; font-size: 15px; padding: 0 18px; }
html body .obs-runtime-grid.obs-persona .obs-respuesta-txt { font-size: 15px; }
html body .obs-runtime-grid.obs-persona .obs-respuesta-cab { font-size: 12px; color: var(--syg-accion-principal); }
html body .obs-runtime-grid.obs-persona .obs-fila-respuesta > .z-listcell:nth-child(2) .z-listcell-content,
html body .obs-runtime-grid.obs-persona .obs-fila-respuesta > .z-listcell:nth-child(3) .z-listcell-content { font-size: 14px; text-align: left; }
html body .obs-resumen-persona { font-size: 14px; padding: 4px 12px; }
/* Celular: una columna. Arriba «fecha · autor», debajo la observación con su estado y el cuadro de respuesta; el
 * acento pasa a la fila entera. Sin esto, a 400 px la observación quedaba en una columna de dos palabras. */
@media (max-width: 640px) {
    html body .obs-runtime-grid.obs-persona .z-listbox-header,
    html body .obs-runtime-grid.obs-persona .z-listhead { display: none !important; }
    html body .obs-runtime-grid.obs-persona .z-listbox-body table,
    html body .obs-runtime-grid.obs-persona .z-listbox-body tbody { display: block; width: 100% !important; }
    html body .obs-runtime-grid.obs-persona tr.z-listitem {
        display: flex; flex-wrap: wrap; align-items: baseline; border-bottom: 1px solid #e2e8f0;
    }
    html body .obs-runtime-grid.obs-persona tr.z-listitem > td.z-listcell { display: block; width: auto !important; border: 0; }
    html body .obs-runtime-grid.obs-persona tr.z-listitem > td.z-listcell:first-child { order: 2; flex: 1 1 100%; box-shadow: none; }
    html body .obs-runtime-grid.obs-persona tr.z-listitem > td.z-listcell:nth-child(2),
    html body .obs-runtime-grid.obs-persona tr.z-listitem > td.z-listcell:nth-child(3) { order: 1; }
    html body .obs-runtime-grid.obs-persona tr.z-listitem > td.z-listcell:nth-child(3) .z-listcell-content::before { content: "· "; }
    html body .obs-runtime-grid.obs-persona tr.z-listitem > td.z-listcell:nth-child(n+4) { display: none; }
    html body .obs-runtime-grid.obs-persona tr.obs-fila-pendiente { border-left: 4px solid #d97706; }
    html body .obs-runtime-grid.obs-persona tr.obs-fila-respondida { border-left: 4px solid #86efac; }
    html body .obs-runtime-grid.obs-persona tr.obs-fila-cerrada { border-left: 4px solid #cbd5e1; }
    html body .obs-runtime-grid.obs-persona .obs-acciones { margin-left: 0; flex: 1 1 100%; }
    html body .obs-runtime-grid.obs-persona .obs-btn-responder.z-button { width: 100%; }
    html body .obs-runtime-grid.obs-persona .obs-responder-caja { margin-left: 0; }
    html body .obs-runtime-grid.obs-persona .obs-responder-botones { flex-wrap: wrap; }
    html body .obs-runtime-grid.obs-persona .obs-responder-botones .z-button { flex: 1 1 auto; }
}

/* Clases globales usadas por componentes del runtime de procesos (ModeloBuild_distribucion).
 * Antes vivían sólo scoped en perfiles.zul / permisos.zul, por lo que en formularios de
 * proceso (Observaciones, etc.) los componentes quedaban sin estilo. */
html body .modern-input.z-textbox,
html body input.modern-input,
html body textarea.modern-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    outline: none;
}
html body .modern-input.z-textbox:focus,
html body input.modern-input:focus,
html body textarea.modern-input:focus {
    border-color: var(--bs-primary, #00708a) !important;
    box-shadow: 0 0 0 2px rgba(0, 112, 138, 0.15) !important;
}

/* MARCADOR-OBS-BRAND-SPECIFICITY-2026 — si esto no aparece en devtools, el CSS no recargó */
/* Especificidad elevada con prefijo `html body` (mismo patrón que el bloque
   disabled de abajo): la marca solo gana sobre la regla del theme
   `html body .z-button {…!important}` si igualamos/superamos su especificidad.
   Sin esto, en contextos donde la regla del theme aplica (p.ej. el form de
   proceso embebido en el Portal Ciudadano) el botón quedaba sin estilo de marca.
   IMPORTANTE: estas reglas deben quedar ANTES del bloque disabled (línea ~207)
   para que un botón brand deshabilitado siga ganando el gris del disabled. */
html body .btn-brand-solid,
html body .z-button.btn-brand-solid {
    background-color: var(--bs-primary, #00708a) !important;
    border: 1px solid var(--bs-primary, #00708a) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Un boton oculto por ZK (setVisible false → style="display:none") debe quedar oculto:
   sin esta regla, el display:inline-flex !important de arriba le gana al inline style
   y el boton "invisible" sigue en pantalla (visto en Envios Protegidos, modo solo lectura). */
/* Las variantes .z-button.btn-brand-* hacen falta: la regla del ghost de más abajo
   (html body .z-button.btn-brand-ghost) empata en especificidad con .btn-brand-ghost[style…]
   y gana por venir después → el "Rechazar solicitud" oculto de Recaratular seguía visible
   y sus clics se descartaban (ZK no procesa eventos de componentes invisibles, #15014). */
html body .btn-brand-solid[style*="display:none"],
html body .btn-brand-solid[style*="display: none"],
html body .btn-brand-ghost[style*="display:none"],
html body .btn-brand-ghost[style*="display: none"],
html body .z-button.btn-brand-solid[style*="display:none"],
html body .z-button.btn-brand-solid[style*="display: none"],
html body .z-button.btn-brand-ghost[style*="display:none"],
html body .z-button.btn-brand-ghost[style*="display: none"] {
    display: none !important;
}
html body .btn-brand-solid:hover,
html body .z-button.btn-brand-solid:hover {
    opacity: 0.92;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important;
}
html body .btn-brand-solid .z-button-icon,
html body .btn-brand-solid .z-button-content,
html body .z-button.btn-brand-solid .z-button-icon,
html body .z-button.btn-brand-solid .z-button-content {
    color: #fff !important;
}
/* Botón secundario de marca ("ghost"): blanco con borde neutro, mismo alto y radio que el
   solid. Hasta ahora cada pantalla lo definía dentro de su scope; esta es la definición global
   (los scopes existentes siguen ganando por especificidad). */
html body .btn-brand-ghost,
html body .z-button.btn-brand-ghost {
    background-color: #fff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}
html body .btn-brand-ghost:hover,
html body .z-button.btn-brand-ghost:hover {
    border-color: var(--bs-primary, #00708a) !important;
    color: var(--bs-primary, #00708a) !important;
    background-color: #f8fafc !important;
}
/* Badge de la campana de notificaciones (Nav de ZK: span .z-nav-info con "✉ N · ↩ M").
   Contraste alto porque pide atención; en reposo (todo en cero) el badge no se dibuja. */
html body .z-navbar .z-nav-info,
html body .z-navbar .z-navitem-info {
    background-color: var(--bs-primary, #00708a) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    letter-spacing: .2px;
    white-space: nowrap;
}
html body .btn-brand-ghost .z-button-icon,
html body .btn-brand-ghost .z-button-content,
html body .z-button.btn-brand-ghost .z-button-icon,
html body .z-button.btn-brand-ghost .z-button-content {
    color: inherit !important;
}
/* Estado disabled — regla GENÉRICA para CUALQUIER botón ZK.
   En el theme global hay una regla `html body .z-button, html body .btn-primary`
   con !important que pinta TODOS los botones (incluso los disabled) con el
   color brand. Para anularla necesitamos mayor especificidad: prefijamos
   `html body` y matcheamos por [disabled] (el atributo HTML real) además de
   la clase ZK .z-button-disabled. */
/* MARCADOR-PAGOS-DISABLED-2026 — si esto no aparece en devtools, el CSS no recargó */
html body .z-button[disabled],
html body .z-button.z-button-disabled,
html body button.z-button[disabled],
html body button.z-button.z-button-disabled,
html body :is(.z-button, button.z-button)[disabled] {
    background-color: #cbd5e1 !important;
    background-image: none !important;
    border: 1px solid #94a3b8 !important;
    border-color: #94a3b8 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
}
html body .z-button[disabled]:hover,
html body .z-button.z-button-disabled:hover {
    opacity: 0.7 !important;
    box-shadow: none !important;
    background-color: #cbd5e1 !important;
    border-color: #94a3b8 !important;
    color: #64748b !important;
}
html body .z-button[disabled] .z-button-icon,
html body .z-button[disabled] .z-button-content,
html body .z-button.z-button-disabled .z-button-icon,
html body .z-button.z-button-disabled .z-button-content {
    color: #64748b !important;
}

/* Combos/datebox/bandbox deshabilitados: mantener el campo visible.
   El theme ZK aplica opacity 0.6 al conjunto y pisa el fondo del input con
   !important, y arriba .z-combobox-input quitó el borde → el campo desaparecía
   por completo (solo quedaba la flecha). Mismo patrón de especificidad que el
   bloque disabled de botones. MARCADOR-COMBO-DISABLED-2026 */
html body .z-combobox-disabled,
html body .z-bandbox-disabled,
html body .z-datebox-disabled {
    opacity: 1 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    background: #f1f5f9 !important;
}
html body .z-combobox-disabled > input,
html body .z-bandbox-disabled > input,
html body .z-datebox-disabled > input,
html body .z-combobox-disabled .z-combobox-button,
html body .z-bandbox-disabled .z-bandbox-button,
html body .z-datebox-disabled .z-datebox-button {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Genus v5 — mejoras de experiencia (UX) del formulario.
   Todo por CLASE (a prueba del relayout flex de ModeloBuild_distribucion) y con
   variables de marca (var(--bs-primary/secondary)). MARCADOR-GENUS-UX-2026.
   ════════════════════════════════════════════════════════════════════════ */

/* Feedback de validación EN VIVO (reglas `validacion` de GenusNativoReglas → sclass
   genus-valid/genus-invalid en onBlur). Verde = válido (refuerzo positivo), rojo =
   inválido. Verde/rojo son colores SEMÁNTICOS (no de marca), por eso son fijos. */
html body .z-textbox.genus-valid,
html body input.genus-valid {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.10) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body .z-textbox.genus-invalid,
html body input.genus-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Hover de inputs modernos: señala que es editable antes de hacer foco. */
html body .modern-input.z-textbox:hover,
html body input.modern-input:hover,
html body textarea.modern-input:hover {
    border-color: var(--bs-secondary, #3a5771) !important;
}

/* Instructivo del trámite (cont_instructivo → HTML_INSTRUCTIVO): de "muro de texto"
   a una guía clara con pasos numerados y palabras clave resaltadas. */
.page-background {
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-left: 4px solid var(--bs-primary, #00708a);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 8px 0;
}
.pasos-lista {
    margin: 0;
    padding-left: 20px;
    color: #475569;
    line-height: 1.75;
    font-size: 13px;
}
.pasos-lista li { margin-bottom: 10px; }
.pasos-lista li:last-child { margin-bottom: 0; }
.pasos-lista .keyword {
    font-weight: 700;
    color: var(--bs-secondary, #3a5771);
}
.pasos-lista .keyword-highlight {
    font-weight: 700;
    color: var(--bs-primary, #00708a);
    background: #f3f4f6; /* fallback navegadores sin color-mix */
    background: color-mix(in srgb, var(--bs-primary) 12%, #fff);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Realce de campo OBLIGATORIO (regla `obligatorio` → sclass campo-obligatorio): acento delicado
   inset a la izquierda (sin shift de layout, sin asterisco dentro del input). */
html body .z-textbox.campo-obligatorio,
html body input.campo-obligatorio,
html body .z-combobox.campo-obligatorio .z-combobox-input,
html body .z-bandbox.campo-obligatorio .z-bandbox-input {
    box-shadow: inset 3px 0 0 0 var(--bs-primary, #00708a) !important;
}

/* Regla `mayusculas`: el campo se ve en mayúsculas mientras se escribe (el valor se guarda en mayúsculas por servidor). */
html body .z-textbox.sg-mayusculas,
html body input.sg-mayusculas {
    text-transform: uppercase;
}
html body .sg-mayusculas::placeholder,
html body .sg-mayusculas input::placeholder {
    text-transform: none;
}

/* Pulso al enfocar el PRIMER campo con error (GenusNativoCaso.enfocar) — anillo rojo que late 2 veces. */
@keyframes genus-focus-pulse-kf {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.genus-focus-pulse {
    animation: genus-focus-pulse-kf 0.8s ease-out 2;
    border-radius: 6px;
}

/* Cabeceras de sección del formulario (Groupbox del runtime). Scoped a `.main-card` → SOLO el form
   renderizado (no pantallas admin), el mismo para el portal y el personal. Look de panel/card sobrio, como la
   tarjeta «Lo que tenés que hacer» y los diálogos: fondo neutro y acento con el color SECUNDARIO de la
   organización (--org-secondary, de Identidad Visual); sin secundario configurado, el azul institucional
   (--syg-accion-principal). Antes: degradé y barra con --bs-primary, que en MinSalud es terracota y desentonaba
   (minsalud-test, release 153); después quedó el azul fijo para todos y los clientes perdieron su color. */
html body .main-card .z-groupbox {
    border: 1px solid #eef0f4 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05) !important;
    margin-bottom: 14px !important;
}
html body .main-card .z-groupbox .customPosition,
html body .main-card .z-groupbox .z-caption {
    background: #f8fafc !important;
    background-image: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-left: 3px solid var(--org-secondary, var(--syg-accion-principal, #1f4e8c)) !important;
    border-radius: 9px 9px 0 0 !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: .2px !important;
    color: #1e293b !important;
}

/* ── Contraste de texto del tema ZK (WCAG AA 4,5:1) ──
   theme_sayges pinta con rgba(0,0,0,.42) (≈3,0:1 sobre blanco) los mensajes de «sin datos», el
   resumen del paginador y los pies de grupo. El resto del texto del tema (rgba(0,0,0,.9) y .57)
   ya cumple. Mismo nivel de especificidad que el tema; main.css se carga después. */
.z-grid-body .z-grid-emptybody td,
.z-listbox-body .z-listbox-emptybody td,
.z-tree-body .z-tree-emptybody td,
.z-combobox-emptySearchMessage,
.z-paging-info,
.z-groupfoot-content,
.z-listgroupfoot .z-listcell-content {
    color: var(--sg-texto-secundario);
}

/* Encabezados de las grillas del formulario (adjuntos, anexados, firmantes…): el tema ZK (theme_sayges) pinta cada
   .z-listheader con #3a5771 y tapa el color que el formulario le pone al Listhead. Con el secundario de la
   organización, como el acento de las cabeceras de sección; sin secundario configurado queda el del tema. */
html body .main-card .z-listbox-header,
html body .main-card .z-listhead-bar,
html body .main-card .z-listheader,
html body .main-card .z-listheader-visited {
    background: var(--org-secondary, #3a5771);
}
html body .main-card .z-listheader-hover {
    background: color-mix(in srgb, var(--org-secondary, #3a5771) 85%, #fff);
}

/* ───────────────────────── Calidad de gestión: incidencias ───────────────────────── */
/* Pastilla de estado (misma familia que .obs-estado de S7, pero utilizable fuera de la grilla: ficha, Mi Equipo, Tablero). */
html body .inc-pill {
    display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; line-height: 18px; font-weight: 600;
    white-space: nowrap; border: 1px solid #e2e8f0; background: #f8fafc; color: var(--sg-texto-secundario);
}
html body .inc-pill-registrada { color: #b45309; background: #fffbeb; border-color: #fde68a; }
html body .inc-pill-corregida  { color: #185fa5; background: #e6f1fb; border-color: #bfdbfe; }
html body .inc-pill-validada   { color: #0f6e56; background: #e1f5ee; border-color: #a7e3cc; }
html body .inc-pill-descartada { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; text-decoration: line-through; }
/* Línea de estado de la incidencia (grilla, ficha, bloques): una sola altura de línea, todo centrado, separadores suaves. */
html body .inc-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; min-height: 22px; white-space: normal; }
html body .inc-linea .inc-pill { line-height: 18px; }
html body .inc-tipo { font-size: 12px; font-weight: 600; color: #334155; line-height: 18px; }
html body .inc-celda-estado .inc-tipo { display: none; }
html body .inc-celda-estado .inc-linea { margin-top: 0; }
html body .inc-bloque .z-listbox .z-listhead-bar { background: transparent; border: 0; }
html body .inc-bloque .z-listbox .z-listheader { background: #f8fafc; }
html body .inc-bloque .z-listbox .z-listbox-body { max-height: 420px; overflow-y: auto; }
html body .inc-resp { font-size: 12px; color: var(--sg-texto-secundario); line-height: 18px; }
html body .inc-resp::before { content: "·"; margin-right: 8px; color: #94a3b8; }
html body .inc-linea .obs-acciones { margin-left: auto; display: flex; align-items: center; gap: 4px; }
html body .inc-linea .inc-accion.z-toolbarbutton, html body .obs-runtime-grid .inc-accion.z-toolbarbutton { width: 26px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 13px; border-radius: 4px; color: var(--sg-texto-secundario); }
html body .inc-linea .inc-accion.z-toolbarbutton:hover, html body .obs-runtime-grid .inc-accion.z-toolbarbutton:hover { color: #0f6e56; background: #f1f5f9; }
html body .inc-falta { flex: 1 1 100%; order: 99; font-size: 12px; color: #92400e; white-space: pre-wrap; word-break: break-word; }
/* Historial: puntos de los movimientos de la incidencia. */
html body .obs-hist .obs-hist-ev-inc-incidencia .obs-hist-punto { background: #b45309; }
html body .obs-hist .obs-hist-ev-inc-corregida .obs-hist-punto  { background: #185fa5; }
html body .obs-hist .obs-hist-ev-inc-validada .obs-hist-punto   { background: #16a34a; }
html body .obs-hist .obs-hist-ev-inc-rechazada .obs-hist-punto  { background: #d97706; }
html body .obs-hist .obs-hist-ev-inc-descartada .obs-hist-punto { background: #64748b; }
html body .obs-hist .obs-hist-ev-inc-reasignada .obs-hist-punto { background: #3b82f6; }
/* Formulario de alta (switch de Observaciones y modal): dos columnas alineadas, chip de la sugerencia IA. */
html body .inc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; margin: 10px 0 14px; }
html body .inc-form, html body .inc-form .inc-form-ayuda, html body .inc-form .inc-form-lbl-row, html body .inc-linea { text-align: left; }
html body .inc-form .inc-form-lbl-row { display: flex; align-items: center; gap: 6px; height: 18px; margin-bottom: 6px; }
html body .inc-form .inc-form-lbl { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--sg-texto-secundario); line-height: 18px; margin: 0; }
html body .inc-form .inc-chip-ia { margin-left: 0; line-height: 16px; }
html body .inc-form .inc-form-ayuda { display: block; grid-column: 1; margin-top: 6px; font-size: 11px; line-height: 14px; color: var(--sg-texto-secundario); }
html body .inc-chip-ia { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 16px; color: #5b21b6; background: #f3e8ff; border: 1px solid #ddd6fe; vertical-align: top; }
/* Sistema de estilo aprobado (asistente de masivas, .am-scope): botones y controles a 36 px, radio 8. */
html body .inc-scope .z-button { height: 36px !important; padding: 0 14px !important; border-radius: 8px !important; font-size: 13px !important; transition: all .15s ease; }
html body .inc-scope .z-button .z-button-icon, html body .inc-scope .z-button > i { margin-right: 6px !important; }
html body .inc-scope .z-textbox, html body .inc-scope .z-combobox-input { height: 36px !important; box-sizing: border-box !important; padding: 0 12px !important; font-size: 13px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; background: #fff !important; color: #0f172a !important; }
html body .inc-scope textarea.z-textbox { height: auto !important; min-height: 84px; padding: 10px 12px !important; }
html body .inc-scope .z-textbox::placeholder, html body .inc-scope .z-combobox-input::placeholder { color: #94a3b8; }
html body .inc-scope .z-textbox:focus, html body .inc-scope .z-combobox-input:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13,110,253), .12) !important; outline: none; }
html body .inc-scope .z-combobox { display: inline-flex; align-items: stretch; height: 36px; border: none; background: transparent; width: 100%; }
html body .inc-scope .z-combobox .z-combobox-input { border-radius: 8px 0 0 8px !important; border-right: none !important; flex: 1; min-width: 0; }
html body .inc-scope .z-combobox-button { width: 40px; min-width: 40px; height: 36px !important; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 8px 8px 0; background: #f8fafc; display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
html body .inc-scope .z-combobox-button:hover { background: #f1f5f9; }
html body .inc-scope .z-combobox-icon { font-size: 13px; color: #475569; }
/* El popup hereda la sclass: mismo look que el de upload.zul (ahí está en el <style> de esa página). */
html body .z-combobox-popup.inc-combo { max-height: 250px !important; }
html body .z-combobox-popup.inc-combo .z-comboitem { padding: 8px 12px !important; font-size: 13px !important; color: #334155 !important; }
html body .z-combobox-popup.inc-combo .z-comboitem-seld, html body .z-combobox-popup.inc-combo .z-comboitem:hover { background: #eef2ff !important; color: #1e293b !important; }
/* Cabecera de la pestaña Incidencias de la ficha: queda fija arriba mientras la lista desplaza (los botones de acción no van dentro del scroll). */
/* Pestaña Incidencias de la ficha: el panel es una columna que ocupa el alto del tabpanel (max-height del tabpanel
   menos su padding superior); la cabecera no se mueve y sólo la lista tiene scroll. Así el tabpanel nunca llega a
   desplazarse y la cabecera queda fija sin depender de position: sticky. */
html body .fx-scope .fx-tabs .z-tabpanel:has(> .inc-ficha-panel) { overflow: hidden !important; }
html body .fx-scope .fx-tabs .z-tabpanel > .inc-ficha-panel { display: flex; flex-direction: column; max-height: calc(90vh - 314px); margin-bottom: 0; }
html body .inc-ficha-head { flex: 0 0 auto; background: #fff; margin: 0 0 10px; padding: 6px 14px 10px 0; border-bottom: 1px solid #f1f5f9; }
html body .inc-ficha-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html body .inc-ficha-lista > .z-listbox { margin-bottom: 28px; }
/* Los títulos de columna también quedan fijos: la zona de lista es el contenedor con scroll, así que sticky funciona. */
html body .inc-ficha-lista .z-listbox-header { position: sticky; top: 0; z-index: 1; }
/* La ficha (.fx-scope) pone el header del listbox transparente con !important; acá necesita fondo para tapar las filas. */
html body .inc-ficha-lista .z-listbox-header,
html body .inc-ficha-lista .z-listbox-header .z-listhead,
html body .inc-ficha-lista .z-listbox-header .z-listheader { background: #fff !important; }
html body .inc-cand-bloque { flex: 0 0 auto; max-height: 40vh; overflow-y: auto; margin: 0 0 10px; padding: 10px 14px 6px 12px; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 10px; background: #fffbeb; }
html body .inc-cand-fila { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-top: 1px solid #fde68a; }
html body .inc-cand-fila-tablero { cursor: pointer; border-top-color: #e5e7eb; }
html body .inc-cand-fila-tablero:hover { background: #f8fafc; }
html body .inc-cand-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html body .inc-cand-evidencia { font-size: 13px; color: #1f2937; white-space: pre-wrap; }
html body .inc-cand-meta { font-size: 12px; color: #6b7280; }
html body .inc-cand-acciones { flex: 0 0 auto; display: flex; gap: 6px; }
html body .inc-cand-chip { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .2px; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; width: fit-content; }
html body .inc-cand-firma_rechazada { background: #fee2e2; color: #991b1b; }
html body .inc-cand-revision_rechazada { background: #ffedd5; color: #9a3412; }
html body .inc-cand-pase_devuelto { background: #dbeafe; color: #1e40af; }
html body .inc-cand-recaratulacion { background: #ede9fe; color: #5b21b6; }
html body .inc-cand-btn { font-size: 12px; padding: 4px 10px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #334155; }
html body .inc-cand-btn-ok { border-color: #15803d; color: #15803d; }
html body .inc-cand-btn:hover { background: #f8fafc; }

html body .inc-modal .obs-modal-intro { margin-bottom: 12px; }
html body .inc-modal .inc-nota { min-height: 84px; }
html body .inc-modal .inc-modal-acciones { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
/* Bloque «Control de incidencias» (Mi Equipo y Tablero). */
html body .inc-bloque { margin-top: 16px; padding-top: 12px; border-top: 1px solid #f1f3f5; }
html body .inc-bloque-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
html body .inc-bloque-titulo { font-size: 0.72rem; font-weight: 700; color: var(--bs-primary); text-transform: uppercase; letter-spacing: 0.4px; }
html body .inc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
html body .inc-kpi { background: #f8f9fa; padding: 10px 12px; border-radius: 6px; border-left: 3px solid var(--bs-primary); }
html body .inc-kpi.ok   { border-left-color: #16a34a; }
html body .inc-kpi.warn { border-left-color: #ffc107; }
html body .inc-kpi-label { display: block; font-size: 0.65rem; color: var(--sg-texto-secundario); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
html body .inc-kpi-value { display: block; font-size: 1.3rem; font-weight: 800; color: #212529; }
html body .inc-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
html body .inc-tipo-chip { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
html body .inc-vacio { font-size: 12px; color: var(--sg-texto-secundario); font-style: italic; padding: 6px 0; }
html body .inc-link.z-toolbarbutton { font-size: 12px; color: var(--bs-primary); padding: 2px 6px; }

/* SALUD: bloque «Últimas novedades de la historia» que BloqueHistoriaSalud inyecta en proceso.zul (escritorio).
   proceso.zul no está bajo .sys-scope: por eso va acá. El portal sigue con la tarjeta de TarjetaTarea (estilo en línea). */
html body .syg-bloque-historia {
    margin: 12px 0 16px; padding: 12px 15px; background: #fff; box-sizing: border-box; max-width: 100%;
    border: 1px solid #dee2e6; border-left: 4px solid var(--bs-primary, #00708a); border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04); font-size: 13px; line-height: 1.45; color: #343a40; overflow-wrap: anywhere;
}
html body .syg-bloque-historia .syg-bloque-historia-titulo {
    display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--bs-primary, #00708a);
}
html body .syg-bloque-historia .syg-bloque-historia-vacio { color: var(--sg-texto-secundario); font-size: 12px; }
html body .syg-bloque-historia .syg-bloque-historia-pie { display: block; padding-top: 6px; border-top: 1px solid var(--sg-borde, #eef2f7); color: var(--sg-texto-secundario); font-size: 12px; }
html body .syg-bloque-historia .syg-bloque-historia-linea {
    display: block; padding: 6px 0; border-top: 1px solid #e9ecef; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px;
}
html body .syg-bloque-historia .syg-bloque-historia-linea.anulada { color: var(--sg-texto-secundario); }

/* ───────── Casillas (checkbox) del escritorio ─────────
   El tema ZK (theme_sayges, un jar aparte) pinta la casilla con un color fijo (#cf5524) y un tilde de fuente de íconos.
   Acá se redefine para todos los temas: cuadrado redondeado de 16 px, borde suave, marcada con el primario del tema u
   organización (--bs-primary) y tilde blanco, anillo de foco con --input-focus-ring y transición. Sólo el mold por defecto
   y el de tres estados (el interruptor y el toggle tienen su propio dibujo). */
.z-checkbox-default > input[type="checkbox"],
.z-checkbox-tristate > input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; min-width: 16px; margin: 0 6px 0 0; padding: 0;
    border: 1.5px solid var(--bs-gray-400, #b6bfcb); border-radius: 4px; background: #fff no-repeat center / 12px 12px;
    vertical-align: -3px; cursor: pointer; font-size: 0; color: transparent; box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.z-checkbox-default > input[type="checkbox"]:before,
.z-checkbox-tristate > input[type="checkbox"]:before { content: none !important; }
.z-checkbox-default > input[type="checkbox"]:hover,
.z-checkbox-tristate > input[type="checkbox"]:hover { border-color: var(--bs-primary); }
.z-checkbox-default > input[type="checkbox"]:checked,
.z-checkbox-tristate > input[type="checkbox"]:checked {
    background-color: var(--bs-primary); border-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3.5 8.5 3 3 6-6.5'/%3e%3c/svg%3e");
}
.z-checkbox-tristate > input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary); border-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2.4' d='M4 8h8'/%3e%3c/svg%3e");
}
.z-checkbox-default > input[type="checkbox"]:focus-visible,
.z-checkbox-tristate > input[type="checkbox"]:focus-visible {
    outline: none; box-shadow: 0 0 0 3px var(--input-focus-ring, color-mix(in srgb, var(--bs-primary) 25%, transparent));
}
.z-checkbox-default > input[type="checkbox"][disabled],
.z-checkbox-tristate > input[type="checkbox"][disabled] { cursor: default; opacity: .5; border-color: var(--bs-gray-400, #b6bfcb); }
.z-checkbox-default > input[type="checkbox"][disabled]:not(:checked),
.z-checkbox-tristate > input[type="checkbox"][disabled]:not(:checked) { background-color: var(--bs-gray-100, #f1f5f9); }

/* La casilla de las listas con checkmark (listbox/tree): mismo dibujo; la fila marcada no se resalta, sólo la casilla. */
.z-listitem-checkable, .z-listheader-checkable, .z-listgroup-checkable, .z-treerow-checkable {
    width: 16px !important; height: 16px !important; font-size: 0 !important; box-sizing: border-box;
    border: 1.5px solid var(--bs-gray-400, #b6bfcb) !important; border-radius: 4px; background: #fff no-repeat center / 12px 12px !important;
    vertical-align: -3px !important; transition: background-color .15s ease, border-color .15s ease;
}
.z-listitem-checkable .z-listitem-icon, .z-listheader-checkable .z-listheader-icon,
.z-listgroup-checkable .z-listgroup-icon, .z-treerow-checkable .z-treerow-icon { display: none !important; }
.z-listitem:hover > .z-listcell > .z-listcell-content > .z-listitem-checkable,
.z-listitem-checkable:hover { border-color: var(--bs-primary) !important; }
.z-listitem-selected > .z-listcell > .z-listcell-content > .z-listitem-checkable:not(.z-listitem-radio),
.z-listheader-checked > .z-listheader-content > .z-listheader-checkable,
.z-listheader-checkable.z-listheader-checked,
.z-treerow-selected > .z-treecell > .z-treecell-content > .z-treerow-checkable:not(.z-treerow-radio) {
    background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3.5 8.5 3 3 6-6.5'/%3e%3c/svg%3e") !important;
}
.z-listitem-checkable.z-listitem-radio, .z-treerow-checkable.z-treerow-radio { border-radius: 50%; }
.z-listitem-selected > .z-listcell > .z-listcell-content > .z-listitem-checkable.z-listitem-radio,
.z-treerow-selected > .z-treecell > .z-treecell-content > .z-treerow-checkable.z-treerow-radio {
    border-color: var(--bs-primary) !important;
    background-image: radial-gradient(circle, var(--bs-primary) 0 4px, transparent 4.5px) !important; background-size: 100% 100% !important;
}