/* Capa universal responsive para pantallas de app/pages */
@import url("font-arial-global.css?v=1.2");
@import url("configuracion-spa.css?v=1.0");
@import url("buttons-unified.css");
@import url("mobile-forms-ui.css?v=1.4");
@import url("list-toolbar-buttons.css");
@import url("system-form-buttons.css?v=1.2");
@import url("global-action-buttons.css?v=1.1");
@import url("page-banner-bubble.css");
@import url("mobile-list-header.css");
@import url("mpl-compact-bubble.css");
@import url("mpl-list-views.css");
@import url("mpl-grid-sheet.css");
@import url("mpl-ios-grouped-list.css");

/* Listas del dashboard: barra de filtros fija, registros debajo al scroll */
.rp-fragment:has(.mpl-sticky),
.rp-fragment:has(.proveedores-sticky-top),
.rp-fragment:has(.lc-compras-page),
.rp-fragment:has(.pv-proveedores-page) {
    padding-top: 0;
}

.rp-list-sticky-bar,
.mpl-sticky,
.proveedores-sticky-top,
.rp-fragment .usuarios-container > .usuarios-compact-bubble,
.rp-fragment .usuarios-container > .filter-container:not(.mpl-compact-emptied),
.rp-fragment .cuentas-container > .page-header,
.rp-fragment .lc-compras-page > .mpl-sticky,
.rp-fragment .compras-container > .btn-actions-toolbar {
    position: sticky;
    top: 0;
    z-index: 120;
    flex-shrink: 0;
    isolation: isolate;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Listas con burbuja: scroll aislado en mobile-list-header.css */

.proveedores-phone .proveedores-sticky-top {
    top: 0;
    z-index: 120;
}

/* Misma burbuja que inventario / clientes / facturas */
.proveedores-phone .proveedores-sticky-top {
    margin: var(--app-bubble-mt) var(--app-bubble-x) 0;
    border-radius: var(--app-bubble-radius);
    border: 1px solid var(--app-bubble-border);
    background-color: var(--app-bubble-bg) !important;
    box-shadow: var(--app-bubble-shadow) !important;
}

.rp-fragment .usuarios-container > .filter-container {
    margin-bottom: 0;
    padding-bottom: 10px;
    background-color: #f8fafc !important;
    background-image: none !important;
}

.rp-fragment .cuentas-container > .page-header {
    padding-bottom: 10px;
    margin-bottom: 8px;
    background-color: #f8fafc !important;
    background-image: none !important;
}

.rp-fragment .compras-container > .btn-actions-toolbar {
    padding: 10px 0 12px;
    margin-bottom: 4px;
    background-color: #f8fafc !important;
    background-image: none !important;
}

/* Contenido scrolleable bajo la barra fija */
.mpl-list-body,
.mv-facturas-page .flist,
.cl-clientes-page .cl-list,
.lp-productos-page .lp-grid,
.pv-proveedores-page .pv-list,
.pv-proveedores-page .pv-grid,
.pv-proveedores-page .cl-list,
.pv-proveedores-page .cl-empty,
.pv-proveedores-page .pv-empty,
.proveedores-phone .proveedores-grid,
.proveedores-phone .proveedores-empty,
.usuarios-container .usuarios-cards-container,
.cuentas-container .cuentas-grid,
.cuentas-container .empty-state,
.lc-compras-page .lc-list,
.lc-compras-page .lc-empty,
.compras-container .compras-table-container {
    position: relative;
    z-index: 0;
}

.cl-clientes-page,
.mv-facturas-page,
.lp-productos-page,
.lc-compras-page,
.pv-proveedores-page,
.calc3d-page,
.proveedores-phone {
    overflow-x: clip;
}

/* Dashboard: el scroll va en el listado, no en #appContent (registros no bajo la burbuja) */
#appContent:has(.lp-productos-page),
#appContent:has(.cl-clientes-page),
#appContent:has(.mv-facturas-page),
#appContent:has(.lc-compras-page),
#appContent:has(.pv-proveedores-page),
#appContent:has(.calc3d-page) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#appContent:has(.lp-productos-page) > .rp-fragment,
#appContent:has(.cl-clientes-page) > .rp-fragment,
#appContent:has(.mv-facturas-page) > .rp-fragment,
#appContent:has(.lc-compras-page) > .rp-fragment,
#appContent:has(.pv-proveedores-page) > .rp-fragment,
#appContent:has(.calc3d-page) > .rp-fragment,
#appContent > .lp-productos-page,
#appContent > .cl-clientes-page,
#appContent > .mv-facturas-page,
#appContent > .lc-compras-page,
#appContent > .pv-proveedores-page,
#appContent > .calc3d-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    max-width: none;
    margin: 0;
    width: 100%;
}

#appContent:has(.lp-productos-page) .lp-productos-page,
#appContent:has(.cl-clientes-page) .cl-clientes-page,
#appContent:has(.mv-facturas-page) .mv-facturas-page,
#appContent:has(.lc-compras-page) .lc-compras-page,
#appContent:has(.pv-proveedores-page) .pv-proveedores-page,
#appContent:has(.calc3d-page) .rp-fragment,
#appContent:has(.calc3d-page) .calc3d-page {
    overflow-x: clip;
    overflow-y: hidden;
    height: 100%;
    min-height: 0;
}

#appContent:has(.calc3d-page) .calc3d-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

