/* ========================================
   VARIÁVEIS E RESET GLOBAL
   ======================================== */

:root {
    --paper: #EAE6D9;
    --paper-dark: #DCD6C4;
    --ink: #2B2A26;
    --ink-soft: #5C574C;
    --maroon: #7A2A28;
    --maroon-deep: #5A1E1C;
    --green: #5C6E4A;
    --danger: #7A2A28;
    --line: #C9C2AC;
    --dourado: #C9A15C;
    --dourado-suave: #E4C98A;
    --shadow-lg: 0 10px 25px rgba(43, 42, 38, 0.25);
    --transition: all 0.2s ease;

    /* Variantes "de gráfico" da paleta de marca — a marca (--maroon/--dourado/
       --green) é escura/dessaturada demais pra marcação de dado (validado
       com o validador de paleta da skill de dataviz: falhava banda de
       luminosidade e piso de croma). Usadas só nos gráficos do Dashboard de
       Gestão, o resto da UI continua com os tons originais. */
    --chart-maroon: #B8433A;
    --chart-gold: #D19A2E;
    --chart-green: #4F7A3D;
    /* Faltava azul na paleta de gráficos — pedido explícito (vermelho
       institucional/verde/azul/laranja/cinza, as mesmas 5 em todo gráfico
       do sistema). Tom acinzentado pra combinar com o resto da paleta
       vintage, não um azul saturado de UI genérica. */
    --chart-blue: #3E6B8A;
    --grid: #E4DFD0;
    --ink-muted: #898781;

    /* Paleta de status fixa — só pra SLA/criticidade, nunca reaproveitada
       como cor de categoria. */
    --status-good: #0CA30C;
    --status-critical: #D03B3B;
    --status-warning: #C98500;
    /* Reservas precisa de 2 estados a mais que o resto do app (em análise,
       cancelada) — reaproveita tons já validados em outro lugar (o azul de
       --chart-blue, o laranja já usado em .encomenda-alerta.laranja) em vez
       de inventar cor nova, só dando nome semântico de status a eles. */
    --status-info: #3E6B8A;
    --status-cancelado: #C97A2E;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    color: var(--ink);
    background: var(--paper);
}

/* ========================================
   AUTENTICAÇÃO
   ======================================== */

/* height (não min-height) + overflow-y em cada coluna: se o conteúdo de um
   lado for mais alto que a janela (comum em notebook com o navegador não
   maximizado), esse lado rola por conta própria, em vez de esticar o
   .auth-container inteiro e desalinhar o card do formulário pra baixo do
   topo visível. */
.auth-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.auth-hero,
.auth-painel {
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.icone-marca {
    display: inline-block;
    filter: grayscale(.2);
}

/* ---- Painel esquerdo: vitrine/marca ---- */

.auth-hero {
    position: relative;
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    padding: 36px 48px 28px;
    background: radial-gradient(120% 140% at 15% 10%, var(--maroon) 0%, var(--maroon-deep) 55%, #3E1513 100%);
    color: #EFE9D8;
}

.auth-hero-anel {
    position: absolute;
    top: -180px;
    right: -220px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(228, 201, 138, .25);
    border-radius: 50%;
}

.auth-hero-anel::after {
    content: '';
    position: absolute;
    inset: 60px;
    border: 1px solid rgba(228, 201, 138, .18);
    border-radius: 50%;
}

.auth-hero > *:not(.auth-hero-anel) {
    position: relative;
    z-index: 1;
}

.auth-hero-conteudo {
    display: flex;
    flex-direction: column;
    margin: auto 0;
}

.auth-hero-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.auth-hero-icone {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(228, 201, 138, .5);
    border-radius: 10px;
    color: var(--dourado-suave);
}

.auth-hero-icone svg {
    width: 22px;
    height: 22px;
}

.auth-hero-marca-nome {
    font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    font-size: 21px;
    font-weight: 700;
    color: #EFE9D8;
    line-height: 1;
}

.auth-hero-marca-nome strong { color: var(--dourado-suave); font-weight: 700; }

.auth-hero-titulo {
    font-size: 32px;
    line-height: 1.22;
    font-weight: 500;
    max-width: 460px;
    margin-bottom: 36px;
}

.auth-hero-destaque {
    color: var(--dourado-suave);
    font-style: italic;
}

.auth-hero-divisor {
    width: 56px;
    height: 2px;
    background: var(--dourado);
    margin-bottom: 16px;
}

.auth-hero-texto {
    max-width: 400px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(239, 233, 216, .85);
    margin-bottom: 24px;
}

.auth-hero-features {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.auth-hero-feature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 130px;
}

.auth-hero-feature-icone {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(228, 201, 138, .14);
    color: var(--dourado-suave);
}

.auth-hero-feature-icone svg {
    width: 18px;
    height: 18px;
}

.auth-hero-feature span {
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(239, 233, 216, .9);
}

.auth-hero-rodape {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(239, 233, 216, .65);
}

.auth-hero-rodape svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--dourado);
}

/* ---- Painel direito: formulário ---- */

.auth-painel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--paper);
}

.auth-box {
    width: 100%;
    max-width: 440px;
    background: #FDFCFA;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(43, 42, 38, .12);
    /* overflow-y precisa ser auto, não hidden: dentro do flex column do
       .auth-painel, um item com overflow != visible pode encolher abaixo da
       altura do próprio conteúdo (min-height automático vira 0). Com
       "hidden" isso corta o fim do formulário (ex.: botão "Criar Conta")
       sem nenhum jeito de rolar até lá em telas mais baixas. */
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}

.auth-header {
    text-align: center;
    padding: 14px 32px 4px;
}

.auth-icone-topo {
    width: 38px;
    height: 38px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--maroon-deep);
    border-radius: 50%;
    color: #EFE9D8;
    box-shadow: 0 8px 18px rgba(90, 30, 28, .35);
}

.auth-icone-topo svg {
    width: 20px;
    height: 20px;
}

.auth-header h1 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 3px;
    color: var(--ink);
}

.auth-header p {
    font-size: 12px;
    color: var(--ink-soft);
}

.auth-form {
    display: none;
    padding: 8px 28px 12px;
}

.auth-form.active {
    display: block;
    animation: rise .25s ease;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.campo-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
}

.campo-com-icone {
    position: relative;
    margin-bottom: 6px;
}

.campo-icone {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--ink-soft);
    pointer-events: none;
}

.campo-olho {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--ink-soft);
    display: flex;
}

.campo-olho svg {
    width: 17px;
    height: 17px;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    transition: var(--transition);
}

/* Junta dois campos numa linha só (ex.: apartamento + torre no cadastro) —
   economiza uma linha inteira de altura no formulário mais longo do auth. */
.campo-linha {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.campo-linha input {
    margin-bottom: 0;
}

.campo-com-icone input {
    margin-bottom: 0;
    padding-left: 40px;
    padding-right: 40px;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    outline: none;
    border-color: var(--maroon-deep);
    box-shadow: 0 0 0 3px rgba(90, 30, 28, .1);
}

.auth-linha-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

.auth-lembrar {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.auth-lembrar input {
    width: auto;
    margin: 0;
    accent-color: var(--maroon-deep);
}

.auth-linha-opcoes a {
    color: var(--maroon-deep);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.auth-linha-opcoes a:hover {
    text-decoration: underline;
}

.auth-form .btn {
    border-radius: 10px;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
}

.btn-com-seta svg {
    width: 18px;
    height: 18px;
}

.auth-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.auth-divisor::before,
.auth-divisor::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.btn-outline {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-outline:hover {
    background: var(--paper);
}

.btn-outline svg {
    width: 18px;
    height: 18px;
}

.auth-painel-rodape {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ink-soft);
}

.auth-painel-rodape svg {
    width: 14px;
    height: 14px;
    color: var(--maroon-deep);
    flex-shrink: 0;
}

.auth-switch {
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 8px;
}

.auth-switch a {
    color: var(--maroon-deep);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.auth-mobile-marca {
    display: none;
    align-items: center;
    gap: 12px;
}

.auth-mobile-marca-icone {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--maroon-deep);
    border: 1px solid var(--dourado);
    border-radius: 12px;
    color: var(--dourado-suave);
}

.auth-mobile-marca-icone svg {
    width: 24px;
    height: 24px;
}

.auth-mobile-marca-nome {
    font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--maroon-deep);
    line-height: 1;
}

.auth-mobile-marca-nome strong { color: var(--dourado); font-weight: 700; }

@media (max-width: 900px) {
    .auth-hero {
        display: none;
    }

    .auth-mobile-marca {
        display: flex;
    }

    .auth-painel {
        padding: 28px 20px;
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .auth-form input,
    .auth-form select,
    .auth-form textarea {
        /* 16px+ evita o zoom automático do Safari/iOS ao focar um campo */
        font-size: 16px;
    }
}

.auth-hint {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.35;
    margin-bottom: 8px;
}

/* ========================================
   BOTÕES
   ======================================== */

.btn {
    padding: 10px 18px;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-large {
    width: 100%;
    padding: 10px 20px;
    font-size: 12.5px;
}

.btn-primary {
    background: var(--maroon-deep);
    color: #EFE9D8;
}

.btn-primary:hover {
    background: var(--maroon);
}

.btn-secondary {
    background: transparent;
    color: #EFE9D8;
    border: 1px solid rgba(239, 233, 216, .5);
}

.btn-secondary:hover {
    background: rgba(239, 233, 216, .12);
}

.btn-danger {
    background: transparent;
    color: #EFE9D8;
    border: 1px solid rgba(239, 233, 216, .35);
}

.btn-danger:hover {
    background: rgba(239, 233, 216, .12);
}

/* Ações da gestão de moradores — botões sólidos, pensados para o painel
   claro (.upload-box), diferente de .btn-secondary/.btn-danger acima que
   são transparentes e feitos para o masthead escuro. */
.btn-aprovar {
    background: var(--green);
    color: #EFE9D8;
    border-radius: 8px;
}

.btn-aprovar:hover {
    background: #47563A;
}

.btn-recusar {
    background: var(--maroon);
    color: #EFE9D8;
    border-radius: 8px;
}

.btn-recusar:hover {
    background: var(--maroon-deep);
}

.btn-inativar {
    background: var(--ink-soft);
    color: #EFE9D8;
    border-radius: 8px;
}

.btn-inativar:hover {
    background: var(--ink);
}

/* Mesmo esquema sólido de .btn-inativar — .btn-secondary é transparente
   com texto claro, pensado pro cabeçalho escuro, e ficava quase invisível
   no fundo branco do painel de chamados. */
.btn-fechar {
    background: var(--ink-soft);
    color: #EFE9D8;
}

.btn-fechar:hover {
    background: var(--ink);
}

.btn-excluir {
    background: var(--maroon-deep);
    color: #EFE9D8;
    border-radius: 8px;
}

.btn-excluir:hover {
    background: #3E1513;
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: .5;
    cursor: default;
}

/* ========================================
   MENSAGENS DE ERRO/SUCESSO
   ======================================== */

.error-message,
.success-message {
    padding: 11px 14px;
    margin-bottom: 4px;
    font-size: 13px;
    border-left: 3px solid var(--danger);
    display: none;
}

.error-message.show,
.success-message.show {
    display: block;
    animation: rise .25s ease;
}

.error-message {
    background: #F6E7E6;
    color: var(--maroon-deep);
}

.success-message {
    background: #EAF0E4;
    color: var(--green);
    border-left-color: var(--green);
}

/* ========================================
   CHAT PRINCIPAL
   ======================================== */

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: radial-gradient(120% 200% at 15% 10%, var(--maroon) 0%, var(--maroon-deep) 55%, #3E1513 100%);
    color: #EFE9D8;
    flex-wrap: wrap;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-icone {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(228, 201, 138, .5);
    border-radius: 10px;
    color: var(--dourado-suave);
}

.chat-header-icone svg {
    width: 21px;
    height: 21px;
}

.header-left h2 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .01em;
}

.header-left h2 strong { color: var(--dourado-suave); font-weight: 700; }

.chat-header-subtitulo {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
    margin-top: 2px;
}

.chat-header-selo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(228, 201, 138, .14);
    border: 1px solid rgba(228, 201, 138, .3);
    font-size: 12.5px;
    color: rgba(239, 233, 216, .9);
    white-space: nowrap;
}

.chat-header-selo svg {
    width: 15px;
    height: 15px;
    color: var(--dourado-suave);
    flex-shrink: 0;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    margin-left: auto;
}

.contato-central {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--paper-dark);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13px;
    text-align: center;
}

.contato-central strong {
    color: var(--maroon);
}

.contato-central svg {
    width: 15px;
    height: 15px;
    color: var(--maroon);
    flex-shrink: 0;
}

/* Isenção de responsabilidade sobre respostas geradas por IA — permanente
   (sem botão de fechar), ao contrário do aviso "Importante" dispensável na
   tela de boas-vindas, já que precisa continuar visível durante toda a
   sessão de chat, não só na primeira visita. */
.aviso-ia {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--paper-dark);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.aviso-ia svg {
    width: 15px;
    height: 15px;
    color: var(--maroon);
    flex-shrink: 0;
    margin-top: 1px;
}

.aviso-ia span {
    max-width: 720px;
}

/* No celular o aviso (texto fixo, não pode ser fechado) virava um bloco
   de 6+ linhas — fonte menor, entrelinha mais apertada e alinhado à
   esquerda (texto centralizado deixa cada linha "esfarrapada" dos dois
   lados, o que ocupa mais altura pro mesmo texto do que alinhado à
   esquerda) reduzem bastante a altura sem cortar nenhuma palavra do
   aviso. */
@media (max-width: 480px) {
    .aviso-ia {
        padding: 7px 12px;
        gap: 6px;
        font-size: 10.5px;
        line-height: 1.35;
        text-align: left;
        justify-content: flex-start;
    }
}

.btn-outline-claro {
    background: transparent;
    color: #EFE9D8;
    border: 1px solid rgba(228, 201, 138, .4);
    border-radius: 9px;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.btn-outline-claro:hover {
    background: rgba(228, 201, 138, .12);
}

.btn-outline-claro svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 860px) {
    .chat-header-selo {
        display: none;
    }
}

/* ========================================
   CORPO: SIDEBAR + CHAT
   ======================================== */

.chat-area {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ========================================
   NAVEGAÇÃO POR MÓDULOS
   ======================================== */

/* Corpo da aplicação: barra de módulos fixa à esquerda + o módulo ativo
   ocupando o resto. min-height:0 é o que permite os filhos rolarem por
   conta própria em vez de esticar o container além dos 100vh. */
.app-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* 210px originais não davam espaço suficiente pro nome/e-mail do
   #sidebar-perfil-info numa linha só sem cortar (ver comentário em
   #sidebar-nome/#sidebar-email) — alargada pra caber sem quebrar linha
   nem truncar em textos de tamanho normal. O botão de recolher (ver
   .sidebar-recolher-btn) continua disponível pra quem quiser reclamar
   esse espaço de volta. */
.modulos-col {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper-dark);
    border-right: 1px solid var(--line);
    overflow: hidden;
}

.modulos-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.modulo-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: var(--transition);
}

.modulo-item:hover {
    background: rgba(122, 42, 40, .08);
}

.modulo-item-ativo {
    background: rgba(122, 42, 40, .13);
    border-left-color: var(--maroon);
    font-weight: 600;
}

.modulo-item-icone {
    flex-shrink: 0;
    display: flex;
    color: var(--maroon);
}

.modulo-item-icone svg {
    width: 16px;
    height: 16px;
}

.modulo-item-texto {
    flex: 1;
    min-width: 0;
}

.modulo-item-badge {
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    background: var(--maroon);
    color: #EFE9D8;
    padding: 1px 6px;
    border-radius: 9px;
}

.modulos-divisor {
    height: 1px;
    background: var(--line);
    margin: 8px 14px;
}

/* Grupo expansível na barra lateral (hoje só "Cadastros") — cabeçalho
   igual .modulo-item, só com o chevron empurrado pra direita; nunca fica
   "ativo" (border-left maroon) porque ele não navega, só abre/fecha —
   quem fica ativo é o filho clicado. */
.modulo-grupo-header {
    justify-content: space-between;
}

.modulo-grupo-chevron {
    flex-shrink: 0;
    display: flex;
    color: var(--ink-soft);
    transition: transform .15s ease;
}

.modulo-grupo-chevron svg {
    width: 13px;
    height: 13px;
}

.modulo-grupo-chevron.aberto {
    transform: rotate(180deg);
}

.modulo-grupo-filhos {
    margin-left: 24px;
    border-left: 1px solid var(--line);
    padding-left: 4px;
}

.modulo-grupo-filho {
    display: flex;
    align-items: center;
    gap: 9px;
    width: calc(100% - 4px);
    text-align: left;
    background: none;
    border: none;
    padding: 7px 10px 7px 14px;
    margin-left: 4px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ink);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

/* Bolinha da linha conectora, uma por filho — a linha em si é o
   border-left de .modulo-grupo-filhos acima. */
.modulo-grupo-filho::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
}

.modulo-grupo-filho:hover {
    background: rgba(122, 42, 40, .08);
}

.modulo-grupo-filho.modulo-item-ativo {
    background: rgba(122, 42, 40, .13);
    font-weight: 600;
    border-left: 2px solid var(--maroon);
    padding-left: 12px;
}

.modulo-grupo-filho.modulo-item-ativo::before {
    background: var(--maroon);
}

/* Botão de recolher a barra inteira (não só o grupo Cadastros) — mesmo
   espírito do "«" de referência do usuário: ganha espaço de tela sem
   perder a navegação (vira ícone-only, mesmo visual do breakpoint mobile,
   só que sob controle manual e persistido). */
/* Posicionado fora do fluxo do flex (position:absolute) em vez de ser um
   3º item ao lado de avatar+nome — como item de flex ele disputava largura
   com #sidebar-nome/#sidebar-email (que já usam text-overflow:ellipsis),
   cortando nome e e-mail mais cedo do que deveria. Assim ele fica sempre
   no canto, sem afetar o espaço de texto disponível. */
.sidebar-recolher-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-recolher-btn:hover {
    background: rgba(122, 42, 40, .08);
    color: var(--maroon);
}

.sidebar-recolher-btn svg {
    width: 13px;
    height: 13px;
    transition: transform .15s ease;
}

.modulos-col.recolhida .sidebar-recolher-btn svg {
    transform: rotate(180deg);
}

/* Estado recolhido: mesmo tratamento icon-only do breakpoint mobile
   (@media max-width:768px abaixo), só que disparado por classe em vez de
   largura de viewport, então funciona em qualquer tamanho de tela. */
.modulos-col.recolhida {
    width: 56px;
}

.modulos-col.recolhida .sidebar-perfil-info,
.modulos-col.recolhida .modulo-item-texto,
.modulos-col.recolhida .modulo-grupo-chevron,
.modulos-col.recolhida .modulo-grupo-filhos {
    display: none;
}

.modulos-col.recolhida .modulo-item,
.modulos-col.recolhida .modulo-grupo-header {
    justify-content: center;
    padding: 11px 0;
}

.modulos-col.recolhida .sidebar-perfil {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
}

/* Recolhido, o avatar some (não cabe junto do botão numa faixa de 56px
   sem ficar apertado) — só o botão de reabrir fica, centralizado. */
