/**
 * EDUCARE CENTRAL - Custom Branding Styles
 * Paleta: Teal (#00857C) e Amarelo Solar (#FFC700)
 */

/* Destaque de pesquisa (listagens) */
/* Densidade (toggle em header) */
body.density-compact main th,
body.density-compact main td {
    padding: 0.4rem 0.5rem !important;
}
body.density-compact main .p-6 {
    padding: 0.75rem !important;
}

/* Área principal: evita overflow horizontal por filhos em flex */
.main-content {
    min-width: 0;
}
main {
    min-width: 0;
}

/**
 * Compat: o painel tailwind.min.css (build parcial) não gera w-auto, min-w-0, sm:w-auto, etc.
 * Sem isto, classes como "w-full sm:w-auto" deixam os botões esticados em qualquer ecrã.
 */
.w-auto {
    width: auto;
}
.min-w-0 {
    min-width: 0;
}
@media (min-width: 640px) {
    .sm\:w-auto {
        width: auto;
    }
    .sm\:min-w-0 {
        min-width: 0;
    }
}
#sidebar-user-menu-panel {
    z-index: 100;
    max-height: min(70vh, 22rem);
}
.sidebar-collapsed .sidebar-user-chevron {
    display: none;
}
.sidebar-collapsed #sidebar-user-menu-btn {
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem;
}
.sidebar-collapsed #sidebar-user-menu-btn > .flex {
    width: auto;
    justify-content: center;
}
.sidebar-collapsed #sidebar-user-menu-btn .ml-3 {
    margin-left: 0;
}
/* Sidebar recolhida: ações (modo escuro / sair) mostram só ícone centrado */
.sidebar-collapsed .sidebar-user-actions .sidebar-text {
    display: none;
}
.sidebar-collapsed .sidebar-user-actions > * {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.table-responsive,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

mark.search-highlight {
    background-color: #fef3c7;
    color: inherit;
    padding: 0 0.05em;
    border-radius: 2px;
}
html[data-theme="dark"] mark.search-highlight,
.dark mark.search-highlight {
    background-color: rgba(0, 168, 154, 0.25);
    color: inherit;
}

:root {
    --educare-teal: #00857C;
    --educare-teal-light: #00A89A;
    --educare-teal-dark: #006B63;
    --educare-yellow: #FFC700;
    --educare-yellow-light: #FFD84D;
    --educare-yellow-dark: #E6B300;
    --educare-bg-soft: #F5F9F9;
    --educare-gray: #2D3748;
}

/* Background suave geral */
body {
    background-color: var(--educare-bg-soft);
    min-height: 100vh;
}

/* Override Tailwind bg-gray-50 */
.bg-gray-50 {
    background-color: var(--educare-bg-soft) !important;
}

/* Gradiente Institucional */
.gradient-educare {
    background: linear-gradient(135deg, var(--educare-teal) 0%, var(--educare-teal-light) 100%);
}

.gradient-educare-vertical {
    background: linear-gradient(180deg, var(--educare-teal) 0%, var(--educare-teal-dark) 100%);
}

.gradient-educare-diagonal {
    background: linear-gradient(135deg, var(--educare-teal-dark) 0%, var(--educare-teal) 50%, var(--educare-teal-light) 100%);
}

/* Glassmorphism sutil */
.glass-effect {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-effect-active {
    background: rgba(255, 255, 255, 0.25);
    border-left: 4px solid var(--educare-yellow);
}

/* Cards modernos */
.card-modern {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(0, 133, 124, 0.07);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(0, 133, 124, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-modern:hover {
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(0, 133, 124, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 133, 124, 0.12);
}

.card-border-teal {
    border-top: 3px solid rgba(0, 133, 124, 0.35) !important;
}

.card-border-yellow {
    border-top: 3px solid rgba(255, 199, 0, 0.55) !important;
}

/* ============================================
   DASHBOARD — UI suave
   ============================================ */

.dashboard-page {
    animation: fadeIn 0.45s ease-out;
}

.dashboard-welcome {
    padding: 0.25rem 0 0.5rem;
}

.dashboard-welcome h1 {
    letter-spacing: -0.02em;
}

.dashboard-welcome p {
    color: #64748b;
}

.dashboard-unit-select {
    border: 1px solid rgba(0, 133, 124, 0.15);
    border-radius: 12px;
    background: #fff;
    padding: 0.5rem 0.875rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-unit-select:focus {
    border-color: var(--educare-teal);
    box-shadow: 0 0 0 3px rgba(0, 133, 124, 0.1);
    outline: none;
}

.dashboard-stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fcfb 100%);
    border: 1px solid rgba(0, 133, 124, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 20px rgba(0, 133, 124, 0.06);
}

.dashboard-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--educare-teal) 0%, var(--educare-teal-light) 100%);
    opacity: 0.85;
}

.dashboard-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 133, 124, 0.11);
    border-color: rgba(0, 133, 124, 0.14);
}

.dashboard-stat-card .stat-label {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
}

.dashboard-stat-card .stat-value {
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.dashboard-stat-card .icon-circle {
    border-radius: 14px;
    padding: 0.875rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .dashboard-stat-card {
        padding: 0.85rem 0.9rem;
    }
    .dashboard-stat-card .flex.items-center {
        gap: 0.5rem;
    }
    .dashboard-stat-card .icon-circle {
        padding: 0.45rem;
        border-radius: 10px;
    }
    .dashboard-stat-card .icon-circle svg,
    .dashboard-stat-card .icon-circle .icon-xl {
        width: 1.15rem !important;
        height: 1.15rem !important;
    }
    .dashboard-stat-card .stat-label {
        font-size: 0.68rem;
        line-height: 1.25;
        word-break: break-word;
    }
    .dashboard-stat-card .stat-value {
        font-size: 1.25rem;
    }
}

/* Secretaria + geral: tabelas em mobile */
@media (max-width: 768px) {
    .overflow-x-auto table {
        font-size: 0.8125rem;
    }
    .card-modern .flex.flex-col.sm\:flex-row {
        align-items: stretch;
    }
}

.dashboard-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
}