:root {
    --rp-gap: clamp(10px, 1.2vw, 16px);
    --rp-radius: 12px;
}

/* Contenedor principal de contenido dinamico (desktop shell) */
#dynamic-content,
/* Contenedor principal de contenido dinamico (mobile shell) */
#appContent {
    width: 100%;
}

/* Envoltorio interno inyectado por JS al cargar fragmentos */
.rp-fragment {
    width: 100%;
    max-width: min(1320px, 100%);
    margin: 0 auto;
    padding: var(--rp-gap);
}

/* Tipografia y espaciados fluidos basicos */
.rp-fragment h1,
.rp-fragment h2,
.rp-fragment h3,
.rp-fragment h4 {
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rp-fragment p,
.rp-fragment label,
.rp-fragment td,
.rp-fragment th,
.rp-fragment li,
.rp-fragment input,
.rp-fragment select,
.rp-fragment textarea {
    overflow-wrap: anywhere;
}

/* Enlaces y texto suelto; no en botones de toolbar (ver list-toolbar-buttons.css) */
.rp-fragment a:not(.mpl-ios-row):not(.lc-row):not(.cl-row) {
    overflow-wrap: anywhere;
}

.rp-fragment .mpl-sticky span:not(button span),
.rp-fragment .filter-container > span {
    overflow-wrap: normal;
}

/* Media adaptativa (excluye fotos de tarjetas de inventario) */
.rp-fragment img,
.rp-fragment svg,
.rp-fragment video,
.rp-fragment iframe,
.rp-fragment canvas {
    max-width: 100%;
    height: auto;
}

.rp-fragment .lp-card-img-wrap > img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Iconos Bootstrap dentro de tarjetas/listas del dashboard */
.rp-fragment .lp-card .bi,
.rp-fragment .tx-icon .bi,
.rp-fragment .mpl-title-icon.bi,
.rp-fragment .mpl-filter-pill .bi,
.rp-fragment .mpl-view-btn .bi,
.rp-fragment .mpl-btn-new .bi {
    font-style: normal;
    font-weight: normal !important;
    line-height: 1;
}

/* Formularios adaptables */
.rp-fragment form {
    width: 100%;
}

.rp-fragment input,
.rp-fragment select,
.rp-fragment textarea {
    max-width: 100%;
}

/* Botones de listas: ancho según contenido (no estirar al 100%) */
.rp-fragment .mpl-sticky button,
.rp-fragment .filter-container button,
.rp-fragment .usuarios-container .filter-container button,
.rp-fragment .compras-container .btn-actions-toolbar button {
    max-width: none;
}

/* Tabla responsive universal */
.rp-fragment table {
    width: 100%;
    border-collapse: collapse;
}

.rp-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--rp-radius);
}

.rp-table-scroll > table {
    min-width: 760px;
}

/* Grids flexibles */
.rp-fragment .row,
.rp-fragment [class*='grid'],
.rp-fragment [class*='cards'],
.rp-fragment [class*='list'] {
    max-width: 100%;
}

/* Modales dentro de fragmentos */
.rp-fragment .modal,
.rp-fragment .modal-content,
.rp-fragment .modal-dialog,
.rp-fragment [class*='modal-content'] {
    max-width: min(96vw, 980px);
}

/* Desktop amplio */
@media (min-width: 1200px) {
    .rp-fragment {
        padding: 18px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .rp-fragment {
        padding: 12px;
    }
}

/* Telefono */
@media (max-width: 768px) {
    .rp-fragment {
        padding: 10px;
    }

    .rp-fragment .rp-stack-mobile,
    .rp-fragment .row,
    .rp-fragment [class*='row'] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .rp-fragment .rp-full-mobile,
    .rp-fragment [class*='col-'],
    .rp-fragment [class*='column'] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rp-fragment .rp-scroll-x-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Segunda pasada: neutralizar anchos inline que rompen en movil */
    .rp-fragment [style*='min-width:'] {
        min-width: 0 !important;
    }

    .rp-fragment [style*='max-width: 1200px'],
    .rp-fragment [style*='max-width: 1400px'],
    .rp-fragment [style*='max-width:1200px'],
    .rp-fragment [style*='max-width:1400px'] {
        max-width: 100% !important;
    }

    .rp-fragment [style*='grid-template-columns: 320px 1fr'],
    .rp-fragment [style*='grid-template-columns:320px 1fr'],
    .rp-fragment [style*='grid-template-columns: 300px 1fr'],
    .rp-fragment [style*='grid-template-columns:300px 1fr'] {
        grid-template-columns: 1fr !important;
    }

    .rp-fragment [style*='display: flex'][style*='gap: 24px'],
    .rp-fragment [style*='display:flex'][style*='gap:24px'] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .rp-fragment table {
        font-size: 13px;
    }
}

/* Muy pequeno */
@media (max-width: 420px) {
    .rp-fragment {
        padding: 8px;
    }
}

/* Formulario editar cliente en SPA: sin margen superior (topbar a borde) */
#appContent .ec-page:not(.edit-form-page) {
    margin-top: 4px;
}

#appContent .ec-page .ec-header {
    position: sticky;
    top: 0;
    z-index: 30;
}

#appContent .ec-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#appContent .ec-page .ec-body-scroll {
    flex: 1 1 auto;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 12px;
}

#appContent .ec-page .ec-footer {
    position: sticky;
    bottom: 0;
    z-index: 40;
}