/* Panel lateral para las altas (wwwroot/js/panel-lateral.js). */

.panel-lateral {
    /* Bootstrap ya lo pega a la derecha (right: 0) y lo esconde con
       translateX(100%). El JS lo abre ya con el ancho del contenido
       (--panel-lateral-ancho), medido antes de abrirlo. */
    --bs-offcanvas-width: var(--panel-lateral-ancho, 80vw);
    max-width: 95vw;
}

@media (max-width: 768px) {
    .panel-lateral {
        --bs-offcanvas-width: 100vw;
        max-width: 100vw;
    }
}

.panel-lateral .offcanvas-header {
    background-color: var(--bs-body-bg);
}

.panel-lateral .offcanvas-title {
    font-weight: 600;
}

/* El iframe ocupa todo el cuerpo; el scroll lo pone la página de dentro */
.panel-lateral .offcanvas-body {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.panel-lateral-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    transition: opacity .2s ease;
}

/* Mientras carga (panel aún cerrado), el iframe tiene ancho propio (el
   máximo del panel) para poder medir el contenido */
.panel-lateral.cargando .panel-lateral-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 95vw;
    visibility: hidden;
    opacity: 0;
}

/* Fondo oscuro del panel (panel-lateral.js lo pone ya con el spinner). Oculto
   del todo cuando no está visible para no tapar clics de la página. */
.panel-lateral-fondo:not(.visible) {
    pointer-events: none;
}

/* Spinner centrado en pantalla mientras carga: entra con scale 1 y se va
   con scale 0 justo cuando se abre el panel */
.panel-lateral-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1060;
    display: flex;
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s ease;
    pointer-events: none;
}

.panel-lateral-spinner.visible {
    transform: translate(-50%, -50%) scale(1);
}

/* ---- Dentro del iframe (body de _PanelLayout.cshtml) ---- */

/* El body mide lo que ocupa su contenido: el JS del panel lo lee para ajustar
   el ancho. El max-width hace que las rejillas .g-350 pongan una columna por
   tarjeta (auto-fit) en vez de apilarlas todas en una. */
.en-panel-lateral {
    width: fit-content;
    min-width: 100%;
    /* El scroll lo hace el propio body (alto fijo = el del iframe) */
    height: 100vh;
    overflow: auto;
}

.en-panel-lateral.midiendo {
    min-width: 0;
    max-width: 100%;
}

/* Al medir, las secciones de campos (.f-row-col, rejilla auto-fill) no tienen
   ancho disponible y el navegador las calcularía a una sola columna: durante
   la medida se tratan como flex en línea, para que su ancho natural sea el de
   todos sus campos seguidos. Ya medido el panel, vuelven a ser rejilla. */
.en-panel-lateral.midiendo .f-row-col {
    display: flex;
    flex-wrap: wrap;
}

.en-panel-lateral.midiendo .f-row-col > * {
    flex: 1 1 220px;
}

/* Ni volver atrás ni abrir el sidebar tienen sentido dentro del panel */
.en-panel-lateral .page-header-nav-btn {
    display: none;
}

/* El título ya está en la cabecera del panel: el header de la página solo se
   queda si trae acciones propias */
.en-panel-lateral .dashboard-greeting-info {
    display: none;
}

.en-panel-lateral .dashboard-greeting:not(:has(.dashboard-greeting-actions)) {
    display: none;
}