/** * Modo «Webapp» del panel de gestión (skin `app`). * * Convierte el contenedor `.docflow-panel--app` en un shell a pantalla completa: sidebar de * navegación + topbar + área de contenido con scroll propio. Sólo sobreescribe/añade sobre * `panel.css`; el HTML de los módulos no cambia. * * Degradado sin JS: por defecto todos los módulos quedan visibles (apilados). La regla «un * módulo a la vez» se aplica únicamente cuando `panel-app.js` marca el contenedor con * `.is-enhanced`. */ .docflow-app-body { margin: 0; min-height: 100vh; min-height: 100dvh; background: #f6f7f9; } /* Contenedor del shell a viewport completo. La plantilla `panel-fullscreen.php` lo pinta como hijo directo de , así que aquí no hay wrappers de bloque que hereden el `content-size` del tema. Se usa doble clase (`.docflow-panel.docflow-panel--app`) para ganar en especificidad a `.docflow-panel { max-width: 680px }` de admin.css, que el modal de cita también encola. */ .docflow-panel.docflow-panel--app { display: grid; grid-template-columns: 248px 1fr; /* Una sola fila fijada a la altura del contenedor: las columnas se estiran a ella (sin `height:100%`, que con box-sizing content-box sumaría el padding y desbordaría). */ grid-template-rows: minmax( 0, 1fr ); width: 100%; max-width: none; height: 100vh; height: 100dvh; margin: 0; font-size: 14px; color: #344054; } /* Descuenta la barra de administración de WordPress (usuarios con sesión). */ body.admin-bar .docflow-panel.docflow-panel--app { height: calc( 100vh - 32px ); height: calc( 100dvh - 32px ); } /* ---- Sidebar ------------------------------------------------------------- */ .docflow-app__sidebar { display: flex; flex-direction: column; min-height: 0; padding: 18px 14px 24px; background: #101828; color: #cdd3de; } .docflow-app__brand { padding: 6px 10px 16px; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.01em; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .docflow-app__nav { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; margin-top: 14px; overflow-y: auto; } .docflow-app__nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #cdd3de; font-weight: 500; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .docflow-app__nav-item:hover, .docflow-app__nav-item:focus-visible { background: rgba( 255, 255, 255, 0.06 ); color: #fff; outline: none; } .docflow-app__nav-item[aria-selected="true"] { background: #2271b1; color: #fff; } .docflow-app__nav-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; } .docflow-app__nav-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .docflow-app__footer { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); } .docflow-app__foot-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #98a2b3; font-weight: 500; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .docflow-app__foot-item:hover, .docflow-app__foot-item:focus-visible { background: rgba( 255, 255, 255, 0.06 ); color: #fff; outline: none; } .docflow-app__logout { color: #f0a3a3; } .docflow-app__logout:hover, .docflow-app__logout:focus-visible { background: rgba( 217, 54, 56, 0.16 ); color: #fecaca; } /* ---- Main (topbar + contenido) ------------------------------------------ */ .docflow-app__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .docflow-app__topbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; height: 60px; padding: 0 24px; background: #fff; border-bottom: 1px solid #e4e7ec; } .docflow-app__title { margin: 0; font-size: 18px; font-weight: 600; color: #101828; } .docflow-app__content { flex: 1 1 auto; min-height: 0; padding: 24px; overflow-y: auto; } /* El separador entre módulos apilados sobra cuando se muestran de uno en uno. */ .docflow-panel--app.is-enhanced .docflow-panel-modulo + .docflow-panel-modulo { margin-top: 0; padding-top: 0; border-top: 0; } /* ---- Botón de menú (móvil) ---------------------------------------------- */ .docflow-app__menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; cursor: pointer; } .docflow-app__menu-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: #344054; border-radius: 2px; } /* ---- Navegación SPA: un módulo a la vez (sólo con JS) -------------------- */ .docflow-panel--app.is-enhanced .docflow-panel-modulo { display: none; } .docflow-panel--app.is-enhanced .docflow-panel-modulo.is-active { display: block; } /* ---- Calendario: aprovechar toda la altura del viewport ----------------- */ /* Cuando el módulo activo es el calendario, el área de contenido no desplaza: el calendario llena la altura disponible y hace su propio scroll interno. */ .docflow-panel--app.is-enhanced[data-active="calendario"] .docflow-app__content { display: flex; flex-direction: column; overflow: hidden; } .docflow-panel--app.is-enhanced[data-active="calendario"] .docflow-panel-modulo--calendario.is-active { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .docflow-panel--app.is-enhanced[data-active="calendario"] #docflow-calendar { flex: 1 1 auto; min-height: 0; } /* ---- Aviso sin permiso, centrado en el viewport ------------------------- */ .docflow-panel--app.docflow-panel--aviso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; grid-template-columns: none; min-height: 100vh; min-height: 100dvh; max-width: none; margin: 0; padding: 24px; border: 0; border-radius: 0; background: #f6f7f9; box-shadow: none; text-align: center; } /* ---- Responsive: sidebar off-canvas ------------------------------------- */ @media ( max-width: 782px ) { .docflow-panel--app { grid-template-columns: 1fr; } body.admin-bar .docflow-panel.docflow-panel--app { height: calc( 100vh - 46px ); height: calc( 100dvh - 46px ); } .docflow-app__sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; height: auto; width: 248px; transform: translateX( -100% ); transition: transform 0.2s ease; } .docflow-panel--app.is-menu-open .docflow-app__sidebar { transform: translateX( 0 ); box-shadow: 0 10px 30px rgba( 16, 24, 40, 0.35 ); } .docflow-app__menu-toggle { display: flex; } }