/*

 * Móvil: menú de usuario + chips de membresía + panel WAHA compacto.

 * Carga síncrona (no diferida) para ganar a premium-styles / DX.

 *

 * XAF 25.2: menú = `.account-main` dentro de `.account-container`.

 * El backdrop es hermano de `.account-container`. Si el contenedor queda

 * en z-index bajo (p. ej. 2 del header), el backdrop tapa el menú:

 * se ve “partido” y no se puede pulsar Cerrar sesión.

 */



/* ── Menú cuenta Cicumba (móvil) ── */

@media (max-width: 768px) {

    html body .header,

    html body .app .header,

    html body .header-right-side,

    html body .header-right-side .account-container {

        overflow: visible !important;

    }



    /* Subir todo el stacking del header mientras el menú está abierto */

    html body .header:has(.account-container.show-dropdown),

    html body .app .header:has(.account-container.show-dropdown),

    html body .header-right-side:has(.account-container.show-dropdown) {

        z-index: 20060 !important;

    }



    /* El menú debe quedar ENCIMA del backdrop (hermano) */

    html body .header-right-side .account-container.show-dropdown,

    html body .account-container.show-dropdown {

        position: relative !important;

        z-index: 20055 !important;

        overflow: visible !important;

        pointer-events: auto !important;

    }



    html body .account-container:not(.show-dropdown) .account-main {

        display: none !important;

    }



    html body .account-container.show-dropdown .account-main {

        position: fixed !important;

        top: 50% !important;

        left: 50% !important;

        right: auto !important;

        bottom: auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: min(300px, calc(100vw - 28px)) !important;

        min-width: 0 !important;

        max-width: calc(100vw - 28px) !important;

        max-height: min(440px, calc(100dvh - 48px)) !important;

        transform: translate(-50%, -50%) !important;

        z-index: 20055 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        border-radius: 16px !important;

        background: #ffffff !important;

        background-color: #ffffff !important;

        border: 1px solid rgba(90, 155, 128, 0.22) !important;

        box-shadow: 0 16px 40px rgba(18, 32, 26, 0.3) !important;

        padding: 0 !important;

        opacity: 1 !important;

        pointer-events: auto !important;

    }



    /* Backdrop DETRÁS del menú; clic cierra el dropdown */

    html body .account-container.show-dropdown + .modal-backdrop,

    html body .account-container.show-dropdown + .account-modal-backdrop,

    html body .header-right-side > .modal-backdrop,

    html body:has(.account-container.show-dropdown) .account-modal-backdrop {

        display: block !important;

        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;

        height: 100dvh !important;

        z-index: 20040 !important;

        background: rgba(18, 32, 26, 0.5) !important;

        opacity: 1 !important;

        pointer-events: auto !important;

    }



    html body .account-main .account-main-inner {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        width: 100% !important;

        gap: 0 !important;

        background: #ffffff !important;

        background-color: #ffffff !important;

        padding: 0 !important;

        pointer-events: auto !important;

    }



    /* Cabecera: solo avatar + email */

    html body .account-main .user-info-container {

        display: flex !important;

        flex-direction: column !important;

        flex-wrap: nowrap !important;

        align-items: center !important;

        justify-content: flex-start !important;

        text-align: center !important;

        width: 100% !important;

        max-width: none !important;

        gap: 8px !important;

        background: linear-gradient(180deg, #8bbaa5 0%, #a0ccb8 100%) !important;

        padding: 20px 14px 16px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 0 !important;

    }



    html body .account-main .user-info-inner-container {

        width: 100% !important;

        max-width: none !important;

        padding: 0 !important;

        padding-left: 0 !important;

        align-items: center !important;

        text-align: center !important;

    }



    html body .account-main .user-name-container {

        width: 100% !important;

        max-width: none !important;

        padding: 0 !important;

        text-align: center !important;

    }



    html body .account-main .logo-container {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        margin: 0 auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255, 255, 255, 0.95) !important;
        background: #d7ebe2 !important;
        display: block !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body .account-main .logo-container > *,
    html body .account-main .logo-container img,
    html body .account-main .logo-container .dxbl-image,
    html body .account-main .logo-container .dxbl-image img,
    html body .account-main .logo-container .xaf-image {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        -webkit-mask-size: cover !important;
        mask-size: cover !important;
        -webkit-mask-position: center center !important;
        mask-position: center center !important;
        border-radius: 50% !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    html body .account-main .logo-container .xaf-image[style*="background-image"][style*="url("]:not([style*="IImageService"]) {
        -webkit-mask: none !important;
        mask: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    html body .account-main .logo-container:has(img[src]:not([src=""])) > .xaf-image {
        display: none !important;
    }

    html body .account-main .user-name-container .user-name-title {

        color: rgba(255, 255, 255, 0.78) !important;

        font-size: 11px !important;

    }



    html body .account-main .user-name-container .user-name {

        color: #ffffff !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        word-break: break-word !important;

        white-space: normal !important;

        overflow: visible !important;

        text-overflow: unset !important;

        max-width: 100% !important;

        -webkit-line-clamp: unset !important;

        display: block !important;

    }



    /* Acciones sobre fondo blanco (misma tarjeta) */

    html body .account-main .xaf-btn.my-details,

    html body .account-main .my-details,

    html body .account-main button.my-details {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        width: calc(100% - 24px) !important;

        max-width: calc(100% - 24px) !important;

        margin: 12px 12px 6px !important;

        min-height: 40px !important;

        height: auto !important;

        padding: 8px 12px !important;

        border-radius: 999px !important;

        background: #ffffff !important;

        color: #2a5c45 !important;

        -webkit-text-fill-color: #2a5c45 !important;

        border: 1.5px solid rgba(90, 155, 128, 0.45) !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        white-space: normal !important;

        overflow: visible !important;

        text-overflow: unset !important;

        box-sizing: border-box !important;

        position: relative !important;

        z-index: 1 !important;

        pointer-events: auto !important;

        touch-action: manipulation !important;

        cursor: pointer !important;

    }



    html body .account-main .xaf-btn.my-details .dxbl-btn-caption,

    html body .account-main .my-details .dxbl-btn-caption,

    html body .account-main .my-details .dxbl-text,

    html body .account-main .my-details span {

        color: #2a5c45 !important;

        -webkit-text-fill-color: #2a5c45 !important;

        font-size: 13px !important;

        white-space: normal !important;

        overflow: visible !important;

        text-overflow: unset !important;

        max-width: none !important;

        pointer-events: none !important;

    }



    html body .account-main .account-separator {

        width: calc(100% - 24px) !important;

        margin: 4px 12px !important;

        border-top: 1px solid rgba(90, 155, 128, 0.18) !important;

    }



    html body .account-main .xaf-btn.log-off,

    html body .account-main .log-off,

    html body .account-main button.log-off,

    html body .account-main .log-off.dxbl-btn {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: calc(100% - 24px) !important;

        max-width: calc(100% - 24px) !important;

        margin: 4px 12px 14px !important;

        min-height: 44px !important;

        height: auto !important;

        padding: 10px 12px !important;

        border-radius: 999px !important;

        background: #ffffff !important;

        color: #c45050 !important;

        -webkit-text-fill-color: #c45050 !important;

        border: 1.5px solid rgba(196, 80, 80, 0.28) !important;

        font-size: 14px !important;

        font-weight: 600 !important;

        white-space: normal !important;

        box-sizing: border-box !important;

        position: relative !important;

        z-index: 2 !important;

        pointer-events: auto !important;

        touch-action: manipulation !important;

        cursor: pointer !important;

    }



    html body .account-main .log-off .dxbl-btn-caption,

    html body .account-main .log-off .dxbl-text,

    html body .account-main .log-off span {

        pointer-events: none !important;

        color: #c45050 !important;

        -webkit-text-fill-color: #c45050 !important;

    }



    html body .header-right-side .account-container {

        background: transparent !important;

        overflow: visible !important;

        padding: 0 !important;

        width: auto !important;

        height: auto !important;

        min-width: 36px !important;

        min-height: 36px !important;

        pointer-events: auto !important;

        position: relative !important;

    }



    html body .header-right-side .account-container .account-button,

    html body .header-right-side .account-container .dxbl-toolbar-btn {

        background: transparent !important;

        box-shadow: none !important;

        border: none !important;

        border-radius: 50% !important;

        overflow: hidden !important;

        padding: 0 !important;

        width: 36px !important;

        height: 36px !important;

        min-width: 36px !important;

        min-height: 36px !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        position: relative !important;

    }



    html body .header-right-side .account-container .account-button .dxbl-image,

    html body .header-right-side .account-container .account-button img,

    html body .header-right-side .account-container .account-button .dxbl-image img,

    html body .header-right-side .account-container .account-button .xaf-image,

    html body .header-right-side .account-container .dxbl-toolbar-btn .dxbl-image,

    html body .header-right-side .account-container .dxbl-toolbar-btn img,

    html body .header-right-side .account-container .dxbl-toolbar-btn .dxbl-image img,

    html body .header-right-side .account-container .xaf-image {

        width: 36px !important;

        height: 36px !important;

        min-width: 36px !important;

        min-height: 36px !important;

        max-width: 36px !important;

        max-height: 36px !important;

        object-fit: cover !important;

        object-position: center center !important;

        border-radius: 50% !important;

        filter: none !important;

        opacity: 1 !important;

        pointer-events: none !important;

    }



    html body .header-right-side .theme-settings .dxbl-toolbar-btn,

    html body .header-right-side .settings-button,

    html body .header-right-side .dxbl-toolbar-btn.dxbl-btn-light {

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

    }



    /* Panel Vincular WhatsApp: minimal en móvil */

    html body .cwaha-root {

        gap: 0.85rem !important;

        max-width: 100% !important;

        padding-bottom: 0.5rem !important;

    }



    html body .cwaha-hero {

        padding: 0 !important;

        gap: 0.5rem !important;

    }



    html body .cwaha-title {

        font-size: 1.2rem !important;

    }



    html body .cwaha-status,

    html body .cwaha-link {

        padding: 0 !important;

        gap: 0.65rem !important;

    }



    html body .cwaha-me-avatar {

        width: 48px !important;

        height: 48px !important;

    }



    html body .cwaha-qr {

        width: min(168px, 68vw) !important;

    }



    html body .cwaha-qr-placeholder {

        width: min(168px, 68vw) !important;

        height: min(168px, 68vw) !important;

    }



    html body .cwaha-banner {

        padding: 0.35rem 0 !important;

        font-size: 0.78rem !important;

    }

}



/* ── Membresía: chips en rejilla legible (móvil) ── */

@media (max-width: 768px) {

    html body .dxbl-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]),

    html body .xaf-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]),

    html body #main-view-content .dxbl-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) {

        display: flex !important;

        flex-wrap: wrap !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 8px !important;

        row-gap: 8px !important;

        width: 100% !important;

        max-width: 100% !important;

        overflow: visible !important;

        padding: 8px 6px 12px !important;

        box-sizing: border-box !important;

    }



    html body .dxbl-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-membership-btn),

    html body .xaf-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-membership-btn) {

        flex: 1 1 calc(33.33% - 8px) !important;

        width: calc(33.33% - 8px) !important;

        min-width: 88px !important;

        max-width: calc(50% - 6px) !important;

        margin: 0 !important;

        display: flex !important;

    }



    html body .dxbl-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-membership-chat),

    html body .dxbl-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-membership-payments),

    html body .dxbl-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-portal-btn),

    html body .xaf-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-membership-chat),

    html body .xaf-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-membership-payments),

    html body .xaf-toolbar:has([data-action-id="Int_Membresia_Stripe_Plan_Basico"]) .xaf-toolbar-item:has(.stripe-portal-btn) {

        flex: 1 1 calc(50% - 8px) !important;

        width: calc(50% - 8px) !important;

        min-width: calc(50% - 8px) !important;

        max-width: calc(50% - 6px) !important;

    }



    html body button.dxbl-btn.stripe-membership-btn,

    html body button.dxbl-btn.stripe-portal-btn {

        width: 100% !important;

        max-width: 100% !important;

        height: 34px !important;

        min-height: 34px !important;

        max-height: 34px !important;

        padding: 0 10px !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 4px !important;

        border-radius: 999px !important;

        font-size: 11px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

    }



    html body button.dxbl-btn.stripe-membership-btn .dxbl-btn-caption,

    html body button.dxbl-btn.stripe-portal-btn .dxbl-btn-caption {

        display: inline !important;

        font-size: 11px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        max-width: 100% !important;

    }



    html body button.dxbl-btn.stripe-membership-btn::after,

    html body button.dxbl-btn.stripe-portal-btn::after {

        content: none !important;

        display: none !important;

    }



    html body button.dxbl-btn.stripe-membership-btn img,

    html body button.dxbl-btn.stripe-membership-btn .dxbl-image,

    html body button.dxbl-btn.stripe-portal-btn img,

    html body button.dxbl-btn.stripe-portal-btn .dxbl-image {

        width: 12px !important;

        height: 12px !important;

        min-width: 12px !important;

        min-height: 12px !important;

        flex-shrink: 0 !important;

    }

}

