/* ──────────────────────────────────────────────────────────
   CECAL · Estilos do portal (MudBlazor)
   Tudo construído sobre os tokens do MudTheme: --mud-palette-*
   Funciona em modo claro e escuro automaticamente.
   ────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────
   1. Scrollbars discretas
   ────────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(84,183,209,0.35) transparent;
}

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

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(84,183,209,0.30);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(84,183,209,0.55);
}


/* ──────────────────────────────────────────────────────────
   2. Container raiz da aplicação
   ────────────────────────────────────────────────────────── */
.cecal-app {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
}

/* Decoração de fundo: blobs flutuantes */
.cecal-bg-decor {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.cecal-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
}

.cecal-bg-blob--1 {
    top: -120px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(127,206,221,0.7), rgba(127,206,221,0));
    animation: cecal-blob 18s ease-in-out infinite;
}

.cecal-bg-blob--2 {
    bottom: -160px;
    right: -100px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(26,106,131,0.55), rgba(26,106,131,0));
    animation: cecal-blob 22s ease-in-out infinite reverse;
}

.cecal-bg-blob--3 {
    top: 40%;
    left: 50%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(95,196,222,0.35), rgba(95,196,222,0));
    animation: cecal-blob 26s ease-in-out infinite;
}

@keyframes cecal-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -20px) scale(1.08); }
}

.modo-escuro .cecal-bg-blob--1 {
    background: radial-gradient(circle, rgba(95,196,222,0.30), rgba(95,196,222,0));
}

.modo-escuro .cecal-bg-blob--2 {
    background: radial-gradient(circle, rgba(26,106,131,0.55), rgba(26,106,131,0));
}

.modo-escuro .cecal-bg-blob--3 {
    background: radial-gradient(circle, rgba(127,206,221,0.18), rgba(127,206,221,0));
}


/* ──────────────────────────────────────────────────────────
   3. AppBar — vidro fosco com borda de luz
   ────────────────────────────────────────────────────────── */
.cecal-appbar.mud-appbar {
    background: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-appbar-text) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}

.modo-escuro .cecal-appbar.mud-appbar {
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}

.cecal-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(127,206,221,0.18), rgba(26,106,131,0.10));
    border-radius: 10px;
    padding: 4px 8px;
}

.modo-escuro .cecal-logo-wrap {
    background: linear-gradient(135deg, rgba(95,196,222,0.18), rgba(95,196,222,0.05));
}

.cecal-brand-text {
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    background: linear-gradient(135deg, #54B7D1 0%, #1A6A83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modo-escuro .cecal-brand-text {
    background: linear-gradient(135deg, #9CDDE9 0%, #5FC4DE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cecal-theme-btn .mud-icon-root {
    transition: transform 320ms ease;
}

.cecal-theme-btn:hover .mud-icon-root {
    transform: rotate(-18deg) scale(1.08);
}

.cecal-avatar {
    box-shadow: 0 2px 8px rgba(26,106,131,0.25);
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.cecal-avatar:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26,106,131,0.35);
}


/* ──────────────────────────────────────────────────────────
   4. Drawer — superfície translúcida
   ────────────────────────────────────────────────────────── */
.cecal-drawer.mud-drawer {
    background: var(--mud-palette-drawer-background) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-right: 1px solid var(--mud-palette-divider);
}

.cecal-drawer-header {
    padding: 20px 20px 16px !important;
    background: linear-gradient(135deg, rgba(127,206,221,0.10), rgba(26,106,131,0.04));
}

.modo-escuro .cecal-drawer-header {
    background: linear-gradient(135deg, rgba(95,196,222,0.10), rgba(95,196,222,0.02));
}

.cecal-drawer-brand {
    display: flex;
    align-items: center;
}

.cecal-drawer-title {
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: var(--mud-palette-primary);
    line-height: 1.2;
}

.cecal-drawer-subtitle {
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.cecal-drawer-divider {
    border-color: var(--mud-palette-divider-light) !important;
    margin: 0 !important;
}

.cecal-drawer-footer {
    padding: 16px 20px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-divider-light);
}

.cecal-version {
    opacity: 0.6;
    margin-top: 2px;
}


/* ──────────────────────────────────────────────────────────
   5. Navegação lateral
   ────────────────────────────────────────────────────────── */
.cecal-nav {
    padding: 10px 12px;
}

.cecal-nav-section {
    display: block;
    padding: 10px 12px 6px;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
}

.cecal-nav .mud-nav-link {
    border-radius: 10px;
    margin: 2px 0;
    padding: 10px 12px;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cecal-nav .mud-nav-link:hover {
    background-color: rgba(84,183,209,0.10);
    color: var(--mud-palette-primary);
    transform: translateX(2px);
}

.modo-escuro .cecal-nav .mud-nav-link:hover {
    background-color: rgba(95,196,222,0.10);
}

.cecal-nav .mud-nav-link.active {
    background: linear-gradient(135deg, rgba(84,183,209,0.20), rgba(26,106,131,0.10));
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.modo-escuro .cecal-nav .mud-nav-link.active {
    background: linear-gradient(135deg, rgba(95,196,222,0.18), rgba(95,196,222,0.04));
}

.cecal-nav .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}


/* ──────────────────────────────────────────────────────────
   6. Conteúdo principal
   ────────────────────────────────────────────────────────── */
.cecal-main {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 68px);
    padding-top: 68px;
}

.cecal-content {
    max-width: 100%;
    margin: 0 auto;
}


/* ──────────────────────────────────────────────────────────
   7. Hero da Home — espelha o "cover" do formulário CECAL
   ────────────────────────────────────────────────────────── */
.cecal-home {
    position: relative;
    z-index: 1;
}

.cecal-hero {
    border-radius: 28px !important;
    overflow: hidden;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider-light);
    box-shadow:
        0 24px 60px rgba(13,74,94,0.12),
        0 4px 12px rgba(13,74,94,0.06);
    transition: box-shadow 260ms ease, transform 260ms ease;
}

.modo-escuro .cecal-hero {
    box-shadow:
        0 24px 60px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.30);
}

.cecal-hero:hover {
    transform: translateY(-2px);
    box-shadow:
        0 30px 72px rgba(13,74,94,0.16),
        0 6px 16px rgba(13,74,94,0.08);
}

.cecal-hero-grid {
    min-height: 360px;
}

.cecal-hero-cover {
    position: relative;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(155deg,
            #B6E4EE 0%,
            #7FCEDD 30%,
            #54B7D1 60%,
            #2A8AAA 90%,
            #1A6A83 100%);
    overflow: hidden;
    min-height: 320px;
}

.modo-escuro .cecal-hero-cover {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(95,196,222,0.20) 0%, rgba(95,196,222,0) 55%),
        linear-gradient(155deg,
            #1F4A5C 0%,
            #1A6A83 35%,
            #2A8AAA 65%,
            #3A96B4 100%);
}

.cecal-hero-cover::before,
.cecal-hero-cover::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    height: 50%;
    border-radius: 50%;
    pointer-events: none;
}

.cecal-hero-cover::before {
    bottom: -28%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 60%);
}

.cecal-hero-cover::after {
    top: -28%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%);
}

.cecal-hero-cover-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 48px 32px;
}

.cecal-hero-logo {
    max-width: 80%;
    max-height: 240px;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.18));
    animation: cecal-float 6s ease-in-out infinite;
}

@keyframes cecal-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.cecal-hero-body {
    padding: 48px 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 960px) {
    .cecal-hero-body { padding: 32px 28px; }
}

.cecal-hero-eyebrow {
    color: var(--mud-palette-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    opacity: 0.9;
}

.cecal-hero-title {
    color: var(--mud-palette-primary) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    background: linear-gradient(135deg, #54B7D1 0%, #1A6A83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 8px;
}

.modo-escuro .cecal-hero-title {
    background: linear-gradient(135deg, #9CDDE9 0%, #5FC4DE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cecal-hero-subtitle {
    color: var(--mud-palette-text-secondary) !important;
    max-width: 56ch;
    line-height: 1.65 !important;
}

.cecal-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cecal-hero-cta.mud-button-filled-primary {
    border-radius: 999px !important;
    padding: 10px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 24px rgba(84,183,209,0.35);
    background: linear-gradient(135deg, #54B7D1 0%, #3A96B4 100%) !important;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.cecal-hero-cta.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(84,183,209,0.45);
    background: linear-gradient(135deg, #5FC4DE 0%, #54B7D1 100%) !important;
}

.modo-escuro .cecal-hero-cta.mud-button-filled-primary {
    background: linear-gradient(135deg, #5FC4DE 0%, #3A96B4 100%) !important;
    box-shadow: 0 8px 24px rgba(95,196,222,0.30);
}

.cecal-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider-light);
}

.cecal-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}


/* ──────────────────────────────────────────────────────────
   8. Cards de estatística
   ────────────────────────────────────────────────────────── */
.cecal-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px !important;
    border-radius: 18px !important;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider-light);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.cecal-stat-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.cecal-stat-icon .mud-icon-root {
    font-size: 1.6rem;
}

.cecal-stat-icon--primary {
    background: linear-gradient(135deg, #54B7D1, #3A96B4);
    box-shadow: 0 8px 18px rgba(84,183,209,0.35);
}

.cecal-stat-icon--secondary {
    background: linear-gradient(135deg, #2A8AAA, #1A6A83);
    box-shadow: 0 8px 18px rgba(26,106,131,0.35);
}

.cecal-stat-icon--success {
    background: linear-gradient(135deg, #3DD68C, #1FA970);
    box-shadow: 0 8px 18px rgba(43,182,115,0.35);
}

.cecal-stat-icon--warning {
    background: linear-gradient(135deg, #F4B53F, #E08C1A);
    box-shadow: 0 8px 18px rgba(242,169,59,0.35);
}

.cecal-stat-value {
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--mud-palette-text-primary);
}

.cecal-stat-label {
    color: var(--mud-palette-text-secondary) !important;
    margin-top: 4px;
}


/* ──────────────────────────────────────────────────────────
   9. Cards de ação
   ────────────────────────────────────────────────────────── */
.cecal-section-title {
    font-weight: 600 !important;
    color: var(--mud-palette-text-primary);
    position: relative;
    padding-left: 14px;
}

.cecal-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #54B7D1, #1A6A83);
}

.cecal-action {
    padding: 24px !important;
    border-radius: 18px !important;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider-light);
    height: 100%;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.cecal-action::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(84,183,209,0.06), rgba(26,106,131,0));
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.cecal-action:hover {
    transform: translateY(-4px);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 18px 36px rgba(13,74,94,0.10);
}

.modo-escuro .cecal-action:hover {
    box-shadow: 0 18px 36px rgba(0,0,0,0.40);
}

.cecal-action:hover::after {
    opacity: 1;
}

.cecal-action-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(84,183,209,0.18), rgba(26,106,131,0.10));
    color: var(--mud-palette-primary);
}

.modo-escuro .cecal-action-icon {
    background: linear-gradient(135deg, rgba(95,196,222,0.18), rgba(95,196,222,0.04));
}

.cecal-action-text {
    color: var(--mud-palette-text-secondary) !important;
    line-height: 1.55 !important;
    min-height: 3.1em;
}


/* ──────────────────────────────────────────────────────────
   10. Tabelas (refino sobre o existente)
   ────────────────────────────────────────────────────────── */
.mud-table {
    background: var(--mud-palette-surface) !important;
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider-light);
}