.dashboard-module-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 18px;
    padding: 1.25rem 1.35rem 1.15rem;
    background: linear-gradient(160deg, #ffffff 0%, #f9fbfb 100%);
    border: 1px solid rgba(0, 133, 124, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px rgba(0, 133, 124, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dashboard-module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 133, 124, 0.1);
    border-color: rgba(0, 133, 124, 0.14);
}

.dashboard-module-card .module-icon {
    border-radius: 14px;
    padding: 0.625rem;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.dashboard-module-card .module-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.dashboard-module-card .module-desc {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0.625rem 0 1rem;
    flex: 1;
}

.dashboard-module-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    transition: background-color 0.2s ease, color 0.2s ease;
    align-self: flex-start;
}

.dashboard-module-blue .module-action { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.dashboard-module-blue .module-icon { background: rgba(59, 130, 246, 0.12); color: #3b82f6; border-color: rgba(59, 130, 246, 0.22); }
.dashboard-module-green .module-action { background: rgba(16, 185, 129, 0.1); color: #059669; }
.dashboard-module-green .module-icon { background: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.22); }
.dashboard-module-purple .module-action { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
.dashboard-module-purple .module-icon { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; border-color: rgba(139, 92, 246, 0.22); }
.dashboard-module-orange .module-action { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.dashboard-module-orange .module-icon { background: rgba(249, 115, 22, 0.12); color: #f97316; border-color: rgba(249, 115, 22, 0.22); }
.dashboard-module-amber .module-action { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.dashboard-module-amber .module-icon { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border-color: rgba(245, 158, 11, 0.22); }
.dashboard-module-teal .module-action { background: rgba(0, 133, 124, 0.1); color: #00796f; }
.dashboard-module-teal .module-icon { background: rgba(0, 133, 124, 0.12); color: var(--educare-teal); border-color: rgba(0, 133, 124, 0.22); }
.dashboard-module-red .module-action { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.dashboard-module-red .module-icon { background: rgba(239, 68, 68, 0.12); color: #ef4444; border-color: rgba(239, 68, 68, 0.22); }
.dashboard-module-rose .module-action { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
.dashboard-module-rose .module-icon { background: rgba(225, 29, 72, 0.12); color: #e11d48; border-color: rgba(225, 29, 72, 0.22); }
.dashboard-module-indigo .module-action { background: rgba(99, 102, 241, 0.1); color: #4338ca; }
.dashboard-module-indigo .module-icon { background: rgba(99, 102, 241, 0.12); color: #6366f1; border-color: rgba(99, 102, 241, 0.22); }
.dashboard-module-yellow .module-action { background: rgba(234, 179, 8, 0.12); color: #a16207; }
.dashboard-module-yellow .module-icon { background: rgba(234, 179, 8, 0.14); color: #ca8a04; border-color: rgba(234, 179, 8, 0.25); }
.dashboard-module-cyan .module-action { background: rgba(6, 182, 212, 0.1); color: #0891b2; }
.dashboard-module-cyan .module-icon { background: rgba(6, 182, 212, 0.12); color: #06b6d4; border-color: rgba(6, 182, 212, 0.22); }
.dashboard-module-gray .module-action { background: rgba(107, 114, 128, 0.1); color: #4b5563; }
.dashboard-module-gray .module-icon { background: rgba(107, 114, 128, 0.12); color: #6b7280; border-color: rgba(107, 114, 128, 0.2); }

.dashboard-module-card:hover .dashboard-module-action {
    filter: brightness(0.97);
}

.dashboard-account-card {
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fcfb 100%);
    border: 1px solid rgba(0, 133, 124, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 20px rgba(0, 133, 124, 0.05);
}

.dashboard-account-card h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.25rem;
}

.dashboard-account-item {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(0, 133, 124, 0.03);
    border: 1px solid rgba(0, 133, 124, 0.06);
}

.dashboard-account-item .label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.dashboard-account-item .value {
    font-weight: 600;
    color: #0f172a;
}

.dark-mode .dashboard-stat-card,
.dark-mode .dashboard-module-card,
.dark-mode .dashboard-account-card {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

.dark-mode .dashboard-stat-card .stat-value,
.dark-mode .dashboard-module-card .module-title,
.dark-mode .dashboard-account-item .value {
    color: var(--dm-text-primary);
}

.dark-mode .dashboard-stat-card .stat-label,
.dark-mode .dashboard-module-card .module-desc,
.dark-mode .dashboard-account-item .label {
    color: var(--dm-text-secondary);
}

.dark-mode .dashboard-account-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Classes Tailwind customizadas para cores */
.bg-educare-teal {
    background-color: var(--educare-teal) !important;
}

.bg-educare-yellow {
    background-color: var(--educare-yellow) !important;
}

.text-educare-teal {
    color: var(--educare-teal) !important;
}

.text-educare-yellow {
    color: var(--educare-yellow) !important;
}

.text-educare-gray {
    color: var(--educare-gray) !important;
}

.border-educare-teal {
    border-color: var(--educare-teal) !important;
}

.border-educare-yellow {
    border-color: var(--educare-yellow) !important;
}

/* Botões com gradiente */
.btn-educare-primary {
    background: linear-gradient(135deg, var(--educare-teal) 0%, var(--educare-teal-light) 100%);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-educare-primary:hover {
    background: linear-gradient(135deg, var(--educare-teal-dark) 0%, var(--educare-teal) 100%);
    box-shadow: 0 4px 12px rgba(0, 133, 124, 0.3);
    transform: translateY(-1px);
}

.btn-educare-secondary {
    background: linear-gradient(135deg, var(--educare-yellow) 0%, var(--educare-yellow-light) 100%);
    color: var(--educare-gray);
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-educare-secondary:hover {
    background: linear-gradient(135deg, var(--educare-yellow-dark) 0%, var(--educare-yellow) 100%);
    box-shadow: 0 4px 12px rgba(255, 199, 0, 0.3);
    transform: translateY(-1px);
}

/* Navbar com gradiente */
.navbar-educare {
    background: linear-gradient(135deg, var(--educare-teal-dark) 0%, var(--educare-teal) 100%);
    box-shadow: 0 2px 8px rgba(0, 133, 124, 0.15);
}

/* Textos */
.text-educare-primary {
    color: var(--educare-teal);
}

.text-educare-secondary {
    color: var(--educare-yellow-dark);
}

.text-educare-gray {
    color: var(--educare-gray);
}

/* Inputs modernos */
.input-educare {
    border: 1px solid rgba(0, 133, 124, 0.2);
    transition: all 0.3s ease;
}

.input-educare:focus {
    border-color: var(--educare-teal);
    box-shadow: 0 0 0 3px rgba(0, 133, 124, 0.1);
    outline: none;
}

/* Badges e tags */
.badge-educare {
    background: linear-gradient(135deg, var(--educare-teal) 0%, var(--educare-teal-light) 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-educare-yellow {
    background: linear-gradient(135deg, var(--educare-yellow) 0%, var(--educare-yellow-light) 100%);
    color: var(--educare-gray);
}

/* Animações suaves */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Scrollbar customizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--educare-bg-soft);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--educare-teal) 0%, var(--educare-teal-light) 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--educare-teal-dark);
}

/* ============================================
   RESPONSIVIDADE MOBILE
   ============================================ */

/* Responsive page header - stack on mobile */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .page-header>div:last-child {
        width: 100%;
    }

    /* Header buttons wrap on mobile */
    .page-header .flex.gap-2,
    .page-header .flex.flex-wrap {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Responsive container padding */
@media (max-width: 640px) {
    .main-content>main {
        padding: 1rem;
    }
}

/* Responsive flex containers */
.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .flex-responsive {
        flex-direction: column;
    }

    .flex-responsive>* {
        width: 100%;
    }
}

/* Responsive grid - 2 cols on tablet, 1 on mobile */
@media (max-width: 1024px) {
    .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .grid.lg\:grid-cols-3,
    .grid.lg\:grid-cols-4,
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Filter forms - stack on mobile */
@media (max-width: 768px) {
    .grid.md\:grid-cols-5 {
        grid-template-columns: 1fr 1fr;
    }

    .grid.md\:grid-cols-5>*:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .grid.md\:grid-cols-5 {
        grid-template-columns: 1fr;
    }

    .grid.md\:grid-cols-5>*:last-child {
        grid-column: span 1;
    }
}

/* Cards on mobile - reduce padding */
@media (max-width: 640px) {
    .card-modern {
        padding: 1rem;
    }

    .card-modern.p-6 {
        padding: 1rem;
    }
}

/* Foco visível (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--educare-teal);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    #mobile-menu,
    .card-modern {
        transition: none !important;
    }
}

/* Menu Mobile */
#mobile-menu {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

#mobile-menu:not(.hidden) {
    max-height: 500px;
}

/* Tabelas Responsivas */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }

    /* Converter tabelas em cards em mobile (opcional) */
    .table-mobile-cards.table-responsive,
    .table-responsive.table-mobile-cards,
    .table-mobile-cards {
        display: block;
        overflow-x: visible !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: auto;
    }

    .table-mobile-cards table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: block;
        width: 100%;
    }

    .table-mobile-cards tr {
        margin-bottom: 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 0.75rem 0.875rem;
        background: white;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .table-mobile-cards td {
        border: none;
        padding: 0.35rem 0;
        text-align: left;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    .table-mobile-cards td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--educare-teal);
        display: inline-block;
        min-width: 5.5rem;
        margin-right: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .table-mobile-cards td:not([data-label]),
    .table-mobile-cards td[data-label=""] {
        padding-top: 0.15rem;
        padding-bottom: 0.35rem;
    }

    .table-mobile-cards td:not([data-label]):before,
    .table-mobile-cards td[data-label=""]:before {
        content: none;
    }

    /* Inventário: card mais compacto em telemóvel */
    .table-mobile-cards td[data-label="Item"] {
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid #f3f4f6;
    }
    .table-mobile-cards td[data-label="Item"]:before {
        display: none;
    }
    .table-mobile-cards td[data-label="Item"] .text-sm.font-medium {
        font-size: 0.95rem;
        font-weight: 700;
    }
    .table-mobile-cards td[data-label="Ações"] {
        padding-top: 0.6rem;
        margin-top: 0.25rem;
        border-top: 1px solid #f3f4f6;
    }
    .table-mobile-cards td[data-label="Ações"]:before {
        display: block;
        margin-bottom: 0.35rem;
        min-width: 0;
    }
    .table-mobile-cards td[data-label="Ações"] .flex {
        gap: 0.35rem;
    }
    .table-mobile-cards td[data-label="Ações"] a,
    .table-mobile-cards td[data-label="Ações"] button {
        min-height: 2rem;
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
    }
    [data-theme="dark"] .table-mobile-cards tr,
    .dark-mode .table-mobile-cards tr {
        background: var(--card-bg, #1e293b);
        border-color: var(--border-color, #334155);
    }
    [data-theme="dark"] .table-mobile-cards td[data-label="Item"],
    .dark-mode .table-mobile-cards td[data-label="Item"],
    [data-theme="dark"] .table-mobile-cards td[data-label="Ações"],
    .dark-mode .table-mobile-cards td[data-label="Ações"] {
        border-color: #334155;
    }
}

/* Formulários Responsivos */
@media (max-width: 640px) {

    /* Inputs full-width em mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        width: 100% !important;
    }

    /* Labels acima dos inputs */
    label {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Botões de ação - não forçar coluna, deixar flexível */
    .action-buttons-row {
        flex-wrap: wrap;
    }

    /* Padding reduzido em mobile */
    .p-6 {
        padding: 1rem;
    }

    /* Cards em 1 coluna - usar classe específica */
    .mobile-stack {
        grid-template-columns: 1fr !important;
    }
}

/* Botão admin: reescrever emails (classe própria — amber/yellow Tailwind pode não estar no build) */
.btn-rewrite-emails {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border: 1px solid #b45309;
}
.btn-rewrite-emails:hover {
    background-color: #b45309 !important;
    color: #ffffff !important;
}
.btn-rewrite-emails .lucide-icon {
    color: #ffffff !important;
}

/* Botões - altura uniforme para cabeçalhos/toolbars (inclui btn-educare-* e padrão px-4 py-2 text-sm) */
a.btn-educare-primary,
a.btn-educare-secondary,
button.btn-educare-primary,
button.btn-educare-secondary,
a.inline-flex.items-center.px-4.py-2.text-sm,
button.inline-flex.items-center.px-4.py-2.text-sm,
span.inline-flex.items-center.px-4.py-2.text-sm {
    min-height: 40px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 1.25rem;
    box-sizing: border-box;
}

/* Alvo de toque mínimo apenas para botões ícone-only */
button.icon-only,
a.icon-only,
.btn-icon-only {
    min-height: 40px;
    min-width: 40px;
}

@media (max-width: 640px) {

    a.btn-educare-primary,
    a.btn-educare-secondary,
    button.btn-educare-primary,
    button.btn-educare-secondary {
        justify-content: center;
    }
}

/* Títulos e textos menores em mobile */
@media (max-width: 640px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }
}

/* Espaçamento reduzido em mobile */
@media (max-width: 640px) {
    .mb-6 {
        margin-bottom: 1rem;
    }

    .mb-8 {
        margin-bottom: 1.5rem;
    }

    .mt-6 {
        margin-top: 1rem;
    }

    .gap-6 {
        gap: 1rem;
    }
}

/* Logo Educare */
.logo-educare {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.logo-educare:hover {
    opacity: 0.9;
}

.logo-educare-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Responsividade - Logo menor em mobile */
@media (max-width: 640px) {
    .logo-educare-img {
        height: 32px;
    }
}

.logo-educare-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-educare-text .colégio {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
}

.logo-educare-text .educare {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Logo no navbar (branco) */
.navbar-educare .logo-educare-text {
    color: white;
}

/* Logo na página de login (teal) */
.login-page .logo-educare-text {
    color: var(--educare-teal);
}

/* Logo no footer (branco) */
footer .logo-educare-text {
    color: white;
}

/* Logo placeholder (quando imagem não existe) */
.logo-educare-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--educare-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.logo-educare-placeholder::before {
    content: 'E';
    color: var(--educare-teal-dark);
    font-weight: 900;
    font-size: 1.5rem;
    font-family: 'Arial', sans-serif;
}

/* ============================================
   MODAIS
   ============================================ */

/* Overlay do modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 1rem;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Container do modal */
.modal-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    position: relative;
}

.modal-overlay.active .modal-container,
.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* Conteúdo modal (alias de modal-container) */
.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(8px);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 1.5rem;
}

.modal-content-md { max-width: 32rem; }
.modal-content-lg { max-width: 42rem; }

/* Diálogos simples (confirmação, alerta) */
.modal-content.modal-dialog-simple {
    padding: 0;
    overflow: hidden;
}
.modal-dialog-simple .modal-dialog-header {
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.modal-dialog-simple .modal-dialog-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}
.modal-dialog-simple .modal-dialog-body {
    padding: 1rem 1.5rem 1.25rem;
    font-size: 0.9375rem;
    color: #4b5563;
    line-height: 1.55;
}
.modal-dialog-simple .modal-footer,
.modal-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}
@media (min-width: 480px) {
    .modal-dialog-simple .modal-footer,
    .modal-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}
.modal-footer .btn-modal-cancel,
.modal-footer .btn-modal-danger,
.modal-footer .btn-modal-primary {
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
@media (min-width: 480px) {
    .modal-footer .btn-modal-cancel,
    .modal-footer .btn-modal-danger,
    .modal-footer .btn-modal-primary {
        width: auto;
        min-width: 7rem;
    }
}
.modal-footer .btn-modal-cancel {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}
.modal-footer .btn-modal-cancel:hover { background: #f3f4f6; }
.modal-footer .btn-modal-danger {
    background: #dc2626;
    color: #fff;
    border: none;
}
.modal-footer .btn-modal-danger:hover { background: #b91c1c; }
.modal-footer .btn-modal-primary {
    background: var(--educare-teal);
    color: #fff;
    border: none;
}
.modal-footer .btn-modal-primary:hover { background: var(--educare-teal-dark); }
.modal-content > form.modal-form-plain {
    display: block;
    padding: 0;
    margin: 0;
}

.modal-content:has(.modal-header),
.modal-content:has(> form.flex) {
    padding: 0;
}

.modal-content > .modal-header {
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header,
.modal-content > .modal-header {
    flex-shrink: 0;
}

.modal-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-content > form .modal-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.modal-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

.modal-content > .modal-header,
.modal-content > div:first-child:not(form):not(.modal-scroll-body) {
    flex-shrink: 0;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Formulários em modais: corpo scrollável + rodapé fixo */
.modal-content > form:not(.modal-form-plain) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.modal-content > form:not(.modal-form-plain) > .modal-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.5rem;
}

.modal-scroll-body .modal-form-field + .modal-form-field,
.modal-scroll-body > div + div {
    margin-top: 0;
}

.modal-scroll-body details {
    margin-top: 0.75rem;
    padding-top: 0.25rem;
}

.modal-scroll-body details summary {
    padding: 0.375rem 0;
    line-height: 1.4;
    list-style-position: outside;
}

.modal-scroll-body details[open] summary {
    margin-bottom: 0.75rem;
}

/* Auto-rodapé: último bloco com botões de acção */
.modal-content > form:not(.modal-form-plain):not(:has(.modal-footer)) > *:last-child:has(button) {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Corpo scrollável quando campos estão directamente no form */
.modal-content > form:not(.modal-form-plain):not(:has(.modal-scroll-body)) > *:not(:last-child) {
    flex-shrink: 0;
}

.modal-content > form:not(.modal-form-plain):not(:has(.modal-scroll-body)) {
    overflow-y: auto;
}

.modal-content > form:not(.modal-form-plain):not(:has(.modal-scroll-body)) > *:last-child:has(button) {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    z-index: 5;
}

/* Modais com overflow no content — mover scroll para dentro */
.modal-content.max-h-\[90vh\].overflow-y-auto,
.modal-content.max-h-\[85vh\].overflow-y-auto,
.modal-content.modal-content-lg.overflow-y-auto {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.modal-content.max-h-\[90vh\].overflow-y-auto > *:not(:last-child),
.modal-content.max-h-\[85vh\].overflow-y-auto > *:not(:last-child) {
    flex-shrink: 0;
}

.modal-content.max-h-\[90vh\].overflow-y-auto > .modal-scroll-body,
.modal-content.max-h-\[85vh\].overflow-y-auto > .modal-scroll-body,
.modal-content.modal-content-lg.overflow-y-auto > .modal-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Calendário */
.calendar-grid {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.calendar-day {
    min-height: 5.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

@media (min-width: 640px) {
    .calendar-day {
        min-height: 7rem;
        padding: 0.5rem;
        border-radius: 0.625rem;
    }
}

.calendar-day--weekend {
    background: #f0fdfa;
    border-color: #ccfbf1;
}

.calendar-day--today {
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.25);
}

.calendar-day--empty {
    background: #f9fafb;
    border-style: dashed;
    border-color: #e5e7eb;
    min-height: 3rem;
}

.calendar-day__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.calendar-day__num {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #374151;
    line-height: 1;
}

.calendar-day__badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0f766e;
    background: #ccfbf1;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
}

.calendar-day__events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-height: 0;
}

.calendar-event-pill {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.25;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: #ccfbf1;
    color: #115e59;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 640px) {
    .calendar-event-pill {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
    }
}

.calendar-event-pill:hover {
    background: #99f6e4;
    color: #134e4a;
}

/* Cartões de notas */
.note-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.note-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.note-card__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.note-card__toolbar {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.note-card__body {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.note-card__title {
    font-weight: 600;
    color: #1f2937;
    word-break: break-word;
}

.note-card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Cartões de tarefas (grelha) */
.task-grid-card {
    position: relative;
}

.task-grid-card .task-done-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.task-grid-card__title {
    padding-right: 2rem;
}

.note-select-cb {
    width: 1rem;
    height: 1rem;
    margin-top: 0.375rem;
    flex-shrink: 0;
    accent-color: #0d9488;
}

.task-done-btn {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: 2px solid #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    line-height: 1;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.task-done-btn:hover {
    border-color: #14b8a6;
}

.task-done-btn.is-done {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}

.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-icon-only.btn-icon-teal {
    color: #0f766e;
    background: #ccfbf1;
    border-color: #99f6e4;
}
.btn-icon-only.btn-icon-teal:hover { background: #99f6e4; }

.btn-icon-only.btn-icon-amber {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}
.btn-icon-only.btn-icon-amber:hover { background: #fde68a; }

/* Modal exportar PDF — altura limitada + scroll interno (sem depender de classes Tailwind arbitrárias) */
#pdf-modal {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#pdf-modal.flex,
#pdf-modal:not(.hidden) {
    display: flex;
}
.pdf-export-modal {
    transform: none !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 32rem;
    max-height: min(88vh, 640px);
    margin: auto;
    overflow: hidden;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.pdf-export-modal__header {
    flex-shrink: 0;
    padding: 1.25rem 1.25rem 0.75rem;
}
.pdf-export-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pdf-export-modal__footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid #f3f4f6;
    background: #fff;
}
.pdf-export-modal__options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pdf-export-modal__users {
    max-height: 11rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: #f9fafb;
}
.pdf-export-modal__user-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.375rem;
    border-radius: 0.375rem;
    cursor: pointer;
}
.pdf-export-modal__user-row:hover {
    background: #fff;
}
.pdf-export-modal__user-row + .pdf-export-modal__user-row {
    border-top: 1px solid #f3f4f6;
}
@media (max-width: 640px) {
    #pdf-modal { padding: 0.5rem; align-items: flex-end; }
    .pdf-export-modal {
        max-width: 100%;
        max-height: min(92vh, 100%);
        border-radius: 0.75rem 0.75rem 0 0;
        margin: 0;
    }
    .pdf-export-modal__footer {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
    .pdf-export-modal__users { max-height: 9rem; }
}
.dark-mode .pdf-export-modal,
[data-theme="dark"] .pdf-export-modal {
    background: var(--dm-bg-elevated, #1f2937);
    color: var(--dm-text-primary, #f9fafb);
}
.dark-mode .pdf-export-modal__footer,
[data-theme="dark"] .pdf-export-modal__footer {
    background: var(--dm-bg-elevated, #1f2937);
    border-color: rgba(255,255,255,0.08);
}
.dark-mode .pdf-export-modal__users,
[data-theme="dark"] .pdf-export-modal__users {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
}

/* Overlay ofuscado — alteração obrigatória de senha */
.force-password-overlay {
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.dark-mode .force-password-overlay {
    background: rgba(0, 0, 0, 0.65);
}

.btn-icon-only.btn-icon-red {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fecaca;
}
.btn-icon-only.btn-icon-red:hover { background: #fecaca; }

.notes-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

@media (max-width: 639px) {
    .calendar-day {
        min-height: 4.25rem;
    }
    .calendar-day__badge {
        display: none;
    }
    .notes-bulk-bar {
        font-size: 0.8125rem;
    }
    #tasks-app .flex.items-center.justify-between.gap-2 {
        flex-direction: column;
        align-items: stretch;
    }
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}
.modal-close-btn:hover { color: #111827; background: #f3f4f6; }

/* Botões de acção compactos (listas/cards) */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.btn-action-purple { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; }
.btn-action-purple:hover { background: #ede9fe; }
.btn-action-teal { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.btn-action-teal:hover { background: #99f6e4; }
.btn-action-blue { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.btn-action-blue:hover { background: #bfdbfe; }
.btn-action-gray { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.btn-action-gray:hover { background: #e5e7eb; }
.btn-action-red { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.btn-action-red:hover { background: #fecaca; }

.form-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    pointer-events: auto;
    isolation: isolate;
}

.btn-question-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-base, 0.5rem);
    cursor: pointer;
}
.btn-question-ctrl:hover { background: #f3f4f6; }
.btn-question-ctrl-danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.btn-question-ctrl-danger:hover { background: #fee2e2; }

/* Formulário de avaliação */
.eval-star-rating {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}
.eval-stars { display: inline-flex; gap: 2px; }
.eval-star {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: #d1d5db;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    display: inline-block;
    user-select: none;
}
.eval-star.active, .eval-star:hover { color: #f59e0b; }
.eval-star-rating .eval-star-radio:checked ~ .eval-star { color: #f59e0b; }
.eval-star-rating .eval-star:hover,
.eval-star-rating .eval-star:hover ~ .eval-star { color: #f59e0b; }

/* Inputs ocultos visualmente — labels associados permanecem clicáveis */
.eval-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.eval-radio-pills input:checked + .eval-radio-label,
.eval-nps-radios input:checked + .eval-radio-label,
.eval-mc-radios input:checked + .eval-radio-label,
.eval-likert-row input:checked + .eval-radio-label {
    background: #ede9fe;
    border-color: #a78bfa;
    color: #6d28d9;
}
.eval-radio-label { cursor: pointer; user-select: none; }
.eval-likert-row input:checked + .eval-likert-option { background: #ede9fe; border-color: #a78bfa; }
.eval-question-field legend.eval-q-label {
    width: 100%;
    margin-bottom: 0.25rem;
    padding: 0;
    float: none;
}
.eval-btn-choice { padding: 0.375rem 0.875rem; font-size: 0.875rem; font-weight: 500; border: 1px solid #e5e7eb; border-radius: var(--radius-base, 0.5rem); background: #fff; cursor: pointer; }
.eval-btn-choice:hover { background: #f3f4f6; }
.eval-btn-choice.active { background: #ede9fe; border-color: #a78bfa; color: #6d28d9; }
.eval-nps-btn { min-width: 2rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.eval-likert-option { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.625rem; border: 1px solid #e5e7eb; border-radius: var(--radius-base, 0.5rem); cursor: pointer; font-size: 0.8125rem; }
.eval-likert-option:has(input:checked) { background: #ede9fe; border-color: #a78bfa; }
.eval-progress-track { height: 0.5rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.eval-progress-fill { height: 100%; background: linear-gradient(90deg, #7c3aed, #14b8a6); transition: width 0.3s ease; }
.eval-autosave-status { font-size: 0.75rem; color: #6b7280; }
.option-dist-bar { height: 0.5rem; background: #7c3aed; border-radius: 4px; transition: width 0.3s; }

/* Construtor de formulário — estilo Google Forms */
.eval-form-builder { position: relative; }
.eval-edit-page { padding-bottom: 5rem; }

.eval-builder-header { margin-bottom: 1rem; }
.eval-builder-layout {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    position: relative;
}
.eval-builder-canvas {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 4rem;
}
.eval-builder-card {
    overflow: visible !important;
}
.eval-edit-page .card-modern.eval-builder-card {
    overflow: visible !important;
}
.eval-builder-rail {
    position: sticky;
    top: 5rem;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    z-index: 40;
    flex-shrink: 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.eval-rail-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.eval-rail-btn:hover {
    background: #f3f4f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.eval-rail-btn-primary {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}
.eval-rail-btn-primary:hover { background: #6d28d9; }
.eval-rail-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.125rem 0.25rem;
}
.eval-rail-btn-save {
    background: #374151;
    border-color: #374151;
    color: #fff;
}
.eval-rail-btn-save:hover {
    background: #1f2937;
}

.eval-builder-quick-bar {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e5e7eb;
}
.eval-builder-quick-bar:empty { display: none; }
.eval-quick-add-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #7c3aed;
}
.eval-quick-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.5rem;
}
.eval-quick-add-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #5b21b6;
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
    border: 1px solid #ddd6fe;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-align: center;
    min-height: 4.5rem;
}
.eval-quick-add-item:hover {
    border-color: #a78bfa;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
    transform: translateY(-1px);
}
.eval-quick-add-item .lucide-icon { color: #7c3aed; }

.eval-type-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.625rem;
}
.eval-type-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-align: center;
}
.eval-type-picker-item:hover {
    background: #f3e8ff;
    border-color: #a78bfa;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
}
.eval-type-picker-icon { color: #7c3aed; }
.eval-type-picker-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5b21b6;
    line-height: 1.2;
}

.q-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6d28d9;
    background: #f5f3ff;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid #ede9fe;
}
.q-type-preview {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 0.5rem;
    pointer-events: none;
}
.q-preview-field {
    font-size: 0.8125rem;
    color: #9ca3af;
    padding: 0.375rem 0;
    border-bottom: 1px dotted #d1d5db;
}
.q-preview-textarea { min-height: 3rem; }
.q-preview-options { display: flex; flex-direction: column; gap: 0.375rem; }
.q-preview-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #4b5563;
}
.q-preview-radio {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #9ca3af;
    border-radius: 50%;
    flex-shrink: 0;
}
.q-preview-yesno { display: flex; gap: 0.5rem; }
.q-preview-pill {
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    color: #6b7280;
    background: #fff;
}
.q-preview-stars { font-size: 1.25rem; color: #d1d5db; letter-spacing: 2px; }
.q-preview-nps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.q-preview-nps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    color: #6b7280;
    background: #fff;
}
.q-collapsed-preview {
    display: none;
    padding: 0.75rem 1rem;
    gap: 0.625rem;
    align-items: flex-start;
}
.question-block.is-collapsed .q-collapsed-preview {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
}
.q-collapsed-preview .q-preview-icon {
    grid-row: 1 / 3;
    color: #7c3aed;
    padding-top: 0.125rem;
}
.q-collapsed-preview .q-preview-text { grid-column: 2; }
.q-collapsed-preview .q-preview-meta { grid-column: 2; }

/* Lista de avaliações — vistas */
.eval-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.eval-view-toggle {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.eval-view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.eval-view-toggle-btn:hover { background: #f3f4f6; color: #374151; }
.eval-view-toggle-btn.is-active {
    background: #ede9fe;
    color: #7c3aed;
}
.eval-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.eval-list-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.eval-list-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.eval-list-table tr:hover td { background: #fafafa; }
.eval-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
}
.eval-grid-compact .eval-compact-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 8rem;
}
.eval-grid-compact .eval-compact-card h2 {
    font-size: 0.9375rem;
    line-height: 1.3;
}
.eval-actions-compact .btn-action {
    min-width: 2rem;
    padding: 0.375rem;
}
.eval-view-panel { display: none; }
.eval-view-panel.is-active { display: block; }
.eval-view-panel.eval-view-cards.is-active { display: grid; }
.eval-view-panel.eval-grid-compact.is-active { display: grid; }

.question-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}
.question-block.is-focused {
    border-color: #a78bfa;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
    border-left: 4px solid #7c3aed;
    cursor: default;
}
.question-block.is-collapsed .q-body { display: none; }
.question-block.is-collapsed .q-header { display: none; }
.question-block.is-focused .q-type-badge { display: none; }
.q-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid transparent;
}
.question-block.is-focused .q-header { border-bottom-color: #f3f4f6; }
.q-drag-handle {
    color: #9ca3af;
    cursor: grab;
    font-size: 1rem;
    user-select: none;
    padding: 0.25rem;
}
.q-type-select {
    margin-left: auto;
    max-width: 11rem;
    font-size: 0.8125rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: #fff;
}
.q-body { padding: 0.75rem 1rem 1rem; }
.q-text-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    font-size: 1rem;
    padding: 0.375rem 0;
    resize: none;
    background: transparent;
}
.q-text-input:focus {
    outline: none;
    border-bottom-color: #7c3aed;
}
.q-footer {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid #f3f4f6;
}
.question-block.is-focused .q-footer { display: flex; }
.q-required-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #4b5563;
    margin-right: auto;
}
.q-advanced {
    display: none;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #f3f4f6;
    gap: 0.75rem;
}
.question-block.is-focused .q-advanced { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
    .question-block.is-focused .q-advanced { grid-template-columns: 1fr; }
    .eval-builder-layout { flex-direction: column; }
    .eval-builder-rail {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        bottom: 6.5rem;
        top: auto;
        flex-direction: row;
        border-radius: 2rem;
        padding: 0.375rem 0.5rem;
        z-index: 35;
    }
    .eval-rail-btn { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
    .form-actions-bar {
        padding-right: 0.5rem;
    }
    .q-type-select { max-width: 100%; width: 100%; margin-left: 0; margin-top: 0.25rem; }
    .q-header { flex-wrap: wrap; }
    .eval-edit-page { padding-bottom: 8rem; }
}

.q-preview-check {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #9ca3af;
    border-radius: 0.2rem;
    flex-shrink: 0;
}
.q-preview-scale-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    border: 1px solid #c4b5fd;
    border-radius: 9999px;
    color: #7c3aed;
    background: #faf5ff;
}
.q-preview-select {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    max-width: 12rem;
}

/* Painel de visão geral (view) */
.eval-overview-page .eval-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
}
.eval-overview-page .eval-assign-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eval-settings-panel .eval-settings-body.hidden { display: none; }

.eval-form-theme {
    --eval-primary: #7c3aed;
    --eval-accent: #14b8a6;
    --eval-card-bg: #ffffff;
    --eval-label-color: #374151;
}
.eval-form-theme .card-modern { background: var(--eval-card-bg); }
.eval-form-theme .eval-q-label { color: var(--eval-label-color); }
.eval-form-theme .eval-progress-fill { background: linear-gradient(90deg, var(--eval-primary), var(--eval-accent)); }
.eval-form-theme .btn-action-teal,
.eval-form-theme button.bg-teal-600,
.eval-form-theme button.bg-purple-600 { background-color: var(--eval-primary); }
.eval-form-theme a.text-purple-600 { color: var(--eval-primary); }

@media (max-width: 768px) {
    .eval-overview-page .eval-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .eval-overview-page .flex.flex-col.xl\\:flex-row { gap: 1rem; }
    .eval-actions { gap: 0.375rem; }
    .eval-actions .btn-action { font-size: 0.75rem; padding: 0.375rem 0.5rem; }
}
@media (max-width: 480px) {
    .eval-overview-page .eval-stat-grid { grid-template-columns: 1fr; }
}

/* Sub-navegação do módulo Avaliação */
.eval-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}
.eval-subnav-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    min-width: min-content;
    padding-bottom: 0.25rem;
}
.eval-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eval-subnav-link:hover { color: #7c3aed; border-color: #ddd6fe; background: #faf5ff; }
.eval-subnav-link.is-active {
    color: #fff;
    background: #7c3aed;
    border-color: #7c3aed;
}
.eval-subnav-link.is-active .lucide-icon { color: inherit; }
.eval-subnav-cta {
    margin-left: auto;
    color: #0f766e;
    border-color: #99f6e4;
    background: #f0fdfa;
}
.eval-subnav-cta:hover { background: #ccfbf1; color: #115e59; }

/* Toast notifications — canto inferior direito, sem sobrepor cabeçalho */
.toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: min(22rem, calc(100vw - 2rem));
    width: 100%;
    pointer-events: none;
}
.toast-notification {
    pointer-events: auto;
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast-notification-visible {
    transform: translateX(0);
    opacity: 1;
}
.toast-notification-exit {
    transform: translateX(110%);
    opacity: 0;
}
.toast-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    background: #fff;
}
.toast-bg-success { border-color: #bbf7d0; background: #f0fdf4; }
.toast-bg-error { border-color: #fecaca; background: #fef2f2; }
.toast-bg-warning { border-color: #fde68a; background: #fffbeb; }
.toast-bg-info { border-color: #bfdbfe; background: #eff6ff; }
.toast-message {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1f2937;
    word-break: break-word;
}
.toast-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.125rem;
}
.toast-close:hover { color: #4b5563; }
@media (max-width: 640px) {
    .toast-container {
        bottom: 5.5rem;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }
}

.eval-section-block {
    background: linear-gradient(135deg, #faf5ff 0%, #f0fdfa 100%);
    border: 1px dashed #c4b5fd;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.eval-section-icon { color: #7c3aed; flex-shrink: 0; }
.eval-section-block input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    font-weight: 600;
    color: #5b21b6;
}
.eval-section-block input:focus { outline: none; }
.eval-section-remove {
    color: #9ca3af;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
}
.eval-section-remove:hover { color: #b91c1c; }

/* Assistente de preenchimento (evaluate wizard) */
.eval-wizard-page { max-width: 56rem; margin-left: auto; margin-right: auto; }
.eval-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.eval-wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 500;
}
.eval-wizard-step-label { white-space: nowrap; }
.eval-wizard-step.is-active {
    background: #ede9fe;
    color: #6d28d9;
}
.eval-wizard-step.is-complete {
    background: #d1fae5;
    color: #047857;
}
.eval-wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
}
.eval-wizard-step.is-active .eval-wizard-step-num { background: #7c3aed; color: #fff; }
.eval-wizard-step.is-complete .eval-wizard-step-num { background: #059669; color: #fff; }
.eval-wizard-step-connector {
    width: 1.5rem;
    height: 2px;
    background: #e5e7eb;
    flex-shrink: 0;
}
.eval-evaluee-panel.hidden { display: none; }
.eval-evaluee-panel.is-active { display: block; }
.eval-form-preview-readonly {
    pointer-events: none;
    user-select: none;
}
.eval-form-preview-readonly input,
.eval-form-preview-readonly textarea,
.eval-form-preview-readonly select,
.eval-form-preview-readonly button {
    pointer-events: none;
    opacity: 0.85;
}
.eval-fill-section .card-modern { border-left: 3px solid #14b8a6; }

/* Fases da campanha (visão geral) */
.eval-campaign-steps { width: 100%; }
.eval-campaign-steps-track {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}
.eval-campaign-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
}
a.eval-campaign-step:hover { background: #ede9fe; color: #6d28d9; }
.eval-campaign-step.is-active {
    background: #ede9fe;
    color: #6d28d9;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.25);
}
.eval-campaign-step.is-complete {
    background: #d1fae5;
    color: #047857;
}
.eval-campaign-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 700;
}
.eval-campaign-step.is-active .eval-campaign-step-num { background: #7c3aed; color: #fff; }
.eval-campaign-step.is-complete .eval-campaign-step-num { background: #059669; color: #fff; }
.eval-campaign-step-connector {
    width: 1rem;
    height: 2px;
    background: #e5e7eb;
    flex-shrink: 0;
}
.eval-campaign-cta .btn-action { min-height: 40px; }

/* Atribuição — tabs */
.eval-assign-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}
.eval-assign-tab {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    border-radius: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}
.eval-assign-tab:hover { color: #7c3aed; background: #faf5ff; }
.eval-assign-tab.is-active {
    color: #6d28d9;
    background: #ede9fe;
    border-color: #ddd6fe;
}
.eval-assign-panel.hidden { display: none; }
.eval-lifecycle-bar { align-items: center; }

/* Ícones com borda — sub-menus (Secretaria, etc.) */
.hub-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.hub-nav-icon-blue { background: rgba(59, 130, 246, 0.12); color: #2563eb; border-color: rgba(59, 130, 246, 0.22); }
.hub-nav-icon-green { background: rgba(16, 185, 129, 0.12); color: #059669; border-color: rgba(16, 185, 129, 0.22); }
.hub-nav-icon-purple { background: rgba(139, 92, 246, 0.12); color: #7c3aed; border-color: rgba(139, 92, 246, 0.22); }
.hub-nav-icon-indigo { background: rgba(99, 102, 241, 0.12); color: #4338ca; border-color: rgba(99, 102, 241, 0.22); }
.hub-nav-icon-yellow { background: rgba(234, 179, 8, 0.14); color: #a16207; border-color: rgba(234, 179, 8, 0.25); }
.hub-nav-icon-teal { background: rgba(0, 133, 124, 0.12); color: #0f766e; border-color: rgba(0, 133, 124, 0.22); }
.hub-nav-icon-gray { background: rgba(107, 114, 128, 0.12); color: #4b5563; border-color: rgba(107, 114, 128, 0.2); }
.hub-nav-icon-cyan { background: rgba(6, 182, 212, 0.12); color: #0891b2; border-color: rgba(6, 182, 212, 0.22); }
.hub-nav-icon-orange { background: rgba(249, 115, 22, 0.12); color: #ea580c; border-color: rgba(249, 115, 22, 0.22); }
.hub-nav-icon-red { background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.22); }

.dark-mode .hub-nav-icon-blue { background: rgba(59, 130, 246, 0.14); color: #93c5fd; border-color: rgba(59, 130, 246, 0.28); }
.dark-mode .hub-nav-icon-green { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.28); }
.dark-mode .hub-nav-icon-purple { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.28); }
.dark-mode .hub-nav-icon-indigo { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.28); }
.dark-mode .hub-nav-icon-yellow { background: rgba(234, 179, 8, 0.14); color: #fde047; border-color: rgba(234, 179, 8, 0.28); }
.dark-mode .hub-nav-icon-teal { background: rgba(20, 184, 166, 0.14); color: #5eead4; border-color: rgba(20, 184, 166, 0.28); }
.dark-mode .hub-nav-icon-gray { background: rgba(107, 114, 128, 0.14); color: #d1d5db; border-color: rgba(107, 114, 128, 0.28); }
.dark-mode .hub-nav-icon-cyan { background: rgba(6, 182, 212, 0.14); color: #67e8f9; border-color: rgba(6, 182, 212, 0.28); }
.dark-mode .hub-nav-icon-orange { background: rgba(249, 115, 22, 0.14); color: #fdba74; border-color: rgba(249, 115, 22, 0.28); }
.dark-mode .hub-nav-icon-red { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border-color: rgba(239, 68, 68, 0.28); }

/* Tarefas — secção concluídas colapsável */
.tasks-completed-section summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.tasks-completed-section summary::-webkit-details-marker { display: none; }
.tasks-completed-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}
.tasks-completed-summary::after {
    content: '▼';
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
}
.tasks-completed-section[open] .tasks-completed-summary::after {
    transform: rotate(180deg);
}
.tasks-completed-section .tasks-completed-body {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

/* Avaliações — secções colapsáveis na visão geral */
.eval-collapsible-section {
    overflow: hidden;
}
.eval-collapsible-section > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.eval-collapsible-section > summary::-webkit-details-marker { display: none; }
.eval-collapsible-summary::after {
    content: '▼';
    font-size: 0.65rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.eval-collapsible-section[open] > summary::after {
    transform: rotate(180deg);
}
.eval-collapsible-body {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid #f3f4f6;
}
.eval-collapsible-nested {
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    background: #fafafa;
}
.eval-collapsible-nested > summary {
    padding: 0.875rem 1rem;
}
.eval-collapsible-nested .eval-collapsible-body {
    padding: 0 1rem 1rem;
    border-top-color: #e5e7eb;
    background: #fff;
    border-radius: 0 0 12px 12px;
}
.eval-collapsible-summary-sm::after {
    margin-left: auto;
}
.confirm-modal-overlay.confirm-modal-single .confirm-modal-actions {
    justify-content: center;
}
.confirm-modal-overlay.confirm-modal-single .confirm-modal-cancel {
    display: none !important;
}

@media (max-width: 640px) {
    .eval-campaign-step-label { max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .eval-campaign-step-connector { width: 0.5rem; }
    .eval-overview-page .eval-progress-table { min-width: 36rem; }
    .eval-collapsible-section > summary { padding: 0.875rem 1rem; }
    .eval-collapsible-body { padding: 0 1rem 1rem; }
    .eval-form-actions { flex-direction: column; align-items: stretch; }
    .eval-form-actions .eval-btn-submit,
    .eval-form-actions .eval-btn-draft,
    .eval-form-actions a { width: 100%; justify-content: center; text-align: center; }
}

/* Cabeçalho do modal */
.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--educare-gray);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--educare-teal);
}

/* Modal de confirmação reutilizável */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 1rem;
}
@media (max-width: 768px) {
    .confirm-modal-overlay {
        padding: 0.75rem;
        align-items: flex-end;
    }
}
.confirm-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.confirm-modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    padding: 0;
    max-width: 32rem;
    width: min(100%, 32rem);
    overflow: hidden;
}
.confirm-modal-content .modal-dialog-header {
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.confirm-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.confirm-modal-message {
    color: #4b5563;
    margin: 0;
    line-height: 1.55;
    font-size: 0.9375rem;
}
.confirm-modal-content .modal-dialog-body {
    padding: 1rem 1.5rem 1.25rem;
}
.confirm-modal-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}
@media (min-width: 480px) {
    .confirm-modal-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}
.confirm-modal-cancel,
.confirm-modal-confirm {
    width: 100%;
}
@media (min-width: 480px) {
    .confirm-modal-cancel,
    .confirm-modal-confirm {
        width: auto;
        min-width: 7rem;
    }
}
.confirm-modal-overlay.confirm-modal-danger .confirm-modal-confirm {
    background: #dc2626;
}
.confirm-modal-overlay.confirm-modal-danger .confirm-modal-confirm:hover {
    background: #b91c1c;
}
.dark-mode .confirm-modal-content {
    background: var(--dm-bg-elevated);
}
.dark-mode .confirm-modal-content .modal-dialog-header {
    border-color: var(--dm-border);
}
.dark-mode .confirm-modal-content .confirm-modal-actions {
    background: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
}
.dark-mode .confirm-modal-title {
    color: #f3f4f6;
}
.dark-mode .confirm-modal-message {
    color: #d1d5db;
}
.dark-mode .confirm-modal-cancel {
    background: var(--dm-bg-secondary);
    color: #e5e7eb;
    border-color: var(--dm-border);
}
.dark-mode .confirm-modal-cancel:hover {
    background: var(--dm-bg-highlight);
}

/* Corpo do modal */
.modal-body {
    padding: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Rodapé do modal */
.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Responsividade dos modais */
@media (max-width: 640px) {
    .modal-container {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1.25rem;
    }
}

/* Garantir que formulários inline não desapareçam */
form.inline-block,
form[class*="inline"],
form.m-0 {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    flex-shrink: 0;
}

/* Garantir que botões de ação não desapareçam */
.flex.gap-2 form,
div.flex.gap-2 form {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    flex-shrink: 0;
}

.flex.gap-2 form button,
div.flex.gap-2 form button {
    flex-shrink: 0;
    display: inline-flex !important;
    white-space: nowrap;
}

/* Garantir que containers de ações não colapsem */
div.flex.gap-2.items-center {
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Prevenir que botões sejam escondidos */
button[name="delete"],
form[onsubmit*="confirm"] button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   SISTEMA DE ÍCONES LUCIDE
   ============================================ */

/* Configuração base dos ícones */
.lucide-icon,
[data-lucide] {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Tamanhos de ícones */
.icon-xs {
    width: 14px;
    height: 14px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

.icon-2xl {
    width: 40px;
    height: 40px;
}

.icon-3xl {
    width: 48px;
    height: 48px;
}

/* Cores de ícones - Paleta do Sistema */
.icon-teal {
    color: var(--educare-teal) !important;
}

.icon-teal-light {
    color: var(--educare-teal-light) !important;
}

.icon-teal-dark {
    color: var(--educare-teal-dark) !important;
}

.icon-yellow {
    color: var(--educare-yellow) !important;
}

.icon-yellow-dark {
    color: var(--educare-yellow-dark) !important;
}

.icon-white {
    color: white !important;
}

.icon-gray {
    color: var(--educare-gray) !important;
}

.icon-muted {
    color: #6B7280 !important;
}

/* Cores de ações */
.icon-success {
    color: #10B981 !important;
}

.icon-danger {
    color: #EF4444 !important;
}

.icon-warning {
    color: #F59E0B !important;
}

.icon-info {
    color: #3B82F6 !important;
}

/* Ícones em containers circulares */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 0.75rem;
    flex-shrink: 0;
}

/* Círculos coloridos - Cores do Sistema */
.icon-circle-teal {
    background: rgba(0, 133, 124, 0.12);
    color: var(--educare-teal);
}

.icon-circle-yellow {
    background: rgba(255, 199, 0, 0.15);
    color: var(--educare-yellow-dark);
}

.icon-circle-white {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Círculos coloridos - Cores de UI */
.icon-circle-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
}

.icon-circle-green {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.icon-circle-purple {
    background: rgba(139, 92, 246, 0.12);
    color: #8B5CF6;
}

.icon-circle-orange {
    background: rgba(249, 115, 22, 0.12);
    color: #F97316;
}

.icon-circle-red {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

/* Ícones dentro de botões */
button .lucide-icon,
a .lucide-icon,
.btn-educare-primary .lucide-icon,
.btn-educare-secondary .lucide-icon {
    margin-right: 0.375rem;
}

/* Ícones solitários (sem texto) */
.icon-only .lucide-icon,
button.icon-only .lucide-icon,
a.icon-only .lucide-icon {
    margin-right: 0;
}

/* Transições suaves para ícones interativos */
button .lucide-icon,
a .lucide-icon {
    transition: transform 0.2s ease, color 0.2s ease;
}

button:hover .lucide-icon,
a:hover .lucide-icon {
    transform: scale(1.05);
}

/* Ícones no navbar */
.navbar-educare .lucide-icon {
    color: white;
}

.navbar-educare a:hover .lucide-icon {
    color: var(--educare-yellow-light);
}

/* Ícones em inputs/formulários */
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .lucide-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
}

.input-icon-wrapper input {
    padding-left: 2.5rem;
}

/* Responsividade para ícones */
@media (max-width: 640px) {
    .icon-xl {
        width: 28px;
        height: 28px;
    }

    .icon-2xl {
        width: 36px;
        height: 36px;
    }

    .icon-3xl {
        width: 40px;
        height: 40px;
    }

    .icon-circle {
        padding: 0.5rem;
        border-radius: 10px;
    }
}

/* ============================================
   DARK MODE — Paleta rica "Deep Teal Night"
   Inspirada em Linear / GitHub Dark / Raycast.
   ============================================ */

/* Dark mode toggle button */
.dark-mode-toggle {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Tokens do dark mode — neutro (zinco/carvão) + acento teal da marca */
.dark-mode {
    --dm-bg-primary: #0c0c0e;
    --dm-bg-secondary: #141416;
    --dm-bg-tertiary: #1c1c1f;
    --dm-bg-elevated: #232326;
    --dm-bg-highlight: #2c2c30;

    --dm-text-primary: #f4f4f5;
    --dm-text-secondary: #a1a1aa;
    --dm-text-muted: #71717a;

    --dm-border: #2e2e32;
    --dm-border-strong: #3f3f46;

    --dm-accent: #14b8a6;
    --dm-accent-soft: rgba(20, 184, 166, 0.14);
    --dm-accent-glow: rgba(20, 184, 166, 0.22);
    --dm-yellow: #fbbf24;

    --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --dm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --dm-shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;

    color-scheme: dark;
}

.dark-mode body,
body.dark-mode {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
    background-image: none;
    background-attachment: fixed;
}

.dark-mode .bg-gray-50,
.dark-mode .bg-gray-100 {
    background-color: transparent !important;
}

.dark-mode .bg-white {
    background-color: var(--dm-bg-secondary) !important;
}

.dark-mode .card-modern {
    background: var(--dm-bg-secondary) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: var(--dm-shadow-md);
}

.dark-mode .card-modern:hover {
    border-color: var(--dm-border-strong) !important;
    box-shadow: var(--dm-shadow-lg);
    transform: translateY(-2px);
}

/* Hierarquia de texto */
.dark-mode .text-gray-900,
.dark-mode .text-gray-800,
.dark-mode .text-gray-700 {
    color: var(--dm-text-primary) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-500 {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .text-gray-400,
.dark-mode .text-gray-300 {
    color: var(--dm-text-muted) !important;
}

/* Títulos com classe do design system (no light usam cinza #2D3748) */
.dark-mode .text-educare-gray {
    color: var(--dm-text-primary) !important;
}

/* Bordas e divisores */
.dark-mode .border,
.dark-mode .border-gray-200,
.dark-mode .border-gray-100,
.dark-mode .border-gray-300,
.dark-mode .border-b,
.dark-mode .border-t,
.dark-mode .border-l,
.dark-mode .border-r {
    border-color: var(--dm-border) !important;
}

.dark-mode .divide-gray-100>*+*,
.dark-mode .divide-gray-200>*+*,
.dark-mode .divide-y>*+* {
    border-color: var(--dm-border) !important;
}

/* Top bar (header) — bloco claramente separado do conteúdo */
.dark-mode .main-content > .bg-white {
    background: linear-gradient(180deg, #131c30 0%, #0f1729 100%) !important;
    border-bottom: 1px solid var(--dm-border-strong) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Inputs elegantes */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: var(--dm-bg-tertiary) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px var(--dm-accent-soft), 0 0 20px var(--dm-accent-glow) !important;
    background-color: var(--dm-bg-elevated) !important;
    outline: none;
}

/* Campo de busca global no top bar */
.dark-mode #global-search-input {
    background-color: rgba(15, 23, 41, 0.85) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

.dark-mode #global-search-input::placeholder {
    color: var(--dm-text-muted) !important;
    opacity: 1;
}

.dark-mode #global-search-input:focus {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-accent) !important;
}

/* Tabelas */
.dark-mode table {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary);
}

.dark-mode thead,
.dark-mode thead tr {
    background-color: transparent !important;
}

.dark-mode th {
    background: linear-gradient(180deg, #1a2540 0%, #15203a 100%) !important;
    color: var(--dm-text-secondary) !important;
    border-bottom: 1px solid var(--dm-border-strong) !important;
    letter-spacing: 0.04em;
}

.dark-mode tbody tr {
    background-color: transparent !important;
    transition: background-color 0.15s ease;
}

.dark-mode tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

.dark-mode tbody tr:hover {
    background-color: var(--dm-bg-highlight) !important;
}

.dark-mode td {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary);
}

/* Modais */
.dark-mode .modal-overlay {
    background-color: rgba(0, 0, 0, 0.62) !important;
}

.dark-mode .modal-container,
.dark-mode .confirm-modal-content,
.dark-mode .modal-content {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border-strong);
    box-shadow: var(--dm-shadow-lg);
    color: var(--dm-text-primary);
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
    border-color: var(--dm-border) !important;
    background: var(--dm-bg-elevated) !important;
}

.dark-mode .modal-close-btn {
    color: var(--dm-text-muted) !important;
}

.dark-mode .modal-close-btn:hover {
    color: var(--dm-text-primary) !important;
    background: var(--dm-bg-highlight) !important;
}

.dark-mode .modal-title,
.dark-mode .confirm-modal-title {
    color: var(--dm-text-primary) !important;
}

.dark-mode .modal-close {
    color: var(--dm-text-muted) !important;
}

.dark-mode .modal-close:hover {
    color: var(--dm-accent) !important;
}

/* Sidebar — neutro, faixa teal discreta */
.dark-mode .sidebar,
.dark-mode aside.sidebar {
    background: linear-gradient(180deg, #121214 0%, #0e0e10 100%) !important;
    border-right: 1px solid var(--dm-border) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

.dark-mode .sidebar-item {
    color: rgba(230, 237, 247, 0.75);
}

.dark-mode .sidebar-item:hover {
    background: rgba(25, 181, 170, 0.10);
    color: #fff;
}

.dark-mode .sidebar-item.active {
    background: linear-gradient(90deg, rgba(25, 181, 170, 0.18) 0%, rgba(25, 181, 170, 0.04) 100%);
    border-left-color: var(--dm-yellow);
    color: #fff;
    box-shadow: inset 0 0 20px rgba(25, 181, 170, 0.08);
}

.dark-mode .sidebar-section-title {
    color: rgba(255, 255, 255, 0.38);
}

.dark-mode .user-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Cartões com faixa superior (dashboard) — visível no escuro */
.dark-mode .card-border-teal {
    border-top-color: rgba(45, 212, 191, 0.55) !important;
}
.dark-mode .card-border-yellow {
    border-top-color: rgba(251, 191, 36, 0.55) !important;
}

/* Módulos no dashboard: descrição legível; chip "Acessar" unificado (menos pastéis mistos) */
.dark-mode a.card-modern p.text-xs.text-gray-600 {
    color: var(--dm-text-secondary) !important;
    line-height: 1.45;
}
.dark-mode a.card-modern > span.inline-block[class*="text-xs"] {
    background: rgba(45, 212, 191, 0.1) !important;
    color: #a7f3d0 !important;
    border: 1px solid rgba(45, 212, 191, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Footer */
.dark-mode footer {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary);
}

/* Scrollbar */
.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-primary);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #223151, #17223b);
    border: 1px solid var(--dm-bg-primary);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--dm-accent), #0f8a82);
}

/* Badges de status (pastéis em fundos escuros) */
.dark-mode .bg-green-100 { background-color: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; }
.dark-mode .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; }
.dark-mode .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; }
.dark-mode .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
.dark-mode .bg-teal-50,
.dark-mode .bg-teal-100 { background-color: rgba(25, 181, 170, 0.15) !important; color: #5eead4 !important; }

.dark-mode .text-green-700,
.dark-mode .text-green-800 { color: #6ee7b7 !important; }
.dark-mode .text-red-700,
.dark-mode .text-red-800 { color: #fca5a5 !important; }
.dark-mode .text-yellow-700,
.dark-mode .text-yellow-800 { color: #fcd34d !important; }
.dark-mode .text-blue-700,
.dark-mode .text-blue-800 { color: #93c5fd !important; }
.dark-mode .text-teal-600,
.dark-mode .text-teal-700 { color: #5eead4 !important; }

/* Icon circles — com halo discreto */
.dark-mode .icon-circle {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.dark-mode .icon-circle-blue   { background: rgba(59, 130, 246, 0.16); color: #93c5fd; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25), 0 0 22px rgba(59, 130, 246, 0.10); }
.dark-mode .icon-circle-green  { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25), 0 0 22px rgba(16, 185, 129, 0.10); }
.dark-mode .icon-circle-purple { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.25), 0 0 22px rgba(139, 92, 246, 0.10); }
.dark-mode .icon-circle-orange { background: rgba(249, 115, 22, 0.16); color: #fdba74; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.25), 0 0 22px rgba(249, 115, 22, 0.10); }
.dark-mode .icon-circle-red    { background: rgba(239, 68, 68, 0.16);  color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25),  0 0 22px rgba(239, 68, 68, 0.10); }
.dark-mode .icon-circle-teal   { background: rgba(25, 181, 170, 0.16); color: #5eead4; box-shadow: inset 0 0 0 1px rgba(25, 181, 170, 0.3),  0 0 22px rgba(25, 181, 170, 0.12); }
.dark-mode .icon-circle-yellow { background: rgba(255, 199, 0, 0.15); color: #fde68a; box-shadow: inset 0 0 0 1px rgba(255, 199, 0, 0.3),    0 0 22px rgba(255, 199, 0, 0.10); }

/* Cinzas claros (tiles usados como fundo) */
.dark-mode .bg-gray-50,
.dark-mode .bg-gray-100,
.dark-mode .bg-gray-200,
.dark-mode .bg-gray-300,
.dark-mode .bg-gray-400 {
    background-color: var(--dm-bg-tertiary) !important;
}

.dark-mode .hover\:bg-gray-50:hover,
.dark-mode .hover\:bg-gray-100:hover,
.dark-mode .hover\:bg-gray-200:hover,
.dark-mode .hover\:bg-gray-300:hover {
    background-color: var(--dm-bg-highlight) !important;
}

/* Botões "Buscar" (bg-gray-700) */
.dark-mode .bg-gray-700,
.dark-mode button[class*="bg-gray-700"] {
    background: linear-gradient(180deg, #223151, #17223b) !important;
    border: 1px solid var(--dm-border-strong) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: var(--dm-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dark-mode .bg-gray-700:hover,
.dark-mode .hover\:bg-gray-600:hover,
.dark-mode .hover\:bg-gray-700:hover {
    background: linear-gradient(180deg, #2a3b60, #1d2b4a) !important;
    border-color: var(--dm-accent) !important;
}

/* Botões secundários com border-gray-300 (ex.: "Limpar") */
.dark-mode a[class*="border-gray-300"],
.dark-mode button[class*="border-gray-300"] {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-secondary) !important;
}

.dark-mode a[class*="border-gray-300"]:hover,
.dark-mode button[class*="border-gray-300"]:hover {
    background-color: var(--dm-bg-highlight) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-strong) !important;
}

/* Botão primary Educare — mais luminoso no escuro */
.dark-mode .btn-educare-primary {
    background: linear-gradient(135deg, #0ea89b 0%, #19b5aa 100%);
    box-shadow: 0 4px 14px rgba(25, 181, 170, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dark-mode .btn-educare-primary:hover {
    background: linear-gradient(135deg, #13bfb2 0%, #2cd6c9 100%);
    box-shadow: 0 6px 22px rgba(25, 181, 170, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dark-mode .btn-educare-secondary {
    box-shadow: 0 4px 14px rgba(255, 199, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Quick Actions (Secretaria, etc.) — tiles coloridos translúcidos */
.dark-mode .bg-blue-50,
.dark-mode .bg-red-50,
.dark-mode .bg-green-50,
.dark-mode .bg-purple-50,
.dark-mode .bg-orange-50 {
    background: linear-gradient(180deg, rgba(27, 41, 66, 0.9), rgba(17, 26, 44, 0.9)) !important;
    border: 1px solid var(--dm-border) !important;
}

.dark-mode .bg-blue-50:hover,
.dark-mode .hover\:bg-blue-100:hover   { background: linear-gradient(180deg, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.08)) !important; border-color: rgba(59, 130, 246, 0.4) !important; }
.dark-mode .bg-red-50:hover,
.dark-mode .hover\:bg-red-100:hover    { background: linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08)) !important;    border-color: rgba(239, 68, 68, 0.4) !important; }
.dark-mode .bg-green-50:hover,
.dark-mode .hover\:bg-green-100:hover  { background: linear-gradient(180deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.08)) !important;  border-color: rgba(16, 185, 129, 0.4) !important; }
.dark-mode .bg-purple-50:hover,
.dark-mode .hover\:bg-purple-100:hover { background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.08)) !important;  border-color: rgba(139, 92, 246, 0.4) !important; }
.dark-mode .bg-orange-50:hover,
.dark-mode .hover\:bg-orange-100:hover { background: linear-gradient(180deg, rgba(249, 115, 22, 0.22), rgba(249, 115, 22, 0.08)) !important;  border-color: rgba(249, 115, 22, 0.4) !important; }

.dark-mode .bg-gray-50:hover,
.dark-mode .hover\:bg-gray-100:hover {
    background-color: var(--dm-bg-highlight) !important;
}

/* Texto dentro de quick actions */
.dark-mode .bg-blue-50 .text-gray-800,
.dark-mode .bg-red-50 .text-gray-800,
.dark-mode .bg-green-50 .text-gray-800,
.dark-mode .bg-purple-50 .text-gray-800,
.dark-mode .bg-orange-50 .text-gray-800,
.dark-mode .bg-gray-50 .text-gray-800 {
    color: var(--dm-text-primary) !important;
}

.dark-mode .bg-blue-50 .text-gray-500,
.dark-mode .bg-red-50 .text-gray-500,
.dark-mode .bg-green-50 .text-gray-500,
.dark-mode .bg-purple-50 .text-gray-500,
.dark-mode .bg-orange-50 .text-gray-500,
.dark-mode .bg-gray-50 .text-gray-500 {
    color: var(--dm-text-muted) !important;
}

/* Botões com bg-white explícito */
.dark-mode .bg-white.hover\:bg-gray-50:hover,
.dark-mode button.bg-white,
.dark-mode a.bg-white {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* Painel de notificações (dropdown) */
.dark-mode #notifications-panel {
    background-color: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border-strong) !important;
    box-shadow: var(--dm-shadow-lg);
}

.dark-mode #notifications-panel .bg-teal-50 {
    background-color: rgba(25, 181, 170, 0.12) !important;
}

/* Links — teal só em links de texto; não em tabs, cartões nem botões */
.dark-mode a:not(.sidebar-item):not(.btn-educare-primary):not(.btn-educare-secondary):not(.card-modern):not(.eval-subnav-link):not(.dashboard-module-card):not(.dashboard-module-action):not(.btn-action):not(.btn-icon-only):not(.dashboard-stat-card) {
    color: var(--dm-accent);
}

.dark-mode a:not(.sidebar-item):not(.btn-educare-primary):not(.btn-educare-secondary):not(.card-modern):not(.eval-subnav-link):not(.dashboard-module-card):not(.dashboard-module-action):not(.btn-action):not(.btn-icon-only):not(.dashboard-stat-card):hover {
    color: #2dd4bf;
}

.dark-mode a.card-modern {
    color: inherit !important;
}

/* Botões sólidos (toolbar export/import, tabs activas) — texto branco legível */
.dark-mode a.bg-red-600,
.dark-mode a.bg-green-600,
.dark-mode a.bg-teal-600,
.dark-mode a.bg-blue-600,
.dark-mode a.bg-purple-600,
.dark-mode a.bg-yellow-500,
.dark-mode a.bg-yellow-600,
.dark-mode button.bg-red-600,
.dark-mode button.bg-green-600,
.dark-mode button.bg-teal-600,
.dark-mode button.bg-blue-600,
.dark-mode button.bg-purple-600 {
    color: #ffffff !important;
}
.dark-mode a.bg-red-600:hover,
.dark-mode button.bg-red-600:hover { background-color: #b91c1c !important; color: #fff !important; }
.dark-mode a.bg-green-600:hover,
.dark-mode button.bg-green-600:hover { background-color: #15803d !important; color: #fff !important; }
.dark-mode a.bg-teal-600:hover,
.dark-mode button.bg-teal-600:hover { background-color: #0f766e !important; color: #fff !important; }
.dark-mode a.bg-blue-600:hover,
.dark-mode button.bg-blue-600:hover { background-color: #1d4ed8 !important; color: #fff !important; }
.dark-mode a.bg-purple-600:hover,
.dark-mode button.bg-purple-600:hover { background-color: #6d28d9 !important; color: #fff !important; }

/* Toggle Lista/Grelha (tarefas) — contraste no estado activo */
.dark-mode .tasks-view-btn.is-active,
.dark-mode button.tasks-view-btn.is-active {
    background-color: rgba(20, 184, 166, 0.22) !important;
    color: #5eead4 !important;
    border-color: rgba(20, 184, 166, 0.45) !important;
}

/* Gradiente institucional no dark — variante mais luminosa */
.dark-mode .gradient-educare,
.dark-mode .gradient-educare-diagonal {
    background: linear-gradient(135deg, #0e7c74 0%, #13a99d 50%, #19b5aa 100%);
}

/* Cabeçalho de páginas usando Tailwind bg-gray-900 / etc. */
.dark-mode .bg-gray-800,
.dark-mode .bg-gray-900 {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

/* Auto dark mode baseado em preferência do sistema */
@media (prefers-color-scheme: dark) {
    body.auto-dark-mode {
        background-color: var(--dm-bg-primary) !important;
        color: var(--dm-text-primary) !important;
        background-image: none;
        background-attachment: fixed;
    }

    body.auto-dark-mode .bg-gray-50,
    body.auto-dark-mode .bg-gray-100 {
        background-color: transparent !important;
    }

    body.auto-dark-mode .bg-white {
        background-color: var(--dm-bg-secondary) !important;
    }

    body.auto-dark-mode .card-modern {
        background: var(--dm-bg-secondary) !important;
        border-color: var(--dm-border) !important;
    }

    body.auto-dark-mode .text-gray-900,
    body.auto-dark-mode .text-gray-800,
    body.auto-dark-mode .text-gray-700 {
        color: var(--dm-text-primary) !important;
    }

    body.auto-dark-mode .text-gray-600,
    body.auto-dark-mode .text-gray-500 {
        color: var(--dm-text-secondary) !important;
    }
}

/* Smooth transition for dark mode toggle */
body,
.bg-white,
.bg-gray-50,
.bg-gray-100,
.card-modern,
input,
select,
textarea,
table,
th,
td,
footer {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   AI CHATBOT WIDGET STYLES
   ============================================ */

.chatbot-message-content ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.chatbot-message-content li {
    margin-bottom: 0.25rem;
}

.chatbot-message-content strong {
    font-weight: 600;
}

.chatbot-message-content em {
    font-style: italic;
}

/* Animate fade in */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.3s ease-out;
}

/* ============================================
   AI ANALYSIS CARD
   ============================================ */

.ai-analysis-card {
    position: relative;
    overflow: hidden;
}

.ai-analysis-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--educare-teal) 0%, var(--educare-teal-light) 50%, var(--educare-yellow) 100%);
}

.ai-analysis-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 133, 124, 0.05);
    border-radius: 8px;
}

.ai-analysis-loading .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--educare-teal);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.ai-analysis-content {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(0, 133, 124, 0.05) 0%, rgba(0, 168, 154, 0.05) 100%);
    border-radius: 8px;
    border-left: 3px solid var(--educare-teal);
}

.ai-analysis-content p {
    line-height: 1.6;
    color: var(--educare-gray);
}

.dark-mode .ai-analysis-content {
    background: rgba(0, 133, 124, 0.1);
}

.dark-mode .ai-analysis-content p {
    color: var(--dm-text-primary);
}

:root {
    --radius-base: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;
    --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.radius-slight {
    --radius-base: 0.25rem;
    --radius-sm: 0.125rem;
    --radius-lg: 0.375rem;
}

body.radius-rounded .card-modern,
body.radius-rounded .modal-content,
body.radius-rounded .modal-container,
body.radius-rounded .confirm-modal-content,
body.radius-rounded .btn-educare-primary,
body.radius-rounded .btn-educare-secondary,
body.radius-rounded input,
body.radius-rounded select,
body.radius-rounded textarea,
body.radius-rounded button {
    border-radius: var(--radius-base);
}

body.radius-slight .card-modern,
body.radius-slight .modal-content,
body.radius-slight .modal-container,
body.radius-slight .confirm-modal-content,
body.radius-slight .btn-educare-primary,
body.radius-slight .btn-educare-secondary,
body.radius-slight input,
body.radius-slight select,
body.radius-slight textarea,
body.radius-slight button {
    border-radius: var(--radius-sm);
}

.card-modern,
.dashboard-module-card,
.dashboard-stat-card {
    transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.card-modern:hover {
    transform: translateY(-2px);
}

.modal-overlay {
    transition: opacity var(--transition-fast);
}

.modal-overlay.active .modal-content {
    animation: modalIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Responsividade — avaliações, tarefas, modais */
@media (max-width: 768px) {
    .modal-overlay { padding: 0.75rem; align-items: flex-end; }
    .modal-content { max-width: calc(100vw - 1.5rem); margin: 0; width: 100%; }
    .modal-content.modal-dialog-simple,
    .confirm-modal-content { max-width: calc(100vw - 1.5rem); }
    .question-block { padding: 0.75rem; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sidebar-desktop { transform: translateX(-100%); }
    #mobile-menu:not(.hidden) { max-height: 80vh; overflow-y: auto; }
    .tasks-columns { grid-template-columns: 1fr; }
    .tasks-done-column { order: 2; }
}

@media (min-width: 769px) {
    .modal-overlay { align-items: center; }
}

@media (max-width: 640px) {
    .dashboard-module-card { min-height: auto; }
    .flex-wrap.gap-2 a, .flex-wrap.gap-2 button { min-height: 2.5rem; }
    .tasks-completed-summary { font-size: 0.8125rem; }
}


/* Skeletons (estado de carregamento) */
.skeleton, .skeleton-line {
    animation: educare-skeleton-pulse 1.2s ease-in-out infinite;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}
.skeleton-line { height: 0.9em; margin: 0.25em 0; }
@keyframes educare-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton, .skeleton-line { animation: none; background: #e2e8f0; }
}

/* Pré-visualização de formulário — largura e scroll */
.eval-preview-modal {
    max-width: min(40rem, calc(100vw - 2rem)) !important;
    width: 100%;
    max-height: min(88vh, 720px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.eval-preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #fff;
}
.eval-preview-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
    -webkit-overflow-scrolling: touch;
}

/* Avaliação — dark mode */
.dark-mode .eval-section-block {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(20, 184, 166, 0.12) 100%) !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
}
.dark-mode .eval-section-block input {
    background: transparent !important;
    border: none !important;
    color: #ddd6fe !important;
    box-shadow: none !important;
}
.dark-mode .question-block {
    background: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border-strong) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.dark-mode .question-block.is-focused {
    border-color: #a78bfa !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}
.dark-mode .question-block .q-text-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: none !important;
}
.dark-mode .question-block .q-text-input::placeholder {
    color: var(--dm-text-secondary) !important;
    opacity: 1;
}
.dark-mode .question-block .q-text-input:focus {
    border-bottom-color: #a78bfa !important;
    background: transparent !important;
    box-shadow: none !important;
}
.dark-mode .question-block input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.dark-mode .question-block select,
.dark-mode .question-block textarea:not(.q-text-input) {
    background-color: var(--dm-bg-highlight) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text-primary) !important;
}
.dark-mode .question-block input::placeholder,
.dark-mode .question-block textarea::placeholder {
    color: #a1a1aa !important;
    opacity: 1;
}
.dark-mode .question-block .q-type-select {
    background: var(--dm-bg-highlight) !important;
    border-color: var(--dm-border-strong) !important;
    color: var(--dm-text-primary) !important;
}
.dark-mode .question-block .q-header,
.dark-mode .question-block.is-focused .q-header {
    border-bottom-color: var(--dm-border) !important;
}
.dark-mode .question-block .q-footer,
.dark-mode .question-block .q-advanced {
    border-top-color: var(--dm-border) !important;
}
.dark-mode .question-block .q-required-toggle,
.dark-mode .question-block .q-preview-meta,
.dark-mode .question-block .text-gray-500,
.dark-mode .question-block .text-gray-400 {
    color: var(--dm-text-secondary) !important;
}
.dark-mode .question-block .q-preview-field,
.dark-mode .q-preview-input,
.dark-mode .q-preview-textarea,
.dark-mode .q-preview-date {
    background: var(--dm-bg-highlight) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}
.dark-mode .eval-preview-modal {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary);
}
.dark-mode .eval-preview-modal-header {
    background: var(--dm-bg-elevated) !important;
    border-bottom-color: var(--dm-border) !important;
}
.dark-mode .eval-share-modal {
    background: var(--dm-bg-elevated) !important;
}
.dark-mode .eval-wizard-step { background: var(--dm-bg-tertiary); color: var(--dm-text-secondary); }
.dark-mode .eval-wizard-step.is-active { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; }
.dark-mode .eval-wizard-step.is-complete { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.dark-mode .eval-wizard-step-connector { background: var(--dm-border); }
.dark-mode .eval-builder-rail { background: var(--dm-bg-elevated); border-color: var(--dm-border-strong); }
.dark-mode .eval-rail-btn { background: var(--dm-bg-tertiary); border-color: var(--dm-border); color: var(--dm-text-primary); }
.dark-mode .eval-rail-btn:hover { background: var(--dm-bg-highlight); }
.dark-mode .eval-quick-add-item { background: rgba(124, 58, 237, 0.12); border-color: rgba(167, 139, 250, 0.35); color: #ddd6fe; }
.dark-mode .eval-type-picker-item { background: var(--dm-bg-tertiary); border-color: var(--dm-border); }
.dark-mode .eval-type-picker-label { color: #ddd6fe; }
.dark-mode .eval-subnav-link {
    background: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}
.dark-mode .eval-subnav-link:hover {
    background: var(--dm-bg-highlight) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-strong) !important;
}
.dark-mode .eval-subnav-link.is-active {
    background: #7c3aed !important;
    color: #fff !important;
    border-color: #7c3aed !important;
}
.dark-mode .eval-subnav-link.is-active .lucide-icon { color: #fff !important; }
.dark-mode .eval-subnav-cta {
    background: var(--dm-accent-soft) !important;
    color: var(--dm-accent) !important;
    border-color: rgba(20, 184, 166, 0.35) !important;
}
.dark-mode .eval-subnav-cta:hover {
    background: rgba(20, 184, 166, 0.22) !important;
    color: #5eead4 !important;
}
.dark-mode .eval-form-theme { --eval-card-bg: var(--dm-bg-secondary); --eval-label-color: var(--dm-text-primary); }
.dark-mode .eval-btn-choice { background: var(--dm-bg-tertiary); border-color: var(--dm-border); color: var(--dm-text-primary); }
.dark-mode .eval-btn-choice.active { background: rgba(124, 58, 237, 0.2); border-color: #a78bfa; color: #ddd6fe; }
.dark-mode .eval-likert-option:has(input:checked) { background: rgba(124, 58, 237, 0.2); border-color: #a78bfa; }
.dark-mode .eval-progress-track { background: var(--dm-bg-highlight); }
.dark-mode .eval-classification-row { background: var(--dm-bg-tertiary) !important; border-color: var(--dm-border) !important; }
.dark-mode #locale-switcher-panel { background: var(--dm-bg-elevated); border-color: var(--dm-border-strong); }
.dark-mode #locale-switcher-panel a:hover { background: var(--dm-bg-highlight); }
.dark-mode html[data-theme="dark"] .modal-content { background: var(--dm-bg-elevated); color: var(--dm-text-primary); }

/* Dashboard — botões "Acessar" e ícones com contraste legível */
.dark-mode .dashboard-module-card {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}
.dark-mode .dashboard-module-blue .module-action { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.28); }
.dark-mode .dashboard-module-blue .module-icon { background: rgba(59, 130, 246, 0.14); color: #93c5fd; border-color: rgba(59, 130, 246, 0.28); }
.dark-mode .dashboard-module-green .module-action { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.28); }
.dark-mode .dashboard-module-green .module-icon { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.28); }
.dark-mode .dashboard-module-purple .module-action { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.28); }
.dark-mode .dashboard-module-purple .module-icon { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.28); }
.dark-mode .dashboard-module-orange .module-action { background: rgba(249, 115, 22, 0.18); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.28); }
.dark-mode .dashboard-module-orange .module-icon { background: rgba(249, 115, 22, 0.14); color: #fdba74; border-color: rgba(249, 115, 22, 0.28); }
.dark-mode .dashboard-module-teal .module-action { background: rgba(20, 184, 166, 0.18); color: #5eead4; border: 1px solid rgba(20, 184, 166, 0.28); }
.dark-mode .dashboard-module-teal .module-icon { background: rgba(20, 184, 166, 0.14); color: #5eead4; border-color: rgba(20, 184, 166, 0.28); }
.dark-mode .dashboard-module-red .module-action { background: rgba(239, 68, 68, 0.18); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.28); }
.dark-mode .dashboard-module-red .module-icon { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border-color: rgba(239, 68, 68, 0.28); }
.dark-mode .dashboard-module-rose .module-action { background: rgba(225, 29, 72, 0.18); color: #fda4af; border: 1px solid rgba(225, 29, 72, 0.28); }
.dark-mode .dashboard-module-rose .module-icon { background: rgba(225, 29, 72, 0.14); color: #fda4af; border-color: rgba(225, 29, 72, 0.28); }
.dark-mode .dashboard-module-indigo .module-action { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.28); }
.dark-mode .dashboard-module-indigo .module-icon { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.28); }
.dark-mode .dashboard-module-yellow .module-action { background: rgba(234, 179, 8, 0.16); color: #fde047; border: 1px solid rgba(234, 179, 8, 0.28); }
.dark-mode .dashboard-module-yellow .module-icon { background: rgba(234, 179, 8, 0.14); color: #fde047; border-color: rgba(234, 179, 8, 0.28); }
.dark-mode .dashboard-module-cyan .module-action { background: rgba(6, 182, 212, 0.16); color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.28); }
.dark-mode .dashboard-module-cyan .module-icon { background: rgba(6, 182, 212, 0.14); color: #67e8f9; border-color: rgba(6, 182, 212, 0.28); }
.dark-mode .dashboard-module-gray .module-action { background: rgba(107, 114, 128, 0.16); color: #d1d5db; border: 1px solid rgba(107, 114, 128, 0.28); }
.dark-mode .dashboard-module-gray .module-icon { background: rgba(107, 114, 128, 0.14); color: #d1d5db; border-color: rgba(107, 114, 128, 0.28); }
.dark-mode .modal-dialog-simple .modal-footer,
.dark-mode .modal-footer { background: var(--dm-bg-tertiary); border-color: var(--dm-border); }
.dark-mode .modal-dialog-simple .modal-dialog-header { border-color: var(--dm-border); }
.dark-mode .tasks-completed-section .tasks-completed-body { border-color: var(--dm-border); }
.dark-mode .tasks-completed-summary { color: var(--dm-text-primary); }
.dark-mode .tasks-completed-summary::after { color: var(--dm-text-muted); }
.dark-mode .eval-collapsible-body { border-color: var(--dm-border); }
.dark-mode .eval-collapsible-nested { background: var(--dm-bg-tertiary); border-color: var(--dm-border); }
.dark-mode .eval-collapsible-nested .eval-collapsible-body { background: var(--dm-bg-secondary); border-color: var(--dm-border); }

/* Botões de acção em tabelas */
.dark-mode .btn-action-teal { background: rgba(20, 184, 166, 0.16); color: #5eead4; border-color: rgba(20, 184, 166, 0.35); }
.dark-mode .btn-action-teal:hover { background: rgba(20, 184, 166, 0.26); }
.dark-mode .btn-action-blue { background: rgba(59, 130, 246, 0.16); color: #93c5fd; border-color: rgba(59, 130, 246, 0.35); }
.dark-mode .btn-action-blue:hover { background: rgba(59, 130, 246, 0.26); }
.dark-mode .btn-action-purple { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.35); }
.dark-mode .btn-action-purple:hover { background: rgba(139, 92, 246, 0.26); }
.dark-mode .btn-action-gray { background: var(--dm-bg-tertiary); color: var(--dm-text-primary); border-color: var(--dm-border); }
.dark-mode .btn-action-gray:hover { background: var(--dm-bg-highlight); }
.dark-mode .btn-action-red { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }
.dark-mode .btn-action-red:hover { background: rgba(239, 68, 68, 0.26); }

.dark-mode .btn-icon-only.btn-icon-teal { background: rgba(20, 184, 166, 0.16); color: #5eead4; border: 1px solid rgba(20, 184, 166, 0.35); }
.dark-mode .btn-icon-only.btn-icon-teal:hover { background: rgba(20, 184, 166, 0.28); color: #99f6e4; }
.dark-mode .btn-icon-only.btn-icon-amber { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.dark-mode .btn-icon-only.btn-icon-amber:hover { background: rgba(245, 158, 11, 0.28); color: #fcd34d; }
.dark-mode .btn-icon-only.btn-icon-red { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.35); }
.dark-mode .btn-icon-only.btn-icon-red:hover { background: rgba(239, 68, 68, 0.28); color: #fecaca; }

.dark-mode .text-teal-700,
.dark-mode summary.text-teal-700 { color: var(--dm-accent) !important; }

.dark-mode .dashboard-stat-card,
.dark-mode .dashboard-account-card {
    background: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border) !important;
}

/* Admin settings — contraste garantido em modo claro e escuro */
.admin-settings-page h2,
.admin-settings-page h3 {
    color: #111827;
}
.admin-settings-page label,
.admin-settings-page .font-medium {
    color: #374151;
}
.dark-mode .admin-settings-page h2,
.dark-mode .admin-settings-page h3 {
    color: var(--dm-text-primary) !important;
}
.dark-mode .admin-settings-page label,
.dark-mode .admin-settings-page .font-medium.text-gray-800 {
    color: var(--dm-text-primary) !important;
}

.maintenance-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff !important;
    background-color: #6b7280 !important;
}
.maintenance-toggle-btn.is-active {
    background-color: #dc2626 !important;
}
.dark-mode .maintenance-toggle-btn:not(.is-active) {
    background-color: #52525b !important;
    color: #ffffff !important;
}
.maintenance-save-btn {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
}
.maintenance-save-btn:hover {
    background-color: #b91c1c !important;
}

/* Action toolbar — export/import buttons em mobile */
.action-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
@media (max-width: 479px) {
    .action-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .action-toolbar > a,
    .action-toolbar > button,
    .action-toolbar > form {
        width: 100%;
    }
    .action-toolbar > a,
    .action-toolbar > button {
        justify-content: center;
        text-align: center;
    }
}

/* PWA install button — brilho teal/dourado (mobile) */
@keyframes pwa-install-glow-keyframes {
    0%, 100% { box-shadow: 0 0 8px rgba(20, 184, 166, 0.45), 0 0 16px rgba(196, 160, 53, 0.25); }
    50% { box-shadow: 0 0 14px rgba(20, 184, 166, 0.75), 0 0 28px rgba(196, 160, 53, 0.45); }
}
.pwa-install-glow:not(.hidden) {
    animation: pwa-install-glow-keyframes 2.2s ease-in-out infinite;
}

/* Biblioteca — cartões em grelha (mobile) */
.library-grid-card .lib-cover {
    height: 5.5rem;
}
@media (min-width: 640px) {
    .library-grid-card .lib-cover {
        height: 9rem;
    }
}
.library-grid-card .lib-title {
    font-size: 0.8125rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.library-grid-card .lib-author {
    font-size: 0.6875rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.library-grid-card .lib-actions {
    font-size: 0.6875rem;
    gap: 0.375rem;
}

/* Tabelas mobile — ocultar rótulo em células de checkbox */
.table-mobile-cards td:has(input[type="checkbox"])::before {
    content: none;
}

/* Mensagens — interface de chat */
.messages-page {
    width: 100%;
}
.messages-shell {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 520px;
    height: calc(100vh - 13rem);
    max-height: 780px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.messages-sidebar {
    width: 320px;
    min-width: 280px;
    max-width: 38%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    background: #f9fafb;
}
.messages-sidebar-head {
    padding: 1rem 1rem 0.5rem;
}
.messages-count-badge {
    font-size: 0.75rem;
    font-weight: 600;
    background: #ccfbf1;
    color: #0f766e;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}
.messages-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.messages-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.messages-tab:hover {
    background: #f3f4f6;
    color: #374151;
}
.messages-tab.is-active {
    background: #fff;
    color: #0d9488;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.messages-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.messages-search-form {
    padding: 0.75rem;
    flex-shrink: 0;
}
.messages-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.messages-search-icon {
    position: absolute;
    left: 0.75rem;
    color: #9ca3af;
    pointer-events: none;
}
.messages-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
}
.messages-search-input:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}
.messages-thread-list,
.messages-user-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.messages-thread-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.messages-thread-item:hover {
    background: #f3f4f6;
}
.messages-thread-item.is-active {
    background: #ecfdf5;
    border-left: 3px solid #0d9488;
    padding-left: calc(1rem - 3px);
}
.messages-thread-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f3f4f6;
}
.messages-thread-row.is-active {
    background: #ecfdf5;
}
.messages-thread-row.is-active .messages-thread-item {
    background: transparent;
    border-left: 3px solid #0d9488;
    padding-left: calc(1rem - 3px);
}
.messages-thread-check {
    display: flex;
    align-items: center;
    padding: 0 0.5rem 0 0.75rem;
    flex-shrink: 0;
    cursor: pointer;
}
.messages-thread-row .messages-thread-item {
    flex: 1;
    min-width: 0;
    border-left: 3px solid transparent;
}
.messages-threads-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    flex-shrink: 0;
}
.messages-threads-bulk-bar.hidden {
    display: none;
}
.messages-bulk-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}
.messages-threads-delete-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b91c1c;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    cursor: pointer;
}
.messages-threads-delete-btn:hover {
    background: #fee2e2;
}
.messages-textarea {
    width: 100%;
    min-height: 88px;
    max-height: 200px;
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
}
.messages-textarea:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}
.messages-textarea-error {
    animation: messages-shake 0.35s ease;
    border-color: #f87171 !important;
}
.messages-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.messages-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.625rem;
}
.messages-avatar-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.875rem;
}
.messages-avatar-alt {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.messages-avatar-group {
    background: linear-gradient(135deg, #0f766e, #115e59);
}

/* Painel Novo: filtros (topo) + lista scroll + barra grupo (fundo) */
.messages-panel--new {
    min-height: 0;
}
.messages-panel--new .messages-recipient-form {
    flex-shrink: 0;
    padding: 0.625rem 0.75rem;
}
.messages-panel--new .messages-user-list {
    flex: 1 1 auto;
    min-height: 8rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.messages-group-inline-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    margin: 0;
    padding: 0.375rem 0.875rem;
    font-size: 0.6875rem;
    color: #0f766e;
    background: #f0fdfa;
    border-bottom: 1px solid #ccfbf1;
}
.messages-group-inline-hint svg,
.messages-group-inline-hint .lucide-icon {
    flex-shrink: 0;
}

/* Barra criar grupo — fixa no fundo do painel */
.messages-group-bar {
    flex-shrink: 0;
    margin: 0;
    padding: 0.625rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #99f6e4;
    background: linear-gradient(180deg, #f0fdfa 0%, #ecfdf5 100%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}
.messages-group-bar__row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.messages-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    max-height: 4.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.messages-group-chips.is-empty {
    display: none;
}
.messages-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #5eead4;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0f766e;
}
.messages-group-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 7.5rem;
}
.messages-group-chip__remove {
    border: 0;
    background: transparent;
    color: #0d9488;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.125rem;
}
.messages-group-title-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid #99f6e4;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    background: #fff;
}
.messages-group-title-input:focus {
    outline: 2px solid #14b8a6;
    outline-offset: 1px;
}
.messages-group-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: #0d9488;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.messages-group-submit:hover:not(:disabled) {
    background: #0f766e;
}
.messages-group-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.messages-group-count {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.25);
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.messages-search-wrap--with-btn {
    gap: 0.375rem;
}
.messages-search-wrap--with-btn .messages-search-input {
    flex: 1 1 auto;
    min-width: 0;
}
.messages-filter-btn--inline {
    flex-shrink: 0;
    margin: 0;
    padding: 0.5rem 0.65rem;
}
.messages-filter-btn-label {
    display: none;
}
@media (min-width: 380px) {
    .messages-filter-btn-label {
        display: inline;
    }
}

/* Cartões de utilizador (Novo) */
.messages-user-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}
.messages-user-card.is-selected {
    background: #f0fdfa;
}
.messages-user-card__info {
    min-width: 0;
    flex: 1;
}
.messages-user-card .messages-start-btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.6875rem;
}
.messages-group-pick {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    cursor: pointer;
}
.messages-group-pick input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.messages-group-pick-box {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.35rem;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.messages-group-pick input:checked + .messages-group-pick-box {
    border-color: #0d9488;
    background: #0d9488;
    box-shadow: inset 0 0 0 2px #fff;
}
.dark-mode .messages-group-bar,
[data-theme="dark"] .messages-group-bar {
    background: rgba(13, 148, 136, 0.12);
    border-color: rgba(45, 212, 191, 0.35);
}
.dark-mode .messages-group-inline-hint,
[data-theme="dark"] .messages-group-inline-hint {
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(45, 212, 191, 0.25);
    color: #5eead4;
}
.dark-mode .messages-group-title-input,
[data-theme="dark"] .messages-group-title-input {
    background: rgba(0,0,0,0.25);
    border-color: rgba(45, 212, 191, 0.35);
    color: inherit;
}
.dark-mode .messages-user-card.is-selected,
[data-theme="dark"] .messages-user-card.is-selected {
    background: rgba(13, 148, 136, 0.15);
}

@media (max-width: 640px) {
    .messages-group-bar__row {
        flex-direction: column;
    }
    .messages-group-submit {
        width: 100%;
    }
    .messages-user-card {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .messages-user-card .messages-start-btn {
        margin-left: auto;
    }
    .messages-group-submit-label {
        flex: 1;
        text-align: center;
    }
}
.messages-thread-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.messages-thread-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.messages-thread-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.messages-thread-time {
    font-size: 0.6875rem;
    color: #9ca3af;
    flex-shrink: 0;
}
.messages-thread-role,
.messages-thread-preview {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.messages-empty-sidebar {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #9ca3af;
}
.messages-user-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}
.messages-start-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0d9488;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
}
.messages-start-btn:hover {
    background: #ccfbf1;
}
.messages-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.messages-main-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #9ca3af;
}
.messages-main-empty-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}
.messages-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.messages-chat-header-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
}
.messages-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    color: #0d9488;
    border: 1px solid #99f6e4;
    background: #f0fdfa;
}
.messages-back-btn:hover {
    background: #ccfbf1;
}
.messages-in-chat-search {
    display: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
}
.messages-in-chat-search--desktop {
    display: none;
}
@media (min-width: 768px) {
    .messages-in-chat-search--desktop {
        display: inline-flex;
    }
    .messages-in-chat-search-mobile {
        display: none !important;
    }
}
.messages-in-chat-input {
    width: 12rem;
    max-width: 30vw;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    border: none;
    background: transparent;
    color: inherit;
}
.messages-in-chat-input:focus {
    outline: none;
}
.messages-in-chat-search-mobile {
    display: block;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.messages-action-btn-sm {
    width: 1.75rem;
    height: 1.75rem;
}
.messages-compose-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}
.messages-compose-hint {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 400;
    color: #9ca3af;
}
.messages-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #6b7280;
    transition: background 0.12s;
}
.messages-action-btn:hover {
    background: #f9fafb;
    color: #0d9488;
}
.messages-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background: #f8fafc;
    min-height: 0;
}
.messages-chat-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: 0.875rem;
}
.messages-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}
.messages-bubble-row.is-mine {
    justify-content: flex-end;
}
.messages-bubble-row.is-theirs {
    justify-content: flex-start;
}
.messages-bubble-wrap {
    max-width: min(75%, 32rem);
}
.messages-bubble {
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.messages-bubble-mine {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}
.messages-bubble-theirs {
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.messages-bubble-sender {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0d9488;
    margin-bottom: 0.25rem;
}
.messages-bubble-mine .messages-bubble-sender {
    color: #ccfbf1;
}
.messages-bubble-mine .message-body a {
    color: #ccfbf1;
}
.messages-bubble-mine .message-body p {
    margin: 0;
}
.messages-bubble-theirs .message-body p {
    margin: 0;
}
.messages-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    opacity: 0.85;
}
.messages-bubble-mine .messages-bubble-meta {
    color: #ccfbf1;
}
.messages-bubble-theirs .messages-bubble-meta {
    color: #9ca3af;
}
.messages-delete-btn {
    background: transparent;
    border: none;
    padding: 0.125rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
    color: inherit;
}
.messages-bubble:hover .messages-delete-btn {
    opacity: 0.7;
}
.messages-delete-btn:hover {
    opacity: 1 !important;
}
.messages-attachments {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.messages-att-image img {
    max-width: 100%;
    max-height: 12rem;
    border-radius: 0.5rem;
}
.messages-att-file {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    text-decoration: underline;
}
.messages-bubble-mine .messages-att-file {
    color: #ccfbf1;
}
.messages-compose {
    flex-shrink: 0;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.75rem 1rem 1rem;
}
.messages-compose-readonly {
    padding: 1rem;
}
.messages-quill {
    min-height: 80px;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem 0.5rem 0 0;
}
.messages-quill-error {
    animation: messages-shake 0.35s ease;
    border-color: #f87171 !important;
}
@keyframes messages-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.messages-quill-toolbar {
    border: 1px solid #e5e7eb !important;
    border-bottom: none !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    background: #f9fafb !important;
}
.messages-compose-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
}
.messages-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #6b7280;
    cursor: pointer;
    flex-shrink: 0;
}
.messages-attach-btn:hover {
    background: #f9fafb;
    color: #0d9488;
}
.messages-attach-label {
    flex: 1;
    min-width: 0;
}
.messages-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.12s;
}
.messages-send-btn:hover {
    opacity: 0.92;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.messages-panel.hidden {
    display: none !important;
}
.messages-recipient-form {
    padding: 0.75rem;
    flex-shrink: 0;
    border-bottom: 1px solid #e5e7eb;
}
.messages-recipient-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.messages-filter-field-full {
    grid-column: 1 / -1;
}
.messages-filter-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}
.messages-filter-select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: #fff;
}
.messages-recipient-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.messages-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: #0d9488;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}
.messages-filter-btn:hover {
    background: #0f766e;
}
.messages-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    color: #6b7280;
    flex-shrink: 0;
}
.messages-filter-clear:hover {
    background: #f9fafb;
}
.messages-filter-hint {
    padding: 0.25rem 0;
}
@media (max-width: 1023px) {
    .messages-shell {
        flex-direction: column;
        height: auto;
        max-height: none;
        min-height: 70vh;
    }
    .messages-sidebar {
        width: 100%;
        max-width: 100%;
        max-height: min(70vh, 560px);
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        min-height: 280px;
    }
    .messages-panel--new .messages-user-list {
        min-height: 10rem;
    }
    .messages-main {
        min-height: 55vh;
    }
    /* Um painel de cada vez: evita sobreposição lista ↔ chat */
    .messages-page.has-active-thread .messages-sidebar {
        display: none;
    }
    .messages-page:not(.has-active-thread) .messages-main {
        display: none;
    }
    .messages-page.has-active-thread .messages-main {
        display: flex;
        min-height: calc(100vh - 10rem);
    }
    .messages-back-btn {
        display: inline-flex;
    }
    .messages-chat-header {
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }
    .messages-chat-actions .messages-in-chat-search--desktop {
        display: none !important;
    }
    .messages-recipient-form .messages-search-wrap--with-btn {
        flex-wrap: wrap;
    }
    .messages-recipient-form .messages-filter-btn--inline {
        width: 100%;
        justify-content: center;
    }
    .messages-user-card__info .messages-thread-preview {
        font-size: 0.6875rem;
    }
}
@media (max-width: 640px) {
    .messages-sidebar {
        max-height: none;
        min-height: 60vh;
    }
    .messages-page.has-active-thread .messages-main {
        min-height: calc(100dvh - 8.5rem);
    }
    .messages-filter-clear {
        width: auto;
        height: auto;
        padding: 0.375rem 0.625rem;
        gap: 0.375rem;
        font-size: 0.75rem;
    }
    .messages-avatar-lg {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.75rem;
    }
}
/* Dark mode — Mensagens */
[data-theme="dark"] .messages-shell,
.dark-mode .messages-shell {
    background: var(--card-bg, #1e293b);
    border-color: var(--border-color, #334155);
}
[data-theme="dark"] .messages-sidebar,
.dark-mode .messages-sidebar {
    background: var(--bg-secondary, #0f172a);
    border-color: var(--border-color, #334155);
}
[data-theme="dark"] .messages-main,
.dark-mode .messages-main,
[data-theme="dark"] .messages-chat-header,
.dark-mode .messages-chat-header,
[data-theme="dark"] .messages-in-chat-search-mobile,
.dark-mode .messages-in-chat-search-mobile {
    background: var(--card-bg, #1e293b);
    border-color: var(--border-color, #334155);
}
[data-theme="dark"] .messages-search-input,
.dark-mode .messages-search-input,
[data-theme="dark"] .messages-in-chat-input,
.dark-mode .messages-in-chat-input,
[data-theme="dark"] .messages-filter-select,
.dark-mode .messages-filter-select {
    background: rgba(15, 23, 42, 0.85);
    border-color: #475569;
    color: #f1f5f9;
}
[data-theme="dark"] .messages-search-wrap,
.dark-mode .messages-search-wrap,
[data-theme="dark"] .messages-in-chat-search,
.dark-mode .messages-in-chat-search {
    background: rgba(15, 23, 42, 0.65);
    border-color: #475569;
}
[data-theme="dark"] .messages-thread-name,
.dark-mode .messages-thread-name,
[data-theme="dark"] .messages-chat-header h2,
.dark-mode .messages-chat-header h2 {
    color: #f1f5f9;
}
[data-theme="dark"] .messages-thread-role,
.dark-mode .messages-thread-role,
[data-theme="dark"] .messages-thread-preview,
.dark-mode .messages-thread-preview {
    color: #94a3b8;
}
[data-theme="dark"] .messages-thread-item:hover,
.dark-mode .messages-thread-item:hover,
[data-theme="dark"] .messages-user-card:hover,
.dark-mode .messages-user-card:hover {
    background: rgba(45, 212, 191, 0.08);
}
[data-theme="dark"] .messages-thread-row.is-active .messages-thread-item,
.dark-mode .messages-thread-row.is-active .messages-thread-item {
    background: rgba(13, 148, 136, 0.2);
}
[data-theme="dark"] .messages-bubble-theirs,
.dark-mode .messages-bubble-theirs {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}
[data-theme="dark"] .messages-chat-body,
.dark-mode .messages-chat-body {
    background: var(--bg-secondary, #0f172a);
}
[data-theme="dark"] .messages-back-btn,
.dark-mode .messages-back-btn {
    background: rgba(13, 148, 136, 0.2);
    border-color: rgba(45, 212, 191, 0.4);
    color: #5eead4;
}
[data-theme="dark"] .messages-action-btn,
.dark-mode .messages-action-btn {
    border-color: #475569;
    color: #cbd5e1;
}
[data-theme="dark"] .messages-action-btn:hover,
.dark-mode .messages-action-btn:hover {
    background: rgba(45, 212, 191, 0.12);
    color: #5eead4;
}
[data-theme="dark"] .messages-start-btn,
.dark-mode .messages-start-btn {
    background: rgba(13, 148, 136, 0.25);
    border-color: rgba(45, 212, 191, 0.4);
    color: #5eead4;
}
[data-theme="dark"] .messages-tabs,
.dark-mode .messages-tabs {
    border-color: #334155;
}
[data-theme="dark"] .messages-tab,
.dark-mode .messages-tab {
    color: #94a3b8;
}
[data-theme="dark"] .messages-tab.is-active,
.dark-mode .messages-tab.is-active {
    color: #5eead4;
    border-color: #14b8a6;
}
[data-theme="dark"] .messages-user-card,
.dark-mode .messages-user-card {
    border-color: #334155;
}
[data-theme="dark"] .messages-group-pick-box,
.dark-mode .messages-group-pick-box {
    background: #1e293b;
    border-color: #64748b;
}

/* Feedback táctil genérico (só quando touch-gestures activa .touch-ui) */
.touch-ui button:active,
.touch-ui a.btn-educare-primary:active,
.touch-ui a.btn-educare-secondary:active,
.touch-ui .messages-start-btn:active,
.touch-ui .messages-action-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}
.touch-ui .messages-thread-item,
.touch-ui .messages-user-card {
    min-height: 3.25rem;
}

/* Reordenar menu lateral — touch-friendly */
.sidebar-order-list {
    touch-action: pan-y;
}
.sidebar-order-item {
    transition: box-shadow 0.15s ease, transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    user-select: none;
    -webkit-user-select: none;
    min-height: 3rem;
}
.sidebar-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin: -0.25rem 0;
    padding: 0.35rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1rem;
    letter-spacing: 0.05em;
    cursor: grab;
    touch-action: none;
    border-radius: 0.375rem;
}
.sidebar-drag-handle:active {
    cursor: grabbing;
    background: #e5e7eb;
    color: #0d9488;
}
.sidebar-order-arrows {
    display: none;
    flex-direction: column;
    gap: 0.15rem;
}
.sidebar-order-up,
.sidebar-order-down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.35rem;
    background: #fff;
    color: #4b5563;
    font-size: 0.65rem;
    line-height: 1;
    padding: 0;
}
.sidebar-order-up:active,
.sidebar-order-down:active {
    background: #ccfbf1;
    border-color: #99f6e4;
    color: #0f766e;
}
.sidebar-order-item.sidebar-order-dragging {
    opacity: 0.92;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    border-color: #14b8a6;
    background: #f0fdfa;
}
.sidebar-order-item.sidebar-order-drop-target {
    border-color: #0d9488;
    background: #ecfdf5;
    box-shadow: inset 0 0 0 1px #99f6e4;
}
body.sidebar-touch-sorting {
    overflow: hidden;
    touch-action: none;
}
@media (max-width: 1023px) {
    .sidebar-order-arrows {
        display: flex;
    }
    .sidebar-drag-handle {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.15rem;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
    }
    .sidebar-order-item {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        gap: 0.5rem;
    }
}
[data-theme="dark"] .sidebar-order-item,
.dark-mode .sidebar-order-item {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sidebar-drag-handle,
.dark-mode .sidebar-drag-handle {
    background: #0f172a;
    border-color: #475569;
    color: #94a3b8;
}
[data-theme="dark"] .sidebar-order-up,
.dark-mode .sidebar-order-up,
[data-theme="dark"] .sidebar-order-down,
.dark-mode .sidebar-order-down {
    background: #0f172a;
    border-color: #475569;
    color: #cbd5e1;
}
[data-theme="dark"] .sidebar-order-item.sidebar-order-dragging,
.dark-mode .sidebar-order-item.sidebar-order-dragging,
[data-theme="dark"] .sidebar-order-item.sidebar-order-drop-target,
.dark-mode .sidebar-order-item.sidebar-order-drop-target {
    background: rgba(13, 148, 136, 0.2);
    border-color: #14b8a6;
}

/* Página Sobre / Tutoriais */
.sobre-page .sobre-hero {
    background: linear-gradient(135deg, #f0fdfa 0%, #fff 60%);
    border: 1px solid #ccfbf1;
}
.sobre-page .sobre-pdf-btn {
    width: auto !important;
    max-width: max-content;
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .sobre-page .sobre-pdf-btn {
        width: auto !important;
        align-self: flex-start;
    }
}
.sobre-card {
    transition: box-shadow 0.15s ease;
}
.sobre-card:not(.hidden):hover {
    box-shadow: 0 4px 14px rgba(0, 133, 124, 0.08);
}
.sobre-card-toggle:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: -2px;
}
.sobre-chevron.rotate-180 {
    transform: rotate(180deg);
}
.sobre-cat-btn.is-active {
    font-weight: 600;
}
[data-theme="dark"] .sobre-page .sobre-hero {
    background: linear-gradient(135deg, #134e4a 0%, var(--card-bg, #1e293b) 60%);
    border-color: #0f766e;
}

/* Secretaria — barra de estatísticas de presença */
.sec-att-stats-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1.5rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.875rem;
    line-height: 1.35;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}
.sec-att-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
    padding-right: 1.5rem;
    border-right: 1px solid #e2e8f0;
}
.sec-att-stat:last-child {
    padding-right: 0;
    border-right: none;
}
.sec-att-stat strong {
    font-size: 1rem;
    font-weight: 700;
}
.sec-att-stat-label {
    color: #64748b;
    font-size: 0.8125rem;
}
.sec-att-stat-total strong { color: #1e293b; }
.sec-att-stat-present strong { color: #15803d; }
.sec-att-stat-absent strong { color: #dc2626; }
.sec-att-stat-leave strong { color: #b45309; }
.sec-att-stat-unmarked strong { color: #64748b; }
.sec-att-stat-pct {
    margin-left: auto;
    padding-left: 0.25rem;
}
.sec-att-stat-pct strong { color: #0f766e; }
@media (max-width: 640px) {
    .sec-att-stats-bar {
        gap: 0.55rem 1rem;
        padding: 0.75rem 1rem;
    }
    .sec-att-stat {
        padding-right: 1rem;
    }
    .sec-att-stat-pct {
        margin-left: 0;
        width: 100%;
        padding-top: 0.35rem;
        border-right: none;
        border-top: 1px solid #e2e8f0;
        padding-right: 0;
    }
}
[data-theme="dark"] .sec-att-stats-bar {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .sec-att-stat {
    border-right-color: #334155;
}
[data-theme="dark"] .sec-att-stat-label { color: #94a3b8; }
[data-theme="dark"] .sec-att-stat-total strong { color: #f1f5f9; }
[data-theme="dark"] .sec-att-stat-pct { border-top-color: #334155; }