/* DTO Eventos V2 · 2.9.0 · Optimización Desktop
 * Solo actúa desde 981px. La experiencia móvil/PWA se mantiene intacta.
 */

@media (min-width:981px) {
    :root {
        --dto-sidebar-width:240px;
        --dto-topbar-height:68px;
    }

    /* Seguridad: ningún componente móvil participa del layout desktop. */
    .dto-mobile-drawer,
    .dto-mobile-drawer-overlay,
    .dto-app-bottom-nav,
    .dto-mobile-topbar-button {
        display:none !important;
    }

    body.dto-v2-app {
        overflow-x:hidden;
    }

    .dto-app-sidebar {
        width:var(--dto-sidebar-width);
        padding:18px 14px 16px;
    }

    .dto-app-brand {
        gap:10px;
        padding:0 8px 18px;
    }
    .dto-app-brand img {
        width:72px;
        max-height:36px;
    }
    .dto-app-brand-copy strong { font-size:13px; }
    .dto-app-brand-copy span { font-size:10px; }

    .dto-app-nav-title {
        padding:11px 10px 6px;
        font-size:9px;
    }
    .dto-app-nav-link {
        min-height:42px;
        padding:0 12px;
        border-radius:11px;
        font-size:13px;
    }

    .dto-app-stage {
        margin-left:var(--dto-sidebar-width);
        min-width:0;
    }

    .dto-app-topbar {
        height:var(--dto-topbar-height);
        min-height:var(--dto-topbar-height);
        padding:0 28px;
        background:rgba(245,247,250,.96);
        box-shadow:0 1px 0 rgba(226,232,240,.82);
    }
    .dto-app-topbar-left {
        flex:1 1 auto;
        min-width:0;
    }
    .dto-app-topbar-title {
        font-size:17px;
        line-height:1.15;
    }
    .dto-app-topbar-subtitle {
        max-width:min(920px,65vw);
        margin-top:2px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:10px;
    }
    .dto-app-topbar-actions {
        flex:0 0 auto;
    }
    .dto-icon-button {
        width:40px;
        height:40px;
    }
    .dto-profile-trigger {
        min-height:42px;
    }

    .dto-app-main {
        padding:24px 28px 48px;
    }
    .dto-app-content {
        max-width:1560px;
    }

    .dto-page-heading {
        margin-bottom:18px;
    }
    .dto-page-heading h1 {
        font-size:26px;
    }
    .dto-page-heading p {
        margin-top:5px;
        font-size:13px;
    }

    /* Dashboard: más información visible sin parecer una interfaz móvil ampliada. */
    .dto-dashboard-filter-card {
        margin-bottom:16px;
        padding:18px;
    }
    .dto-dashboard-filter-top {
        margin-bottom:14px;
    }
    .dto-dashboard-types {
        margin-bottom:14px;
    }
    .dto-kpi-grid {
        gap:12px;
        margin-bottom:16px;
    }
    .dto-kpi-card {
        min-height:112px;
        padding:17px 18px;
    }
    .dto-kpi-icon {
        width:44px;
        height:44px;
    }
    .dto-kpi-copy strong {
        font-size:27px;
    }
    .dto-dashboard-analytics-grid,
    .dto-dashboard-report-grid {
        gap:16px;
    }

    /* Gestión de eventos */
    .dto-events-kpis {
        gap:10px;
        margin-bottom:16px;
    }
    .dto-events-kpi {
        min-height:94px;
        padding:16px;
    }
    .dto-events-toolbar {
        padding:13px 16px;
    }
    .dto-events-table th {
        padding:11px 16px;
    }
    .dto-events-table td {
        padding:13px 16px;
    }
    .dto-event-drawer {
        width:min(590px,42vw);
    }
    .dto-event-drawer-head {
        padding:20px 22px 16px;
    }
    .dto-event-drawer-body {
        padding:20px 22px;
    }
    .dto-event-drawer-footer {
        padding:14px 22px;
    }

    /* Notificaciones: lectura más cómoda y densa. */
    .dto-notifications-page {
        gap:18px;
    }
    .dto-notification-layout {
        grid-template-columns:minmax(0,1.8fr) minmax(310px,.72fr);
        gap:18px;
    }
    .dto-notification-list-card,
    .dto-notification-preferences-card {
        padding:20px;
    }
    .dto-notification-status-card {
        padding:16px 18px;
    }
    .dto-notification-item {
        padding:13px;
    }
    .dto-notification-preferences-card {
        top:calc(var(--dto-topbar-height) + 18px);
    }

    /* Drawers / overlays siempre deben respetar el viewport desktop. */
    .dto-event-drawer,
    .dto-business-drawer {
        max-height:100dvh;
    }
}

@media (min-width:1440px) {
    .dto-app-main {
        padding-left:34px;
        padding-right:34px;
    }
    .dto-app-content {
        max-width:1640px;
    }
}

/* Tema oscuro: topbar desktop mantiene contraste y profundidad. */
@media (min-width:981px) {
    html[data-dto-theme="dark"] .dto-app-topbar {
        background:rgba(15,24,37,.96);
        box-shadow:0 1px 0 rgba(45,58,77,.9);
    }
}