.mud-table-head {
    background-color: var(--mud-palette-tertiary) !important;
}

.mud-table-head tr th {
    color: var(--mud-palette-secondary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.mud-table-head tr th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.mud-table-head tr th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* ──────────────────────────────────────────────────────────
   11. Diálogos
   ────────────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: 20px !important;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider-light);
}

.mud-dialog .mud-dialog-title {
    background: linear-gradient(135deg, #54B7D1 0%, #1A6A83 100%);
    color: white !important;
    padding: 20px 24px !important;
}

.modo-escuro .mud-dialog .mud-dialog-title {
    background: linear-gradient(135deg, #3A96B4 0%, #0D4A5E 100%);
}


/* ──────────────────────────────────────────────────────────
   12. Tabs
   ────────────────────────────────────────────────────────── */
.mud-tabs-tabbar-transparent {
    background-color: transparent;
}


/* ──────────────────────────────────────────────────────────
   13. Cards utilitários
   ────────────────────────────────────────────────────────── */
.card-cecal {
    background: var(--mud-palette-surface) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px !important;
    border: 1px solid var(--mud-palette-divider-light);
}


/* ──────────────────────────────────────────────────────────
   14. Inputs MudBlazor — borda mais suave
   ────────────────────────────────────────────────────────── */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
    transition: border-color 180ms ease;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}


/* ──────────────────────────────────────────────────────────
   15. Botões — raios e transições
   ────────────────────────────────────────────────────────── */
.mud-button-root {
    border-radius: 10px !important;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.mud-button-root:not(.mud-button-text):hover {
    transform: translateY(-1px);
}


/* ──────────────────────────────────────────────────────────
   16. Responsivo
   ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cecal-hero-grid           { display: block; }
    .cecal-hero-cover          { min-height: 200px; }
    .cecal-hero-logo           { max-height: 140px; }
    .cecal-hero-body           { padding: 28px 22px; }
    .cecal-hero-title.mud-typography-h2 { font-size: 1.875rem !important; }

    /* Barra de ações no mobile: só os botões (à direita). A coluna .vol-disp-bar-info
       (contador/resumo) é escondida para não sobrepor os botões — o mesmo dado já
       aparece no cabeçalho da página. Padrão de referência: telas de Coordenação.
       Os botões seguem o mesmo comportamento do desktop (.vol-disp-bar-acoes base):
       UMA linha encostada à direita, quebrando de cima para baixo (flex-wrap) se não
       couber — NUNCA empilhar em coluna nem centralizar. */
    .vol-disp-bar { padding: 8px 14px 10px; gap: 8px; }

    /* Seletor de DOIS níveis de propósito. A regra base .vol-disp-bar-info { display:flex }
       mora na seção 18, DEPOIS desta — e com a mesma especificidade ela vencia mesmo dentro
       da media query, deixando o contador visível no telefone desde sempre. Quem confiava
       nisto era a tela de reunião, cujo subtítulo repete o contador justamente para o mobile:
       o resultado era o número aparecendo duas vezes. Especificidade maior resolve sem
       depender da ordem em que as seções do arquivo forem reorganizadas amanhã. */
    .vol-disp-bar > .vol-disp-bar-info { display: none; }
}


/* ──────────────────────────────────────────────────────────
   17. Portal do Voluntário
   ────────────────────────────────────────────────────────── */

/* Container raiz do layout de voluntário */
.vol-app .mud-layout {
    background: transparent;
}

/* AppBar fica acima dos blobs */
.vol-app .mud-appbar {
    z-index: 10;
}

/* Área de conteúdo principal — sem margin do drawer */
.vol-main.mud-main-content {
    padding-left: 0 !important;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 68px);
    padding-top: 68px;
}

.vol-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px 48px;
}


/* ── Saudação ─────────────────────────────────────────────── */
.vol-home {
    position: relative;
    z-index: 1;
}

/*
 * Loading spinner centralizado
 */
.cecal-loading-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 72px 0 48px;
}

/*
 * Empty state: quando não há cabeçalho (vol-escala-header), o MudPaper do
 * estado vazio é o PRIMEIRO filho direto de vol-home e precisa do mesmo
 * espaço superior que o cabeçalho daria (padding-top: 32px).
 * Quando há header, o MudPaper não é :first-child — regra não se aplica.
 * O mesmo vale para o spinner de loading quando é o primeiro elemento.
 */
.vol-home > .mud-paper:first-child,
.vol-home > .cecal-loading-area:first-child {
    margin-top: 32px;
}

.vol-greeting {
    padding: 36px 0 28px;
}

.vol-greeting-inner {
    max-width: 560px;
}