.modulos-col.recolhida .sidebar-avatar {
    display: none;
}

/* Sem nome/e-mail pra proteger aqui (56px só cabe o ícone), então o botão
   sai do canto absoluto e volta a ficar centralizado no topo do card. */
.modulos-col.recolhida .sidebar-recolher-btn {
    position: static;
}

/* O módulo ativo rola por dentro, em vez de esticar a página. */
.modulo-conteudo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modulo-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Coluna do índice de consultas frequentes, agora dentro do módulo Chat
   (antes era a barra lateral fixa da aplicação inteira). */
.index-col {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper-dark);
    border-right: 1px solid var(--line);
    overflow: hidden;
}

.sidebar-perfil {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 40px 12px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.sidebar-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--maroon-deep);
    color: #EFE9D8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

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

/* Quebra de linha (tentativa anterior) resolvia o corte mas o usuário não
   gostou do visual "quebrado" — a coluna (.modulos-col) foi alargada de
   210px pra 250px em vez disso, dando espaço suficiente pra nome/e-mail
   caberem numa linha só; ellipsis continua como rede de segurança só pro
   caso raro de um e-mail excepcionalmente longo. */
.sidebar-perfil-info #sidebar-nome {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-perfil-info #sidebar-email {
    display: block;
    font-size: 9.5px;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-perfil-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 8px;
    font-size: 11px;
    padding: 5px 10px;
    flex-shrink: 0;
}

.sidebar-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.sidebar-badge {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid var(--maroon);
    color: var(--maroon);
    background: rgba(122, 42, 40, .06);
}

.sidebar-badge-condominio {
    border-color: var(--line);
    color: var(--ink-soft);
    background: #fff;
}

.index-sidebar {
    padding: 10px 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.index-title {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0 16px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

/* Mesma linguagem visual do .index-title, sem o padding lateral pensado
   pra sidebar — divide a lista de Visitantes em "Visitantes" (avulso) e
   "Convidados de reserva" (ver renderVisitantes()). */
.visitantes-secao-titulo {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: 8px;
    margin: 18px 0 10px;
    border-bottom: 1px solid var(--line);
}

.visitantes-secao-titulo:first-child {
    margin-top: 0;
}

/* Cada seção (Regulamento / Convenção) tem seu próprio índice-título —
   a primeira não precisa de respiro extra acima, só as seguintes. */
.index-title:not(:first-child) {
    margin-top: 14px;
}

.index-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    line-height: 1.35;
    border-left: 3px solid transparent;
}

.index-item-icone {
    flex-shrink: 0;
    display: flex;
    color: var(--maroon);
}

.index-item-icone svg {
    width: 15px;
    height: 15px;
}

.index-item-texto {
    min-width: 0;
}

.condominio-option {
    border: 1px solid var(--line) !important;
    margin-bottom: 8px;
}

.index-item:hover {
    background: rgba(122, 42, 40, .08);
    border-left-color: var(--maroon);
}

.chat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ========================================
   PAINEL DE UPLOAD
   ======================================== */

.upload-panel {
    padding: 18px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.upload-box {
    max-width: 640px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 18px;
}

/* Painéis dominados por lista/KPIs (Gerenciar Chamados, Condôminos): sem a
   caixa branca única envolvendo tudo — os componentes internos (cards de
   KPI, busca, tabela, linhas) já têm seu próprio fundo branco + sombra,
   então a caixa externa só duplicava o contorno e deixava a tela mais
   apertada. Painéis de formulário simples (Documentos, Meus Dados) e
   telas que combinam formulário + lista na mesma view (Encomendas, Equipe)
   continuam com a caixa única — não vale a pena separar o formulário sem
   reestruturar a tela toda. */
.upload-box.painel-solto {
    background: transparent;
    border: none;
    padding: 0;
}

.upload-box h3 {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
}

#upload-form input[type="text"],
#upload-form input[type="file"],
#chamado-form input,
#chamado-form select,
#chamado-form textarea,
#perfil-form input,
#senha-form input {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

#upload-form input:focus,
#chamado-form input:focus,
#chamado-form select:focus,
#chamado-form textarea:focus,
#perfil-form input:focus,
#senha-form input:focus {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -1px;
}

/* Botões de envio de Documentos e Meus Dados (Enviar Documento/Salvar/
   Alterar senha) ficavam com o .btn padrão de canto reto — mesmo raio já
   usado nos botões de ação (.btn-aprovar/.btn-recusar/.btn-inativar/
   .btn-excluir), não o .btn-primary inteiro (que é reaproveitado em
   dezenas de outros lugares do app, inclusive fora do escopo pedido aqui). */
#upload-form button[type="submit"],
#perfil-form button[type="submit"],
#senha-form button[type="submit"],
#equipe-form button[type="submit"] {
    border-radius: 8px;
}

.upload-hint {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

/* ========================================
   ENCOMENDAS
   ======================================== */

.encomendas-box {
    max-width: 100%;
}

.encomendas-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

/* Mesma densidade compacta aplicada a #chamados-hub-kpis (ver comentário
   lá) — padronização pedida explicitamente: os dois hubs (Chamados/
   Encomendas) devem ter os KPIs do mesmo tamanho. auto-fill (não
   auto-fit) é o que faz isso valer de verdade: com poucos cards (1 pro
   morador, 3 em Aguardando retirada), auto-fit colapsa as colunas vazias
   e usa o 1fr sobrando pra ESTICAR os poucos cards existentes até
   preencher a linha inteira — exatamente o bug reportado ("largura da
   linha toda"). auto-fill mantém as colunas vazias reservadas (sem
   colapsar), então o 1fr sobrando vai pra elas, não pros cards reais, que
   ficam presos no mesmo tamanho fixo de Chamados (~135-140px) não importa
   se são 1, 3, 6 ou 7 — o espaço que sobra fica em branco à direita em
   vez de esticar. */
@media (min-width: 769px) {
    #encomendas-kpis {
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        gap: 6px;
        margin-bottom: 10px;
    }

    #encomendas-kpis .dashboard-kpi-card {
        padding: 7px 8px 7px 9px;
        gap: 6px;
    }

    #encomendas-kpis .dashboard-kpi-ic {
        width: 18px;
        height: 18px;
        border-radius: 6px;
    }

    #encomendas-kpis .dashboard-kpi-ic svg {
        width: 9px;
        height: 9px;
    }

    #encomendas-kpis .dashboard-kpi-valor {
        font-size: 14px;
    }

    #encomendas-kpis .dashboard-kpi-rotulo {
        font-size: 7.5px;
        letter-spacing: .03em;
        line-height: 1.25;
        margin-top: 1px;
    }
}

.encomendas-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
}

/* ========================================
   MODAIS (QR, scanner, entrega)
   ======================================== */

/* position:fixed é seguro aqui porque o modal é filho do <body> em tela
   cheia — diferente dos painéis de módulo, que vivem dentro do flex de
   .app-body e precisam participar do fluxo. */
.modal-fundo {
    position: fixed;
    inset: 0;
    background: rgba(43, 42, 38, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
}

.modal-caixa {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-caixa-estreita {
    max-width: 380px;
}

.modal-instrucao {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 14px;
    line-height: 1.5;
}

.modal-qrcode-imagem {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.modal-qrcode-imagem img {
    width: 100%;
    max-width: 280px;
    height: auto;
    image-rendering: pixelated;
}

.modal-protocolo {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: .1em;
    color: var(--maroon);
    margin-top: 8px;
}

.scanner-video {
    width: 100%;
    max-height: 55vh;
    background: var(--ink);
    display: block;
    margin-bottom: 12px;
}

.entrega-resumo {
    background: var(--paper);
    border-left: 3px solid var(--maroon);
    padding: 11px 13px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
}

/* touch-action:none impede o navegador de tratar o arrasto do dedo como
   rolagem da página enquanto a pessoa assina. */
.assinatura-canvas {
    width: 100%;
    height: 180px;
    border: 1px dashed var(--line);
    background: #fff;
    cursor: crosshair;
    touch-action: none;
    display: block;
}

.assinatura-acoes {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 16px;
}

/* Módulo Cadastros — preview de foto (perfil/PCD/veículo/bicicleta/pet,
   sempre buscada autenticada e convertida em Blob, nunca <img src> direto)
   e lista de documentos pessoais. */
.cadastro-foto-preview {
    margin-bottom: 10px;
}

.cadastro-foto-img {
    max-width: 220px;
    max-height: 220px;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: block;
    object-fit: cover;
}

/* "Ficha cadastral" de Dados pessoais — campos numa coluna estreita à
   esquerda, foto numa coluna fixa à direita, pedido explícito do usuário
   pra parecer um cadastro físico com retrato ao lado dos dados. */
.cadastro-ficha {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cadastro-ficha-campos {
    flex: 1 1 280px;
    max-width: 320px;
}

/* Largura da coluna calibrada pro texto nativo do input file caber sem
   cortar ("Escolher Arquivo" + "Nenhum arquivo escolhido" não cabiam nos
   160px originais, ficando truncados feio tipo "Ne...hido"). */
.cadastro-ficha-foto {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cadastro-ficha-foto-caixa {
    width: 250px;
    min-height: 190px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    margin: 4px 0 8px;
}

.cadastro-ficha-foto-caixa .upload-hint {
    margin: 0;
    font-size: 11px;
}

.cadastro-ficha-foto-caixa .cadastro-foto-img {
    max-width: 100%;
    max-height: 172px;
    margin: 0;
}

.cadastro-ficha-foto input[type="file"] {
    width: 100%;
    font-size: 10.5px;
}

.cadastro-ficha-unidade {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
}

.cadastro-ficha-unidade > div {
    flex: 1;
}

.cadastro-ficha-unidade p {
    margin: 0;
    padding: 9px 10px;
    background: var(--paper-dark);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}

/* Mobile: coluna única, foto acima dos campos (não faz sentido espremer
   150px fixos ao lado de um formulário que já ocupa a largura toda). */
@media (max-width: 640px) {
    .cadastro-ficha {
        flex-direction: column-reverse;
    }
    .cadastro-ficha-campos {
        max-width: none;
        width: 100%;
    }
}

/* Checklist de opções (dias da semana do Prestador, áreas permitidas do
   Hóspede) — linha flexível de labels, mesmo padrão de checkbox com
   accent-color já usado no resto do app. */
.cadastro-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.cadastro-checklist label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}

.cadastro-checklist input[type="checkbox"] {
    accent-color: var(--maroon);
}

.cadastro-documento-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

/* Mesma convenção 6px de #reserva-form/#encomenda-form/#equipe-form — os
   campos do módulo Cadastros (Dados pessoais, Documentos, PCD, Veículos,
   Bicicletas, Pets, Alterar senha) ainda estavam caindo no estilo padrão
   do navegador, cantos retos, destoando do resto do app. */
#cadastro-dados-form input,
#cadastro-dados-form select,
#cadastro-documento-form input,
#cadastro-documento-form select,
#cadastro-pcd-form input,
#cadastro-pcd-form select,
#cadastro-veiculo-form input,
#cadastro-veiculo-form select,
#cadastro-bicicleta-form input,
#cadastro-pet-form input,
#cadastro-pet-form select,
#cadastro-pet-form textarea,
#cadastro-senha-form input,
#cadastro-pcd-foto-arquivo,
#visitante-form input,
#visitante-form select,
#visitante-form textarea,
#visitante-avulso-form input,
#visitante-avulso-form select,
#visitante-avulso-form textarea,
#hospede-form input,
#hospede-form select,
#hospede-form textarea,
#prestador-form input,
#prestador-form select,
#prestador-form textarea {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box;
}

#cadastro-pet-form textarea,
#visitante-form textarea,
#visitante-avulso-form textarea,
#hospede-form textarea,
#prestador-form textarea {
    resize: vertical;
}

/* Checkbox (PCD, morador principal, "todas as áreas" do Hóspede) herdaria
   width:100%/padding/border da regra genérica acima (mesma armadilha já
   documentada em #reserva-form input[type="checkbox"]) — restaura o
   tamanho nativo e aplica o mesmo cantos-arredondados + cor de destaque
   usados nos demais checkboxes do app (.modulo-permissao-linha,
   .encomenda-checkbox-grupo). Os checkboxes de dias da semana do Prestador
   e de áreas do Hóspede já são cobertos à parte por .cadastro-checklist. */
#cadastro-dados-form input[type="checkbox"],
#cadastro-pcd-form input[type="checkbox"],
#hospede-form input[type="checkbox"],
#prestador-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    accent-color: var(--maroon-deep);
}

/* Botões "Salvar"/"Registrar"/"Agendar" do módulo Cadastros e dos módulos
   irmãos (Visitantes/Hóspedes/Prestadores, mesma ficha cadastral) — o
   .btn/.btn-primary padrão do app não tem radius (visual "vintage" de
   cantos retos, deliberado no resto do app), mas aqui acompanham o mesmo
   arredondamento pedido pros campos. */
#cadastro-dados-form button,
#cadastro-documento-form button,
#cadastro-foto-enviar,
#cadastro-pcd-form button,
#cadastro-veiculo-form button,
#cadastro-bicicleta-form button,
#cadastro-pet-form button,
#cadastro-senha-form button,
#visitante-form button,
#visitante-avulso-form button,
#hospede-form button,
#prestador-form button {
    border-radius: 6px;
}

/* Busca rápida da portaria — morador chega pedindo a encomenda, o porteiro
   digita apartamento/torre/nome e a lista filtra na hora, sem round-trip
   ao servidor (os dados já estão em encomendasCarregadas). */
.encomendas-busca-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 12px;
    margin: 14px 0;
}

.encomendas-busca-wrap svg {
    width: 16px;
    height: 16px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.encomendas-busca-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: none;
}

/* ========================================
   GESTÃO DE EQUIPE
   ======================================== */

/* Sem filtro por type= — mesmo modelo de #chamado-form logo acima, pra
   telefone (type="tel") e horário (type="time") saírem com o mesmo
   tamanho/raio dos demais campos, em vez de ficar com a aparência padrão
   do navegador. */
#equipe-form input,
#equipe-form select,
#modal-editar-contato-equipe input {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box;
}

#equipe-form input:focus,
#equipe-form select:focus,
#modal-editar-contato-equipe input:focus {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -1px;
}

/* Mesmo bug documentado em #reserva-form/#config-espaco-form: a regra
   genérica "#equipe-form input { width:100% }" logo acima (e sua análoga
   pro modal "Alterar dados") tem especificidade de ID e vence
   ".modulo-permissao-linha input[type=checkbox]" (classe + atributo),
   esticando o checkbox do checklist de módulos pra 100% da pílula. Precisa
   da mesma especificidade de ID pra vencer de volta — no modal também, já
   que ele ganhou seu próprio checklist de módulos (ver "Alterar dados"). */
#equipe-form input[type="checkbox"],
#modal-editar-contato-equipe input[type="checkbox"] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
}

/* Horário de expediente — dias da semana como caixas clicáveis (mesmo
   padrão de toggle do .dev-modulo-chip) + duas horas nativas editáveis
   lado a lado. Compartilhado entre o formulário de cadastro e o modal de
   edição de contato (ver renderDiasExpedienteChips() em app.js). */
.equipe-expediente-wrap {
    margin-bottom: 10px;
}

.equipe-expediente-label {
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 8px;
}

.equipe-expediente-opcional {
    font-weight: 400;
    color: var(--ink-muted);
    font-size: 11.5px;
}

.equipe-dias-lista {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.equipe-dia-chip {
    width: 42px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.equipe-dia-chip:hover {
    filter: brightness(0.97);
}

.equipe-dia-chip.ativo {
    background: var(--maroon-deep);
    border-color: var(--maroon-deep);
    color: #fff;
}

.equipe-horario-linha {
    display: flex;
    gap: 10px;
}

.equipe-horario-campo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--ink-soft);
}

.equipe-horario-campo input {
    margin-bottom: 0 !important;
}

.equipe-excecao-sublabel {
    font-size: 11px;
    color: var(--ink-soft);
    margin: 12px 0 6px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.equipe-excecao-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--paper);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
}

.equipe-excecao-texto-ate {
    font-size: 11px;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.equipe-excecao-remover {
    border: none;
    background: none;
    color: var(--maroon-deep);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

.equipe-excecao-add-btn {
    background: none;
    border: 1px dashed var(--line);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--maroon-deep);
    font-family: inherit;
    cursor: pointer;
}

.equipe-excecao-add-btn:hover {
    filter: brightness(0.97);
}

/* Mesmo bug de especificidade já corrigido acima pro checkbox de módulos:
   "#equipe-form input { width:100% }" venceria os campos de dia/hora da
   exceção também, sem essa regra mais específica por ID. */
#equipe-form .equipe-excecao-linha select,
#equipe-form .equipe-excecao-linha input,
#modal-editar-contato-equipe .equipe-excecao-linha select,
#modal-editar-contato-equipe .equipe-excecao-linha input {
    width: auto;
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding: 7px 8px;
    font-size: 12.5px;
}

/* Checklist de módulos do formulário "Cadastrar na equipe" — aparece
   depois que um cargo é escolhido (ver atualizarModulosEquipeForm() em
   app.js). O cargo não limita mais quais módulos aparecem pra marcar
   (isso ficou só como sugestão inicial já pré-marcada) — o único teto
   real é o plano do condomínio, sinalizado pela linha "fora do plano". */
.modulos-permissao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Pílula do tamanho do conteúdo, não mais uma barra esticada ocupando a
   largura inteira do formulário — o nome do módulo continua sempre
   visível por completo, só o botão em si (checkbox) ficou menor. */
.modulo-permissao-linha {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    font-size: 12.5px;
    width: auto;
}

.modulo-permissao-linha.bloqueada {
    background: var(--paper-dark);
    opacity: .75;
}

.modulo-permissao-linha input[type="checkbox"] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    accent-color: var(--maroon-deep);
    margin: 0;
}

.modulo-permissao-rotulo {
    flex: none;
    white-space: nowrap;
}

.modulo-permissao-tag {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 8px;
    flex-shrink: 0;
    background: rgba(201, 133, 0, .14);
    color: #8a5c00;
}

.equipe-voce {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 400;
}

.equipe-cargo-select {
    padding: 5px 8px;
    border: 1px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink);
}

.encomendas-scanner-btn {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 11px;
}

.encomendas-scanner-btn svg {
    width: 14px;
    height: 14px;
}

.encomenda-foto-label {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 5px;
}

.resolver-observacao-campo {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

.resolver-observacao-campo:focus {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -1px;
}

#resolver-foto {
    margin-bottom: 16px;
}

/* Opções de motivo de recusa do visitante avulso — mesma ideia de "caixa
   clicável" que os checklists de área/dia da semana já usam, mas radio
   (só um motivo por recusa, não vários). */
.visitante-motivo-recusa-opcao {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-size: 13.5px;
    cursor: pointer;
}

.visitante-motivo-recusa-opcao input[type="radio"] {
    accent-color: var(--maroon-deep);
}

/* Grupos de checkbox (condições da encomenda, cuidados especiais) —
   mesmo padrão de "quadro" já usado noutros lugares do app (ex.:
   .chamados-sla-config), com os itens quebrando linha livremente em vez
   de ficar em coluna única, já que os rótulos são curtos. */
.encomenda-checkbox-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    background: var(--paper-dark);
}