/* ── ListViews maestros (Clientes, Rider, Productos…): foto + texto legibles ── */
@media (max-width: 768px) {
    html body #main-view-content .dxbl-grid.cicumba-grid-adaptive-narrow .c-gal-thumb,
    html body #main-view-content .dxbl-grid.cicumba-grid-adaptive-narrow .c-gal-thumb--list,
    html body #main-view-content .dxbl-grid.cicumba-grid-adaptive-narrow .c-gal-thumb--person,
    html body #main-view-content .dxbl-grid.cicumba-producto-list-grid .c-gal-thumb,
    html body #main-view-content .dxbl-grid.cicumba-producto-list-grid .c-gal-thumb--list {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }

    html body #main-view-content .dxbl-grid.cicumba-grid-adaptive-narrow td,
    html body #main-view-content .dxbl-grid.cicumba-producto-list-grid td {
        font-size: 1.12rem !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        color: #1a2e26 !important;
    }

    html body #main-view-content .dxbl-grid.cicumba-grid-adaptive-narrow .dxbl-grid-table tbody tr.dxbl-grid-data-row > td,
    html body #main-view-content .dxbl-grid.cicumba-producto-list-grid .dxbl-grid-table tbody tr.dxbl-grid-data-row > td {
        min-height: 92px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}