.vol-greeting-eyebrow {
    color: var(--mud-palette-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    opacity: 0.85;
}

.vol-greeting-nome {
    font-weight: 700 !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #0D4A5E 0%, #1A6A83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 6px 0 10px;
}

.modo-escuro .vol-greeting-nome {
    background: linear-gradient(135deg, #9CDDE9 0%, #5FC4DE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vol-greeting-sub {
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-secondary) !important;
}

.vol-greeting-icon {
    color: var(--mud-palette-primary);
    vertical-align: middle;
}


/* ── Mini estatísticas ────────────────────────────────────── */
.vol-stats-row {
    margin-bottom: 32px !important;
}


/* ── Separador de seção ───────────────────────────────────── */
.vol-section-gap {
    margin-bottom: 16px !important;
}


/* ── Cards de ação grandes ───────────────────────────────── */
.vol-card-acao {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.vol-card-acao-titulo {
    font-weight: 600 !important;
}

.vol-card-acao-arrow {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    justify-content: flex-end;
    color: var(--mud-palette-primary);
    opacity: 0.55;
    transition: opacity 200ms ease, transform 200ms ease;
}

.vol-card-acao:hover .vol-card-acao-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Ícone colorido por variante */
.vol-card-acao-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.vol-card-acao-icon .mud-icon-root {
    font-size: 1.9rem;
}

.vol-card-acao-icon--primary {
    background: linear-gradient(135deg, #54B7D1, #3A96B4);
    box-shadow: 0 8px 20px rgba(84,183,209,0.38);
}

.vol-card-acao-icon--success {
    background: linear-gradient(135deg, #3DD68C, #1FA970);
    box-shadow: 0 8px 20px rgba(43,182,115,0.35);
}

.vol-card-acao-icon--warning {
    background: linear-gradient(135deg, #F4B53F, #E08C1A);
    box-shadow: 0 8px 20px rgba(242,169,59,0.35);
}

.vol-card-acao-icon--info {
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
    box-shadow: 0 8px 20px rgba(96,165,250,0.35);
}

.vol-card-acao-icon--secondary {
    background: linear-gradient(135deg, #2A8AAA, #1A6A83);
    box-shadow: 0 8px 20px rgba(26,106,131,0.35);
}


/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .vol-content                { padding: 0 12px 40px; }
    .vol-greeting               { padding: 24px 0 20px; }
    .vol-greeting-nome.mud-typography-h4 { font-size: 1.6rem !important; }
    .vol-card-acao              { min-height: 180px; }
    .vol-card-acao-icon         { width: 52px; height: 52px; border-radius: 14px; }
    .vol-card-acao-icon .mud-icon-root { font-size: 1.6rem; }
}

@media (min-width: 601px) and (max-width: 960px) {
    .vol-content { padding: 0 20px 48px; }
}

@media (min-width: 961px) {
    .vol-content { padding: 0 24px 56px; }
}


/* ──────────────────────────────────────────────────────────
   Auth — layout e card de autenticação
   ────────────────────────────────────────────────────────── */

.cecal-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cecal-auth-topbar {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 10;
}

.cecal-auth-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
}

.cecal-auth-card.mud-paper {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2rem 2rem;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 8px 48px rgba(26, 106, 131, 0.12), 0 1px 0 rgba(255,255,255,0.6) inset !important;
}

.modo-escuro .cecal-auth-card.mud-paper {
    background: rgba(19, 38, 47, 0.90) !important;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.40) !important;
}

.cecal-auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.75rem;
    gap: 0.25rem;
}

.cecal-auth-subtitle {
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.06em;
}

/* Seletor de canal do código (WhatsApp / SMS / E-mail) — MudToggleGroup nativo com visual de
   "trilho + pílula": grupo sem borda com fundo suave; o item selecionado (SelectedClass) vira a
   pílula sólida primária. 3 segmentos de largura igual, sem quebra, a partir de 320px. */
.cecal-auth-tipo-grupo {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 4px;
    gap: 4px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.cecal-auth-tipo-grupo .mud-toggle-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px;
    border-radius: 9px !important;
}

.cecal-auth-tipo-grupo .mud-toggle-item.cecal-auth-tipo-sel {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.cecal-auth-tipo-opcao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Ícone um passo menor que o Size.Small (20px): é o que dá folga ao "WhatsApp" no iPhone SE. */
.cecal-auth-tipo-opcao .mud-icon-root {
    width: 18px;
    height: 18px;
}

/* Telas estreitas (iPhone SE etc.): menos padding lateral no card + fonte menor nos segmentos =
   folga real p/ o "WhatsApp". PRECISA vir DEPOIS das regras base — media query não muda a
   prioridade da cascata; antes delas, a base (mesma especificidade) vence e a regra morre. */
@media (max-width: 400px) {
    .cecal-auth-card.mud-paper {
        padding: 2.25rem 1.25rem 1.75rem;
    }

    .cecal-auth-tipo-opcao {
        font-size: 0.75rem;
    }
}

/* Campo de código OTP — fonte maior, centrado */
.cecal-auth-codigo input {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.35em;
    text-align: center;
}

/* Barra de progresso do timer */
.cecal-auth-progress-area {
    margin-top: 0.5rem;
}

.cecal-auth-timer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

/* Botão principal */
.cecal-auth-btn {
    height: 48px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* Ações secundárias (reenviar / voltar) */
.cecal-auth-acoes-secundarias {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Grupo de campos de telefone (+55 / DDD / número) */
.cecal-auth-tel-grupo {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
    margin-bottom: 4px;
}

.cecal-auth-tel-col-pais {
    flex: 0 0 70px;
}

.cecal-auth-tel-col-ddd {
    flex: 0 0 70px;
}

.cecal-auth-tel-col-numero {
    flex: 1;
    min-width: 0;
}

/* Estilo visual do campo +55 — só exibição, sem interação */
.cecal-auth-tel-pais {
    pointer-events: none !important;
    opacity: 0.65;
}

.cecal-auth-tel-erro {
    display: block;
    padding: 0 14px;
    margin-top: -2px;
    margin-bottom: 8px;
}


/* ──────────────────────────────────────────────────────────
   Página não encontrada (404)
   ────────────────────────────────────────────────────────── */

.cecal-404-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 24px 16px;
}

.cecal-404-card.mud-paper {
    width: 100%;
    max-width: 460px;
    padding: 3rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 8px 48px rgba(26, 106, 131, 0.12), 0 1px 0 rgba(255,255,255,0.6) inset !important;
}

.modo-escuro .cecal-404-card.mud-paper {
    background: rgba(19, 38, 47, 0.90) !important;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.40) !important;
}

/* Círculo com ícone */
.cecal-404-icon-area {
    margin-bottom: 1.75rem;
}

.cecal-404-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(84,183,209,0.15), rgba(26,106,131,0.08));
    border: 2px solid rgba(84,183,209,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modo-escuro .cecal-404-ring {
    background: linear-gradient(135deg, rgba(95,196,222,0.12), rgba(95,196,222,0.04));
    border-color: rgba(95,196,222,0.22);
}

.cecal-404-icon {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    color: var(--mud-palette-primary) !important;
    opacity: 0.85;
}

/* Número 404 em gradiente */
.cecal-404-codigo {
    font-size: 5.5rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

/* Descrição */
.cecal-404-desc {
    max-width: 360px;
    margin-bottom: 2rem !important;
    line-height: 1.65 !important;
}

/* Área de botões */
.cecal-404-acoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* ──────────────────────────────────────────────────────────
   18. Página 404
   ────────────────────────────────────────────────────────── */

.cecal-404-btn-principal {
    height: 48px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    width: 100%;
}


/* ──────────────────────────────────────────────────────────
   18. Página de Disponibilidade
   ────────────────────────────────────────────────────────── */

.vol-disp-header {
    padding: 32px 0 20px;
}

.vol-disp-mes-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.72);
    color: var(--mud-palette-primary);
    border: 1px solid rgba(84,183,209,.35);
    border-radius: 20px;
    padding: 3px 12px 3px 9px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modo-escuro .vol-disp-mes-badge {
    background: rgba(84,183,209,.14);
    border-color: rgba(84,183,209,.28);
}

.vol-disp-titulo {
    font-weight: 700 !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #0D4A5E 0%, #1A6A83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 4px;
}

.modo-escuro .vol-disp-titulo {
    background: linear-gradient(135deg, #9CDDE9 0%, #5FC4DE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vol-disp-sub {
    color: var(--mud-palette-text-secondary) !important;
    margin-bottom: 14px;
    line-height: 1.55 !important;
}

.vol-disp-contador {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider-light);
    border-radius: 24px;
    padding: 5px 14px 5px 8px;
}

.vol-disp-contador-num {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    line-height: 1;
    min-width: 1.4ch;
    text-align: right;
}

.vol-disp-contador-txt {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}


/* ── Grid de dias ─────────────────────────────────────────── */

.vol-disp-grid {
    display: grid;
    /* minmax(0,1fr): colunas podem encolher abaixo do conteúdo — impede que um badge/chip
       com white-space:nowrap estoure a coluna e gere scroll horizontal (bug do histórico). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 96px;
}

@media (max-width: 860px) {
    .vol-disp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .vol-disp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Histórico (read-only): cartões mais densos (desfecho com atribuição + situação).
   Menos colunas para o texto respirar; 1 coluna no mobile. */
.vol-hist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
    .vol-hist-grid { grid-template-columns: 1fr; }
}


/* ── Card de dia ──────────────────────────────────────────── */

.vol-disp-card {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1.5px solid rgba(84,183,209,.22);
    border-radius: 16px;
    padding: 14px 12px 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(13,74,94,.07);
    transition: transform 160ms ease, box-shadow 180ms ease,
                border-color 180ms ease, background 220ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.modo-escuro .vol-disp-card {
    border-color: rgba(84,183,209,.13);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.vol-disp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13,74,94,.12);
    border-color: var(--mud-palette-primary);
}

.modo-escuro .vol-disp-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.32);
}

.vol-disp-card:active {
    transform: scale(.96);
    transition-duration: 80ms;
}

.vol-disp-card--sel {
    background: linear-gradient(145deg, #54B7D1 0%, #3A96B4 55%, #2A8AAA 100%);
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(84,183,209,.40);
}

.vol-disp-card--sel:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(84,183,209,.50);
    border-color: transparent;
}

/* Topo: data + círculo check */
.vol-disp-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 7px;
}

.vol-disp-dia-num {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    display: block;
}

.vol-disp-card--sel .vol-disp-dia-num {
    color: #fff;
}

.vol-disp-mes-ref {
    font-size: .8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    opacity: .65;
}

.vol-disp-card--sel .vol-disp-mes-ref {
    color: rgba(255,255,255,.65);
    opacity: 1;
}

.vol-disp-dia-nome {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
    margin-top: 2px;
    display: block;
}

.vol-disp-card--sel .vol-disp-dia-nome {
    color: rgba(255,255,255,.78);
}

/* Círculo check */
.vol-disp-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 160ms ease;
}

.vol-disp-card--sel .vol-disp-check {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.55);
}

/* Divisor */
.vol-disp-div {
    height: 1px;
    background: var(--mud-palette-divider-light);
    margin: 7px 0;
    border: none;
}

.vol-disp-card--sel .vol-disp-div {
    background: rgba(255,255,255,.2);
}

/* Badges de horário */
.vol-disp-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.vol-disp-horario {
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .015em;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(84,183,209,.10);
    color: var(--mud-palette-primary);
    border: 1px solid rgba(84,183,209,.18);
    white-space: nowrap;
}

.vol-disp-card--sel .vol-disp-horario {
    background: rgba(255,255,255,.18);
    color: #fff;
    border-color: rgba(255,255,255,.28);
}

/* ── Histórico de disponibilidade: desfecho por dia (read-only) ── */
.vol-hist-desfechos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vol-hist-horario {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vol-hist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Desfecho pode ter texto longo (ex.: "ATENDIMENTO FRATERNO · CONFIRMADO"): deixar quebrar
   dentro do cartão em vez do nowrap padrão do chip — senão estica o cartão e estoura o grid. */
.vol-hist-chips .vol-conf-status-chip {
    white-space: normal;
    flex-shrink: 1;
    max-width: 100%;
}


/* ── Controles: filtro + seleção rápida ──────────────────── */

.vol-disp-controles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(84,183,209,.18);
    border-radius: 14px;
    padding: 8px 12px;
}

.modo-escuro .vol-disp-controles {
    background: rgba(15,30,40,.60);
    border-color: rgba(84,183,209,.13);
}

.vol-disp-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vol-disp-filtros-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    opacity: .7;
    margin-right: 2px;
    white-space: nowrap;
}

.vol-disp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all 150ms ease;
    border: 1.5px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-transform: capitalize;
}

.vol-disp-chip:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.vol-disp-chip--ativo {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(84,183,209,.32);
}

.vol-disp-chip--ativo:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(84,183,209,.44);
}

.vol-disp-chip-cnt {
    font-size: .62rem;
    font-weight: 600;
    opacity: .72;
    background: rgba(0,0,0,.07);
    border-radius: 10px;
    padding: 0 5px;
    min-width: 1.8ch;
    text-align: center;
}

.vol-disp-chip--ativo .vol-disp-chip-cnt {
    background: rgba(255,255,255,.22);
    opacity: 1;
}

.vol-disp-sel-rapida {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}


/* ── Barra de ações fixa ──────────────────────────────────── */

.vol-disp-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid rgba(13,74,94,.07);
    padding: 10px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Se info + botões não couberem, o grupo de ações cai para a linha de baixo (à direita)
       em vez de sobrepor — defesa para larguras intermediárias. */
    flex-wrap: wrap;
}

.modo-escuro .vol-disp-bar {
    background: rgba(12,26,34,.93);
    border-top-color: rgba(255,255,255,.06);
}

.vol-disp-bar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vol-disp-bar-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.vol-disp-bar-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    line-height: 1;
    flex-shrink: 0;
}

.vol-disp-bar-txt {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.vol-disp-bar-detalhe {
    font-size: .65rem;
    color: var(--mud-palette-text-secondary);
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    text-transform: capitalize;
}

.vol-disp-bar-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Ações (ação primária + Voltar por último) sempre à direita, mesmo sem a coluna
       .vol-disp-bar-info ou se ela colapsar no mobile — não depende só do justify da barra. */
    margin-left: auto;
}


/* ──────────────────────────────────────────────────────────
   19. Página — Escala do Mês
   ────────────────────────────────────────────────────────── */

/* ── Cabeçalho ───────────────────────────────────────────── */

.vol-escala-header {
    padding: 32px 0 20px;
}

.vol-escala-mes-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.72);
    color: var(--mud-palette-primary);
    border: 1px solid rgba(84,183,209,.35);
    border-radius: 20px;
    padding: 3px 12px 3px 9px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modo-escuro .vol-escala-mes-badge {
    background: rgba(84,183,209,.14);
    border-color: rgba(84,183,209,.28);
}

.vol-escala-titulo {
    font-weight: 700 !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #0D4A5E 0%, #1A6A83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 4px;
}