.encomenda-checkbox-grupo label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.encomenda-checkbox-grupo input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--maroon-deep);
}

/* Condição com avaria fica destacada na lista — sinal visual rápido pra
   portaria/condômino sem precisar abrir o card pra saber que teve problema. */
.encomenda-avaria-flag {
    color: var(--status-critical) !important;
    font-weight: 600;
}

/* Condômino avulso (sem conta cadastrada) — aviso, não erro, por isso a
   cor de warning em vez de critical (a avaria acima é sobre o estado
   físico do pacote, isso aqui é só "lembre de avisar manualmente"). */
.encomenda-avulso-flag {
    color: var(--status-warning) !important;
    font-weight: 600;
}

/* Link "tel:" do telefone de contato em Gerenciar Chamados (tabela e
   card) — sem estilo de link nenhum definido globalmente no app, herdaria
   o azul sublinhado padrão do navegador, destoando do resto. */
.telefone-link {
    color: var(--maroon-deep);
    text-decoration: none;
    font-weight: 500;
}

.telefone-link:hover {
    text-decoration: underline;
}

/* Busca de condômino (substitui o <select> antigo) — input + botão
   "Trocar" na mesma linha, que só aparece depois de um condômino
   selecionado (ver mostrarMoradorSelecionado em app.js). */
.encomenda-morador-busca-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.encomenda-morador-busca-wrap input {
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

.encomenda-morador-busca-wrap .btn {
    flex-shrink: 0;
    margin-bottom: 8px;
    white-space: nowrap;
}

/* Em telas estreitas o campo (agora só-leitura, mostrando "Apto X · Torre Y
   — Nome" depois de escolher o condômino) fica espremido do lado do botão
   "Trocar" e o texto fica cortado dentro da caixa — empilha os dois em vez
   de lado a lado, o campo ganha a largura toda pra mostrar o nome completo. */
@media (max-width: 640px) {
    .encomenda-morador-busca-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .encomenda-morador-busca-wrap .btn {
        width: 100%;
        margin-bottom: 0;
    }
}

/* Lista de resultados — mesmo visual de "quadro" do grupo de checkboxes,
   cada resultado uma linha clicável. Fica vazia (sem borda) quando não há
   nada pra mostrar, então não ocupa espaço à toa. */
.encomenda-morador-resultados:empty {
    display: none;
}

.encomenda-morador-resultados {
    border: 1px solid var(--line);
    background: #fff;
    margin-bottom: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.encomenda-morador-resultado-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

.encomenda-morador-resultado-item:last-child {
    border-bottom: none;
}

.encomenda-morador-resultado-item:hover {
    background: var(--paper-dark);
}

.encomenda-morador-resultado-vazio {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ink-soft);
}

.encomenda-morador-avulso-btn {
    margin: 0 12px 10px;
}

/* Badges de KPI clicáveis (filtro do histórico de encomendas) — anel de
   destaque em vez de engordar a borda, pra não deslocar o layout do grid
   quando o card fica ativo. */
.dashboard-kpi-card-clicavel {
    cursor: pointer;
}

.dashboard-kpi-card-ativo {
    /* !important necessário: a regra base .dashboard-kpi-card (mais abaixo
       no arquivo) define border/box-shadow com a mesma especificidade, e
       ganharia por ordem de declaração sem isso. */
    border-color: var(--maroon-deep) !important;
    background: rgba(90, 30, 28, .05) !important;
    box-shadow: 0 0 0 1px var(--maroon-deep) !important;
}

#encomenda-form input[type="text"],
#encomenda-form input[type="file"],
#encomenda-form select,
#encomenda-form textarea {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box;
}

#encomenda-form input:focus,
#encomenda-form select:focus,
#encomenda-form textarea:focus {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -1px;
}

.upload-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}

.upload-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 4px;
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    transition: var(--transition);
}

.upload-tab-ativa {
    border-bottom-color: var(--maroon-deep);
    color: var(--maroon-deep);
    font-weight: 700;
}

.upload-doc-ativo {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    color: var(--ink-soft);
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--paper);
    border-left: 3px solid var(--maroon);
}

/* ========================================
   GESTÃO DE MORADORES
   ======================================== */

.moradores-subtitulo {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.moradores-vazio {
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
}

.morador-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: #fff;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.morador-info {
    font-size: 13px;
}

.morador-info b {
    display: block;
}

.morador-info .morador-email {
    color: var(--ink-soft);
    font-size: 12px;
}

.morador-info .morador-unidade {
    display: block;
    color: var(--ink-soft);
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .02em;
    margin-top: 2px;
}

/* SLA em uma linha só */
.morador-info .morador-unidade:last-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.morador-status {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 3px;
    padding: 1px 6px;
    border: 1px solid currentColor;
}

.status-pendente { color: var(--maroon); }
.status-aprovado { color: var(--green); }
.status-rejeitado, .status-inativo { color: var(--ink-soft); }

/* Cor padronizada de status de chamado (ver corStatusChamado()/
   corStatusValor() em app.js) — mesma paleta de 4 cores em todo lugar
   que representa o estado de um chamado: badge (.morador-status, cards
   do morador), select editável (tabela/cards do admin), filtro por
   status, e os gráficos/indicadores do dashboard. Substitui o antigo
   .status-aberto/.status-em_andamento/etc, que tinha cores inconsistentes
   com o resto da aplicação (aberto em vermelho, resolvido em verde). */
.chamado-cor-verde { color: var(--status-good); }
.chamado-cor-amarelo { color: var(--status-warning); }
.chamado-cor-vermelho { color: var(--status-critical); }
.chamado-cor-cinza { color: var(--ink-muted); }

/* Tom "escurecido" da cor do cartão — usado tanto no chip de status
   (.chamado-chip-status, só leitura) quanto nos 3 <select> editáveis do
   cartão (Prioridade/Responsável/Status, todos tingidos na MESMA cor do
   cartão, não uma cor por campo — pedido explícito depois da prévia de
   cartões: "que ficasse na cor um pouco mais escura da cor aplicada no
   cartão" em vez das caixas brancas neutras de antes). Duas versões do
   seletor na mesma regra: a solo (`.chamado-select-verde`) cobre o chip,
   que não tem outra regra concorrente; a composta com `.dev-select` é
   necessária pro <select> — sozinha ela empataria em especificidade com
   `.dev-select { background:#fff }` (mesmo problema documentado acima em
   `.chamado-card.chamado-cor-borda-*`) e perderia, já que `.dev-select`
   vem depois no arquivo. */
.chamado-select-verde,
.dev-select.chamado-select-verde { background: rgba(12, 163, 12, .20); border-color: rgba(12, 163, 12, .45); color: #0a6e0a; }
.chamado-select-amarelo,
.dev-select.chamado-select-amarelo { background: rgba(201, 133, 0, .22); border-color: rgba(201, 133, 0, .48); color: #8a5c00; }
.chamado-select-vermelho,
.dev-select.chamado-select-vermelho { background: rgba(208, 59, 59, .20); border-color: rgba(208, 59, 59, .45); color: #a02525; }
.chamado-select-cinza,
.dev-select.chamado-select-cinza { background: rgba(137, 135, 129, .24); border-color: rgba(137, 135, 129, .5); color: #5c5a54; }

/* Card mobile inteiro tingido pela cor do status (não só a borda) —
   pedido explícito do usuário depois de ver a prévia: "colorir cada
   caixa do chamados... pra que visualmente fosse identificável".
   Precisa do ".chamado-card" junto no seletor (2 classes) — só
   ".chamado-cor-borda-verde" empata em especificidade com a regra-base
   ".chamado-card { background:#fff }" (uma classe cada) e perde por
   ordem de declaração, já que a regra-base vem depois no arquivo. */
.chamado-card.chamado-cor-borda-verde { border-left: 4px solid var(--status-good); background: rgba(12, 163, 12, .06); }
.chamado-card.chamado-cor-borda-amarelo { border-left: 4px solid var(--status-warning); background: rgba(201, 133, 0, .07); }
.chamado-card.chamado-cor-borda-vermelho { border-left: 4px solid var(--status-critical); background: rgba(208, 59, 59, .07); }
.chamado-card.chamado-cor-borda-cinza { border-left: 4px solid var(--ink-muted); background: rgba(137, 135, 129, .07); }

/* Botão "Reabrir chamado" — só aparece quando status=resolvido, dentro de
   uma linha flex junto de "Ver foto" (.chamado-card-rodape-acoes no
   cartão do admin, .morador-actions no card do morador) — só tamanho
   compacto aqui, o alinhamento já vem do container flex. */
.chamado-reabrir-btn {
    font-size: 11.5px;
    padding: 4px 9px;
    white-space: nowrap;
}


.sla-badge {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 3px;
    margin-left: 4px;
    padding: 1px 6px;
    border: 1px solid currentColor;
}

.sla-no_prazo, .sla-concluido_no_prazo { color: var(--green); }
.sla-atrasado, .sla-concluido_atrasado { color: var(--maroon-deep); }

/* ========================================
   TABELA DE CHAMADOS (ADMIN)
   ======================================== */

/* A tabela tem muitas colunas — o .upload-box padrão (max-width: 640px)
   é estreito demais pra ela; alarga só o painel de chamados e deixa a
   tabela rolar horizontalmente em telas menores. */
#chamados-panel .upload-box {
    max-width: 100%;
}

.painel-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.painel-topo h3 {
    margin-bottom: 0;
}

/* Título + abas internas (Encomendas: Aguardando retirada/Histórico)
   agrupados à esquerda do painel-topo, com o CTA "+ Registrar Encomenda"
   à direita via o justify-content:space-between já existente acima. */
.painel-topo-titulo-abas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Dois botões no canto direito do painel-topo de Veículos ("Solicitar TAG
   sem veículo" + "+ Adicionar veículo") — o painel-topo já é flex/
   space-between, então só precisa agrupar os dois num item só. */
.cadastros-veiculos-topo-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chamados-sla-config {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(43, 42, 38, .05), 0 6px 18px rgba(43, 42, 38, .06));
}

/* CTA principal do módulo Chamados — mostrado só no hub (Gerenciar
   Chamados/Meus Chamados), leva pro formulário já existente. Mesmo
   tratamento visual do .btn-premium.primario (cor primária, cantos
   arredondados, hover com leve elevação), só maior por ser o CTA
   principal da tela em vez de uma ação secundária. */
.btn-abrir-chamado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid var(--maroon-deep);
    background: var(--maroon-deep);
    color: #EFE9D8;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(43, 42, 38, .05), 0 6px 18px rgba(43, 42, 38, .06));
    transition: transform .12s ease, box-shadow .12s ease;
}

.btn-abrir-chamado:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(43, 42, 38, .07), 0 10px 26px rgba(43, 42, 38, .11);
}

.btn-abrir-chamado-mais {
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
}

.btn-voltar-chamados {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    margin-bottom: 14px;
    border-radius: 8px;
    border: 1px solid var(--maroon-deep);
    background: var(--maroon-deep);
    color: #EFE9D8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(43, 42, 38, .05), 0 6px 18px rgba(43, 42, 38, .06));
    transition: transform .12s ease, box-shadow .12s ease;
}

.btn-voltar-chamados:hover {
    transform: translateX(-2px);
    box-shadow: 0 2px 4px rgba(43, 42, 38, .07), 0 10px 26px rgba(43, 42, 38, .11);
}

.btn-voltar-chamados svg {
    width: 14px;
    height: 14px;
}

/* Uma linha só sempre, título + as 3 prioridades (cada botão/span já
   combina rótulo + valor, ex. "Baixa: 5 dias") — em telas largas cabe tudo
   sem precisar de scroll (nowrap simplesmente não tem efeito nenhum
   quando o conteúdo já cabe); no tablet cabe raspando com um scroll
   discreto. No celular a rolagem sozinha não bastou — sem indicação
   visual de que dava pra arrastar, "Alta" ficava fora da área visível e
   parecia informação cortada de verdade, não só escondida atrás de um
   scroll. Ver formatarSlaHorasCompacto() em app.js ("5d" em vez de "5
   dias") + o título escondido abaixo — juntos, os 3 itens cabem inteiros
   sem precisar rolar em telas de celular. */
.chamados-sla-config {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chamados-sla-titulo,
.sla-config-btn,
.sla-info-item {
    flex-shrink: 0;
}

.chamados-sla-titulo {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-right: 4px;
}

.sla-config-btn {
    font-size: 12px;
    padding: 6px 12px;
}

.sla-info-item {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--ink);
    padding: 4px 10px;
    border: 1px solid var(--line);
    background: #fff;
}

/* Depois das regras "base" acima de propósito — mesma especificidade de
   classe, então precisa vir depois no arquivo pra realmente vencer no
   celular (ver o comentário sobre #cadastro-foto-arquivo/ID vs. ordem no
   arquivo em outros pontos deste CSS pra mais contexto desse tipo de
   empate). */
@media (max-width: 480px) {
    .chamados-sla-titulo {
        display: none;
    }

    .chamados-sla-config {
        gap: 4px;
        padding: 8px;
    }

    .sla-config-btn {
        font-size: 10.5px;
        padding: 4px 6px;
    }

    .sla-info-item {
        font-size: 10.5px;
        padding: 3px 6px;
    }
}

.chamados-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--maroon);
    border-left: 3px solid var(--maroon);
    padding: 11px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.chamados-alerta strong {
    color: var(--maroon);
}

.chamados-alerta-icone {
    flex-shrink: 0;
    display: flex;
    color: var(--maroon);
    margin-top: 1px;
}

.chamados-alerta-icone svg {
    width: 17px;
    height: 17px;
}

.chamados-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.chamados-form-col {
    flex: 0 0 340px;
}

.chamados-list-col {
    flex: 1;
    min-width: 0;
}

@media (max-width: 900px) {
    .chamados-layout {
        flex-direction: column;
    }

    .chamados-form-col {
        flex: 1 1 auto;
        width: 100%;
    }

    .chamados-list-col {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #chamados-list {
        overflow-x: visible;
    }

    /* Empilhar rótulo em cima do input (De\nAté, um por linha) e depois os
       2 botões cada um em sua própria linha inteira fazia esse filtro
       (hoje só usado em Encomendas ▸ Histórico) ocupar boa parte da tela
       no celular só pra 2 datas. De/Até tentaram ficar lado a lado numa
       linha só, mas o input[type=date] nativo do Chrome não cabe direito
       em ~110px (o ano/ícone corta) — cada campo volta a ocupar a linha
       inteira (rótulo ao lado do input, não em cima, o que já economiza
       bastante altura sozinho), só os 2 botões dividem uma linha. */
    /* Escopado por #encomendas-historico-filtros (não só a classe
       .chamados-filtros) de propósito: essa mesma classe tem uma regra
       "desktop" (sem media query) mais abaixo no arquivo, com a mesma
       especificidade — como ela vem depois, venceria o empate. Prefixar
       com o id (mesmo padrão já usado no formulário de Cadastros — ver
       comentário sobre #cadastro-foto-arquivo) resolve isso sem precisar
       de !important. */
    /* O gatilho do seletor de período (mini-calendário) e os botões de
       Limpar/Exportar precisam caber numa linha só — .chamados-filtro-label
       não é mais renderizado (ver .periodo-picker-origem-oculta), então não
       tem por que reservar espaço/quebrar linha por causa dele. */
    #encomendas-historico-filtros.chamados-filtros {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 10px;
    }

    #encomendas-historico-filtros .periodo-picker-trigger {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #encomendas-historico-filtros .chamados-filtros-acoes {
        flex-direction: row;
        flex-wrap: nowrap;
        flex-shrink: 0;
        width: auto;
    }
}

/* Limpar filtro e Exportar Excel (Encomendas ▸ Histórico / Reservas ▸
   Agenda) são botão só-ícone sempre — desktop incluído, não só
   celular/tablet — pra ocupar bem menos espaço na barra de filtros; o
   texto vira title/aria-label. Tamanho fixo (não crescem mais pra
   preencher a linha, como quando eram texto). */
#encomendas-historico-filtros .chamados-filtros-acoes .btn,
.reservas-agenda-filtros .btn {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 10px;
}

#encomendas-historico-limpar-btn svg,
#reservas-agenda-limpar-btn svg,
#encomendas-exportar-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Escanear QR/código (busca de Encomendas e de Reservas ▸ Agenda) é
   botão só-ícone sempre, desktop incluído — o texto vira só
   title/aria-label pra continuar acessível (tooltip no hover, leitor de
   tela sempre). */
.encomendas-scanner-btn .btn-texto-completo {
    display: none;
}

.encomendas-scanner-btn {
    padding: 8px;
    gap: 0;
}

/* Exportar Excel (Encomendas ▸ Histórico) é botão só-ícone sempre,
   desktop incluído — mesmo tratamento do Escanear QR/código acima,
   texto vira title/aria-label. */
#encomendas-exportar-btn .btn-texto-completo {
    display: none;
}

/* Exportar Excel (Encomendas ▸ Histórico) nem faz sentido no
   celular/tablet — não tem pra onde mandar o arquivo baixado de forma
   útil ali — então some por completo nesses tamanhos, fica só na versão
   web. 900px cobre tablet em pé (iPad ~768-834px), não só celular. */
@media (max-width: 900px) {
    #encomendas-historico-filtros #encomendas-exportar-btn {
        display: none;
    }
}

.chamados-filtros {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--paper-dark);
    border: 1px solid var(--line);
    border-radius: 6px;
    align-items: center;
}

.chamados-filtros select {
    width: auto;
}

.chamados-filtro-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--ink-soft);
}

.chamados-filtro-label input[type="date"] {
    padding: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
}

.chamados-filtros-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chamados-filtros-acoes .btn {
    flex: 0 1 auto;
    border-radius: 6px;
}

/* ---- Seletor de período (mini-calendário De/Até) ----
   Substitui os pares De/Até de <input type="date"> nativos, que citavam
   "ocupando muito espaço" numa tela estreita, por um botão compacto que
   abre um calendário clicável. Os inputs originais continuam no DOM (só
   escondidos aqui) — ver criarSeletorPeriodo()/criarCalendarioIntervaloEmbutido()
   em app.js, que leem/escrevem neles em vez de guardar estado à parte. */
.periodo-picker-origem-oculta {
    display: none;
}

.periodo-picker {
    position: relative;
}

.periodo-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.periodo-picker-trigger svg {
    width: 15px;
    height: 15px;
    color: var(--maroon-deep);
    flex-shrink: 0;
}

.periodo-picker-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 240px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(43, 42, 38, .1);
    padding: 10px;
    z-index: 20;
}

.periodo-picker-popover.aberto {
    display: block;
}

.periodo-picker-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-transform: capitalize;
}

.periodo-picker-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
}

.periodo-picker-cal-nav:hover {
    background: var(--paper);
}

.periodo-picker-cal-nav svg {
    width: 13px;
    height: 13px;
}

.periodo-picker-cal-ant svg { transform: rotate(90deg); }
.periodo-picker-cal-prox svg { transform: rotate(-90deg); }

.periodo-picker-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.periodo-picker-cal-cabecalho {
    text-align: center;
    font-size: 10px;
    color: var(--ink-soft);
    padding-bottom: 4px;
}

.periodo-picker-cal-dia {
    aspect-ratio: 1;
    border: none;
    border-radius: 5px;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    transition: var(--transition);
}

.periodo-picker-cal-dia:hover {
    background: var(--paper);
}

