/*
.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);
}

.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;
}

/* 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). */
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"] {
    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;
}

/* 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). Look de panel/card moderno y delicado: borde suave, sombra mínima,
   cabecera con acento de marca a la izquierda y degradé sutil. Theme-aware. */
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; /* fallback */
    background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 7%, #fff), #fff) !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-left: 3px solid var(--bs-primary, #00708a) !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: var(--bs-secondary, #3a5771) !important;
}