.modo-escuro .vol-escala-titulo {
    background: linear-gradient(135deg, #9CDDE9 0%, #5FC4DE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vol-escala-sub {
    color: var(--mud-palette-text-secondary) !important;
    margin-bottom: 14px;
    line-height: 1.55 !important;
}


/* ── Meu Perfil ──────────────────────────────────────────── */

.vol-perfil-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 0 18px;
}

.vol-perfil-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.vol-perfil-avatar {
    width: 92px !important;
    height: 92px !important;
    font-size: 2rem !important;
    border: 3px solid rgba(255,255,255,.7);
    box-shadow: 0 8px 22px rgba(13,74,94,.28);
}

.modo-escuro .vol-perfil-avatar {
    border-color: rgba(84,183,209,.3);
}

.vol-perfil-foto-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    transition: transform .15s ease, filter .15s ease;
}

.modo-escuro .vol-perfil-foto-btn {
    border-color: #12333f;
}

.vol-perfil-foto-btn:hover {
    transform: scale(1.08);
    filter: brightness(1.08);
}

.vol-perfil-foto-btn--off {
    opacity: .5;
    pointer-events: none;
}

.vol-perfil-info {
    min-width: 0;
}

.vol-perfil-nome {
    font-weight: 700 !important;
    line-height: 1.12 !important;
    background: linear-gradient(135deg, #0D4A5E 0%, #1A6A83 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 2px;
}

.modo-escuro .vol-perfil-nome {
    background: linear-gradient(135deg, #9CDDE9 0%, #5FC4DE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vol-perfil-sub {
    color: var(--mud-palette-text-secondary) !important;
    margin: 0 !important;
}

.vol-perfil-secao {
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 18px 2px 8px;
}

.vol-perfil-contato {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.vol-perfil-contato-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}


/* ── Tabs de dia da semana + filtro ──────────────────────── */

.vol-escala-filtro-area {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
}

.vol-escala-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.vol-escala-tabs::-webkit-scrollbar {
    display: none;
}

.vol-escala-tab {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 150ms ease;
    border: 1.5px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.vol-escala-tab:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.vol-escala-tab--ativo {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(84,183,209,.32);
}

.vol-escala-tab--ativo:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(84,183,209,.44);
}


/* ── Grade de cards ───────────────────────────────────────── */

.vol-escala-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 96px;
}

@media (max-width: 900px) { .vol-escala-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vol-escala-grid { grid-template-columns: 1fr; gap: 10px; } }


/* ── Card de ocorrência ───────────────────────────────────── */

.vol-escala-card {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider-light);
    border-radius: 16px;
    padding: 14px 12px 10px;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.vol-escala-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13,74,94,.09);
    border-color: var(--mud-palette-primary);
}

.vol-escala-card:active {
    transform: scale(.96);
    transition-duration: 80ms;
}

/* Topo do card: data + horário pill */
.vol-escala-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 11px;
}

.vol-escala-dia-num {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    display: block;
}

.vol-escala-mes-ref {
    font-size: .8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    opacity: .65;
}

.vol-escala-dia-nome {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
    margin-top: 2px;
    display: block;
}