.periodo-picker-cal-dia-extremo {
    background: var(--maroon);
    color: #fff;
}

.periodo-picker-cal-dia-meio {
    background: rgba(122, 42, 40, .13);
}

.periodo-picker-cal-rodape {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.periodo-picker-cal-rodape .btn {
    padding: 6px 12px;
    font-size: 11px;
}

/* ========================================
   GERENCIAR CHAMADOS — busca + Filtros Avançados (drawer) + chips
   Redesign inspirado em Power BI/Notion/Linear/Jira Cloud, mas com a
   paleta e tipografia do resto do app (não é um tema à parte).
   ======================================== */
.chamados-filtros-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.chamados-busca-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
}

.chamados-busca-wrap svg {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--ink-muted);
    pointer-events: none;
}

.chamados-busca-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(43, 42, 38, .05), 0 6px 18px rgba(43, 42, 38, .06));
}

.chamados-busca-input:focus {
    outline: none;
    border-color: var(--maroon-deep);
}

/* Ordenação — substitui o clique no cabeçalho da antiga tabela (removida
   em favor dos cartões, que não têm colunas pra clicar). O botão de
   direção reaproveita .btn-premium; só o <select> e o rótulo são novos
   aqui. */
.chamados-ordenar-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chamados-ordenar-wrap label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.chamados-ordenar-select {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
}

.btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(43, 42, 38, .05), 0 6px 18px rgba(43, 42, 38, .06);
    transition: transform .12s ease, box-shadow .12s ease;
    white-space: nowrap;
}

.btn-premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(43, 42, 38, .07), 0 10px 26px rgba(43, 42, 38, .11);
}

.btn-premium svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.btn-premium.primario {
    background: var(--maroon-deep);
    color: #EFE9D8;
    border-color: var(--maroon-deep);
}

.btn-premium.tem-filtro {
    border-color: var(--maroon-deep);
    color: var(--maroon-deep);
}

.chamados-seta {
    font-size: 9px;
    color: var(--ink-muted);
    margin-left: -2px;
}

/* ---- Exportar: um botão só, formato escolhido num menu ---- */
.chamados-exportar-wrap {
    position: relative;
}

/* Itens do menu viraram só-ícone (ver .chamados-exportar-item span
   abaixo) — o menu deixou de precisar de uma lista vertical larga
   (min-width:180px) pra caber "Exportar Excel"/"Exportar PDF" por
   extenso; vira uma linha curta de 2 ícones lado a lado, bem mais
   compacta. */
.chamados-exportar-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(43, 42, 38, .1);
    padding: 4px;
    display: none;
    flex-direction: row;
    gap: 2px;
    z-index: 20;
}

.chamados-exportar-menu.aberto {
    display: flex;
}

.chamados-exportar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    border-radius: 7px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    width: auto;
}

.chamados-exportar-item:hover {
    background: var(--paper-dark);
}

.chamados-exportar-item svg {
    width: 17px;
    height: 17px;
    color: var(--maroon-deep);
    flex-shrink: 0;
}

/* Texto ("Exportar Excel"/"Exportar PDF") vira só title/aria-label —
   ficou disponível como tooltip no hover e pra leitor de tela, mas não
   ocupa mais espaço nenhum no menu. */
.chamados-exportar-item span {
    display: none;
}

/* ---- Chips de filtros aplicados ---- */
.chamados-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

.chamados-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(43, 42, 38, .05);
}

.chamados-chip b {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 11px;
}

.chamados-chip-x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-dark);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 10px;
    border: none;
    flex-shrink: 0;
}

.chamados-chip-x:hover {
    background: var(--maroon-deep);
    color: #fff;
}

.chamados-chip-limpar-todos {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--maroon-deep);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    text-decoration: underline;
}

/* ---- Badge de status colorido (checklist do drawer) — reaproveita as
   4 cores de corStatusChamado()/corStatusValor() já usadas na
   tabela/cards, aqui como pill com fundo em vez de só texto. ---- */
.chamado-status-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
}

.chamado-status-badge.chamado-cor-verde { background: rgba(12, 163, 12, .15); color: #0a7d0a; }
.chamado-status-badge.chamado-cor-amarelo { background: rgba(201, 133, 0, .18); color: #8a5c00; }
.chamado-status-badge.chamado-cor-vermelho { background: rgba(208, 59, 59, .15); color: #a82b2b; }
.chamado-status-badge.chamado-cor-cinza { background: rgba(137, 135, 129, .18); color: #5c574c; }

/* ================= DRAWER DE DETALHES DO CHAMADO =================
   Independente do drawer de Filtros Avançados acima (z-index maior, já
   que os dois nunca ficam abertos ao mesmo tempo na prática, mas assim
   um não fica escondido atrás do outro se isso acontecer). */
.detalhe-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(43, 42, 38, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 70;
}

.detalhe-backdrop.aberto {
    opacity: 1;
    pointer-events: auto;
}

.detalhe-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 100vw;
    background: var(--paper);
    box-shadow: -8px 0 32px rgba(43, 42, 38, .14);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
    z-index: 71;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.detalhe-drawer.aberto {
    transform: translateX(0);
}

@media (max-width: 900px) {
    .detalhe-drawer { width: 70vw; }
}

@media (max-width: 600px) {
    .detalhe-drawer { width: 100vw; }
}

.detalhe-drawer-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.detalhe-drawer-header-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.detalhe-drawer-protocolo {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--ink-soft);
}

.detalhe-drawer-titulo {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.detalhe-drawer-fechar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    font-size: 14px;
    flex-shrink: 0;
}

.detalhe-drawer-fechar:hover {
    background: var(--paper-dark);
}

.detalhe-drawer-corpo {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detalhe-card-secao {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(43, 42, 38, .05));
}

.detalhe-card-secao h4 {
    margin: 0 0 12px;
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--maroon-deep);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.detalhe-grid-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.detalhe-campo-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detalhe-campo-info label {
    font-size: 10.5px;
    color: var(--ink-muted);
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.detalhe-campo-info span {
    font-size: 13.5px;
    color: var(--ink);
}

.detalhe-campo-info.full {
    grid-column: 1 / -1;
}

.detalhe-texto-scroll {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 6px;
}

.detalhe-anexo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-dark);
}

.detalhe-anexo-item + .detalhe-anexo-item {
    margin-top: 8px;
}

.detalhe-anexo-icone {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
}

.detalhe-anexo-info {
    flex: 1;
    min-width: 0;
}

.detalhe-anexo-nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detalhe-anexo-meta {
    font-size: 11px;
    color: var(--ink-soft);
}

.detalhe-anexo-acoes {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.detalhe-anexo-btn {
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-size: 11.5px;
    color: var(--maroon-deep);
    font-family: inherit;
}

.detalhe-anexo-btn:hover {
    background: #fff;
    filter: brightness(0.96);
}

/* Linha/card da tabela de Gerenciar Chamados fica clicável — mesmo cursor
   e leve destaque no hover já usados noutros lugares clicáveis do app. */
.chamados-tabela tbody tr[data-chamado-id] {
    cursor: pointer;
}

.chamados-tabela tbody tr[data-chamado-id]:hover td {
    filter: brightness(0.97);
}

.chamado-card[data-chamado-id] {
    cursor: pointer;
}

.chamados-tabela tbody tr.linha-detalhe-ativa td {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -2px;
}

.chamado-card.linha-detalhe-ativa {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -2px;
}

/* ================= DRAWER (Filtros Avançados) ================= */
.chamados-filtros-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(43, 42, 38, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 60;
}

.chamados-filtros-backdrop.aberto {
    opacity: 1;
    pointer-events: auto;
}

.chamados-filtros-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--paper);
    box-shadow: -8px 0 32px rgba(43, 42, 38, .14);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    z-index: 61;
    display: flex;
    flex-direction: column;
}

.chamados-filtros-drawer.aberto {
    transform: translateX(0);
}

@media (max-width: 900px) {
    .chamados-filtros-drawer { width: 70vw; }
}

@media (max-width: 600px) {
    .chamados-filtros-drawer { width: 100vw; }
}

.chamados-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    flex-shrink: 0;
}

.chamados-drawer-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.chamados-drawer-fechar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    font-size: 14px;
}

.chamados-drawer-fechar:hover {
    background: var(--paper-dark);
}

.chamados-drawer-corpo {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.chamados-grupo-filtro h4 {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--maroon-deep);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 7px;
}

.chamados-grupo-filtro h4 svg {
    width: 14px;
    height: 14px;
}

.chamados-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    position: relative;
}

.chamados-campo:last-child {
    margin-bottom: 0;
}

.chamados-campo label {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600;
}

.chamados-campo input[type="text"],
.chamados-campo select,
.chamados-campo input[type="date"] {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    width: 100%;
}

.chamados-campo input:focus,
.chamados-campo select:focus {
    outline: none;
    border-color: var(--maroon-deep);
    box-shadow: 0 0 0 3px rgba(90, 30, 28, .08);
}

.chamados-campo select:disabled {
    background: var(--paper-dark);
    color: var(--ink-muted);
    cursor: not-allowed;
}

.chamados-campo-dica {
    font-size: 11px;
    color: var(--ink-muted);
}

.chamados-linha-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Autocomplete de Unidade */
.chamados-autocomplete-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(43, 42, 38, .1);
    max-height: 160px;
    overflow-y: auto;
    z-index: 5;
    display: none;
    margin-top: 4px;
}

.chamados-autocomplete-lista.aberta {
    display: block;
}

.chamados-autocomplete-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}

.chamados-autocomplete-item:hover {
    background: var(--paper-dark);
}

.chamados-autocomplete-vazio {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--ink-muted);
}

/* Status: trigger + lista de checkboxes com badge colorido */
.chamados-status-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13.5px;
}

.chamados-status-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(43, 42, 38, .1);
    z-index: 5;
    display: none;
    padding: 6px;
    margin-top: 4px;
}

.chamados-status-lista.aberta {
    display: block;
}

.chamados-status-opcao {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.chamados-status-opcao:hover {
    background: var(--paper-dark);
}

.chamados-status-opcao input {
    accent-color: var(--maroon-deep);
}

/* Responsável: multi-select pesquisável com chips dentro do campo */
.chamados-multi-select {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    cursor: text;
}

.chamados-multi-select input {
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    flex: 1;
    min-width: 80px;
    padding: 4px 2px;
    background: transparent;
}

.chamados-multi-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--paper-dark);
    border-radius: 14px;
    padding: 3px 4px 3px 10px;
    font-size: 12px;
}

.chamados-multi-chip button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: var(--ink-muted);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    line-height: 1;
}

.chamados-multi-select-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 4px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(43, 42, 38, .1);
    max-height: 140px;
    overflow-y: auto;
    display: none;
    z-index: 5;
}

.chamados-multi-select-lista.aberta {
    display: block;
}

.chamados-multi-select-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}

.chamados-multi-select-item:hover {
    background: var(--paper-dark);
}

.chamados-drawer-rodape {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    background: #fff;
    flex-shrink: 0;
}

.chamados-drawer-rodape .btn-premium {
    flex: 1;
    justify-content: center;
}

@media (max-width: 480px) {
    .chamados-filtros-barra {
        flex-direction: column;
        align-items: stretch;
    }

    .chamados-exportar-wrap {
        display: flex;
    }

    .chamados-exportar-wrap .btn-premium {
        flex: 1;
        justify-content: center;
    }
}

/* Exportar (Excel/PDF) só faz sentido na versão web — o arquivo baixado
   não tem pra onde ir de forma útil no celular/tablet. Escondido em todo
   módulo que reaproveita o dropdown .chamados-exportar-wrap (Chamados,
   Condôminos, Cadastros ▸ Veículos/Bicicletas/Pets, Visitantes, Hóspedes,
   Prestadores, Reservas ▸ Agenda/Faturamento) — depois do bloco de 480px
   acima de propósito, pra vencer o empate de especificidade nele também.
   O PDF do Dashboard de Gestão é um botão à parte (não usa esse wrap) e
   tem seu display ligado via JS inline — precisa de !important pra
   vencer o style inline. Exportar Excel de Encomendas ▸ Histórico já tem
   sua própria regra de mesmo efeito, mais acima neste arquivo. */
@media (max-width: 900px) {
    .chamados-exportar-wrap {
        display: none;
    }

    #dashboard-exportar-pdf-btn {
        display: none !important;
    }
}

#chamados-list {
    overflow-x: auto;
}

/* Web/desktop only: sem altura limitada, a tabela (min-width: 900px, pode
   ter dezenas de linhas) cresce livremente e a barra de rolagem horizontal
   fica ancorada na base dela — só alcançável rolando a PÁGINA inteira até
   o fim, escondendo a navegação horizontal durante a leitura normal.
   Limitar a altura aqui dá ao próprio contêiner uma rolagem vertical
   interna, e a barra horizontal passa a ficar sempre na borda inferior
   desse box (visível), independente de quantas linhas existam. Mobile usa
   os cards (buildChamadosCardsAdmin), não essa tabela, e o breakpoint de
   768px já zera esse overflow-x — este bloco não altera nada lá. */
@media (min-width: 769px) {
    #chamados-list {
        max-height: 65vh;
        overflow-y: auto;
    }

    .chamados-tabela thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

.chamados-tabela {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-top: 8px;
}

/* .chamados-tabela nasceu pensada só pro desktop (Chamados nem renderiza
   ela no celular/tablet — usa cards, ver buildChamadosCardsAdmin — então
   o min-width:900px acima nunca foi problema ali). Reservas ▸ Faturamento
   reaproveita a mesma classe pra sua própria tabela, mas não tem um modo
   cartão alternativo pra telas estreitas — sem um container com scroll
   próprio, a tabela larga transbordava e o texto ficava cortado, tanto no
   celular quanto no tablet. */
#reservas-faturamento-lista {
    overflow-x: auto;
}

.chamados-tabela th,
.chamados-tabela td {
    padding: 8px 10px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.chamados-tabela th {
    background: var(--paper-dark);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.chamados-tabela td {
    background: #fff;
}

.morador-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /* .morador-row é flex + justify-content:space-between — funciona
       enquanto info e actions cabem na mesma linha, mas quando .morador-info
       fica mais longo (ex.: telefone + dias + horário + exceções da
       Equipe) e empurra .morador-actions pra uma segunda linha, um único
       item numa linha de flex-wrap não tem "o quê" espaçar contra e acaba
       colado na esquerda. margin-left:auto resolve isso empurrando
       .morador-actions pro fim da própria linha, quebrando ou não. */
    margin-left: auto;
}

.morador-actions button {
    font-size: 10px;
    padding: 7px 10px;
}

#link-condominos-box {
    margin: 10px 0 16px;
}

#link-condominos-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--paper-dark);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--ink);
}

/* ========================================
   DASHBOARD DE GESTÃO
   ======================================== */

.dashboard-tipo-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.dashboard-tipo-btn {
    padding: 10px 16px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--ink-soft);
}

.dashboard-tipo-btn:hover {
    background: var(--paper-dark);
    color: var(--ink);
}

.dashboard-tipo-ativo {
    background: var(--maroon-deep);
    color: #EFE9D8;
    border-color: var(--maroon-deep);
}

.dashboard-periodo-filtro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-periodo-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-periodo-btn {
    font-size: 12px;
    padding: 6px 12px;
}

.dashboard-periodo-seta {
    display: inline-block;
    font-size: 10px;
    margin-left: 2px;
    transition: transform .15s ease;
}

#dashboard-periodo-personalizado-btn.dashboard-periodo-personalizado-aberto {
    border-color: var(--maroon-deep);
}

#dashboard-periodo-personalizado-btn.dashboard-periodo-personalizado-aberto .dashboard-periodo-seta {
    transform: rotate(180deg);
}

/* Painel "Período personalizado" — dropdown que abre abaixo da fileira de
   pills quando "Personalizado" é clicado (ver toggle no app.js). Fica no
   fluxo normal (não position:absolute) pra não sobrepor os KPIs/gráficos
   logo abaixo, que só existem quando o painel está fechado ou já foi
   aplicado. */
.dashboard-periodo-personalizado-painel {
    width: min(460px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    box-sizing: border-box;
}

.dashboard-periodo-personalizado-painel h4 {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 12px;
}

/* De/Até lado a lado pra economizar espaço vertical — quebra pra baixo
   sozinho (flex-wrap) se o painel ficar estreito demais pros dois campos
   caberem numa linha só (ex.: mobile), sem precisar de media query. */
.dashboard-periodo-personalizado-campos {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 14px;
}

.dashboard-periodo-personalizado-campo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.dashboard-periodo-personalizado-campo label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.dashboard-periodo-personalizado-campo input[type="date"] {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.dashboard-periodo-personalizado-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-periodo-personalizado-acoes .btn {
    font-size: 12px;
    padding: 7px 14px;
}

/* Exportar PDF (handleExportarDashboardPdf) — window.print() imprime a
   página inteira por padrão; esta regra restringe a impressão só ao
   conteúdo do dashboard (#chamados-dashboard-col), escondendo menu,
   formulários e filtros. Mesmo truque clássico de "imprimir só isto":
   esconde tudo via visibility (não display, pra não quebrar o fluxo de
   quem já estava com display:none por outro motivo) e tira o alvo do
   fluxo normal com position:absolute. */
@media print {
    body * {
        visibility: hidden;
    }

    #chamados-dashboard-col,
    #chamados-dashboard-col * {
        visibility: visible;
    }

    #chamados-dashboard-col {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
    }

    .dashboard-tipo-selector,
    #dashboard-periodo-filtro,
    .dashboard-hover-grupo [data-hover-index] {
        display: none !important;
    }

    .dashboard-chart-box {
        break-inside: avoid;
    }

    /* Exportar PDF de Gerenciar Chamados (handleExportarChamadosPdf) —
       mesmo truque de "imprimir só isto" do dashboard acima. Seguro
       coexistir sem condicional: #chamados-dashboard-col e
       #chamados-list-col nunca ficam display:block ao mesmo tempo
       (abrirModuloChamados alterna exclusivamente entre os modos), então
       só o que estiver de fato visível na tela acaba imprimindo. */
    #chamados-list-col,
    #chamados-list-col * {
        visibility: visible;
    }

    #chamados-list-col {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
    }

    .chamados-filtros-barra,
    .chamados-chips-row,
    .chamados-filtros-drawer,
    .chamados-filtros-backdrop {
        display: none !important;
    }
}

.dashboard-periodo-ativo {
    background: var(--maroon-deep);
    color: #EFE9D8;
    border-color: var(--maroon-deep);
}

