/* Compatibilidad móvil global: navegación, contenido, controles y modales. */
@media (max-width: 768px) {
    html,
    body {
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .guild-accounts-toolbar,
    .guild-accounts-filter-group,
    .guild-accounts-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .guild-accounts-filter-group .search-box-users-compact,
    .guild-accounts-filter-group .toolbar-select,
    .guild-accounts-filter-group .custom-select,
    .guild-accounts-actions .accounts-sort-group .toolbar-select,
    .guild-accounts-actions .accounts-sort-group .custom-select {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .guild-accounts-list .account-card-compact,
    .guild-account-user-accounts .account-card-compact {
        grid-template-columns: 1fr;
    }

    .guild-join-hunt-sections {
        grid-template-columns: 1fr;
    }

    .guild-join-application-summary,
    .guild-join-application-details {
        grid-template-columns: 1fr;
    }

    .guild-leave-summary-grid,
    .guild-leave-card-links,
    .guild-leave-card-timeline,
    .guild-leave-card-execution {
        grid-template-columns: 1fr;
    }

    .guild-leave-summary-grid span {
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    }

    .guild-leave-summary-grid span:last-child {
        border-bottom: 0;
    }

    .guild-leave-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .guild-leave-card-actions {
        justify-content: stretch;
    }

    .guild-leave-card-actions .btn-action {
        width: 100%;
        justify-content: center;
    }

    .guild-accounts-list .account-card-compact .entity-card-main,
    .guild-account-user-accounts .account-card-compact .entity-card-main,
    .guild-accounts-list .account-card-compact .entity-card-details,
    .guild-account-user-accounts .account-card-compact .entity-card-details,
    .guild-accounts-list .account-card-compact .entity-card-actions,
    .guild-account-user-accounts .account-card-compact .entity-card-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .guild-accounts-list .account-card-compact .entity-card-actions,
    .guild-account-user-accounts .account-card-compact .entity-card-actions {
        justify-self: start;
    }

    .guild-accounts-list .account-card-compact .entity-card-details,
    .guild-account-user-accounts .account-card-compact .entity-card-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guild-join-actions,
    .guild-join-application-actions {
        justify-content: stretch;
    }

    .guild-join-actions .btn-action,
    .guild-join-actions .btn-epic,
    .guild-join-application-actions .btn-action {
        width: 100%;
        justify-content: center;
    }

    .app-shell {
        min-height: 100dvh;
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .app-sidebar {
        display: contents;
        position: relative;
        top: auto;
        z-index: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0;
        gap: 0;
        overflow: visible;
        border-right: 0;
        border-bottom: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }

    .mobile-sticky-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 160;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding:
            max(12px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            10px
            max(14px, env(safe-area-inset-left));
        overflow: hidden;
        border-bottom: 1px solid rgba(245, 158, 11, 0.18);
        background: rgba(11, 13, 18, 0.96);
        backdrop-filter: blur(16px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    }

    .sidebar-brand {
        gap: 10px;
    }

    .sidebar-brand-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .sidebar-brand-title {
        font-size: 1.22rem;
    }

    .sidebar-brand-subtitle {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 210px;
    }

    .sidebar-context-btn {
        width: 44px;
        height: 44px;
    }

    .sidebar-scroll {
        flex: 0 0 auto;
        display: flex;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 8px;
        margin: 0;
        scrollbar-width: none;
        scroll-padding-inline: 2px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
    }

    .sidebar-scroll::-webkit-scrollbar {
        display: none;
    }

    .sidebar-section {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .sidebar-label {
        display: none;
    }

    .sidebar-nav-group {
        flex-direction: row;
        gap: 8px;
    }

    .sidebar-link {
        width: auto;
        min-width: max-content;
        min-height: 44px;
        padding: 10px 13px;
        border-radius: 14px;
        font-size: 0.86rem;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .sidebar-link i {
        width: auto;
        min-width: 18px;
    }

    .sidebar-bot-accounts-menu {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border-left: 0;
    }

    .sidebar-bot-accounts-menu[hidden] {
        display: none;
    }

    .sidebar-bot-account-link {
        width: auto;
        min-width: 170px;
        min-height: 44px;
        padding: 6px 10px;
        scroll-snap-align: start;
    }

    .sidebar-footer {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: var(--mobile-header-height, 127px);
        padding:
            10px
            max(14px, env(safe-area-inset-right))
            10px
            max(14px, env(safe-area-inset-left));
        border-top-color: rgba(255, 255, 255, 0.06);
        background: rgba(11, 13, 18, 0.96);
        backdrop-filter: none;
    }

    .sidebar-user-card {
        padding: 9px 11px;
        border-radius: 18px;
        gap: 10px;
    }

    .sidebar-user-avatar-ring {
        width: 38px;
        height: 38px;
    }

    .sidebar-user-name,
    .sidebar-user-role {
        max-width: none;
    }

    .app-main {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding:
            14px
            max(14px, env(safe-area-inset-right))
            max(14px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
        gap: 14px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    button,
    input,
    select,
    textarea,
    [role="button"] {
        touch-action: manipulation;
    }

    .hero-grid {
        gap: 12px;
    }

    .hero-card,
    .hero-stat-card {
        padding: 18px;
        border-radius: 20px;
    }

    .hero-card h1 {
        font-size: 2rem;
        line-height: 1.12;
    }

    .hero-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .hero-stat-value {
        font-size: 2.2rem;
    }

    .hero-card,
    .hero-stat-card,
    .seccion {
        padding: 18px;
        border-radius: 22px;
    }

    .main-container,
    .seccion.activa {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .toolbar,
    .users-toolbar,
    .header-tools {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .accounts-toolbar-filter-group,
    .users-toolbar-actions,
    .accounts-toolbar-actions,
    .accounts-sort-group {
        width: 100%;
        flex: 1 1 auto;
        align-items: stretch;
        margin-left: 0;
    }

    .accounts-toolbar-filter-group,
    .accounts-sort-group {
        flex-direction: column;
    }

    .accounts-sort-label {
        white-space: normal;
    }

    .toolbar .search-box,
    .users-toolbar .search-box-users,
    #seccion-gremios .search-box-users-compact {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .toolbar-select,
    .custom-select,
    #seccion-gremios .users-toolbar-actions .custom-select {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .toolbar-select.custom-select-source,
    .custom-select-source {
        position: absolute !important;
        width: 1px !important;
        max-width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .users-toolbar-actions {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .whatsapp-status-card .guild-form-card-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .whatsapp-status-card .guild-form-card-header > :nth-child(2) {
        flex: 1 1 calc(100% - 58px);
        min-width: 0;
    }

    .whatsapp-card-actions {
        width: 100%;
        margin-left: 0;
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .whatsapp-card-actions .toolbar-order-btn {
        flex: 0 0 48px;
    }

    .whatsapp-card-actions .whatsapp-inline-btn {
        width: auto;
        min-width: 0;
        flex: 1 1 160px;
    }

    #seccion-gremios .users-toolbar-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    #seccion-gremios .users-toolbar-actions .custom-select {
        grid-column: 1;
    }

    #seccion-gremios .users-toolbar-actions .toolbar-order-btn {
        grid-column: 2;
    }

    #btnNuevoGremio {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .users-toolbar-actions > button,
    .accounts-toolbar-actions > button,
    .btn-action,
    .btn-epic {
        min-width: 0;
        min-height: 42px;
        height: auto;
        padding: 10px 14px;
        border-radius: 15px;
        font-size: 0.86rem;
        gap: 8px;
        line-height: 1.15;
    }

    .btn-action i,
    .btn-epic i {
        font-size: 0.95rem;
    }

    .users-toolbar-actions > button,
    .accounts-toolbar-actions > button {
        width: auto;
        flex: 0 1 auto;
    }

    #btnOrdenGremios,
    .toolbar-order-btn {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
        padding: 0 !important;
        border-radius: 16px !important;
        gap: 0;
    }

    #btnNuevoGremio {
        min-width: 0 !important;
        width: auto !important;
        max-width: 132px;
        height: 38px !important;
        min-height: 38px !important;
        flex: 0 1 auto !important;
        padding: 8px 12px !important;
        border-radius: 13px !important;
        font-size: 0.78rem !important;
        gap: 6px !important;
        box-shadow: 0 8px 16px rgba(245, 158, 11, 0.12);
    }

    #btnNuevoGremio i {
        font-size: 0.78rem !important;
    }

    .users-list-viewport,
    #accountsListViewport,
    #seccion-estadisticas.activa,
    #seccion-whatsapp.activa {
        max-height: none;
        height: auto;
        overflow: visible;
    }

    .guild-hunt-sunday-balance-header,
    .guild-hunt-sunday-balance-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .users-access-card {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .users-access-dashboard {
        overflow: visible;
    }

    .entity-card {
        padding: 15px;
        gap: 14px;
        border-radius: 18px;
    }

    .entity-card-main {
        gap: 12px;
    }

    .entity-card-badge {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .entity-card-details {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .entity-card-actions {
        width: 100%;
        justify-content: stretch;
        gap: 8px;
    }

    .entity-card-actions .btn-action {
        flex: 1 1 0;
        min-height: 40px;
        padding: 8px 10px;
    }

    .access-user-group,
    .access-account-card {
        border-radius: 18px;
    }

    .access-account-card,
    .account-card,
    .access-user-card {
        grid-template-columns: 1fr;
    }

    .access-account-details,
    .access-user-details {
        grid-template-columns: 1fr;
    }

    #listaCuentas .account-card {
        align-items: stretch;
    }

    #listaCuentas .account-card-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #listaCuentas .account-card-details > .entity-card-detail {
        align-items: flex-start;
        min-height: 66px;
        padding: 10px 12px;
        border: 1px solid rgba(148, 163, 184, 0.10);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.025);
        text-align: left;
    }

    #listaCuentas .account-card-details > .entity-card-detail > * {
        width: 100%;
    }

    #listaCuentas .account-card-details .entity-card-pill {
        width: auto;
    }

    #listaCuentas .account-card-details > .account-card-notes {
        grid-column: 1 / -1;
        min-height: 0;
    }

    #listaCuentas .account-card-notes .entity-card-detail-value {
        overflow-wrap: anywhere;
    }

    .collector-producer-card .collector-config-grid {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .collector-producer-card .collector-config-grid > * {
        min-width: 0;
    }

    .guild-form-grid-levels,
    .guild-hunt-levels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guild-whatsapp-group-row {
        padding: 14px;
    }

    .reports-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .reports-controls-card,
    .reports-actions-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .reports-calendar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .reports-calendar-weekdays,
    .reports-calendar-grid,
    .reports-actions-stack {
        width: 100%;
        min-width: 0;
    }

    .reports-calendar-day {
        min-width: 0;
    }

    .reports-actions-stack {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
        justify-self: stretch;
    }

    .reports-action-btn,
    .reports-manual-export-btn {
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .stats-filter-bar,
    .stats-kpi-grid,
    .stats-guild-item {
        grid-template-columns: 1fr;
    }

    .stats-calendar-field,
    .stats-calendar-dropdown,
    .stats-calendar-trigger {
        width: 100%;
        max-width: none;
    }

    .stats-calendar-popover {
        left: 0;
        right: auto;
        width: min(100%, 330px);
    }

    .modal-overlay {
        align-items: stretch;
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
        overscroll-behavior: contain;
    }

    .modal-content,
    .guild-modal-content,
    .access-user-modal-content,
    .account-profile-modal-content,
    .alta-cuenta-modal-content,
    .report-edit-modal-content,
    #modalMensaje .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 20px !important;
    }

    .guild-modal-content,
    .access-user-modal-content,
    .account-profile-modal-content,
    .alta-cuenta-modal-content,
    .report-edit-modal-content {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .guild-modal-form-shell,
    .access-user-modal-form-shell,
    .account-profile-modal-form-shell,
    .alta-cuenta-modal-form-shell {
        width: 100%;
        min-width: 0;
    }

    .guild-form-layout,
    .guild-form-grid,
    .guild-form-grid-two,
    .access-user-layout,
    .account-profile-layout,
    .alta-cuenta-layout {
        grid-template-columns: 1fr !important;
        width: 100%;
        min-width: 0;
    }

    .guild-form-card,
    .auth-field,
    .auth-field input,
    .auth-field textarea,
    .auth-field select,
    .custom-select,
    .custom-select-trigger {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .modal-header,
    .guild-modal-header,
    .access-user-modal-header {
        padding: 16px !important;
        width: 100%;
        margin: 0 !important;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(245, 158, 11, 0.24);
    }

    .modal-header h2,
    .guild-modal-header h2,
    .access-user-modal-header h2,
    #modalMensaje h3 {
        font-size: 1.1rem !important;
        line-height: 1.25;
    }

    .modal-body,
    .guild-modal-body,
    .access-user-modal-body,
    .account-profile-modal-body,
    .alta-cuenta-modal-body {
        padding: 16px !important;
    }

    .modal-buttons,
    .guild-modal-actions,
    .access-user-modal-actions,
    .password-modal-actions,
    #modalMensaje .modal-buttons {
        padding: 14px 16px 16px !important;
        width: 100%;
        margin: 0 !important;
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 10px;
        border-top: 1px solid rgba(245, 158, 11, 0.24);
    }

    .modal-buttons button,
    .guild-modal-actions button,
    .access-user-modal-actions button,
    .password-modal-actions button {
        flex: 1 1 100%;
        min-height: 42px;
        padding: 10px 14px;
        font-size: 0.86rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
    }

    .guild-fdg-report-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .guild-fdg-report-row-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .app-main {
        padding: 10px;
    }

    .hero-grid {
        display: grid;
        gap: 10px;
    }

    .hero-grid > .hero-stat-card {
        display: none;
    }

    .hero-grid.is-reports-hero > .hero-reportes-summary-card {
        display: block;
    }

    .hero-reportes-primary-column {
        grid-template-rows: auto;
        gap: 10px;
    }

    .hero-reportes-primary-column > .hero-card {
        min-height: 0;
        padding: 14px;
    }

    .hero-eyebrow {
        margin-bottom: 6px;
    }

    .hero-card h1 {
        margin-bottom: 0;
        font-size: clamp(1.35rem, 8vw, 1.75rem);
    }

    .hero-description {
        display: none;
    }

    .seccion {
        padding: 14px;
        border-radius: 18px;
    }

    .sidebar-link span {
        font-size: 0.82rem;
    }

    .entity-card-title {
        font-size: 1rem;
    }

    .guild-form-grid-levels,
    .guild-hunt-levels {
        grid-template-columns: 1fr;
    }

    .guild-hunt-command-parts {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sign"
            "command"
            "debt"
            "regular";
    }

    .guild-hunt-command-sign {
        width: 92px;
    }

    .btn-action,
    .btn-epic,
    .reports-action-btn,
    .reports-manual-export-btn {
        min-height: 40px;
        padding: 9px 12px;
        border-radius: 14px;
        font-size: 0.82rem;
    }

    .entity-card-actions .btn-action {
        min-height: 38px;
        padding: 8px;
    }
}

@media (max-width: 560px) {
    #listaCuentas .account-card-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .mobile-sticky-header {
        gap: 6px;
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: 6px;
    }

    .sidebar-brand-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .sidebar-brand-subtitle,
    .hero-description,
    .hero-grid > .hero-stat-card {
        display: none;
    }

    .hero-grid.is-reports-hero > .hero-reportes-summary-card {
        display: block;
    }

    .sidebar-scroll {
        padding-bottom: 2px;
    }

    .sidebar-link {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .sidebar-footer {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .sidebar-user-card {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .sidebar-user-avatar-ring {
        width: 34px;
        height: 34px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-reportes-primary-column > .hero-card {
        min-height: 0;
        padding: 14px 16px;
    }

    .hero-eyebrow {
        margin-bottom: 5px;
    }

    .hero-card h1 {
        margin-bottom: 0;
        font-size: 1.55rem;
    }
}

@media (max-width: 768px), (max-height: 640px) {
    .auth-overlay {
        align-items: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        padding:
            max(16px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
        overscroll-behavior: contain;
    }

    .auth-card {
        width: min(460px, 100%);
        margin: auto;
        padding: clamp(20px, 6vw, 30px);
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .auth-card {
        padding: 18px;
        border-radius: 20px;
    }

    .auth-brand {
        gap: 10px;
        margin-bottom: 12px;
    }

    .auth-brand-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .auth-card h2 {
        margin-bottom: 6px;
        font-size: 1.3rem;
    }

    .auth-texto {
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .auth-field {
        gap: 6px;
        margin-bottom: 10px;
    }

    .auth-field input,
    .auth-field select {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .auth-submit {
        min-height: 46px;
    }
}

@media (max-width: 768px) {
    #modalGremio .guild-modal-body {
        padding: 0 !important;
    }

    .guild-modal-tabs {
        padding: 8px 12px 0;
        margin: 0;
    }

    .guild-modal-tab {
        min-height: 40px;
        padding: 0 13px;
    }

    #modalGremio .guild-modal-panel.is-active {
        padding: 16px;
    }
}