.vol-escala-horario-pill {
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .015em;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(84,183,209,.10);
    color: var(--mud-palette-primary);
    border: 1px solid rgba(84,183,209,.18);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Divisor */
.vol-escala-div {
    height: 1px;
    background: var(--mud-palette-divider-light);
    margin: 7px 0;
    border: none;
}

/* Corpo do card */
.vol-escala-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.vol-escala-atrib-linha {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vol-escala-atrib-nome {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
    opacity: .75;
}

.vol-escala-nomes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vol-escala-nome-item {
    font-size: .8rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Dots de status (usados em card e em detalhe) */
.vol-escala-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vol-escala-dot--aguardando   { background: var(--mud-palette-text-disabled); }
.vol-escala-dot--confirmado   { background: #43a047; }
.vol-escala-dot--nao-confirmado { background: #e53935; }
.vol-escala-dot--presente     { background: var(--mud-palette-primary); }

.vol-escala-ver-mais {
    font-size: .7rem;
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-align: right;
    margin-top: 6px;
    opacity: .75;
}


/* ── Vista de detalhe ─────────────────────────────────────── */

.vol-escala-detalhe {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 96px;
}

.vol-escala-detalhe-atrib {
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider-light);
    border-radius: 14px;
    overflow: hidden;
}

.vol-escala-detalhe-atrib-header {
    padding: 9px 16px;
    background: rgba(84,183,209,.07);
    border-bottom: 1px solid rgba(84,183,209,.12);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mud-palette-primary);
}

.vol-escala-detalhe-atrib-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vol-escala-detalhe-escalado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 150ms ease;
}

.vol-escala-detalhe-escalado:hover {
    background: rgba(84,183,209,.06);
}

.vol-escala-detalhe-escalado-nome {
    font-size: .88rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Chips de status (detalhe) */
.vol-escala-status-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vol-escala-status-chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vol-escala-status-chip--aguardando {
    background: rgba(128,128,128,.10);
    color: var(--mud-palette-text-secondary);
}

.vol-escala-status-chip--aguardando::before { background: var(--mud-palette-text-disabled); }

.vol-escala-status-chip--confirmado {
    background: rgba(52,168,83,.12);
    color: #2e7d32;
}

.vol-escala-status-chip--confirmado::before { background: #43a047; }

.modo-escuro .vol-escala-status-chip--confirmado {
    color: #81c784;
    background: rgba(52,168,83,.18);
}

.vol-escala-status-chip--nao-confirmado {
    background: rgba(234,67,53,.10);
    color: #c62828;
}

.vol-escala-status-chip--nao-confirmado::before { background: #e53935; }

.modo-escuro .vol-escala-status-chip--nao-confirmado {
    color: #ef9a9a;
    background: rgba(234,67,53,.16);
}

.vol-escala-status-chip--presente {
    background: rgba(84,183,209,.12);
    color: var(--mud-palette-primary);
}

.vol-escala-status-chip--presente::before { background: var(--mud-palette-primary); }


/* ──────────────────────────────────────────────────────────
   20. Página — Confirmação de Presença
   ────────────────────────────────────────────────────────── */

/* ── Cabeçalho (reutiliza vol-escala-header / mes-badge / titulo / sub) ── */

/* ── Grade de cards de ocorrência ────────────────────────── */

.vol-conf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-bottom: 96px;
}

@media (max-width: 640px) { .vol-conf-grid { grid-template-columns: 1fr; gap: 10px; } }


/* ── Card de ocorrência confirmável ──────────────────────── */

.vol-conf-card {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-radius: 16px;
    border-left: 4px solid var(--mud-palette-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow 180ms ease;
    padding: 16px 18px 14px;
}

.vol-conf-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

.vol-conf-card--confirmado {
    border-left-color: var(--mud-palette-success);
}

.vol-conf-card--pendente {
    border-left-color: var(--mud-palette-warning);
}

.vol-conf-card--aguardando-sub {
    border-left-color: var(--mud-palette-primary);
}

/* Topo do card */
.vol-conf-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.vol-conf-dia-num {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    display: block;
}

.vol-conf-mes-ref {
    font-size: .82rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    opacity: .6;
}

.vol-conf-dia-nome {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
    margin-top: 3px;
    display: block;
}

/* Status chip no topo do card */
.vol-conf-status-chip {
    font-size: .58rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vol-conf-status-chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vol-conf-status-chip--aguardando {
    background: rgba(128,128,128,.10);
    color: var(--mud-palette-text-secondary);
}
.vol-conf-status-chip--aguardando::before { background: var(--mud-palette-text-disabled); }

.vol-conf-status-chip--confirmado {
    background: rgba(52,168,83,.12);
    color: #2e7d32;
}
.vol-conf-status-chip--confirmado::before { background: #43a047; }

.modo-escuro .vol-conf-status-chip--confirmado { color: #81c784; background: rgba(52,168,83,.18); }

.vol-conf-status-chip--recusado {
    background: rgba(234,67,53,.10);
    color: #c62828;
}
.vol-conf-status-chip--recusado::before { background: #e53935; }

.modo-escuro .vol-conf-status-chip--recusado { color: #ef9a9a; background: rgba(234,67,53,.16); }

.vol-conf-status-chip--aguardando-sub {
    background: rgba(237,165,0,.12);
    color: #e65100;
}
.vol-conf-status-chip--aguardando-sub::before { background: #ffa000; }

.modo-escuro .vol-conf-status-chip--aguardando-sub { color: #ffcc02; background: rgba(237,165,0,.18); }

/* Corpo do card */
.vol-conf-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

/* Uma linha por atribuição dentro do card do dia. Com uma só, o layout é o de sempre; com duas, cada
   uma ganha a sua situação e um traço separando — é o que deixa claro que são dois compromissos no
   MESMO dia, e não um. */
.vol-conf-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.vol-conf-item + .vol-conf-item {
    border-top: 1px solid var(--mud-palette-divider-light);
    padding-top: 8px;
    margin-top: 2px;
}

/* Aqui o chip divide a linha com o nome da atribuição, e o mais longo — "SUBSTITUIÇÃO EM ANDAMENTO" —
   reservaria uns 170px fixos num celular de 390px. É o caso denso que a regra do projeto manda
   sobrescrever; o margin-top some porque ali ele nasce no topo do card, e não ao lado do texto. */
.vol-conf-item .vol-conf-status-chip {
    white-space: normal;
    flex-shrink: 1;
    max-width: 55%;
    margin-top: 0;
}

/* min-width:0 para o nome comprido da atribuição quebrar em vez de empurrar o chip para fora do
   card no celular. */
.vol-conf-item-texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vol-conf-atrib-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mud-palette-text-secondary);
    opacity: .75;
}

.vol-conf-horario-badge {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Ações do card */
.vol-conf-card-acoes {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    border-top: 1px solid var(--mud-palette-divider-light);
    padding-top: 12px;
    padding-left: 18px;
    padding-right: 18px;
    margin-top: auto;
    margin-left: -18px;
    margin-right: -18px;
    flex-wrap: wrap;
}


/* ── Painel de escolha de recusa ─────────────────────────── */

.vol-conf-recusa {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 96px;
}

.vol-conf-recusa-info {
    background: rgba(234,67,53,.06);
    border: 1px solid rgba(234,67,53,.18);
    border-radius: 14px;
    padding: 14px 16px;
}

.vol-conf-recusa-data {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 2px;
}

.vol-conf-recusa-atrib {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.vol-conf-recusa-opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) { .vol-conf-recusa-opcoes { grid-template-columns: 1fr; } }

.vol-conf-recusa-opcao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider-light);
    border-radius: 16px;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 160ms ease, border-color 160ms ease;
    text-align: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.vol-conf-recusa-opcao:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13,74,94,.09);
    border-color: var(--mud-palette-primary);
}

.vol-conf-recusa-opcao:active {
    transform: scale(.96);
    transition-duration: 80ms;
}

.vol-conf-recusa-opcao-icone {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(84,183,209,.10);
    color: var(--mud-palette-primary);
}

.vol-conf-recusa-opcao-titulo {
    font-size: .85rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.vol-conf-recusa-opcao-desc {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}


/* ── Campo de busca de substitutos ──────────────────────── */

.vol-conf-subs-busca {
    margin-bottom: 14px;
}


/* ── Lista de substitutos ────────────────────────────────── */

.vol-conf-subs-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 96px;
}

.vol-conf-subs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider-light);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 160ms ease, border-color 160ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.vol-conf-subs-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13,74,94,.08);
    border-color: var(--mud-palette-primary);
}

.vol-conf-subs-item:active {
    transform: scale(.96);
    transition-duration: 80ms;
}

.vol-conf-subs-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(84,183,209,.12);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.vol-conf-subs-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Foto clicável (abre modal grande) */
.avatar-foto--clicavel {
    cursor: zoom-in;
    transition: transform .12s ease, filter .12s ease;
}

.avatar-foto--clicavel:hover {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* Modal de foto grande */
.vol-foto-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 6px;
}

.vol-foto-modal-img {
    max-width: 100%;
    max-height: 68vh;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 12px 34px rgba(0,0,0,.32);
}

.vol-foto-modal-nome {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--mud-palette-text-primary);
}

/* Avatar pequeno na escala (grid de nomes) */
.vol-escala-mini-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(84,183,209,.14);
    color: var(--mud-palette-primary);
    font-size: .58rem;
    font-weight: 700;
    vertical-align: middle;
}

.vol-escala-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar nas linhas do detalhe do dia */
.vol-escala-detalhe-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(84,183,209,.14);
    color: var(--mud-palette-primary);
    font-size: .72rem;
    font-weight: 700;
    margin-right: 9px;
}

.vol-escala-detalhe-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vol-conf-subs-nome {
    flex: 1;
    font-size: .9rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

/* Badge de disponibilidade do candidato a troca */
.vol-coord-disp-badge {
    display: inline-block;
    font-size: .66rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.vol-coord-disp-badge--sim {
    background: rgba(84,183,209,.15);
    color: var(--mud-palette-primary);
}

.vol-coord-disp-badge--nao {
    background: rgba(128,128,128,.12);
    color: var(--mud-palette-text-secondary);
}

.vol-conf-motivo-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.vol-conf-motivo-field {
    width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   Convites Recebidos
   ───────────────────────────────────────────────────────────── */

.vol-conv-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 80px;
}

/* Card base */
.vol-conv-card {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
    border-left: 4px solid transparent;
    transition: box-shadow 180ms ease;
}

.vol-conv-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

/* Tipo: onda automática (verde primário) */
.vol-conv-card--onda {
    border-left-color: var(--mud-palette-primary);
}

/* Tipo: pedido direto (cor de alerta/laranja) */
.vol-conv-card--direto {
    border-left-color: var(--mud-palette-warning);
}

/* Topo do card */
.vol-conv-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px 0;
    gap: 8px;
}

.vol-conv-data-bloco {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.vol-conv-dia-num {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.vol-conv-mes-ref {
    font-size: 1rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.vol-conv-dia-nome {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
}

/* Chip de expiração */
.vol-conv-expiracao {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.vol-conv-expiracao--normal {
    background: rgba(84,183,209,.12);
    color: var(--mud-palette-primary);
}

.vol-conv-expiracao--alerta {
    background: rgba(255,167,38,.15);
    color: var(--mud-palette-warning-dark);
}

.vol-conv-expiracao--urgente {
    background: rgba(244,67,54,.12);
    color: var(--mud-palette-error);
    animation: vol-conv-pulse 1.4s ease-in-out infinite;
}

@keyframes vol-conv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* Corpo do card */
.vol-conv-card-body {
    padding: 10px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vol-conv-atrib-label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.vol-conv-horario-badge {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.vol-conv-solicitante {
    font-size: .78rem;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.vol-conv-solicitante--sistema {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

/* Ações */
.vol-conv-card-acoes {
    display: flex;
    gap: 8px;
    padding: 12px 16px 14px;
}

/* Painel de recusa */
.vol-conv-recusa {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vol-conv-recusa-info {
    padding: 12px 14px;
    background: rgba(84,183,209,.07);
    border-radius: 10px;
    border-left: 3px solid var(--mud-palette-primary);
}

.vol-conv-recusa-data {
    font-size: .95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-transform: capitalize;
}

.vol-conv-recusa-atrib {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Área do Coordenador — vol-coord-*
   ──────────────────────────────────────────────────────────────────────── */

/* Card de ação do coordenador na home */
.vol-card-acao--coord {
    border: 1.5px solid rgba(var(--mud-palette-warning-rgb, 245,124,0), .25);
}
.vol-card-acao-icon--coord {
    background: rgba(var(--mud-palette-warning-rgb, 245,124,0), .10);
    color: var(--mud-palette-warning);
}

/* Lista de escalas para selecionar */
.vol-coord-escala-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.vol-coord-escala-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    cursor: pointer;
    transition: background .18s, box-shadow .18s;
}
.vol-coord-escala-item:hover {
    background: var(--mud-palette-action-default-hover);
    box-shadow: 0 3px 12px rgba(0,0,0,.1);
}
.vol-coord-escala-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.vol-coord-escala-nome {
    font-size: .95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.vol-coord-escala-periodo {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}
.vol-coord-situacao-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    align-self: flex-start;
    margin-top: 2px;
}
.vol-coord-situacao-badge--sorteando {
    background: rgba(var(--mud-palette-warning-rgb), .15);
    color: var(--mud-palette-warning-darken);
}

/* Tabs de dia da semana — já existe vol-dia-tabs, mas vamos garantir */
.vol-dia-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.vol-dia-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: transparent;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    transition: all .18s;
}
.vol-dia-tab--ativo,
.vol-dia-tab:hover {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

/* Cards de ocorrência no calendário */
.vol-coord-ocorrencias {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vol-coord-ocorrencia-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1.5px solid transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    cursor: pointer;
    transition: background .18s, border-color .18s;
}
.vol-coord-ocorrencia-card:hover {
    background: var(--mud-palette-action-default-hover);
}
.vol-coord-ocorrencia-card--ativa {
    border-color: var(--mud-palette-primary);
}
.vol-coord-ocorrencia-data {
    min-width: 42px;
    text-align: center;
}
.vol-coord-ocorrencia-dia {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    display: block;
    line-height: 1;
}
.vol-coord-ocorrencia-mes {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}
.vol-coord-ocorrencia-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vol-coord-ocorrencia-horario {
    font-size: .88rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}
.vol-coord-badge-gerenciar {
    font-size: .72rem;
    font-weight: 600;
    background: rgba(var(--mud-palette-primary-rgb, 84,183,209), .12);
    color: var(--mud-palette-primary);
    padding: 2px 8px;
    border-radius: 10px;
    align-self: flex-start;
}

/* Detalhe da ocorrência — seções de atribuição */
.vol-coord-atrib-secao {
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border: 1.5px solid transparent;
}
.vol-coord-atrib-secao--ativa {
    border-color: var(--mud-palette-primary);
}
.vol-coord-atrib-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.vol-coord-atrib-nome {
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.vol-coord-atrib-badge {
    font-size: .7rem;
    font-weight: 600;
    background: rgba(var(--mud-palette-primary-rgb, 84,183,209), .12);
    color: var(--mud-palette-primary);
    padding: 2px 8px;
    border-radius: 10px;
}
.vol-coord-escalado-vazio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.vol-coord-escalado-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.vol-coord-escalado-item:last-of-type {
    border-bottom: none;
}
.vol-coord-escalado-esquerda {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.vol-coord-escalado-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--mud-palette-primary-rgb, 84,183,209), .15);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.vol-coord-escalado-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vol-coord-escalado-dados {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.vol-coord-escalado-nome {
    font-size: .9rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vol-coord-status-chip {
    font-size: .68rem !important;
    padding: 2px 7px !important;
    align-self: flex-start;
}
.vol-coord-escalado-acoes {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.vol-coord-atrib-rodape {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Notificar checkbox */
.vol-coord-notificar {
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Formulário de convidado externo */
.vol-coord-externo-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Seletor de vaga em aberto (baixa de convites na adição manual) ──────── */
.vol-coord-vaga-aviso {
    margin: 12px 0 4px;
    padding: 14px 16px;
    background: rgba(255,167,38,.08);
    border: 1px solid rgba(255,167,38,.35);
    border-radius: 12px;
}

.vol-coord-vaga-aviso-cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.vol-coord-vaga-aviso-desc {
    margin: 6px 0 10px;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.vol-coord-vaga-opcoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vol-coord-vaga-opcao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider-light);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.vol-coord-vaga-opcao:hover {
    border-color: var(--mud-palette-primary);
}

.vol-coord-vaga-opcao--sel {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(84,183,209,.25);
}

.vol-coord-vaga-opcao-nome {
    font-size: .85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.vol-coord-vaga-opcao-meta {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Pré-Escalas ─────────────────────────────────────────────── */
.vol-pre-lista {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.vol-pre-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem .9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.vol-pre-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(84, 183, 209, .18);
}

.vol-pre-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vol-pre-card-titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.vol-pre-card-sub {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.vol-pre-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 3px;
}

.vol-pre-card-vagas {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.vol-pre-badge {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 8px;
}

.vol-pre-badge--aberta {
    background: #E1F5EE;
    color: #0F6E56;
}

.vol-pre-badge--fechada {
    background: #FAEEDA;
    color: #854F0B;
}

.vol-pre-badge--trancada {
    background: #F1EFE8;
    color: #444441;
}

.vol-pre-secao-titulo {
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.vol-pre-opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .85rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.vol-pre-opcao--sel {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(84, 183, 209, .22);
}

.vol-pre-opcao-nome {
    font-size: .88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.vol-pre-opcao-meta {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.vol-pre-meses {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.vol-pre-mes {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .7rem;
    border-radius: 999px;
    cursor: pointer;
}

.vol-pre-mes--sel {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

/* ── Minhas Palestras ────────────────────────────────────────── */
.vol-pal-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem .9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.vol-pal-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(84, 183, 209, .18);
}

.vol-pal-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vol-pal-card-data {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
}

.vol-pal-card-mesref {
    font-size: .8rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.vol-pal-card-nome {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
}

.vol-pal-card-titulo {
    font-size: .9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vol-pal-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 3px;
}

.vol-pal-badge {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 8px;
}

.vol-pal-badge--pendente {
    background: #FAEEDA;
    color: #854F0B;
}

.vol-pal-badge--completa {
    background: #E1F5EE;
    color: #0F6E56;
}

/* Checks por campo (mural da Comunicação): o que já foi preenchido em Tema/Descritivo/Obras. */
.vol-pal-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 4px;
}

.vol-pal-check {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .7rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    opacity: .65;
}

.vol-pal-check--ok {
    color: #0F6E56;
    opacity: 1;
}

.modo-escuro .vol-pal-check--ok {
    color: #5DCAA5;
}

.vol-pal-form {
    display: flex;
    flex-direction: column;
    margin-top: .4rem;
}

.vol-pal-card--vazia {
    cursor: default;
    opacity: .75;
}

.vol-pal-card--vazia:hover {
    border-color: var(--mud-palette-lines-default);
    box-shadow: none;
}

.vol-pal-card-semtexto {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    font-style: italic;
}

.vol-pal-card-tema {
    display: block;
    margin-top: 3px;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vol-pal-tag-externo {
    display: inline-block;
    margin-left: .4rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 6px;
    border-radius: 6px;
    background: #EAF3FB;
    color: #1C5A8A;
    vertical-align: 1px;
}

.vol-pal-badge--sem {
    background: #F1EFE8;
    color: #444441;
}

.vol-pal-add-externo {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: .5rem;
    padding: .3rem .7rem;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-primary);
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}

.vol-pal-add-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.vol-pal-add-acoes .vol-pal-add-externo {
    margin-top: 0;
}

.vol-pal-externo-form {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .6rem;
}

.vol-pal-externo-acoes {
    display: flex;
    justify-content: flex-end;
    gap: .3rem;
}

.vol-pal-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #FBEAEA;
    color: #A8322B;
    cursor: pointer;
    flex-shrink: 0;
}

.vol-pal-acoes {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

.vol-pal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #E7F4F8;
    color: #2C7A90;
    cursor: pointer;
    flex-shrink: 0;
}

.vol-pre-aviso {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.vol-pre-dias {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: .8rem;
}

.vol-pre-dia {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: .7rem .8rem;
    background: var(--mud-palette-surface);
}

.vol-pre-dia-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
}

.vol-pre-dia-data {
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.vol-pre-dia-mesref {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.vol-pre-dia-nome {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
    margin-top: 1px;
}

.vol-pre-dia-cont {
    font-size: .74rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.vol-pre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.vol-pre-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .74rem;
    padding: 4px 9px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
}

.vol-pre-chip--entrar {
    border-style: dashed;
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
    cursor: pointer;
}

.vol-pre-chip--sair {
    background: #E6F1FB;
    border-color: #A9CBEF;
    color: #185FA5;
    font-weight: 600;
    cursor: pointer;
}

.vol-pre-chip--cheia {
    color: var(--mud-palette-text-disabled);
}

.vol-pre-chip--vazia {
    border-style: dashed;
    color: var(--mud-palette-text-disabled);
}

.vol-pre-chip-x {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--mud-palette-error);
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
}

.vol-pre-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 700;
    margin-top: .5rem;
}

.vol-pre-toggle--aberta {
    background: #E1F5EE;
    color: #0F6E56;
}

.vol-pre-toggle--fechada {
    background: #FAEEDA;
    color: #854F0B;
}

/* ── Banner de instalação (PWA) ──────────────────────────────── */
.vol-instalar {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 14px;
    background: rgba(84, 183, 209, .08);
    margin-bottom: 1rem;
}

@media (min-width: 600px) {
    .vol-instalar {
        margin-top: 1rem;
    }
}

/* Com dois botões e um texto que explica o aviso do Android, a linha única do convite estoura: em
   375px o bloco de ações espreme e o banner passou de 1001px de altura — 123% da tela, com o primeiro
   cartão da Home lá embaixo (medido em 2026-08-28). Aqui as ações descem para uma linha própria. */
.vol-instalar--coluna {
    flex-wrap: wrap;
    align-items: flex-start;
}

.vol-instalar--coluna .vol-instalar-acoes {
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

/* Sem isto os RÓTULOS é que quebram, no meio da palavra ("Abrir no / Chrome", "Instalar aqui /
   mesmo") — visto no Chrome do usuário a 390px, depois de a medição de DOM ter dado tudo certo. Com
   o nowrap, quem quebra é a LINHA: os dois botões cabem lado a lado e o ✕ desce. */
.vol-instalar--coluna .vol-instalar-acoes .mud-button-root {
    white-space: nowrap;
}

.vol-instalar-icone {
    display: flex;
    color: var(--mud-palette-primary);
}

.vol-instalar-txt {
    flex: 1;
    min-width: 0;
}

.vol-instalar-titulo {
    font-size: .9rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.vol-instalar-sub {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.vol-instalar-acoes {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* ── Destaque do próprio voluntário na escala ────────────────── */
.vol-escala-nome-item--eu {
    background: rgba(84, 183, 209, .16);
    border-radius: 999px;
    padding: 2px 10px 2px 4px;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.vol-escala-detalhe-escalado--eu {
    background: rgba(84, 183, 209, .12);
    border-radius: 10px;
    padding: 4px 8px;
    margin: 2px -4px;
}

.vol-escala-detalhe-escalado--eu .vol-escala-detalhe-escalado-nome {
    font-weight: 700;
    color: var(--mud-palette-primary);
}


/* ══ Tela Envios (administração) ═══════════════════════════════ */

.vol-env-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.vol-env-data {
    flex: 1 1 130px;
    min-width: 120px;
}

.vol-env-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Seletor de visão — mesmo trilho segmentado do seletor de canal do login */
.vol-env-visao-grupo {
    width: 100%;
    margin-bottom: .5rem;
    padding: 4px;
    gap: 4px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.vol-env-visao-grupo .mud-toggle-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px;
    border-radius: 9px !important;
}

.vol-env-visao-grupo .mud-toggle-item.vol-env-visao-sel {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.vol-env-visao-opcao {
    display: block;
    text-align: center;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Busca — linha própria, largura total (padrão das demais telas de coordenação) */
.vol-env-busca {
    width: 100%;
    margin-bottom: .6rem;
}

/* Pills do período — contagem por situação, clicáveis (atalho do filtro) */
.vol-env-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.vol-env-pill {
    border: 1px solid transparent;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: .02em;
}

.vol-env-pill--ativa {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Alerta do topo — quem precisa de outro canal */
.vol-env-alerta {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .6rem;
    margin-bottom: .6rem;
    padding: .65rem .8rem;
    border-radius: 12px;
    background: rgba(237, 165, 0, .12);
    color: #e65100;
    font-size: .8rem;
    line-height: 1.35;
}

.modo-escuro .vol-env-alerta {
    color: #ffcc02;
    background: rgba(237, 165, 0, .18);
}

/* Card de aviso / pessoa */
.vol-env-card {
    padding: .8rem .95rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.vol-env-card-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: .5rem;
}

.vol-env-card-titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.vol-env-card-meta {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.vol-env-contadores {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}

.vol-env-destinatarios {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--mud-palette-lines-default);
    padding-top: .5rem;
}

.vol-env-dest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 4px 0;
}

.vol-env-dest-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vol-env-dest-nome {
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Motivo da falha — texto pequeno em cor de alerta, abaixo do nome/aviso */
.vol-env-dest-motivo {
    font-size: .68rem;
    color: #c62828;
    overflow-wrap: anywhere;
}

.modo-escuro .vol-env-dest-motivo {
    color: #ef9a9a;
}

/* Linha da visão cronológica */
.vol-env-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .8rem;
    margin-bottom: .4rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.vol-env-linha-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vol-env-linha-det {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

/* Semáforo de situação — chip usado nos contadores e por destinatário */
.vol-env-chip {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.vol-env-chip--lida        { background: rgba(52, 168, 83, .14);  color: #2e7d32; }
.vol-env-chip--entregue    { background: rgba(21, 101, 192, .12); color: #1565c0; }
.vol-env-chip--enviada     { background: rgba(128, 128, 128, .12); color: var(--mud-palette-text-secondary); }
.vol-env-chip--falhou      { background: rgba(234, 67, 53, .12);  color: #c62828; }
.vol-env-chip--sem-whatsapp { background: rgba(237, 165, 0, .14); color: #e65100; border: 1px dashed #e65100; }
.vol-env-chip--sms         { background: rgba(106, 27, 154, .12); color: #6a1b9a; }

.modo-escuro .vol-env-chip--lida        { color: #81c784; background: rgba(52, 168, 83, .20); }
.modo-escuro .vol-env-chip--entregue    { color: #90caf9; background: rgba(21, 101, 192, .20); }
.modo-escuro .vol-env-chip--falhou      { color: #ef9a9a; background: rgba(234, 67, 53, .18); }
.modo-escuro .vol-env-chip--sem-whatsapp { color: #ffcc02; background: rgba(237, 165, 0, .18); border-color: #ffcc02; }
.modo-escuro .vol-env-chip--sms         { color: #ce93d8; background: rgba(106, 27, 154, .22); }

@media (max-width: 400px) {
    .vol-env-visao-opcao {
        font-size: .74rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Inscrição pública — etapa de estudos (checklist do Pentateuco + obras)
   Público idoso em celular: alvos de toque grandes, uma coluna, sem scroll
   horizontal em 390px. Os segmentos seguem o padrão do login (cecal-auth-tipo-*),
   com classes próprias para não acoplar as duas telas.
   ══════════════════════════════════════════════════════════════════════════ */

.cecal-insc-etapa {
    font-weight: 600;
    margin-bottom: .5rem;
}

.cecal-insc-titulo {
    font-weight: 600;
    margin-bottom: .5rem;
}

.cecal-insc-seg-grupo {
    width: 100%;
    padding: 4px;
    gap: 4px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.cecal-insc-seg-grupo .mud-toggle-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 2px;
    border-radius: 9px !important;
}

.cecal-insc-seg-grupo .mud-toggle-item.cecal-insc-seg-sel {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Vertical (níveis): o flex:1 1 0 do modo horizontal distribui a ALTURA e produz
   espaçamento irregular. Aqui cada opção é uma faixa de largura cheia e altura própria,
   com fundo de superfície para ler como botão — sem isso parecem só links de texto. */
.cecal-insc-seg-grupo.mud-toggle-group-vertical .mud-toggle-item {
    flex: 0 0 auto;
    width: 100%;
    padding: 12px 8px;
    background: var(--mud-palette-surface);
}

.cecal-insc-seg-grupo.mud-toggle-group-vertical .mud-toggle-item.cecal-insc-seg-sel {
    background: var(--mud-palette-primary);
}

.cecal-insc-seg-opcao {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Rótulo e critério empilhados dentro do item do toggle. O empilhamento mora num elemento NOSSO
   (ver EditorEstudos.razor) justamente para não depender de classe interna do MudBlazor. */
.cecal-insc-seg-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Critério do nível, sob o rótulo: o nome do degrau só diz algo a quem conhece a escala.
   Opacidade em vez de cor fixa para acompanhar o estado selecionado do próprio botão. */
.cecal-insc-seg-ajuda {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.25;
    opacity: .72;
    margin-top: 2px;
    text-transform: none;
}

/* Cartão de uma obra do checklist */
.cecal-insc-obra {
    padding: .75rem;
    margin-bottom: .75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
}

.cecal-insc-obra-titulo {
    margin-bottom: .5rem;
    line-height: 1.3;
}

/* Obras complementares já escolhidas */
.cecal-insc-obras-lidas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .75rem;
}

/* Aceite da Política de Privacidade: caixa e texto lado a lado, alinhados pelo topo — o texto
   quebra em duas linhas em telas estreitas e não pode empurrar a caixa para baixo. */
.cecal-insc-politica {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    margin-top: 1.25rem;
}

/* Código de 6 dígitos: a pessoa está copiando números de uma mensagem — dígitos grandes e
   espaçados tornam a conferência óbvia e o erro de digitação visível. */
.cecal-insc-codigo input {
    font-size: 1.5rem;
    letter-spacing: .5rem;
    text-align: center;
}

/* Ações: primária primeiro (esquerda), Voltar por último; uma linha encostada
   à direita que quebra de cima para baixo — nunca coluna, nunca centralizado. */
.cecal-insc-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
}

@media (max-width: 400px) {
    .cecal-insc-seg-opcao {
        font-size: .76rem;
    }

    .cecal-insc-seg-ajuda {
        font-size: .66rem;
    }
}

/* Nível do estudante na coordenação — chip discreto, com o aviso de discrepância ao lado.
   Fica abaixo do contato no cartão do matriculado, então precisa quebrar em vez de esticar. */
.cecal-insc-nivel-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
}

.cecal-insc-nivel-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: normal;
}

/* Linhas do grupo da reunião — a do participante já gravado e a do candidato que se marca.
   São irmãs de propósito: a pessoa passa de uma para a outra ao alterar o grupo, e mudar de
   densidade no caminho faria a lista parecer outra. O min-width:0 no miolo é o que deixa o nome
   longo quebrar em vez de esticar a linha e criar rolagem horizontal em tela estreita. */
.cecal-reuniao-participante,
.cecal-reuniao-candidato {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.cecal-reuniao-participante:last-child,
.cecal-reuniao-candidato:last-child {
    border-bottom: none;
}

/* A linha inteira alterna a marcação — alvo de toque generoso, que é o que se pede de uma lista
   percorrida com o polegar. O checkbox continua funcionando por si. */
.cecal-reuniao-candidato {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 160ms ease;
}

.cecal-reuniao-candidato:hover {
    background: var(--mud-palette-action-default-hover);
}


/* ──────────────────────────────────────────────────────────
   Frequência da turma (Fase 9)
   ────────────────────────────────────────────────────────── */

/* minmax(0,1fr) e não 1fr: o número grande com o rótulo ao lado tem min-content largo, e a coluna
   estouraria para a direita em tela estreita em vez de deixar o texto quebrar. */
.vol-freq-metricas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 900px) {
    .vol-freq-metricas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vol-freq-metrica {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider-light);
    background: var(--mud-palette-surface) !important;
}

.vol-freq-metrica-valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.vol-freq-metrica-rotulo {
    display: block;
    margin-top: 2px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.vol-freq-barra {
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
    margin-top: 6px;
}

.vol-freq-barra > i {
    display: block;
    height: 100%;
    border-radius: 3px;
}

/* A evolução da presença ao longo do curso. Rola dentro do próprio cartão quando o curso é longo —
   a página nunca rola de lado. */
.vol-freq-onda {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* max-width para a turma de poucas aulas nao virar um bloco unico atravessando o cartao. */
.vol-freq-onda-item {
    flex: 1 1 26px;
    max-width: 56px;
    text-align: center;
}

/* O MudTooltip embrulha o alvo num root inline-block, que encolhe para o conteudo: o trilho vazio
   ficava com 64px de altura e ZERO de largura, e a barra inteira sumia da tela. O seletor mira o
   root pelo PAI porque o parametro Class do MudTooltip nao chega nele. */
.vol-freq-onda-item > .mud-tooltip-root {
    display: block;
    width: 100%;
}

.vol-freq-onda-trilho {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: flex-end;
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

.vol-freq-onda-trilho > i {
    width: 100%;
    min-height: 3px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--mud-palette-primary-lighten), var(--mud-palette-primary));
}

.vol-freq-onda-data {
    display: block;
    margin-top: 4px;
    font-size: .58rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* A fita: uma marca por aula realizada, em ordem cronológica. É ela que mostra o PADRÃO das faltas
   pela forma — bloco no fim é evasão, marcas salteadas são falta espaçada. */
.vol-freq-fita {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
}

/* inline-block e nao inline: o elemento e um <span>, e span inline ignora width/height — a fita
   renderizava com tamanho zero. */
.vol-freq-fita-marca {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    flex-shrink: 0;
}

.vol-freq-fita-marca--entrou {
    background: var(--mud-palette-success);
}

.vol-freq-fita-marca--marcado {
    background: var(--mud-palette-primary-lighten);
}

.vol-freq-fita-marca--prometeu {
    background: var(--mud-palette-warning);
}

.vol-freq-fita-marca--faltou {
    background: var(--mud-palette-error);
}

/* A marca da aula a que a pessoa nao foi convocada e discreta de proposito, mas precisa ser VISTA:
   a cor de linha (alpha .22 sobre branco) sumia no tema claro. O cinza da paleta se le nos dois. */
.vol-freq-fita-marca--fora {
    background: var(--mud-palette-gray-light);
}

.vol-freq-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.vol-freq-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vol-freq-cartao {
    padding: 14px !important;
    margin-bottom: 10px;
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider-light);
    background: var(--mud-palette-surface) !important;
    cursor: pointer;
}

/* Quem precisa de atenção ganha um fio na lateral: a lista já vem ordenada, e o fio deixa a
   fronteira entre os grupos visível sem um título que ocuparia uma linha inteira. */
.vol-freq-cartao--evasao {
    border-left: 3px solid var(--mud-palette-error);
}

.vol-freq-cartao--baixa {
    border-left: 3px solid var(--mud-palette-warning);
}

.vol-freq-linha {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* min-width:0 é o que deixa o nome longo quebrar em vez de esticar a linha e criar rolagem
   horizontal em tela estreita. */
.vol-freq-linha-miolo {
    flex: 1;
    min-width: 0;
}

.vol-freq-linha-numero {
    text-align: right;
    flex-shrink: 0;
}

.vol-freq-percentual {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.vol-freq-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}

.vol-freq-chip--evasao {
    background: var(--mud-palette-error-hover);
    color: var(--mud-palette-error);
}

.vol-freq-chip--baixa {
    background: var(--mud-palette-warning-hover);
    color: var(--mud-palette-warning-darken);
}

.vol-freq-detalhe {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed var(--mud-palette-divider-light);
}

.vol-freq-detalhe-linha {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .78rem;
    padding: 4px 0;
    border-bottom: 1px dotted var(--mud-palette-divider-light);
}

.vol-freq-detalhe-linha:last-child {
    border-bottom: none;
}

.vol-freq-detalhe-desfecho {
    text-align: right;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────
   Tabela de aulas de Meus Cursos — situação e próxima aula
   ────────────────────────────────────────────────────────── */

/* A linha da PRÓXIMA aula. O destaque é triplo de propósito (escolha do usuário no protótipo de
   2026-08-21): fundo para achar de relance, negrito para sustentar de perto e a seta para dizer
   qual é, sem depender de cor — quem enxerga mal a diferença de fundo ainda vê o sinal. */
/* O !important é do font-weight, e é medido: `.mud-simple-table table * tr > td` do MudBlazor tem
   especificidade (0,1,3) contra (0,1,1) daqui, então o negrito era engolido em silêncio — o fundo
   passava e a linha ficava com METADE do destaque que foi escolhido. */
.vol-aula-proxima > td {
    font-weight: 700 !important;
    background: var(--mud-palette-primary-hover);
}

.vol-aula-proxima > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.vol-aula-seta {
    color: var(--mud-palette-primary);
    font-weight: 700;
    margin-right: 4px;
}

/* O chip da situação. "Convites enviados" mede 129px a 390px e a coluna tem ~117: sem deixar
   quebrar, ele empurraria a coluna e a tabela ganharia rolagem lateral (medido em 2026-08-21).
   Quebrar em duas linhas custa altura numa situação que dura UMA hora por aula; rolagem lateral
   custaria em todas. */
.vol-aula-situacao {
    white-space: normal;
    max-width: 100%;
    height: auto !important;
    min-height: 24px;
}

.vol-aula-situacao .mud-chip-content {
    white-space: normal;
    line-height: 1.3;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ──────────────────────────────────────────────────────────
   Lista de pessoas — uma moldura por pessoa
   ────────────────────────────────────────────────────────── */

/* Numa turma de 19, o problema é seguir do nome, à esquerda, até o botão de presença, à direita,
   sem pular de linha. A moldura resolve fechando a linha nas duas pontas — foi a escolha do usuário
   entre cinco variações (protótipo de 2026-08-21), e ganhou do zebrado e do pontilhado justamente
   porque não depende da altura da linha: nome longo quebra em duas e o cartão acompanha.
   Nasceu na chamada da aula (`vol-chamada-*`) e virou `cecal-*` em 2026-08-22, quando a mesma
   moldura passou a valer para as listas de pessoas da tela de Inscrições: era a mesma decisão
   visual em dois lugares, e duas classes iguais com nomes diferentes envelhecem em direções
   diferentes. */
.cecal-pessoa-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    /* lines-default, e NÃO divider-light: medido no navegador, no tema escuro divider-light é
       branco a 4,7% e lines-default a 9,8% — com o primeiro a moldura praticamente desaparece,
       que é o oposto do que este cartão existe para fazer. A espessura de 1.5px é o corpo que os
       itens de lista vizinhos já têm. Sem fundo próprio: o MudPaper que embrulha a lista já pinta
       --mud-palette-surface, então pintá-lo de novo aqui não daria contraste nenhum — quem separa
       um item do outro é a borda. */
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    /* No ITEM, e não na coluna do nome: o e-mail é uma "palavra" longa sem espaços, e a 390px a
       coluna cai para 326px com a moldura — medido no navegador, um endereço como
       andre.luiz.sampaio@exemplo.invalid atravessava a área dos ícones. Aqui a regra é herdada
       pelos três layouts (o normal, o --quebra e o --empilhado, que nem usa a coluna de nome);
       na coluna, o item empilhado ficava de fora e voltaria a vazar. */
    overflow-wrap: anywhere;
}

/* Deixa o botão da direita CAIR para a linha de baixo quando o contato é longo demais para dividir
   a largura — a 390px o e-mail encostava nele. Só onde há botão com texto ao lado do contato. */
.cecal-pessoa-item--quebra {
    flex-wrap: wrap;
}

/* O aviso de inscrição recusada empilha três ou quatro linhas de texto: ali a moldura serve de
   agrupamento, não de trilho horizontal. */
.cecal-pessoa-item--empilhado {
    display: block;
}

/* A coluna do nome é a que encolhe; a dos ícones nunca. */
.cecal-pessoa-nome {
    min-width: 0;
}

.cecal-pessoa-acoes {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────────
   Mural de comunicação — o fio da conversa
   ──────────────────────────────────────────────────────────
   O MudBlazor não tem componente de conversa, e é só aqui que o portal precisa de um: o resto da
   tela (seletores, caixa de texto, botões, diálogos) é Mud puro. São classes de LAYOUT — cores e
   raios saem das variáveis da paleta, para o tema escuro continuar valendo sem uma segunda folha. */
/* A página PÚBLICA do mural (o aluno) mora no layout anônimo, que centraliza um cartão na vertical
   — forma certa para a tela da aula, errada para um fio de conversa: ele cresce, e num flex
   centralizado o topo sai do alcance da rolagem, levando junto o "carregar anteriores", que é
   justamente o botão do topo. A classe só entra quando o fio aparece; nos estados de erro e de carga
   o cartão continua centralizado, que é onde ele fica bem. */
.vol-mural-publico {
    /* O piso: `align-self` faz o fio ocupar o eixo vertical inteiro do flex do layout, e com isso ele
       começa no TOPO — sem depender de `:has()`, que o WebView antigo pode não ter, justamente onde
       esta tela mais aparece. O `justify-content` do pai continua centrando na horizontal. */
    align-self: stretch;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

/* E o refinamento, onde há suporte: sem o padding generoso do cartão centralizado, o fio ganha a
   largura da tela no celular. */
.cecal-auth-center:has(> .vol-mural-publico) {
    display: block;
    padding: 1rem;
    overflow-y: auto;
}

.vol-mural-fio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.vol-mural-linha {
    display: flex;
}

/* Lados opostos: o que a pessoa escreveu de um lado, o resto do outro. */
.vol-mural-linha--minha {
    justify-content: flex-end;
}

.vol-mural-linha--dele {
    justify-content: flex-start;
}

/* 85% em vez de uma largura fixa: a 390px um balão de largura fixa ou estoura a tela ou desperdiça
   metade dela. O min-width:0 é o que deixa a palavra longa quebrar em vez de esticar a linha.

   O fundo é o SURFACE, e não o `background-gray`: no tema claro o gray da paleta é #EAF5F9, um azul
   quase igual ao fundo da página — que é a arte com ondas —, então o balão sumia. O surface é branco
   no claro e #13262F no escuro, os dois sólidos, e é o que os cards da casa já usam para se destacar
   dessa mesma arte.

   A BORDA é o que separa a caixa do fundo — o preenchimento não faz isso e não poderia: contra a
   arte clara nenhuma cor existente chega a 3:1 por cima dela. É assim em todo card sobre esta arte.
   E a cor da borda foi MEDIDA, não escolhida. A exigência INVERTE de sentido entre os temas: no
   claro a borda precisa ser escura, no escuro precisa ser clara, então nenhuma cor fixa serve.
   Medido a 390 px, amostrando a `Fundo.webp` na faixa central que o `cover` exibe, na altura do fio,
   com os gradientes do `body` compostos — contra os dois extremos da arte ali:
     `lines-inputs` 1,04 / 1,63 · `primary` 1,55 / 1,02 · `text-secondary` 2,83 / 1,80 — reprovam.
   O par da MARCA passa nos dois e mantém o fio com a cara do produto, em vez do navy do texto:
   `secondary-darken` (#0D4A5E) no claro e `secondary` (#7FCEDD) no escuro. Escopar por tema é o
   que o arquivo já faz em dezenas de regras, e desacopla o contorno do mural da cor do TEXTO —
   senão quem mexesse em `TextPrimary` mexeria no fio sem saber.
   A sombra é a mesma dos boxes da casa: sem ela o balão seria o único elemento plano do portal. */
.vol-mural-balao {
    max-width: 85%;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-secondary-darken);
    box-shadow: 0 2px 8px rgba(13, 74, 94, 0.12);
}

.modo-escuro .vol-mural-balao {
    border-color: var(--mud-palette-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* O lado próprio NÃO tem cor própria, e isso é decisão: a decisão nº 8 do usuário diz que o que
   distingue os lados é o ALINHAMENTO, e a etiqueta de autor cobre a linha do tempo do escopo, onde
   há vários. As duas tentativas de somar o eixo da cor morreram medidas — o `primary-hover` a 8% de
   alfa deixava a arte atravessar o balão (o defeito relatado), e o `background-gray` sólido ficou a
   1,11:1 do surface, uma regra que promete distinção e não entrega. Preenchimento a menos, promessa
   cumprida. */

/* A caixa de escrever usa a MESMA moldura do balão. Antes ela vinha com o fio de `lines-default`
   inline na página — 1,04:1 contra a arte —, e o resultado era duas caixas com tratamentos opostos na
   mesma dobra da tela: balões contornados em cima, compositor quase invisível logo abaixo. */
.vol-mural-caixa {
    border: 1px solid var(--mud-palette-secondary-darken);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(13, 74, 94, 0.12);
}

.modo-escuro .vol-mural-caixa {
    border-color: var(--mud-palette-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.vol-mural-autor {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.vol-mural-autor-nome {
    font-size: 0.78rem;
    font-weight: 600;
}

.vol-mural-autor-papel {
    font-size: 0.7rem;
    color: var(--mud-palette-text-primary);
}

/* A marca "Mural" no fio do MEMBRO: ali o que o grupo leu chega misturado com a conversa
   particular, e sem ela não dá para saber qual é qual. É rótulo, não alerta — por isso a moldura
   discreta e não uma cor de aviso. */
.vol-mural-marca {
    font-size: 0.65rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-secondary-darken);
}

.modo-escuro .vol-mural-marca {
    border-color: var(--mud-palette-secondary);
}

/* A citação do tópico se distingue pela BARRA e pelo tamanho, não pela cor — e isso foi medido, não
   escolhido: em `text-secondary` ela reprovava para 12,5px, e herdando a cor do texto passa com
   folga. Cinza de rótulo é a armadilha recorrente deste bloco: já derrubou a citação, a hora e o
   "mensagem removida", cada um sobre um fundo diferente. */
.vol-mural-citacao {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 8px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

/* pre-wrap preserva as quebras de linha que a pessoa digitou; anywhere quebra o link colado que
   não tem espaço nenhum e esticaria o balão para fora da tela. */
.vol-mural-texto {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* O link colado numa mensagem. A cor é o par da MARCA que já contorna o balão, escopado por tema como
   ele — `secondary-darken` no claro, `secondary` no escuro —, e o SUBLINHADO fica sempre: cor sozinha
   não é pista para quem não distingue cores, e o texto em volta é navy parecido. A quebra do endereço
   longo vem do `overflow-wrap:anywhere` do texto, que o link herda.
   Medido no gate de 2026-09-23 sobre o surface do balão: 9,73:1 no claro e 8,75:1 no escuro. */
.vol-mural-link {
    color: var(--mud-palette-secondary-darken);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modo-escuro .vol-mural-link {
    color: var(--mud-palette-secondary);
}

/* "mensagem removida" em itálico, no lugar do texto: sumir da lista faria a conversa parecer
   adulterada para quem já a tinha lido.
   A cor é a do TEXTO comum, e quem carrega o "isto não é uma mensagem" é o ITÁLICO. Já passamos por
   duas cores aqui: o `text-disabled` dava 2,65:1, e o `text-secondary` dava 4,5:1 enquanto o balão
   tinha fundo cinza-azulado — com o fundo branco desta fatia ele caiu para 3,99:1, abaixo do mínimo.
   Cinza de rótulo não é cor de texto; é a mesma lição do `warning` na skill de UI. */
.vol-mural-removida {
    display: block;
    font-style: italic;
    color: var(--mud-palette-text-primary);
}

.vol-mural-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* A hora é discreta pelo TAMANHO, não pela cor: em 11,2px o `text-secondary` sobre o balão branco
   mede 3,99:1, e o mínimo para texto pequeno é 4,5. */
.vol-mural-hora {
    font-size: 0.7rem;
    color: var(--mud-palette-text-primary);
    margin-right: auto;
}

@media (max-width: 600px) {
    /* No telefone o balão pode usar quase toda a largura: com 85% sobra uma margem ociosa que
       espreme o texto e dobra a altura do fio. */
    .vol-mural-balao {
        max-width: 92%;
    }
}