.dashboard-kpis {
    display: grid;
    /* auto-fit em vez de um número fixo de colunas — com os dois novos
       status ("Aguardando fornecedor"/"Aguardando morador") o total foi de
       7 pra 9 cards, e um repeat(7, 1fr) fixo deixaria a última linha com
       só 2 cards esticados contra 5 colunas vazias. auto-fit preenche cada
       linha antes de quebrar, com qualquer quantidade de cards. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .dashboard-kpis {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* Mesma densidade compacta de #chamados-hub-kpis/#encomendas-kpis (ver
   comentários lá) aplicada aqui também — padronização pedida
   explicitamente pra todos os KPIs do app, dashboards inclusive. Este
   #dashboard-kpis é compartilhado entre o Dashboard de Gestão de Chamados
   (até 9 cards) e o de Encomendas (mudarTipoDashboard troca só os dados,
   não o elemento), então minmax menor é o que deixa os dois caberem numa
   linha só em telas de admin normais em vez de quebrar em 2. Mesmo ponto
   de corte (769px) dos outros dois blocos KPI, não os 1100px do
   .dashboard-kpis genérico — senão o card ficaria compacto acima de
   1100px e "normal" entre 769-1100px, uma inconsistência a mais em vez de
   menos. Por ser seletor de ID, ganha de ambas as media queries de
   .dashboard-kpis (1100px e a base) independente da ordem no arquivo.
   auto-fill, não auto-fit — mesmo motivo de #encomendas-kpis acima:
   com menos cards que colunas cabíveis (Encomendas tem só 6, por
   exemplo), auto-fit esticaria eles pra preencher a linha toda em vez de
   manter o tamanho fixo. */
@media (min-width: 769px) {
    #dashboard-kpis {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 6px;
        margin-bottom: 14px;
    }

    #dashboard-kpis .dashboard-kpi-card {
        padding: 7px 8px 7px 9px;
        gap: 6px;
    }

    #dashboard-kpis .dashboard-kpi-ic {
        width: 18px;
        height: 18px;
        border-radius: 6px;
    }

    #dashboard-kpis .dashboard-kpi-ic svg {
        width: 9px;
        height: 9px;
    }

    #dashboard-kpis .dashboard-kpi-valor {
        font-size: 14px;
    }

    #dashboard-kpis .dashboard-kpi-rotulo {
        font-size: 7.5px;
        letter-spacing: .03em;
        line-height: 1.25;
        margin-top: 1px;
    }
}

/* Bloco de indicadores compactos do Dashboard de Encomendas
   (#encomendas-indicadores-operacionais) — reúne 6 cards (os 3 antigos
   "destaques" + os 3 indicadores operacionais da portaria) num único
   bloco enquadrado, menor que o .dashboard-kpi-card padrão da linha de
   KPIs principal, mas ainda com espaço suficiente pro rótulo nunca
   precisar cortar (não há text-overflow/nowrap em .dashboard-kpi-rotulo,
   então ele já quebra linha sozinho quando o card fica estreito). */
.dashboard-kpis-compacto {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.dashboard-kpis-compacto .dashboard-kpi-card {
    padding: 9px 11px 9px 13px;
    gap: 9px;
}

.dashboard-kpis-compacto .dashboard-kpi-ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.dashboard-kpis-compacto .dashboard-kpi-ic svg {
    width: 12px;
    height: 12px;
}

.dashboard-kpis-compacto .dashboard-kpi-valor {
    font-size: 16px;
}

.dashboard-kpis-compacto .dashboard-kpi-rotulo {
    font-size: 8.5px;
    margin-top: 2px;
}

.dashboard-kpis-compacto .dashboard-kpi-card-capacidade {
    padding: 8px 11px;
    gap: 6px;
}

/* Hub de Chamados: os 7 KPIs (Total/Abertos/Em andamento/Aguardando
   fornecedor/Aguardando morador/Atrasados/Resolvidos) numa linha só, em
   vez de quebrar em 2 como o .dashboard-kpis-compacto genérico (herdado
   de Encomendas) fazia com 7 itens — pedido explícito. Escopado por ID
   (não mexe em .dashboard-kpis-compacto em si, usada também pelos 6
   indicadores de Encomendas) e só a partir de 769px — abaixo disso a
   media query de mobile mais abaixo já força .dashboard-kpi-card num
   layout de 2 colunas próprio, que continua valendo aqui sem alteração
   (não faz sentido nenhum espremer 7 numa linha só em tela de celular).
   repeat(7, 1fr) fixo em vez de auto-fit: são sempre exatamente 7 cards
   aqui (renderKpisHubChamados), não uma quantidade variável. */
@media (min-width: 769px) {
    #chamados-hub-kpis {
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
    }

    #chamados-hub-kpis .dashboard-kpi-card {
        padding: 7px 8px 7px 9px;
        gap: 6px;
    }

    #chamados-hub-kpis .dashboard-kpi-ic {
        width: 18px;
        height: 18px;
        border-radius: 6px;
    }

    #chamados-hub-kpis .dashboard-kpi-ic svg {
        width: 9px;
        height: 9px;
    }

    #chamados-hub-kpis .dashboard-kpi-valor {
        font-size: 14px;
    }

    /* Sem nowrap/ellipsis de propósito (mesma lógica do comentário de
       .dashboard-kpis-compacto acima) — "Aguardando fornecedor"/"Aguardando
       morador" não cabem em 94ish px numa linha só; quebram pra 2 linhas
       em vez de cortar, e como o grid alinha a altura de toda a linha pelo
       card mais alto, os outros 5 cards (rótulo de 1 linha) não ficam
       desalinhados — só a linha toda fica um pouco mais alta. */
    #chamados-hub-kpis .dashboard-kpi-rotulo {
        font-size: 7.5px;
        letter-spacing: .03em;
        line-height: 1.25;
        margin-top: 1px;
    }

    /* Menos respiro vertical entre a linha de KPIs, a de SLA e a área de
       chamados abaixo — pedido explícito, esse bloco inteiro (KPIs → SLA →
       alerta → lista) ficava com espaçamento de seções bem separadas
       (24px/14px/18px, herdado do resto do app) quando na real é tudo
       parte do mesmo cabeçalho compacto do hub. */
    #chamados-hub-kpis {
        margin-bottom: 10px;
    }
}

/* Animação de entrada discreta — fade + leve subida, disparada de novo a
   cada innerHTML novo (troca de período/aba), já que reflete uma tela nova
   de dados. Curta o suficiente (.28s) e sutil o suficiente pra não chamar
   atenção pra si mesma. Respeita prefers-reduced-motion. */
@keyframes dashboardEntrada {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .dashboard-kpi-card,
    .dashboard-chart-box {
        animation: dashboardEntrada .28s ease-out both;
    }
}

.dashboard-kpi-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px 15px 19px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    /* Sombra em 2 camadas (contato raso + difusa) em vez de uma só —
       elevation mais suave, "cartões executivos" em vez de "cartão fino". */
    box-shadow: 0 1px 2px rgba(43, 42, 38, .05), 0 6px 18px rgba(43, 42, 38, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}

.dashboard-kpi-ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 67, 58, .1);
    color: var(--chart-maroon);
}

.dashboard-kpi-ic svg {
    width: 16px;
    height: 16px;
}

.dashboard-kpi-card.acento-bom .dashboard-kpi-ic {
    background: rgba(12, 163, 12, .1);
    color: var(--status-good);
}

.dashboard-kpi-card.acento-critico .dashboard-kpi-ic {
    background: rgba(208, 59, 59, .1);
    color: var(--status-critical);
}

/* Completa o par bom/crítico com amarelo (aguardando) e cinza (concluído/
   neutro) — mesma paleta de 4 cores usada em toda a tela de Chamados
   (ver corStatusChamado()/corStatusValor() em app.js). */
.dashboard-kpi-card.acento-atencao .dashboard-kpi-ic {
    background: rgba(201, 133, 0, .1);
    color: var(--status-warning);
}

.dashboard-kpi-card.acento-neutro .dashboard-kpi-ic {
    background: rgba(137, 135, 129, .1);
    color: var(--ink-muted);
}

.dashboard-kpi-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-kpi-card:hover {
    box-shadow: 0 2px 4px rgba(43, 42, 38, .07), 0 10px 26px rgba(43, 42, 38, .11);
    transform: translateY(-2px);
}

.dashboard-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--chart-maroon);
}

.dashboard-kpi-card.acento-bom::before {
    background: var(--status-good);
}

.dashboard-kpi-card.acento-critico::before {
    background: var(--status-critical);
}

.dashboard-kpi-card.acento-atencao::before {
    background: var(--status-warning);
}

.dashboard-kpi-card.acento-neutro::before {
    background: var(--ink-muted);
}

.dashboard-kpi-valor {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1.15;
}

.dashboard-kpi-rotulo {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* Evolução sozinha numa linha própria — largura cheia, já que é a única
   série temporal das três (Categoria/Status abaixo se beneficiam mais de
   ficarem lado a lado do que de largura extra). */
.dashboard-chart-evolucao-row {
    margin-bottom: 16px;
}

.dashboard-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
    margin-bottom: 24px;
}

/* Mesma ideia de .dashboard-charts-row, só que pras 4 fileiras novas do
   Dashboard de Encomendas (2 gráficos cada, largura igual — os 3 originais
   tinham uma coluna do meio mais larga por causa do gráfico de categoria
   com nomes longos, não se aplica aqui). */
.dashboard-charts-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .dashboard-charts-row-2 {
        grid-template-columns: 1fr;
    }
}

/* Painel de Alertas Inteligentes (Dashboard de Encomendas) — cada alerta é
   uma linha com uma faixa de cor à esquerda (mesma linguagem visual do
   .sla-badge/.dashboard-severidade: cor = estado, não decoração). */
.encomendas-alertas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.encomenda-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    background: var(--paper-dark);
    font-size: 13px;
    color: var(--ink);
}

.encomenda-alerta-ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.encomenda-alerta-vazio {
    font-size: 13px;
    color: var(--ink-soft);
    padding: 10px 12px;
}

.encomenda-alerta.amarelo { border-left-color: var(--status-warning); }
.encomenda-alerta.amarelo .encomenda-alerta-ponto { background: var(--status-warning); }
.encomenda-alerta.vermelho { border-left-color: var(--status-critical); }
.encomenda-alerta.vermelho .encomenda-alerta-ponto { background: var(--status-critical); }
.encomenda-alerta.laranja { border-left-color: #C97A2E; }
.encomenda-alerta.laranja .encomenda-alerta-ponto { background: #C97A2E; }

/* "Capacidade ocupada" precisa de mais conteúdo (selo + barra) do que o
   layout horizontal padrão do .dashboard-kpi-card (ícone + texto lado a
   lado) comporta — essa variante empilha em coluna em vez de linha, só
   pra esse card. Clicável (mesmo affordance de .sla-config-btn) pra
   editar a capacidade total. */
.dashboard-kpi-card-capacidade {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    cursor: pointer;
    padding: 12px 14px;
}

.dashboard-kpi-card-capacidade .capacidade-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-kpi-card-capacidade .dashboard-kpi-rotulo {
    margin-top: 0;
}

.dashboard-kpi-progresso {
    height: 6px;
    border-radius: 3px;
    background: var(--paper-dark);
    overflow: hidden;
}

.dashboard-kpi-progresso > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.dashboard-chart-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    /* Mesma dupla-camada dos KPI cards — todo card "flutuante" do dashboard
       usa a mesma elevação, não cada um inventando a própria sombra. */
    box-shadow: 0 1px 2px rgba(43, 42, 38, .05), 0 6px 18px rgba(43, 42, 38, .06);
    overflow: hidden;
}

.dashboard-chart-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--grid);
}

.dashboard-chart-head .ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex-shrink: 0;
    background: rgba(184, 67, 58, .1);
    color: var(--chart-maroon);
}

.dashboard-chart-head .ic svg {
    width: 13px;
    height: 13px;
}

.dashboard-chart-head h4 {
    /* Serif do corpo do app em vez de Courier New — títulos com mais
       destaque/hierarquia (a fonte monoespaçada fica só pros rótulos
       pequenos/uppercase, como já era em .dashboard-kpi-rotulo). */
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

#dashboard-chart-evolucao,
#dashboard-chart-categoria,
#dashboard-chart-status,
#dashboard-chart-horario,
#dashboard-chart-bloco,
#dashboard-chart-transportadoras,
#dashboard-chart-dia-semana,
#dashboard-chart-sla-tendencia,
#dashboard-chart-sla-categoria,
#dashboard-chart-sla-donut {
    height: 320px;
    padding: 13px 14px;
    box-sizing: border-box;
    display: flex;
}

/* Pareto tem sua própria altura fixa (bem maior que os 320px dos outros
   gráficos) já pensada pro caso comum de até 9 barras (8 + "Outras") +
   a linha de resumo abaixo, sem precisar rolar — mas o conteúdo em si
   (desenharParetoSvg) tem altura NATURAL, não esticada, então se algum dia
   isso mudar o overflow-y:auto abaixo já cobre o excesso. */
#dashboard-chart-pareto {
    height: 400px;
    padding: 13px 14px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
}

#dashboard-chart-status,
#dashboard-chart-sla-donut {
    align-items: center;
    justify-content: center;
}

/* Evolução e Tendência de SLA têm um resumo abaixo do gráfico
   (.dashboard-linha-marcos) — precisam esticar (não centralizar) pra esse
   bloco caber dentro dos mesmos 320px, com o SVG ocupando o espaço que
   sobra em vez de tamanho fixo. */
#dashboard-chart-evolucao,
#dashboard-chart-sla-tendencia {
    align-items: stretch;
    justify-content: stretch;
}

/* SLA por categoria é barras horizontais, mesmo caso de "Por categoria"
   (overflow com muitas categorias) — alinhado ao topo, rolagem própria. */
#dashboard-chart-sla-categoria {
    align-items: flex-start;
    overflow-y: auto;
}

.dashboard-linha-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.dashboard-linha-wrap .dashboard-svg {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: auto;
}

/* Wrapper próprio do Pareto (SVG + resumo empilhados) — parecido com
   .dashboard-linha-wrap, mas SEM o `.dashboard-svg { flex:1; height:auto }`
   dela: o SVG do Pareto (desenharParetoSvg) não usa preserveAspectRatio
   "none" e precisa manter sua altura NATURAL (baseada no número de itens),
   não ser esticado pra preencher o card — isso é o que mantém o
   font-size definido no SVG em tamanho real, em vez de depender da altura
   física disponível. */
.dashboard-pareto-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.dashboard-linha-marcos {
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 0 4px;
}

/* Variante com um único item de resumo (Pareto) em vez dos dois lados
   pico/menor volume da Evolução — space-between com um filho só já cai no
   início por padrão, isso centraliza pra ficar visualmente equilibrado. */
.dashboard-linha-marcos-centro {
    justify-content: center;
}

.dashboard-linha-marco {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: var(--ink-muted);
}

.dashboard-linha-marco b {
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
}

.dashboard-linha-marco.maior b { color: var(--chart-green); }
.dashboard-linha-marco.menor b { color: var(--chart-maroon); }
.dashboard-linha-marco.pareto b { color: var(--dourado); }

#dashboard-chart-categoria {
    align-items: flex-start;
    overflow-y: auto;
}

.dashboard-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Tooltip de hover compartilhado pelos três gráficos (ver
   ativarTooltipGrafico() em app.js) — posicionado via left/top inline. */
.dashboard-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--ink);
    color: #F1EEE4;
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    line-height: 1.5;
    padding: 6px 9px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translate(-50%, calc(-100% - 8px));
    transition: opacity .1s ease;
    white-space: nowrap;
    z-index: 5;
}

.dashboard-tooltip.show {
    opacity: 1;
}

.dashboard-tooltip b {
    color: #fff;
}

.dashboard-linha-dot {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .1s ease;
}

.dashboard-linha-ponto.hover-ativo .dashboard-linha-dot {
    transform: scale(1.8);
}

.dashboard-hover-grupo.hover-ativo .dashboard-bar-fill {
    filter: brightness(1.15);
}

.dashboard-donut-seg {
    stroke-width: 26px;
    transition: stroke-width .1s ease;
}

.dashboard-donut-seg.hover-ativo {
    stroke-width: 30px;
}

/* Linha em vez de coluna, com wrap — legenda fica ao lado quando o card
   tem largura sobrando (Web), e cai pra baixo do donut sozinha quando não
   tem (a mesma pilha vertical de antes), sem precisar de media query. */
.dashboard-donut-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
}

.dashboard-donut-svg {
    width: 240px;
    max-height: 100%;
    flex-shrink: 0;
}

.dashboard-donut-legenda {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 12.5px;
    color: var(--ink-soft);
    flex: 1;
    min-width: 130px;
}

.dashboard-donut-legenda-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dashboard-donut-legenda-cor {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 3px;
}

.dashboard-donut-legenda-rotulo {
    flex: 1;
    color: var(--ink);
}

.dashboard-donut-legenda-valor {
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    color: var(--ink);
}

.dashboard-donut-legenda-valor small {
    font-weight: 400;
    color: var(--ink-muted);
}

.dashboard-analise-wrap {
    margin-bottom: 28px;
}

.dashboard-analise-destaque {
    width: 100%;
}

.dashboard-destaques {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 14px;
    margin-bottom: 24px;
}

.dashboard-destaque {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 15px 16px;
}

.dashboard-destaque-ic {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(209, 154, 46, .14);
    color: var(--chart-gold);
}

.dashboard-destaque-ic svg {
    width: 15px;
    height: 15px;
}

.dashboard-destaque.acento-critico .dashboard-destaque-ic {
    background: rgba(208, 59, 59, .1);
    color: var(--status-critical);
}

