con la
tarjeta en si (encabezado, campos, botones).
Ventaja de este enfoque vs. Window mode="modal": el div NO tiene
posicionamiento propio inyectado por JavaScript, asi que el CSS manda
siempre.
El composer solo necesita togglear la visibilidad de divModalOverlay
(setVisible(true/false)); no hace falta doModal().
--------------------------------------------------------------------- */
.modal-overlay {
position: fixed !important;
inset: 0 !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: color-mix(in srgb, var(--av-surface-soft) 50%, transparent);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
z-index: 1000;
}
.modal-sheet {
/* "auto-ajustable": el ancho se adapta al contenido dentro de un
rango razonable, en vez de un valor fijo. */
width: auto;
min-width: 320px;
max-width: 440px;
max-height: 90vh;
overflow-y: auto;
background: var(--av-surface);
border: 1px solid var(--av-border);
border-radius: var(--av-radius-lg);
box-shadow: var(--av-shadow);
padding: 20px 22px;
box-sizing: border-box;
}
.modal-sheet-titulo {
font-size: 14px;
font-weight: 700;
color: var(--av-text);
margin: 0 0 12px;
}
/* La "manija" ya no aplica con el modal centrado (era propia del
bottom sheet). La dejamos oculta por si algun .zul todavia la incluye,
para no tener que tocar cada archivo de golpe. */
.modal-sheet-handle {
display: none;
height: 4px;
background: var(--av-border);
border-radius: 3px;
margin: 0 auto 10px;
}
/* ---------------------------------------------------------------------
10) RESPONSIVE
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
11) LAYOUT PRINCIPAL (dashboard): sidebar, topbar, tarjetas de metricas
--------------------------------------------------------------------
Implementado con
(mismo criterio que el modal): control total
por CSS, sin depender de borderlayout ni de nombres de clase internos
de ZK.
--------------------------------------------------------------------- */
.app-shell {
display: flex;
gap: 14px;
align-items: flex-start;
min-height: 100vh;
box-sizing: border-box;
padding: 14px;
}
.app-sidebar {
width: 200px;
flex-shrink: 0;
background: var(--av-surface);
border: 1px solid var(--av-border);
border-radius: var(--av-radius-lg);
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
box-sizing: border-box;
/* Con varios grupos del acordeon abiertos a la vez, el contenido
puede crecer mas alto que la ventana. Sin esto, lo que se pasa
del alto disponible queda recortado (no se puede llegar a
"Cerrar sesion" ni a los ultimos items). Con max-height +
overflow-y, el sidebar scrollea SOLO EL, independiente del resto
de la pantalla -- el "position: sticky" ademas lo mantiene en
pantalla mientras se scrollea el contenido principal. */
max-height: calc(100vh - 28px);
overflow-y: auto;
position: sticky;
top: 14px;
}
/* Boton hamburguesa: oculto en escritorio, solo aparece en el
breakpoint movil (ver seccion 10, RESPONSIVE). Se ubica a la
izquierda de la topbar. */
.mobile-menu-toggle {
display: none;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 4px !important;
color: var(--av-text-muted) !important;
cursor: pointer;
margin-right: 4px;
}
.mobile-menu-toggle i {
font-size: 20px !important;
margin: 0 !important;
}
.mobile-menu-toggle:hover {
color: var(--av-accent) !important;
}
/* Fondo oscuro detras del menu flotante en movil. Oculto por defecto;
la clase "visible" la agrega/quita el toggle (ver Dashboard.zul). */
.sidebar-backdrop {
display: none;
}
.sidebar-brand-row {
display: contents;
align-items: center;
gap: 8px;
padding: 6px 10px 12px;
}
.brand-logo {
width: 100px;
height: 100px;
align-self: center;
flex-shrink: 0;
object-fit: contain;
}
.sidebar-brand {
font-size: 15px;
font-weight: 700;
color: var(--av-accent-dark);
}
.sidebar-nav-item {
display: block;
padding: 9px 12px;
border-radius: var(--av-radius-sm);
color: var(--av-text-muted);
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.sidebar-nav-item:hover {
background: var(--av-surface-soft);
}
.sidebar-nav-item.active {
background: var(--av-accent);
color: var(--av-text-inverse);
}
/* Grupos desplegables (acordeon) del sidebar. El toggle es puro cliente
(w:onClick + jq('$id').toggleClass('open')), sin ir al servidor -- ver
Dashboard.zul. */
.sidebar-group {
margin: 2px 0;
}
.sidebar-group-header {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--av-radius-sm);
color: var(--av-text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
/* Icono + texto del grupo, generados por iconSclass en un