/* static/css/core/desktop_header.css */
/* Arquitetura de cabeçalho desktop, títulos elegantes e botões de ação (>= 768px) */

@media (min-width: 768px) {
    /* 1. Header Desktop: Limpo, elegante com linha sutil */
    .app-mobile-header-brecha:not(.md\:hidden):not(.lg\:hidden):not(.hidden) {
        background: transparent !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.85rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 1.25rem !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: static !important;
        width: 100% !important;
    }

    .app-mobile-header-brecha.md\:hidden {
        display: none !important;
    }

    .app-mobile-header-brecha::before,
    .app-mobile-header-brecha::after {
        display: none !important;
    }

    html.dark .app-mobile-header-brecha:not(.md\:hidden):not(.lg\:hidden):not(.hidden) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* 2. Títulos no Modo Claro Desktop */
    html:not(.dark) .app-mobile-header-brecha h1,
    html:not(.dark) .app-mobile-header-brecha h1 *,
    html:not(.dark) .app-mobile-header-brecha h2,
    html:not(.dark) .app-mobile-header-brecha h3,
    html:not(.dark) .app-mobile-header-brecha .header-title-text {
        color: #0f172a !important;
        text-shadow: none !important;
    }

    /* Subtítulos no Modo Claro Desktop */
    html:not(.dark) .app-mobile-header-brecha p:not([class*="badge"]),
    html:not(.dark) .app-mobile-header-brecha p:not([class*="badge"]) span:not([class*="badge"]):not([class*="purple"]):not([class*="bg-"]):not([class*="text-purple"]) {
        color: #64748b !important;
        text-shadow: none !important;
    }

    /* 3. Títulos no Modo Escuro Desktop */
    html.dark .app-mobile-header-brecha h1,
    html.dark .app-mobile-header-brecha h1 *,
    html.dark .app-mobile-header-brecha h2,
    html.dark .app-mobile-header-brecha h3,
    html.dark .app-mobile-header-brecha .header-title-text {
        color: #ffffff !important;
        text-shadow: none !important;
    }

    /* Subtítulos no Modo Escuro Desktop */
    html.dark .app-mobile-header-brecha p:not([class*="badge"]),
    html.dark .app-mobile-header-brecha p:not([class*="badge"]) span:not([class*="badge"]):not([class*="purple"]):not([class*="bg-"]):not([class*="text-purple"]) {
        color: #94a3b8 !important;
        text-shadow: none !important;
    }

    /* 4. Avatar do Título no Desktop (.header-icon-box) */
    .app-mobile-header-brecha .header-icon-box,
    .header-icon-box {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        border-radius: 0.875rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: linear-gradient(135deg, var(--cor-destaque, #9D38DC) 0%, #770ABC 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 4px 14px -2px rgba(var(--cor-destaque-rgb, 157, 56, 220), 0.38) !important;
        color: #ffffff !important;
    }

    .app-mobile-header-brecha .header-icon-box i,
    .app-mobile-header-brecha .header-icon-box svg,
    .header-icon-box i,
    .header-icon-box svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
        width: 1.35rem !important;
        height: 1.35rem !important;
    }

    /* 5. A Cortina no Desktop */
    .app-mobile-cortina {
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 2rem !important;
        min-height: auto !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .dark .app-mobile-cortina {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 6. Botões de ação no cabeçalho Desktop */
    .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]) {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08) !important;
        transition: all 0.2s ease !important;
    }
    .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]):hover {
        background-color: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: var(--cor-destaque, #9D38DC) !important;
        transform: translateY(-1px);
    }
    .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]) i,
    .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]) svg {
        color: #475569 !important;
        stroke: #475569 !important;
    }
    .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]):hover i,
    .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]):hover svg {
        color: var(--cor-destaque, #9D38DC) !important;
        stroke: var(--cor-destaque, #9D38DC) !important;
    }

    html.dark .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]) {
        background-color: #1e293b !important;
        border: 1px solid #334155 !important;
        color: #cbd5e1 !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
    }
    html.dark .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]):hover {
        background-color: #334155 !important;
        border-color: #475569 !important;
        color: #ffffff !important;
    }
    html.dark .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]) i,
    html.dark .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]) svg {
        color: #cbd5e1 !important;
        stroke: #cbd5e1 !important;
    }
    html.dark .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]):hover i,
    html.dark .app-mobile-header-brecha .btn-header-mobile:not([class*="md:bg-"]):not([class*="bg-emerald"]):not([class*="bg-purple"]):hover svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }
}