.dashboard-destaque-corpo {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-destaque-rotulo {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-destaque-texto {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}

.dashboard-destaque-texto b {
    color: var(--maroon-deep);
}

.dashboard-destaque-valor {
    font-family: 'Courier New', monospace;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.dashboard-destaque-sub {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 2px;
}

.dashboard-meta-editar {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: none;
    border: none;
    color: var(--maroon);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.dashboard-meta-linhas {
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 7px;
    font-variant-numeric: tabular-nums;
}

.dashboard-meta-linhas b {
    color: var(--ink);
}

.dashboard-barra-track {
    height: 7px;
    background: var(--grid);
    border-radius: 99px;
    overflow: hidden;
}

.dashboard-barra-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .2s ease;
}

@media (max-width: 900px) {
    .dashboard-destaques {
        grid-template-columns: 1fr;
    }
}

.dashboard-atrasados-tabela {
    min-width: 0;
}

.dashboard-severidade {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}

.dashboard-severidade.leve {
    color: var(--status-warning);
    background: rgba(201, 133, 0, .1);
}

.dashboard-severidade.grave {
    color: var(--status-critical);
    background: rgba(208, 59, 59, .1);
}

.dashboard-atrasado-row {
    cursor: pointer;
    transition: background .1s ease;
}

.dashboard-atrasado-row:hover,
.dashboard-atrasado-row:focus-visible {
    background: var(--paper);
}

/* Destaque temporário na linha da tabela de "Gerenciar Chamados" ao chegar
   vindo de um clique em "Chamados atrasados" no Dashboard. Anima o
   background das células (não da <tr>) — .chamados-tabela td tem fundo
   branco opaco próprio, que cobriria qualquer cor aplicada só na linha. */
.chamado-linha-destaque td {
    animation: chamado-linha-flash 2.2s ease;
}

.chamado-card.chamado-linha-destaque {
    animation: chamado-card-flash 2.2s ease;
}

@keyframes chamado-linha-flash {
    0%, 15% { background: rgba(209, 154, 46, .35); }
    100% { background: #fff; }
}

@keyframes chamado-card-flash {
    0%, 15% { background: rgba(209, 154, 46, .35); box-shadow: 0 0 12px rgba(209, 154, 46, .4); }
    100% { background: #fff; box-shadow: 0 2px 8px rgba(43, 42, 38, .05); }
}

@media (max-width: 900px) {
    .dashboard-charts-row {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ÁREA DE MENSAGENS
   ======================================== */

.messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
}

#chat-welcome {
    max-width: 640px;
    margin: 8px auto 24px;
}

.chat-welcome-topo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.chat-welcome-icone {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(122, 42, 40, .08);
    color: var(--maroon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-welcome-icone svg {
    width: 23px;
    height: 23px;
}

.chat-welcome-topo h2 {
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 2px;
}

.chat-welcome-topo p {
    font-size: 13px;
    color: var(--ink-soft);
}

.chat-welcome-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    padding: 12px 14px;
    margin-bottom: 22px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.chat-welcome-aviso-icone {
    flex-shrink: 0;
    display: flex;
    color: var(--green);
    margin-top: 1px;
}

.chat-welcome-aviso-icone svg {
    width: 15px;
    height: 15px;
}

.chat-welcome-aviso strong {
    color: var(--ink);
}

.chat-welcome-aviso-fechar {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 0 0 0 8px;
    display: flex;
}

.chat-welcome-aviso-fechar svg {
    width: 14px;
    height: 14px;
}

.chat-welcome-aviso-fechar:hover {
    color: var(--maroon);
}

.chat-welcome-sugestoes-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.chat-welcome-sugestoes-titulo svg {
    width: 13px;
    height: 13px;
    color: var(--maroon);
}

.chat-welcome-sugestoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.chat-sugestao {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    padding: 11px 13px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    line-height: 1.4;
}

.chat-sugestao:hover {
    border-color: var(--maroon);
    background: rgba(122, 42, 40, .04);
}

.chat-sugestao-icone {
    flex-shrink: 0;
    display: flex;
    color: var(--maroon);
}

.chat-sugestao-icone svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 560px) {
    .chat-welcome-sugestoes {
        grid-template-columns: 1fr;
    }
}

.msg {
    max-width: 80%;
    margin-bottom: 16px;
    animation: rise .25s ease;
}

.msg.user { margin-left: auto; }
.msg.bot { margin-right: auto; }

.msg-label {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 3px;
}

.msg.user .msg-label { text-align: right; }

.bubble {
    padding: 11px 14px;
    font-size: 14.5px;
    line-height: 1.55;
}

.msg.user .bubble {
    background: var(--maroon-deep);
    color: #EFE9D8;
}

.msg.bot .bubble {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}

.msg.bot .bubble p { margin: 0 0 8px; }
.msg.bot .bubble p:last-child { margin-bottom: 0; }

.stamp-row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stamp {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .05em;
    color: var(--green);
    border: 1px solid var(--green);
    padding: 2px 7px;
    text-transform: uppercase;
}

.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-soft);
    animation: bounce 1.1s infinite ease-in-out;
    display: inline-block;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ========================================
   INPUT DE CHAT
   ======================================== */

.chat-input-area {
    border-top: 1px solid var(--line);
    background: var(--paper-dark);
    padding: 14px 24px 16px;
}

.input-wrapper {
    display: flex;
    gap: 10px;
}

#message-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
}

#message-input:focus {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -1px;
}

#send-btn {
    display: flex;
    align-items: center;
    gap: 7px;
}

#send-btn svg {
    width: 15px;
    height: 15px;
}

.chat-input-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--ink-soft);
}

.chat-input-hint svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--maroon);
}

.chat-rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 24px;
    background: var(--paper-dark);
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-soft);
}

.chat-rodape svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--ink-soft);
}

/* ========================================
   PAINEL DE ADMIN
   ======================================== */

.admin-panel {
    padding: 14px 24px;
    background: var(--maroon-deep);
    border-top: 1px solid var(--maroon);
}

.admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.stat {
    text-align: left;
}

.stat-value {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #EFE9D8;
}

.stat-label {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .1em;
    color: rgba(239, 233, 216, .65);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Select compacto — nome herdado do antigo painel do Desenvolvedor, mas
   hoje reaproveitado fora dali também: os selects de prioridade/responsável/
   status da tabela de Chamados (ver .dev-select.chamado-select-* logo
   acima) dependem desta regra base. Não mexer sem checar os dois lugares. */
.dev-select {
    padding: 6px 8px;
    border: 1px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-size: 12px;
}

/* ========================================
   PAINEL DO DESENVOLVEDOR
   ======================================== */
/* Mesma paleta bordô/dourado/pergaminho de todo o resto do app — não uma
   paleta nova. A rail usa o mesmo gradiente de .chat-header/.auth-hero
   (var(--maroon) → var(--maroon-deep)) e a canvas usa var(--paper), só a
   estrutura (rail fixa + canvas em largura total) é que é própria deste
   painel. Tokens vivem em .dev-container só pra não precisar repetir
   var(--...) das variáveis globais em toda regra. */

.dev-container {
    --dev-maroon: var(--maroon);
    --dev-maroon-deep: var(--maroon-deep);
    --dev-gold: var(--dourado);
    --dev-gold-soft: var(--dourado-suave);
    --dev-gold-dim: rgba(201, 161, 92, .16);
    --dev-canvas: var(--paper);
    --dev-surface: #fff;
    --dev-border: var(--line);
    --dev-text: var(--ink);
    --dev-text-soft: var(--ink-soft);
    --dev-text-faint: var(--ink-muted);
    --dev-on-dark: #EFE9D8;
    --dev-on-dark-soft: rgba(239, 233, 216, .62);
    --dev-success: var(--green);
    --dev-success-bg: rgba(92, 110, 74, .12);
    --dev-danger: var(--maroon);
    --dev-danger-bg: rgba(122, 42, 40, .08);
    --dev-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    display: flex;
    height: 100vh;
    font-family: var(--dev-font-ui);
    color: var(--dev-text);
    background: var(--dev-canvas);
}

/* ---- Rail (barra lateral bordô) ---- */

.dev-rail {
    width: 280px;
    flex-shrink: 0;
    background: radial-gradient(120% 140% at 15% 10%, var(--dev-maroon) 0%, var(--dev-maroon-deep) 55%, #3E1513 100%);
    color: var(--dev-on-dark);
    display: flex;
    flex-direction: column;
    padding: 28px 22px;
    gap: 26px;
    overflow-y: auto;
}

.dev-rail-brand { display: flex; flex-direction: column; gap: 4px; }

.dev-rail-mark {
    font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    font-size: 19px;
}

.dev-rail-mark strong { color: var(--dev-gold-soft); font-weight: 600; }

.dev-rail-eyebrow {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dev-on-dark-soft);
}

.dev-rail-section { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* Sem overflow/scroll próprio de propósito — com poucos condomínios não
   há o que rolar, e uma 2ª barra de rolagem aninhada dentro de .dev-rail
   (que já rola sozinha se um dia a lista crescer muito) aparecia cedo
   demais em alguns navegadores mesmo sem conteúdo excedente de fato. */
.dev-rail-section-scroll { flex: 1; }

.dev-rail-label {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dev-on-dark-soft);
}

.dev-rail-form { display: flex; gap: 8px; }

.dev-rail-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(239, 233, 216, .2);
    color: var(--dev-on-dark);
    border-radius: 7px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 13px;
}

.dev-rail-input::placeholder { color: var(--dev-on-dark-soft); }
.dev-rail-input:focus { outline: none; border-color: var(--dev-gold-soft); }

.dev-rail-btn-add {
    background: var(--dev-gold);
    color: var(--dev-maroon-deep);
    border: none;
    border-radius: 7px;
    width: 34px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.dev-rail-btn-add:hover { filter: brightness(1.06); }

.dev-rail-switcher { display: flex; flex-direction: column; gap: 4px; }

.dev-rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dev-on-dark);
    font-family: inherit;
    text-align: left;
    font-size: 13.5px;
    width: 100%;
}

.dev-rail-item:hover { background: rgba(255, 255, 255, .07); }

.dev-rail-item.ativo {
    background: var(--dev-gold-dim);
    border-color: rgba(201, 161, 92, .4);
}

.dev-rail-item-suspenso { color: #e07a6f; font-size: 9px; }

.dev-rail-item-nome {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-rail-item-contagem {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    color: var(--dev-on-dark-soft);
    flex-shrink: 0;
}

.dev-rail-item.ativo .dev-rail-item-contagem { color: var(--dev-gold-soft); }

.dev-rail-spacer { flex: 1; min-height: 8px; }

.dev-rail-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: 1px solid rgba(239, 233, 216, .2);
    color: var(--dev-on-dark-soft);
    border-radius: 7px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}

.dev-rail-signout:hover { border-color: rgba(239, 233, 216, .4); color: var(--dev-on-dark); }

/* ---- Main (canvas clara, ocupa a largura restante) ---- */

.dev-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 34px 40px 60px;
}

.dev-empty-state {
    max-width: 420px;
    margin: 12vh auto 0;
    text-align: center;
    color: var(--dev-text-soft);
}

.dev-empty-state h2 {
    color: var(--dev-text);
    font-size: 19px;
    margin-bottom: 8px;
}

.dev-empty-state p { font-size: 14px; line-height: 1.5; }

#dev-condominio-detalhes {
    display: grid;
    gap: 24px;
}

.dev-cmd-header h1 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.dev-cmd-sub { color: var(--dev-text-soft); font-size: 13.5px; }

/* Faixa de indicadores estilo "manifesto executivo" — o elemento
   assinatura deste redesign, com números em monoespaçada separados por
   divisórias finas. */
.dev-ledger {
    display: flex;
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: 10px;
    overflow: hidden;
}

.dev-ledger-item {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid var(--dev-border);
}

.dev-ledger-item:last-child { border-right: none; }

.dev-ledger-num {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-ledger-lbl {
    font-size: 11px;
    color: var(--dev-text-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}

.dev-modulos-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dev-modulos-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dev-text-soft);
}

.dev-modulos-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.dev-modulo-chip {
    font-family: inherit;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--dev-border);
    cursor: pointer;
    background: var(--dev-canvas);
    color: var(--dev-text-faint);
    text-decoration: line-through;
}

.dev-modulo-chip.ativo {
    background: var(--dev-success-bg);
    border-color: rgba(92, 110, 74, .4);
    color: var(--dev-success);
    text-decoration: none;
    font-weight: 500;
}

.dev-modulo-chip:hover { filter: brightness(0.97); }

.dev-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 20px;
    /* stretch (não "start") — com a lista de Administradores recolhida,
       o card fica mais baixo que o de Cadastrar administrador; esticar os
       dois mantém as bordas inferiores alinhadas em vez de deixar o card
       menor "flutuando" mais alto que o vizinho. */
    align-items: stretch;
}

.dev-grid-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dev-card {
    background: var(--dev-surface);
    border: 1px solid var(--dev-border);
    border-radius: 12px;
    padding: 20px 22px;
}

.dev-card h3 {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 700;
}

.dev-card-hint {
    font-size: 12px;
    color: var(--dev-text-soft);
    margin: 0 0 16px;
    line-height: 1.5;
}

.dev-card-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dev-toggle-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--dev-border);
    background: var(--dev-canvas);
    color: var(--dev-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dev-toggle-btn:hover { background: var(--dev-border); }
.dev-toggle-btn svg { transition: transform .15s ease; }
.dev-toggle-btn.expandido svg { transform: rotate(180deg); }

.dev-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.dev-field label { font-size: 11.5px; color: var(--dev-text-soft); font-weight: 600; }

.dev-field input,
.dev-field select {
    width: 100%;
    border: 1px solid var(--dev-border);
    border-radius: 7px;
    padding: 10px 11px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--dev-canvas);
}

.dev-field input:focus,
.dev-field select:focus {
    outline: none;
    border-color: var(--dev-maroon);
    background: var(--dev-surface);
}

.dev-btn-exec {
    background: var(--dev-maroon);
    color: var(--dev-on-dark);
    border: none;
    border-radius: 7px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
}

.dev-btn-exec:hover { background: var(--dev-maroon-deep); }

.dev-link-input {
    width: 100%;
    border: 1px solid var(--dev-border);
    border-radius: 7px;
    padding: 9px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: var(--dev-canvas);
}

/* ---- Administradores (tabela) ---- */

/* Recolhida por padrão, mesma lógica de .dev-timeline — a tabela em si não
   respeita max-height/overflow de forma confiável, então quem recolhe é
   este wrapper em volta dela. */
.dev-roster-wrap {
    max-height: 260px;
    overflow-y: auto;
}

.dev-roster-wrap.expandido {
    max-height: none;
    overflow-y: visible;
}

.dev-roster { width: 100%; border-collapse: collapse; font-size: 13px; }

.dev-roster th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dev-text-soft);
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--dev-border);
    font-weight: 600;
}

.dev-roster td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--dev-border);
    vertical-align: middle;
}

.dev-roster tr:last-child td { border-bottom: none; }

.dev-pessoa { display: flex; align-items: center; gap: 10px; }

.dev-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dev-maroon);
    color: var(--dev-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.dev-pessoa-nome { font-weight: 600; font-size: 13px; }
.dev-pessoa-email { font-size: 11.5px; color: var(--dev-text-soft); }

.dev-pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}

.dev-pill-success { background: var(--dev-success-bg); color: var(--dev-success); }
.dev-pill-neutro { background: var(--dev-canvas); color: var(--dev-text-soft); border: 1px solid var(--dev-border); }
.dev-pill-danger { background: var(--dev-danger-bg); color: var(--dev-danger); }
.dev-pill-warn { background: rgba(184, 134, 11, .12); color: #8a6a0e; }

.dev-status-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dev-status-motivo { font-size: 12px; color: var(--dev-text-soft); font-style: italic; margin: -12px 0 20px; }

.dev-row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.dev-mini-select {
    font-size: 11.5px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--dev-border);
    background: var(--dev-canvas);
    font-family: inherit;
}

.dev-mini-danger {
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--dev-danger-bg);
    color: var(--dev-danger);
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
}

.dev-mini-danger:hover { filter: brightness(0.95); }

.dev-btn-perigo {
    background: var(--dev-danger);
    color: var(--dev-on-dark);
    border: none;
    border-radius: 7px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dev-btn-perigo:hover { background: #611f1a; }
.dev-btn-perigo:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Zona de risco (excluir condomínio) ---- */

.dev-card-perigo {
    border-color: rgba(122, 42, 40, .35);
    background: var(--dev-danger-bg);
}

.dev-card-perigo h3 { color: var(--dev-danger); }

.dev-modal-excluir-caixa {
    width: 100%;
    max-width: 460px;
}

.dev-excluir-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: var(--dev-text-soft);
    background: var(--dev-canvas);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.dev-modal-excluir-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ---- Histórico de acessos (timeline) ---- */

/* Recolhida por padrão (condomínios com muito histórico de acesso, como
   os de QA, chegam a 200 linhas) — a setinha em .dev-toggle-btn expande
   pra ver tudo e recolhe de volta. */
.dev-timeline {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

.dev-timeline.expandido {
    max-height: none;
    overflow-y: visible;
}

.dev-tl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dev-border);
    font-size: 12.5px;
}

.dev-tl-row:last-child { border-bottom: none; }

.dev-tl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dev-tl-dot.in { background: var(--dev-success); }
.dev-tl-dot.out { background: var(--dev-text-faint); }

.dev-tl-tipo {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    width: 46px;
    flex-shrink: 0;
    color: var(--dev-text-soft);
}

.dev-tl-quem { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-tl-quando { font-family: 'Courier New', monospace; color: var(--dev-text-soft); font-size: 11.5px; flex-shrink: 0; }

/* ---- Últimos uploads ---- */

.dev-uploads-list {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

.dev-uploads-list.expandido {
    max-height: none;
    overflow-y: visible;
}

.dev-up-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dev-border);
    font-size: 12.5px;
}

.dev-up-row:last-child { border-bottom: none; }

.dev-up-nome { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-up-meta { color: var(--dev-text-soft); font-size: 11.5px; flex-shrink: 0; }
.dev-up-quando { font-family: 'Courier New', monospace; color: var(--dev-text-soft); font-size: 11.5px; flex-shrink: 0; }

.dev-vazio { color: var(--dev-text-soft); font-size: 13px; padding: 6px 0; }

/* ---- Uso da Plataforma (Fase 1) ---- */

.dev-rail-nav { display: flex; flex-direction: column; gap: 3px; }

.dev-rail-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dev-on-dark-soft);
    font-family: inherit;
    text-align: left;
    font-size: 13.5px;
    width: 100%;
}

.dev-rail-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.dev-rail-nav-item:hover { background: rgba(255, 255, 255, .07); }

.dev-rail-nav-item.ativo {
    background: var(--dev-gold-dim);
    border-color: rgba(201, 161, 92, .4);
    color: var(--dev-on-dark);
    font-weight: 600;
}

.dev-cmd-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.dev-escopo-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.dev-escopo-wrap label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dev-text-soft);
}

.dev-escopo-select {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--dev-border);
    background: var(--dev-surface);
    color: var(--dev-text);
    cursor: pointer;
    min-width: 240px;
}

.dev-escopo-select:focus { outline: none; border-color: var(--dev-maroon); }

.dev-tabs-row {
    display: flex;
    gap: 4px;
    margin: 20px 0 22px;
    border-bottom: 1px solid var(--dev-border);
}

.dev-tab-btn {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 4px;
    margin-right: 22px;
    border: none;
    background: none;
    color: var(--dev-text-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 7px;
}

.dev-tab-btn svg { width: 15px; height: 15px; }
.dev-tab-btn.ativo { color: var(--dev-maroon); border-bottom-color: var(--dev-maroon); }

.dev-tab-painel { display: none; }
.dev-tab-painel.ativo { display: grid; gap: 24px; }

.dev-periodo-row { display: flex; gap: 6px; margin-bottom: 22px; }

.dev-periodo-btn {
    font-family: inherit;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--dev-border);
    background: var(--dev-surface);
    color: var(--dev-text-soft);
    cursor: pointer;
}

.dev-periodo-btn.ativo {
    background: var(--dev-maroon);
    border-color: var(--dev-maroon);
    color: var(--dev-on-dark);
    font-weight: 600;
}

.dev-ledger-num-txt { font-size: 14px; }

.dev-grid-2-even {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.dev-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 20px;
}

.dev-rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dev-rank-row:last-child { margin-bottom: 0; }

.dev-rank-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-rank-bar-wrap { flex: 1; background: var(--dev-canvas); border-radius: 5px; overflow: hidden; height: 16px; }
.dev-rank-bar { height: 100%; background: linear-gradient(90deg, var(--dev-maroon) 0%, var(--dev-maroon-deep) 100%); border-radius: 5px; }
.dev-rank-num { width: 48px; text-align: right; flex-shrink: 0; font-family: 'Courier New', monospace; font-size: 11.5px; color: var(--dev-text-soft); }

.dev-spark-num { font-family: 'Courier New', monospace; font-size: 28px; font-weight: 700; margin-bottom: 14px; }
.dev-spark-svg { width: 100%; height: 90px; display: block; }

.dev-risco-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--dev-border); font-size: 12.5px; }
.dev-risco-row:last-child { border-bottom: none; }

.dev-risco-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dev-risco-dot.verde { background: var(--dev-success); }
.dev-risco-dot.amarelo { background: #b8860b; }
.dev-risco-dot.vermelho { background: var(--dev-danger); }

.dev-risco-nome { font-weight: 600; width: 140px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-risco-motivo { color: var(--dev-text-soft); flex: 1; }
.dev-risco-score { font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700; flex-shrink: 0; }

.dev-barra-mini { display: inline-block; width: 50px; height: 6px; background: var(--dev-canvas); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-left: 6px; }
.dev-barra-mini-fill { height: 100%; background: var(--dev-maroon); }

@media (max-width: 1100px) {
    .dev-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .dev-grid-2,
    .dev-grid-bottom,
    .dev-grid-2-even,
    .dev-grid-3 {
        grid-template-columns: 1fr;
    }

    .dev-ledger { flex-wrap: wrap; }
    .dev-ledger-item { flex: 1 1 50%; border-bottom: 1px solid var(--dev-border); }
}

@media (max-width: 768px) {
    .dev-container { flex-direction: column; height: auto; min-height: 100vh; }

    .dev-rail {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 16px 18px;
        gap: 14px;
        overflow-y: visible;
    }

    .dev-rail-section-scroll { flex-basis: 100%; max-height: none; }
    .dev-rail-spacer { display: none; }
    .dev-main { padding: 24px 18px 40px; }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* O índice de consultas some no celular (a lista de módulos não — sem
       ela não dá pra navegar), e a barra de módulos vira uma faixa estreita
       só com ícones. */
    .index-col { display: none; }

    /* Ícone-only virou ícone + rótulo pequeno embaixo — texto puro sumindo
       sem deixar rastro (sobretudo nos filhos de Cadastros, que não tinham
       ícone nenhum até esta mudança) deixava a navegação inteira
       ininteligível no celular: dava pra ver que existia uma barra, mas não
       dava pra saber o que cada botão fazia, e o grupo Cadastros expandido
       não mostrava filho nenhum (eram só texto, e texto some no mobile). */
    .modulos-col { width: 68px; }
    .modulos-col .sidebar-perfil-info { display: none; }
    .sidebar-perfil { justify-content: center; padding: 10px 0; }

    /* No mobile a coluna já é forçada a largura fixa/ícone+rótulo por esta
       mesma media query — o botão de recolher (feito pra reclamar espaço no
       desktop) não tem o que fazer aqui, e sobraria pouco espaço pra ele
       sem sobrepor o avatar. */
    .sidebar-recolher-btn { display: none; }

    .modulo-item,
    .modulo-grupo-filho {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
        width: 100%;
        margin-left: 0;
        padding: 8px 2px;
        text-align: center;
        position: relative;
    }

    .modulo-grupo-header { justify-content: center; }

    .modulo-item-texto {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: none;
        font-size: 8.5px;
        line-height: 1.15;
    }

    /* O contador de pendências (hoje só Encomendas) some do fim da linha —
       que deixou de existir, o layout virou coluna — e reaparece como uma
       bolha no canto superior direito do botão, padrão comum de barra de
       navegação mobile. */
    .modulo-item-badge {
        position: absolute;
        top: 2px;
        right: 4px;
    }

    /* O chevron de abrir/fechar Cadastros também não cabe mais ao lado do
       rótulo (linha virou coluna) — vira uma setinha no canto do botão em
       vez de sumir, senão nada indica que aquele item é expansível. */
    .modulo-grupo-chevron {
        position: absolute;
        top: 4px;
        right: 4px;
    }

    /* A indentação com linha conectora (pensada pra uma coluna larga) não
       cabe em 68px — os filhos de Cadastros, agora com ícone próprio (ver
       MODULOS em app.js), ficam encostados na borda como qualquer outro
       item da barra em vez de "aninhados visualmente". */
    .modulo-grupo-filhos {
        margin-left: 0;
        border-left: none;
        padding-left: 0;
    }

    .modulo-grupo-filho::before { display: none; }

    .modulo-grupo-filho.modulo-item-ativo {
        border-left: none;
        padding-left: 2px;
    }

    .chat-header {
        padding: 14px 16px 12px;
    }

    .messages-container {
        padding: 16px;
    }

    .msg { max-width: 90%; }

    .chat-input-area {
        padding: 14px 16px;
    }

    .chat-welcome-sugestoes {
        grid-template-columns: 1fr;
    }

    .admin-stats {
        gap: 16px;
    }

    /* O grid base (.dashboard-kpis, acima) usa auto-fit/minmax e em telas
       bem estreitas (~375px) colapsa pra 1 coluna só — card enorme, 1 KPI
       por linha. Trava explicitamente em 2 colunas no mobile inteiro.
       .encomendas-kpis tem o mesmo problema (auto-fit/minmax(150px,1fr) —
       ver regra própria acima) e os cards reaproveitam a mesma classe
       .dashboard-kpi-card, então leva a mesma trava aqui. */
    .dashboard-kpis,
    .encomendas-kpis {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Com 2 por linha, o card fica estreito (~110-130px) — o layout
       horizontal padrão (ícone à esquerda, valor+rótulo empilhados à
       direita) não sobra espaço pro rótulo. Vira um mini-grid próprio:
       ícone e quantidade lado a lado na linha de cima, rótulo ocupando a
       largura inteira do card embaixo — mais fino que empilhar tudo
       verticalmente. `.dashboard-kpi-txt` vira `display:contents` só aqui
       pra "soltar" valor e rótulo do wrapper e virarem itens diretos do
       grid do card (senão o grid-area não alcança eles).  */
    .dashboard-kpi-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icone valor"
            "rotulo rotulo";
        align-items: center;
        column-gap: 8px;
        row-gap: 4px;
        padding: 10px 12px 10px 14px;
    }

    .dashboard-kpi-ic {
        grid-area: icone;
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }

    .dashboard-kpi-ic svg {
        width: 13px;
        height: 13px;
    }

    .dashboard-kpi-txt {
        display: contents;
    }

    .dashboard-kpi-valor {
        grid-area: valor;
        font-size: 19px;
    }

    .dashboard-kpi-rotulo {
        grid-area: rotulo;
        font-size: 9.5px;
        letter-spacing: .03em;
        line-height: 1.3;
        white-space: normal;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .auth-box { max-width: 100%; }

    .chat-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-right { width: 100%; }
    .header-right .btn { flex: 1; }
}

/* ========================================
   CARDS RESPONSIVOS (MOBILE)
   ======================================== */

.chamados-cards-container,
.atrasados-cards-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Cartão único de Gerenciar Chamados — usado em qualquer largura de tela
   (a antiga tabela de desktop, buildChamadosTabelaAdmin, foi removida em
   favor deste mesmo cartão pra todo mundo). Cantos bem arredondados e
   pouco espaço entre cartões (.chamados-cards-container gap acima) —
   pedido explícito depois da prévia: "bordas arredondadas... pequeno
   espaço entre eles". */
.chamado-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chamado-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

/* Protocolo e título na mesma linha (baseline, não topo — o protocolo é
   bem menor que o título e ficava "flutuando" alto se alinhado ao topo) —
   junto com .chamado-card-sub abaixo, o cabeçalho inteiro cabe em 2
   linhas de texto em vez de até 4 como na primeira versão do cartão. */
.chamado-card-titulo-linha {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.chamado-card-protocolo {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.chamado-card-titulo {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

/* Nome/unidade/categoria e o contato (WhatsApp) na MESMA linha — flex-wrap
   garante que só quebra pra uma segunda linha quando não cabe, nunca corta
   texto. */
.chamado-card-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 3px;
}

.chamado-card-sub-separador {
    color: var(--line);
}

/* Contato do solicitante abre o WhatsApp Web (wa.me), não mais o discador
   (tel:) — troca de destino pedida junto com o redesenho em cartões.
   Mesmo estilo visual que .telefone-link já usava (cor, peso, sublinhado
   só no hover), só o href muda (ver linkWhatsapp() em app.js). */
.contato-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--maroon-deep);
    text-decoration: none;
    font-weight: 500;
    font-size: 12.5px;
}

.contato-link:hover { text-decoration: underline; }
.contato-link svg { flex-shrink: 0; }

/* min-width:0 é o que permite um título longo quebrar linha em vez de
   empurrar .chamado-card-header-direita (chip de status/SLA) pra fora do
   cartão — comportamento padrão de item flex sem essa propriedade é nunca
   encolher abaixo do conteúdo intrínseco. */
.chamado-card-header-esquerda {
    flex: 1;
    min-width: 0;
}

/* Só no celular (Visitantes/Hóspedes/Prestadores, tablet e desktop ficam
   como sempre foram — ver comentário no card.className de cada
   build*Row() em app.js): .chamado-card-sub, dentro de
   .chamado-card-header-esquerda, ficava espremido em ~1/3 da largura do
   cartão pra sobrar espaço pro chip de status, quebrando um texto
   comprido em várias linhas curtas com bastante espaço vazio ao lado.
   display:contents "dissolve" a caixa de .chamado-card-header-esquerda —
   os filhos dela (título e sub) passam a ser itens de flex direto de
   .chamado-card-header, junto do chip — daí flex-basis:100% no sub força
   uma linha nova pra ele sozinho (truque padrão pra "quebrar aqui" num
   flex container), ocupando a largura inteira do cartão; o título fica
   sozinho na primeira linha ao lado do chip (mesma linha compacta de
   antes). A tag de reserva (.visitante-tag-reserva) e o texto vêm depois
   na ordem, mas sem flex-basis:100% — ficam numa linha própria só pelo
   sub já ter tomado a linha anterior inteira, só que do tamanho do
   próprio texto (não devem esticar até a borda, foi pedido à parte). */
@media (max-width: 480px) {
    .chamado-card-header-flex-mobile .chamado-card-header {
        flex-wrap: wrap;
    }

    .chamado-card-header-flex-mobile .chamado-card-header-esquerda {
        display: contents;
    }

    .chamado-card-header-flex-mobile .chamado-card-titulo-linha {
        flex: 1;
        min-width: 0;
        order: 1;
    }

    .chamado-card-header-flex-mobile .chamado-chip-status {
        order: 2;
    }

    .chamado-card-header-flex-mobile .chamado-card-sub {
        flex-basis: 100%;
        width: 100%;
        order: 3;
        margin-top: 6px;
    }

    .chamado-card-header-flex-mobile .visitante-tag-reserva {
        order: 4;
        margin-top: 6px;
    }
}

.chamado-card-header-direita {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.chamado-chip-status {
    display: inline-flex;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.chamado-card-sla-caption {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Uma linha só combinando os 3 <select> editáveis (esquerda) com data +
   ações (direita) — antes eram duas seções empilhadas, cada uma com seu
   próprio respiro vertical/divisor; uma linha só é o que mais encurta o
   cartão sem esconder nenhum dado (reflui em telas estreitas via
   flex-wrap, nunca corta texto). */
.chamado-card-linha-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
}

/* Prioridade/Responsável/Status — os 3 <select> editáveis do cartão, cada
   um tingido na cor do PRÓPRIO cartão (.chamado-select-verde/amarelo/
   vermelho/cinza, ver definição acima) em vez de brancos neutros como
   antes. */
.chamado-card-seletores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chamado-select-linha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chamado-select-rotulo {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.chamado-select-linha select {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .02em;
    padding: 5px 9px;
    border-radius: 8px;
    cursor: pointer;
}

/* O <select> nativo cresce pra caber a opção mais longa (ex.: nome de
   administrador extenso) — em telas estreitas isso passa da borda do card
   (mesma causa raiz do corte no campo de condômino de Encomendas). Cada
   linha ocupa a largura toda e o select vira flex, nunca passando do que
   sobra depois do rótulo. .chamado-card-seletores também precisa do
   width:100% explícito — ela é item de uma linha flex (.chamado-card-
   linha-acoes) que não estica no eixo principal por padrão; sem isso, o
   width:100% do filho (.chamado-select-linha) resolve contra uma largura
   indefinida (flex-basis:auto do pai) e o cálculo sai errado. */
@media (max-width: 640px) {
    .chamado-card-seletores {
        width: 100%;
    }

    .chamado-select-linha {
        width: 100%;
    }

    .chamado-select-linha select {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }
}

/* Data e ações (Ver foto/Reabrir) lado a lado, não empilhadas — uma coluna
   (flex-direction:column) forçava data e botões em duas linhas SEMPRE,
   mesmo quando cabiam juntos numa só, o que derrubava chamados resolvidos
   (data mais longa, "Aberto em X · Concluído em Y") pra uma 3ª linha
   inteira. Em linha, o grupo inteiro (data+botões) só quebra pra baixo dos
   seletores quando não cabe — nunca quebra ele mesmo em duas.
   margin-left:auto (não só o justify-content:space-between do pai) é o que
   garante o mesmo canto direito do SLA em QUALQUER caso — quando os
   seletores quebram pra própria linha e este bloco sobra sozinho na linha
   de baixo, space-between não tem o que distribuir entre um único item e
   ele volta a colar na esquerda; margem automática empurra pra direita
   mesmo sozinho na linha. */
.chamado-card-rodape-direita {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.chamado-card-data {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--ink-muted);
    white-space: nowrap;
}

.chamado-card-rodape-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Ver foto / Reabrir — cantos arredondados nos botões do cartão (o .btn
   base do app inteiro é de canto reto, de propósito noutros lugares; aqui
   escopado só a esses dois pra acompanhar o resto do cartão redesenhado,
   que já é todo arredondado — chip de status em pílula, selects com
   radius 8px). */
.chamado-card-rodape-acoes .btn {
    border-radius: 8px;
}

/* O botão de avançar status do visitante (Confirmar entrada/Liberar
   acesso/etc., ver ACAO_STATUS_VISITANTE_LABEL em app.js) usava o padding
   e a caixa alta do .btn padrão do app — bem grande pra caber num card de
   celular ao lado de "Ver foto". Só esse botão encolhe (não o resto de
   .chamado-card-rodape-acoes, reaproveitado por outros módulos que não
   pediram esse ajuste). */
@media (max-width: 480px) {
    .btn-acao-visitante {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ---- Cards de Encomendas — mesmo molde do .chamado-card acima (cor por
   status, cabeçalho protocolo+título / chip+legenda, rodapé data+ações),
   trocado pelo antigo .morador-row a pedido explícito de padronização. */
#encomendas-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.encomenda-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.encomenda-card.encomenda-cor-borda-verde { border-left: 4px solid var(--status-good); background: rgba(12, 163, 12, .06); }
.encomenda-card.encomenda-cor-borda-amarelo { border-left: 4px solid var(--status-warning); background: rgba(201, 133, 0, .07); }
.encomenda-card.encomenda-cor-borda-vermelho { border-left: 4px solid var(--status-critical); background: rgba(208, 59, 59, .07); }
.encomenda-card.encomenda-cor-borda-cinza { border-left: 4px solid var(--ink-muted); background: rgba(137, 135, 129, .07); }

.encomenda-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.encomenda-card-header-esquerda {
    flex: 1;
    min-width: 0;
}

.encomenda-card-titulo-linha {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.encomenda-card-protocolo {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.encomenda-card-titulo {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.encomenda-card-sub {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 3px;
}

.encomenda-card-header-direita {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.encomenda-chip-status {
    display: inline-flex;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.encomenda-chip-verde { background: rgba(12, 163, 12, .20); color: #0a6e0a; }
.encomenda-chip-amarelo { background: rgba(201, 133, 0, .22); color: #8a5c00; }
.encomenda-chip-vermelho { background: rgba(208, 59, 59, .20); color: #a02525; }
.encomenda-chip-cinza { background: rgba(137, 135, 129, .24); color: #5c5a54; }

.encomenda-card-caption {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.encomenda-card-corpo {
    font-size: 12.5px;
    color: var(--ink-soft);
    padding: 8px 0;
}

.encomenda-card-corpo span {
    display: block;
    margin-bottom: 2px;
}

.encomenda-card-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
}

.encomenda-card-data {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--ink-muted);
}

.encomenda-card-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .encomenda-card-header {
        flex-wrap: wrap;
    }

    .encomenda-card-header-direita {
        align-items: flex-start;
    }
}

/* Só no celular (tablet/desktop ficam como sempre foram): mesmo problema
   e mesma solução do cartão de Visitantes/Hóspedes/Prestadores (ver
   .chamado-card-header-flex-mobile em styles.css) — o chip+legenda de
   .encomenda-card-header-direita (mais largo aqui, chip E legenda
   empilhados) espremia .encomenda-card-header-esquerda a uns 64px só,
   quebrando o texto em até 7 linhas curtas. display:contents "dissolve"
   a esquerda — título fica sozinho na primeira linha, sub ganha
   flex-basis:100% (linha própria, largura inteira do cartão). */
@media (max-width: 480px) {
    .encomenda-card-header-esquerda {
        display: contents;
    }

    .encomenda-card-titulo-linha {
        flex: 1;
        min-width: 0;
        order: 1;
    }

    .encomenda-card-header-direita {
        order: 2;
    }

    .encomenda-card-sub {
        flex-basis: 100%;
        width: 100%;
        order: 3;
        margin-top: 6px;
    }
}

/* Cards de atrasados no dashboard */
.atrasado-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--status-warning);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.atrasado-card:hover {
    background: var(--paper-dark);
    box-shadow: 0 2px 8px rgba(43, 42, 38, 0.1);
}

.atrasado-card.grave {
    border-left-color: var(--status-critical);
}

.atrasado-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.atrasado-protocolo {
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
}

.atrasado-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.info-line .label {
    color: var(--ink-soft);
    font-weight: 600;
}

.info-line .value {
    color: var(--ink);
}

/* ========================================
   MODAL DE ANEXO (FOTO)
   ======================================== */

.anexo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    padding: 20px;
    overflow: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.anexo-modal-imagem {
    display: block;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--line);
}

/* Botão era branco sobre fundo preto — com o modal agora branco, precisa
   de contorno + sombra pra continuar visível em vez de se misturar com o
   fundo. */
.anexo-modal-fechar {
    position: fixed;
    top: 16px;
    right: 16px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10000;
    padding: 0;
    box-shadow: 0 2px 8px rgba(43, 42, 38, .15);
}

.anexo-modal-fechar:hover {
    background: var(--paper);
}

/* ========================================
   SCROLLBAR CUSTOMIZADA
   ======================================== */

.messages-container::-webkit-scrollbar,
.index-sidebar::-webkit-scrollbar {
    width: 9px;
}

.messages-container::-webkit-scrollbar-thumb,
.index-sidebar::-webkit-scrollbar-thumb {
    background: var(--line);
}

/* ========================================
   MÓDULO RESERVAS
   ======================================== */

.reservas-subnav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.reservas-subnav-item {
    background: var(--paper-dark);
    border: 1px solid var(--line);
    border-radius: var(--radius, 6px);
    padding: 7px 14px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: var(--transition);
}

.reservas-subnav-item:hover {
    background: #fff;
}

.reservas-subnav-item.ativo {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
}

/* Fora de #reserva-form (é o passo 1, antes do form existir) — nunca tinha
   recebido nenhum estilo, ficava com a aparência crua do navegador. */
#reserva-espaco-select {
    width: 100%;
    max-width: 420px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
}

#reserva-espaco-select:focus {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -1px;
}

/* ---- Nova Reserva: card de regras ---- */

.reservas-regras-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.reservas-regras-card p {
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--ink);
}

.reservas-regras-card strong {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
}

.reservas-regras-texto {
    color: var(--ink-soft);
    line-height: 1.6;
}

.reservas-aceite-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink);
    margin-bottom: 16px;
}

.reservas-aceite-linha input[type="checkbox"] {
    width: auto;
}

/* Seletor "Data avulsa"/"Período" (radios) — sem isso, quando a linha não
   tinha largura pra caber as duas opções lado a lado, cada rótulo
   encolhia (flex-shrink padrão) e o próprio texto quebrava no meio da
   palavra ("Data" numa linha, "avulsa" na debaixo) em vez da opção
   inteira ir pra segunda linha. flex-wrap deixa a segunda opção cair pra
   baixo quando necessário; flex-shrink:0 + nowrap no rótulo garante que,
   quando isso acontece, cada rótulo continua inteiro numa linha só. */
.reservas-config-linha-radios {
    flex-wrap: wrap;
}

.reservas-config-linha-radios .reservas-aceite-linha {
    flex-shrink: 0;
    white-space: nowrap;
}

.reservas-mudanca-secao-titulo {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 14px 0 8px;
}

/* ---- Nova Reserva: calendário ---- */

.reservas-calendario-legenda {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.reservas-calendario-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.reservas-legenda-ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.reservas-legenda-livre { background: var(--status-good); }
.reservas-legenda-ocupado { background: var(--status-critical); }
.reservas-legenda-bloqueado { background: var(--ink-muted); }

/* Os 12 meses do período (mês atual + próximos 11) numa tela só — decisão
   explícita depois de uma primeira versão paginada mês a mês (e depois
   ajustada de 13 pra 12 meses pra aproveitar melhor o espaço da grade).
   auto-fit em vez de repeat(4,1fr) fixo: em telas menores reduz pra 3/2
   colunas sozinho em vez de espremer os mini-meses até ficarem ilegíveis. */
.reservas-calendario-ano {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.reservas-mini-mes {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
}

.reservas-mini-mes-titulo {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    color: var(--ink);
    margin-bottom: 6px;
}

.reservas-mini-mes-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.reservas-mini-mes-cabecalho {
    text-align: center;
    font-size: 8.5px;
    font-weight: 600;
    color: var(--ink-muted);
    padding-bottom: 2px;
}

.reservas-calendario-dia {
    aspect-ratio: 1;
    border: none;
    border-radius: 3px;
    font-size: 9.5px;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.reservas-dia-livre {
    background: rgba(12, 163, 12, .12);
    color: #0a7d0a;
}

.reservas-dia-livre:hover {
    background: rgba(12, 163, 12, .24);
}

.reservas-dia-ocupado {
    background: rgba(208, 59, 59, .12);
    color: #a82b2b;
    cursor: not-allowed;
}

.reservas-dia-bloqueado,
.reservas-dia-passado {
    background: var(--paper-dark);
    color: var(--ink-muted);
    cursor: not-allowed;
}

/* ---- Cards (Minhas Reservas / Aprovações / Agenda) ---- */

.reserva-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.reserva-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

/* Cabeçalho no molde de .chamado-card — protocolo+título numa linha só à
   esquerda (com sub-linha de identidade/tipo embaixo), chip de status +
   legenda de data/horário à direita, divisor separando do corpo do card.
   Substitui .reserva-card-topo nas telas de listagem de reserva (Minhas
   Reservas/Aprovações/Agenda); .reserva-card-topo continua servindo o
   card de espaço em Configurações, que não tem protocolo. */
.reserva-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.reserva-card-header-esquerda {
    flex: 1;
    min-width: 0;
}

.reserva-card-titulo-linha {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.reserva-card-protocolo {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.reserva-card-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.reserva-card-sub {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 3px;
}

.reserva-card-header-direita {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.reserva-card-caption {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.reserva-card-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.reserva-card-rodape .reserva-card-acoes {
    margin-top: 0;
}

.reserva-card p {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.reserva-card p strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-muted);
    display: block;
}

.reserva-card-texto {
    color: var(--ink);
}

.reserva-card-acoes {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Mesmo tamanho compacto de .morador-actions button (Encomendas/Condôminos/
   Equipe) — botão de ação dentro do cartão de reserva usava o .btn padrão
   (padding 10px 18px), bem mais pesado que o resto do app. */
.reserva-card-acoes button {
    font-size: 10px;
    padding: 7px 10px;
}

/* Mesma paleta de 4 cores (verde/amarelo/vermelho/cinza) usada em Chamados
   (.chamado-status-badge/.chamado-cor-*), mais azul/laranja pros dois
   estados extras de Reserva (em análise / cancelada). */
.reserva-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.reserva-status-badge.reserva-cor-azul { background: rgba(62, 107, 138, .15); color: var(--status-info); }
.reserva-status-badge.reserva-cor-verde { background: rgba(12, 163, 12, .15); color: #0a7d0a; }
.reserva-status-badge.reserva-cor-vermelho { background: rgba(208, 59, 59, .15); color: #a82b2b; }
.reserva-status-badge.reserva-cor-laranja { background: rgba(201, 122, 46, .18); color: var(--status-cancelado); }
.reserva-status-badge.reserva-cor-cinza { background: rgba(137, 135, 129, .18); color: #5c574c; }

.reserva-cor-borda-azul { border-left: 4px solid var(--status-info); }
.reserva-cor-borda-verde { border-left: 4px solid var(--status-good); }
.reserva-cor-borda-vermelho { border-left: 4px solid var(--status-critical); }
.reserva-cor-borda-laranja { border-left: 4px solid var(--status-cancelado); }
.reserva-cor-borda-cinza { border-left: 4px solid var(--ink-muted); }

/* ---- Agenda: filtros ----
   Layout próprio, não reaproveita .chamados-filtros (aquela classe usa
   grid-template-columns:max-content 1fr, pensada pra pares label+campo —
   aqui os campos não têm label ao lado, então cada um ficava esticado ou
   desalinhado. flex + largura própria a cada campo evita comprimento sem
   necessidade. */
.reservas-agenda-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--paper-dark);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.reservas-agenda-filtros select,
.reservas-agenda-filtros input {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    color: var(--ink);
    box-sizing: border-box;
}

#reservas-agenda-filtro-espaco { width: 180px; }
#reservas-agenda-filtro-status { width: 160px; }

.reservas-agenda-filtros .btn {
    border-radius: 6px;
}

@media (max-width: 640px) {
    .reservas-agenda-filtros select,
    .reservas-agenda-filtros input {
        width: 100%;
    }
}

/* ---- Agenda: calendário mensal navegável ----
   Célula bem maior que a do mini-calendário de Nova Reserva (aqui é pra
   ler/clicar com calma, não pra caber 12 meses na tela) — número do dia +
   pontinhos de status embaixo. */
.reservas-agenda-cal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reservas-agenda-cal-topo h4 {
    font-size: 15px;
    text-transform: capitalize;
    color: var(--ink);
}

/* Janela de 3 meses (mês atual + próximos 2), uma linha só da grade de 3
   colunas — ajustado depois de uma primeira versão com 6. Reaproveita as
   classes estruturais do mini-calendário de Nova Reserva (.reservas-mini-mes*)
   já que são só tipografia/grid, sem nada específico daquele fluxo. */
/* Sempre 3 colunas fixas (nunca quebra pra 2 nem empilha). minmax(0,1fr) em
   vez de só "1fr" — cada mini-mês tem uma grade de 7 colunas dentro, e sem
   o minmax(0,...) o grid externo respeita o min-content daquela grade
   interna e transborda em telas estreitas em vez de encolher (mesmo bug
   clássico de "grid overflow" do CSS). */
.reservas-agenda-calendario-3meses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Só no celular (tablet já cabia bem com 3) renderCalendarioAgenda()
   (app.js) desenha só 1 mês em vez de 3 — a grade de 3 colunas fixas
   espremia esse único mês num terço da largura; vira 1 coluna só pra ele
   ocupar o espaço inteiro. */
@media (max-width: 480px) {
    .reservas-agenda-calendario-3meses {
        grid-template-columns: 1fr;
    }
}

/* Com só 3 mini-meses por linha (em vez dos 6 da primeira versão) sobra
   mais espaço por mês — célula um pouco maior que a densidade original de
   6, ainda menor que o tamanho "solo" de 1 mês por vez. */
.reservas-mini-mes-grid .reservas-agenda-cal-dia {
    font-size: 12px;
    border-radius: 5px;
    gap: 2px;
}

.reservas-agenda-cal-dia {
    aspect-ratio: 1;
    border: none;
    border-radius: 8px;
    background: var(--paper);
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: var(--transition);
}

.reservas-agenda-cal-dia:hover {
    background: var(--paper-dark);
}

.reservas-agenda-cal-dia.selecionado {
    background: var(--maroon);
    color: #fff;
}

.reservas-agenda-cal-pontos {
    display: flex;
    gap: 2px;
}

.reservas-agenda-cal-ponto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

/* ---- Card de reserva (Aprovações e Agenda): dados em grid ---- */
/* Reaproveitado por reservaCardInfoHtml() nos dois lugares — antes cada
   campo ficava empilhado numa coluna só, deixando bastante espaço vazio à
   direita do card. 3 colunas usa a largura toda; campos com texto mais
   longo (Responsável, Veículo, Áreas utilizadas, Observações) usam
   .reserva-card-campo-largo pra ocupar a linha inteira em vez de truncar. */
.reserva-card-grid-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 16px;
    margin-top: 6px;
}

.reserva-card-grid-info p {
    margin-bottom: 0;
}

.reserva-card-campo-largo {
    grid-column: 1 / -1;
}

.reserva-card-data {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--ink-muted);
}

/* ---- Termo de aceite (snapshot das regras/declaração aceitas na criação) ---- */

.reserva-termo-aceite {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 4px;
    background: #fff;
}

.reserva-termo-aceite summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.reserva-termo-aceite p {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ink);
}

.reserva-termo-meta {
    font-size: 11px;
    color: var(--ink-muted);
}

/* ---- Lista de convidados de uma reserva (vira Visitante) ---- */

.convidado-linha {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.convidado-linha .convidado-nome {
    flex: 2;
}

.convidado-linha .convidado-telefone {
    flex: 1;
}

.reserva-convidados-itens {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--ink);
}

.convidado-remover-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--maroon-deep);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/* Mesmo espírito de .morador-status — pill discreta, texto pequeno em
   caixa alta, sem cor própria (é só contexto, não um status). */
.visitante-tag-reserva {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 3px;
    padding: 1px 6px;
    border: 1px solid var(--ink-muted);
    color: var(--ink-muted);
}

@media (max-width: 640px) {
    .reserva-card-grid-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reserva-card-header {
        flex-wrap: wrap;
    }

    .reserva-card-header-direita {
        align-items: flex-start;
    }
}

/* Só no celular (tablet/desktop ficam como sempre foram) — mesmo problema
   e mesma solução dos cartões de Visitantes/Hóspedes/Prestadores/Encomendas
   (ver .chamado-card-header-flex-mobile e o bloco equivalente de
   .encomenda-card-header-esquerda em styles.css): o chip+legenda de
   .reserva-card-header-direita espremia .reserva-card-header-esquerda
   numa coluna estreita, quebrando o sub (nome do morador/unidade/telefone,
   ou o tipo de mudança) em várias linhas curtas. */
@media (max-width: 480px) {
    .reserva-card-header-esquerda {
        display: contents;
    }

    .reserva-card-titulo-linha {
        flex: 1;
        min-width: 0;
        order: 1;
    }

    .reserva-card-header-direita {
        order: 2;
    }

    .reserva-card-sub {
        flex-basis: 100%;
        width: 100%;
        order: 3;
        margin-top: 6px;
    }
}

/* Exportar PDF (handleExportarReservasAgendaPdf) — mesmo truque de
   "imprimir só isto" que Chamados já usa. #reservas-agenda-lista-exportar
   fica escondido na tela normal (populado só na hora de imprimir, com
   TODAS as reservas do filtro, não só o dia clicado) e só aparece aqui. */
@media print {
    body * {
        visibility: hidden;
    }

    #reservas-agenda-lista-exportar,
    #reservas-agenda-lista-exportar * {
        visibility: visible;
    }

    #reservas-agenda-lista-exportar {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
    }
}

/* Exportar PDF nos 6 módulos da família Cadastros com busca da portaria
   (Veículos/Bicicletas/Pets/Visitantes/Hóspedes/Prestadores) — mesmo truque
   de "imprimir só isto". Um bloco só, já que os 6 alvos têm a mesma forma
   (a div "-lista" de cada hub); só um fica de fato display:block por vez
   (mostrarModulo()/mostrarCadastrosModo() escondem os outros módulos e o
   Cadastros interno alterna entre Veículos/Bicicletas/Pets), então a regra
   nunca precisa saber qual módulo está aberto. */
@media print {
    body * {
        visibility: hidden;
    }

    #cadastros-veiculos-lista, #cadastros-veiculos-lista *,
    #cadastros-bicicletas-lista, #cadastros-bicicletas-lista *,
    #cadastros-pets-lista, #cadastros-pets-lista *,
    #visitantes-lista, #visitantes-lista *,
    #hospedes-lista, #hospedes-lista *,
    #prestadores-lista, #prestadores-lista *,
    #reservas-faturamento-lista, #reservas-faturamento-lista * {
        visibility: visible;
    }

    #cadastros-veiculos-lista,
    #cadastros-bicicletas-lista,
    #cadastros-pets-lista,
    #visitantes-lista,
    #hospedes-lista,
    #prestadores-lista,
    #reservas-faturamento-lista {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
    }
}

/* Exportar PDF do painel Condôminos — mesmo truque de "imprimir só isto",
   mas o alvo é #moradores-exportar-lista (não as listas normais da tela),
   porque PCD nunca aparece nos cartões visíveis, só entra na hora de
   exportar (síndico-only). */
@media print {
    body * {
        visibility: hidden;
    }

    #moradores-exportar-lista,
    #moradores-exportar-lista * {
        visibility: visible;
    }

    #moradores-exportar-lista {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
    }
}

.moradores-exportar-tabela {
    width: 100%;
    border-collapse: collapse;
}

.moradores-exportar-tabela th,
.moradores-exportar-tabela td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: left;
    font-size: 13px;
}

.moradores-exportar-tabela th {
    background: #f0ece4;
}

/* ---- Configurações ---- */

.reserva-config-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

/* Nunca tinha uma regra própria — os campos de Nova Reserva e Configurar
   Espaço estavam caindo no estilo padrão do navegador (sem radius/padding),
   diferente de todo outro formulário do app. Mesma convenção 6px de
   #encomenda-form/#equipe-form. */
#reserva-form input,
#reserva-form select,
#reserva-form textarea,
#config-espaco-form input,
#config-espaco-form select,
#config-espaco-form textarea {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box;
}

#reserva-form textarea,
#config-espaco-form textarea {
    resize: vertical;
    line-height: 1.6;
}

/* As três checkboxes do form (Exige aprovação/Recorrência/Lembretes)
   herdariam width:100% da regra acima e ficariam gigantes — width:auto
   restaura o tamanho nativo, igual a .reservas-aceite-linha já faz em
   outros checkboxes do módulo. */
#config-espaco-form input[type="checkbox"] {
    width: auto;
    margin-bottom: 0;
}

/* Mesmo bug, mesma correção — só que pros radios "Data avulsa"/"Período"
   (ver .reservas-config-linha-radios acima): sem isso, o círculo do radio
   virava uma caixa invisível de largura 100% e empurrava o texto do
   label pro final da linha, cortado na tela. Não foi pego antes porque só
   as checkboxes tinham sido corrigidas — os radios ficaram de fora. */
#config-espaco-form input[type="radio"] {
    width: auto;
    margin-bottom: 0;
}

/* Mesmo bug do #config-espaco-form: a regra genérica "#reserva-form input {
   width:100% }" (especificidade de ID) vence ".reservas-aceite-linha
   input[type=checkbox] { width:auto }" (especificidade de classe), fazendo o
   checkbox virar um item flex de largura 100% e empurrar o texto do label
   pro final da linha. Mesma correção aplicada aqui. */
#reserva-form input[type="checkbox"] {
    width: auto;
    margin-bottom: 0;
}

/* Campo de horário nas telas de Nova Reserva não precisa da linha inteira —
   mesmo raciocínio de .reservas-horario-campo no modal de configuração. */
#reserva-horario,
#reserva-mudanca-horario {
    width: 160px !important;
}

#reserva-form input:focus,
#reserva-form select:focus,
#reserva-form textarea:focus,
#config-espaco-form input:focus,
#config-espaco-form select:focus,
#config-espaco-form textarea:focus {
    outline: 2px solid var(--maroon-deep);
    outline-offset: -1px;
}

.reservas-config-linha-nome {
    display: flex;
    gap: 10px;
}

.reservas-config-linha-nome #config-espaco-nome {
    flex: 2;
}

.reservas-config-linha-nome #config-espaco-tipo {
    flex: 1;
}

.reservas-config-rotulo {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--ink-soft);
    margin: 4px 0 6px;
}

/* Campos de horário compactos — .equipe-horario-campo (flex:1) estica cada
   input até metade da largura do modal, bem mais do que "HH:MM" precisa.
   Largura fixa em vez de flex resolve isso sem mexer no widget de Equipe. */
.reservas-horario-linha {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 8px;
}

.reservas-horario-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--ink-soft);
}

.reservas-horario-campo input {
    width: 120px !important;
    margin-bottom: 0 !important;
}

.reservas-config-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.reservas-config-grid-3 input {
    margin-bottom: 0 !important;
}

.reservas-config-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.reservas-config-grid-2 input {
    margin-bottom: 0 !important;
    background: #fff !important;
}

.reservas-config-box {
    background: var(--paper);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0 16px;
}

.reservas-config-box .reservas-config-rotulo {
    margin-top: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.reservas-config-ajuda {
    font-size: 11.5px;
    color: var(--status-cancelado);
    line-height: 1.5;
    margin: 8px 0 0;
}

.reservas-horario-sublabel {
    font-size: 11.5px;
    color: var(--ink-soft);
    margin: 6px 0 4px;
}

.reservas-config-ajuda-inline {
    font-weight: normal;
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    .reservas-config-linha-nome {
        flex-direction: column;
    }
    .reservas-config-grid-3,
    .reservas-config-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* As 2 linhas de "Datas de manutenção" (avulsa/período) são as únicas
   usuárias de .reservas-horario-linha com <input type="date"> direto
   (sem o wrapper .reservas-horario-campo que já trava os campos de
   horário — Das/até — em 120px); sem nenhum tratamento mobile, ficavam
   lado a lado com o botão "+ Adicionar..." numa linha só sem quebrar,
   cortando no celular. Escopado por id (não pela classe inteira) pra não
   mexer nos campos de horário de funcionamento, que já cabem bem. */
@media (max-width: 480px) {
    #config-espaco-manutencao-avulsa,
    #config-espaco-manutencao-periodo {
        flex-direction: column;
        align-items: stretch;
    }

    #config-espaco-manutencao-avulsa input[type="date"],
    #config-espaco-manutencao-periodo input[type="date"] {
        width: 100%;
    }
}

/* Aviso persistido no card (Minhas Reservas do morador, Agenda do síndico)
   quando um cancelamento aconteceu dentro do prazo sem cobrança do espaço —
   mesmos tons de --status-cancelado já usados no badge "Cancelada". */
.reserva-aviso-cobranca {
    background: rgba(201, 122, 46, .12);
    color: #8a4d17;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.5;
    margin-top: 8px;
}