h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Layout base do sistema ===== */
:root {
    --cor-primaria: #2f6fed;
    --cor-primaria-escura: #1f4fb0;
    --cor-primaria-clara: #eaf0fe;
    --cor-fundo: #f4f6fb;
    --cor-superficie: #ffffff;
    --cor-superficie-alt: #f0f3f9;
    --cor-texto: #1c2430;
    --cor-texto-suave: #5a6474;
    --cor-borda: #dbe1ea;
    --cor-erro: #d64545;
    --cor-erro-clara: #fdecec;
    --cor-sucesso: #2f9e5b;
    --cor-sucesso-clara: #eaf7ef;
    --cor-alerta: #e0a323;
    --cor-alerta-clara: #fbf1de;
    --cor-laranja: #f2994a;
    --cor-laranja-clara: #fdf0e3;
    --cor-neutro: #8792a3;
    --cor-neutro-clara: #f2f2f2;
    --sombra-card: 0 1px 2px rgba(20, 30, 60, 0.06), 0 2px 8px rgba(20, 30, 60, 0.05);
}

:root[data-theme="dark"] {
    --cor-primaria: #5a8dff;
    --cor-primaria-escura: #86aeff;
    --cor-primaria-clara: #1e2a4a;
    --cor-fundo: #12151c;
    --cor-superficie: #1a1e28;
    --cor-superficie-alt: #232834;
    --cor-texto: #e8ebf2;
    --cor-texto-suave: #a3adc2;
    --cor-borda: #2e3440;
    --cor-erro: #ef6a6a;
    --cor-erro-clara: #3a2228;
    --cor-sucesso: #4fc47c;
    --cor-sucesso-clara: #1f3327;
    --cor-alerta: #f0bb52;
    --cor-alerta-clara: #3a3120;
    --cor-laranja: #f2994a;
    --cor-laranja-clara: #3a2a1a;
    --cor-neutro: #8792a3;
    --cor-neutro-clara: #262b35;
    --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.3);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

input, select, textarea {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    color-scheme: light;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    color-scheme: dark;
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 264px;
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    padding: 1.25rem 0.85rem;
    flex-shrink: 0;
}

.app-sidebar h2 {
    font-size: 0.98rem;
    margin: 0 0 1.5rem;
    padding: 0 0.4rem;
    color: var(--cor-primaria-escura);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.app-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--cor-texto-suave);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.app-nav .nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav .nav-link:hover {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

.app-nav .nav-link.active {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-weight: 600;
}

.app-nav .grupo {
    margin-top: 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-neutro);
    padding: 0 0.75rem;
    margin-bottom: 0.15rem;
}

.app-main {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 100%;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.app-topbar form {
    margin: 0;
}

.topbar-acoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Empurra para a direita independente do hamburger-btn (só visível no mobile) estar
       presente no layout flex ou não — sem isso, com o hamburger-btn escondido via
       display:none no desktop, .topbar-acoes vira o único item flex e o
       justify-content:space-between do .app-topbar o gruda na esquerda. */
    margin-left: auto;
}

.topbar-icone-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-texto-suave);
    cursor: pointer;
}

.topbar-icone-btn:hover {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

.topbar-icone-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--cor-erro);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--cor-superficie);
}

.topbar-dropdown-wrap {
    position: relative;
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.16);
    z-index: 1500;
    overflow: hidden;
}

.topbar-dropdown-sino {
    width: 320px;
    padding: 0.85rem;
}

.topbar-dropdown-sino h4 {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
}

.topbar-dropdown-sino ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.topbar-dropdown-sino li {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.6rem;
    background: var(--cor-fundo);
    border-radius: 6px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.topbar-dropdown-sino li:hover {
    background: var(--cor-primaria-clara);
}

.topbar-dropdown-sino li span {
    font-size: 0.78rem;
    color: var(--cor-texto-suave);
}

.topbar-dropdown-vazio {
    color: var(--cor-texto-suave);
    font-size: 0.88rem;
    margin: 0;
}

.topbar-usuario-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
}

.topbar-usuario-btn:hover {
    background: var(--cor-fundo);
}

.avatar-iniciais {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.topbar-usuario-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.25;
}

.topbar-usuario-info strong {
    font-size: 0.88rem;
    color: var(--cor-texto);
}

.topbar-usuario-info small {
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
}

.topbar-dropdown-usuario {
    width: 200px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.topbar-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
}

.topbar-dropdown-item:hover {
    background: var(--cor-fundo);
}

.topbar-dropdown-item-btn {
    font-family: inherit;
}

.topbar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

/* ===== Dropdown de seleção múltipla (filtros de Relatórios) ===== */
.multi-select-wrap {
    position: relative;
}

.multi-select-btn {
    text-align: left;
    cursor: pointer;
    background: var(--cor-superficie);
}

.multi-select-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.16);
    z-index: 1500;
    padding: 0.5rem;
}

.multi-select-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: normal;
    padding: 0.3rem 0.35rem;
    margin: 0;
    border-radius: 6px;
    cursor: pointer;
}

.multi-select-item:hover {
    background: var(--cor-fundo);
}

.multi-select-vazio {
    color: var(--cor-texto-suave);
    font-size: 0.85rem;
    margin: 0;
    padding: 0.3rem 0.35rem;
}

.multi-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

/* ===== Seletor de data com dias indisponíveis desabilitados (Nova Tarefa) ===== */
.seletor-data {
    position: relative;
}

.seletor-data-btn {
    text-align: left;
    cursor: pointer;
    background: var(--cor-superficie);
}

.seletor-data-painel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: 260px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.16);
    z-index: 1500;
    padding: 0.6rem;
}

.seletor-data-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-transform: capitalize;
}

.seletor-data-cabecalho .btn {
    padding: 0.15rem 0.55rem;
}

.seletor-data-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.15rem;
}

.seletor-data-dia-semana {
    text-align: center;
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
    padding: 0.2rem 0;
}

.seletor-data-dia {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--cor-texto);
}

.seletor-data-dia:hover:not(:disabled) {
    background: var(--cor-fundo);
}

.seletor-data-dia.selecionado {
    background: var(--cor-primaria);
    color: #fff;
}

.seletor-data-dia.fora-do-mes {
    color: var(--cor-texto-suave);
    opacity: 0.5;
}

.seletor-data-dia.indisponivel {
    color: var(--cor-texto-suave);
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
}

.seletor-data-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

/* ===== Diálogo de tarefa (aberto pelo sino de alertas) ===== */
.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(10, 14, 25, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.dialog-box {
    background: var(--cor-superficie);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 720px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.5rem;
    animation: toast-entrar 0.2s ease-out;
}

.dialog-anexos {
    margin-top: 1rem;
}

.dialog-anexos strong {
    display: block;
    margin-bottom: 0.35rem;
}

.dialog-anexos ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dialog-anexos li {
    font-size: 0.9rem;
}

/* ===== Filtro em formato de pílula (Período/Usuário/Data nos topbars) ===== */
.filtro-grupo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    padding: 0.4rem 0.9rem 0.4rem 0.7rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filtro-grupo:hover {
    border-color: var(--cor-primaria);
}

.filtro-grupo:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-clara);
}

.filtro-grupo svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--cor-texto-suave);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.filtro-grupo span {
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

.filtro-grupo select,
.filtro-grupo input[type="date"] {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-texto);
    outline: none;
    box-shadow: none;
    cursor: pointer;
    min-height: 0;
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.dialog-header h3 {
    margin: 0;
    font-size: 1.15rem;
}

.dialog-fechar {
    background: none;
    border: none;
    color: var(--cor-texto-suave);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.dialog-fechar:hover {
    color: var(--cor-texto);
}

.dialog-meta {
    font-size: 0.88rem;
    color: var(--cor-texto-suave);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.dialog-confirmacao-aviso {
    background: var(--cor-primaria-clara, var(--cor-superficie-alt));
    border: 1px solid var(--cor-primaria);
    color: var(--cor-texto);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
    margin: 0.75rem 0 0;
}

.dialog-box label {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.dialog-box textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    min-height: 80px;
    resize: vertical;
}

.dialog-box select, .dialog-box input, .dialog-box .form-control {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: normal;
}

.dialog-box .radio-grupo input[type="radio"], .dialog-box .radio-grupo input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin-top: 0;
}

.dialog-box .radio-grupo label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
    margin-top: 0.5rem;
}

.dialog-box .ferias-resumo {
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
    margin-top: 0.75rem;
}

.dialog-box .ferias-resumo ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    max-height: 140px;
    overflow-y: auto;
}

.dialog-acoes {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--cor-primaria);
    background: var(--cor-primaria);
    color: var(--cor-superficie);
    cursor: pointer;
    font-size: 0.95rem;
    text-decoration: none;
}

.btn:hover {
    background: var(--cor-primaria-escura);
}

.btn-secundario {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-color: var(--cor-borda);
}

.btn-secundario:hover {
    background: var(--cor-fundo);
}

.btn-perigo {
    background: var(--cor-erro);
    border-color: var(--cor-erro);
}

.btn-perigo:hover {
    background: #b53434;
}

table.tabela-dados {
    width: 100%;
    border-collapse: collapse;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--sombra-card);
}

table.tabela-dados tbody tr:hover {
    background: var(--cor-fundo);
}

table.tabela-dados tbody tr.linha-clicavel {
    cursor: pointer;
}

table.tabela-dados th, table.tabela-dados td {
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--cor-borda);
}

table.tabela-dados th {
    background: var(--cor-superficie-alt);
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.form-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 520px;
    box-shadow: var(--sombra-card);
}

.form-card label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-card input, .form-card select, .form-card .form-control {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: normal;
}

/* ===== Campo de formulário sem <label> nativo (evita o <label> encaminhar cliques para
   o primeiro elemento "labelable" de dentro — botão de um seletor/dropdown customizado —
   o que reabria popovers assim que o clique de fora tentava fechá-los) ===== */
.form-card .campo-form {
    display: block;
    margin-bottom: 1rem;
}

.form-card .campo-form .campo-rotulo {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.form-card .campo-form .rz-dropdown {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.25rem 1.5rem;
}

.horario-trabalho-info {
    background: var(--cor-superficie-alt);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    color: var(--cor-texto);
}

.escala-semanal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
}

.escala-dia-coluna {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.escala-dia-coluna label {
    margin: 0;
}

.escala-dia-coluna input[type="time"] {
    width: 100%;
}

.horario-trabalho-info ul {
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
}

.mensagem-erro {
    background: var(--cor-erro-clara);
    color: var(--cor-erro);
    border: 1px solid var(--cor-erro);
    padding: 0.65rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.mensagem-sucesso {
    background: var(--cor-sucesso-clara);
    color: var(--cor-sucesso);
    border: 1px solid var(--cor-sucesso);
    padding: 0.65rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-ativo {
    background: var(--cor-sucesso-clara);
    color: var(--cor-sucesso);
}

.badge-inativo {
    background: var(--cor-neutro-clara);
    color: var(--cor-neutro);
}

.badge-perigo {
    background: var(--cor-erro-clara);
    color: var(--cor-erro);
}

.badge-alerta {
    background: var(--cor-alerta-clara);
    color: var(--cor-alerta);
}

.aviso-campo {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    background: var(--cor-alerta-clara);
    color: var(--cor-alerta);
    border: 1px solid var(--cor-alerta);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.badge-emandamento {
    background: var(--cor-laranja-clara);
    color: var(--cor-laranja);
}

/* ===== Página de login ===== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
}

.login-box {
    background: var(--cor-superficie);
    padding: 2.5rem;
    border-radius: 10px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.login-box h1 {
    font-size: 1.4rem;
    margin: 0 0 0.35rem;
    color: var(--cor-primaria-escura);
}

.login-box p {
    margin: 0 0 1.5rem;
    color: var(--cor-texto-suave);
    font-size: 0.9rem;
}

.login-box label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.login-box input {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.login-box button {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.65rem;
    border: none;
    border-radius: 6px;
    background: var(--cor-primaria);
    color: var(--cor-superficie);
    font-size: 1rem;
    cursor: pointer;
}

.login-box button:hover {
    background: var(--cor-primaria-escura);
}

.login-erro {
    background: var(--cor-erro-clara);
    color: var(--cor-erro);
    border: 1px solid var(--cor-erro);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ===== Calendário (Minha Agenda) ===== */
.calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.calendario-mes-grid {
    display: grid;
    /* minmax(0, 1fr) em vez de só 1fr: sem isso, o texto do evento-chip
       (white-space:nowrap) força a coluna a crescer até caber o texto inteiro
       por baixo do algoritmo de sizing do grid, estourando a largura da tela
       no mobile mesmo com overflow:hidden/text-overflow:ellipsis no chip. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--cor-borda);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    overflow: hidden;
}

.calendario-mes-dia-cabecalho {
    background: var(--cor-superficie-alt);
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
}

.calendario-mes-celula {
    background: var(--cor-superficie);
    min-height: 110px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.calendario-mes-celula.fora-do-mes {
    background: var(--cor-superficie-alt);
    color: var(--cor-neutro);
}

.calendario-mes-celula .numero-dia {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50%;
}

.calendario-mes-celula.hoje .numero-dia {
    background: var(--cor-primaria);
    color: var(--cor-superficie);
}

.evento-chip {
    font-size: 0.72rem;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cor-superficie);
}

.evento-chip.status-pendente,
.evento-bloco.status-pendente {
    background: var(--cor-neutro);
}

.evento-chip.status-emandamento,
.evento-bloco.status-emandamento {
    background: var(--cor-laranja);
}

.evento-chip.status-concluida,
.evento-bloco.status-concluida {
    background: var(--cor-sucesso);
}

.evento-chip.status-atrasada,
.evento-bloco.status-atrasada {
    background: var(--cor-erro);
}

.evento-chip.status-cancelada,
.evento-bloco.status-cancelada {
    background: var(--cor-neutro);
}

.evento-chip.status-ferias,
.evento-bloco.status-ferias {
    background: var(--cor-alerta);
}

.evento-chip.status-entregue-atrasada,
.evento-bloco.status-entregue-atrasada {
    background: var(--cor-alerta);
}

.mais-eventos {
    font-size: 0.7rem;
    color: var(--cor-primaria);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.calendario-semana-cabecalho {
    display: grid;
    grid-template-columns: 50px repeat(7, 1fr);
    border-bottom: 1px solid var(--cor-borda);
}

.calendario-semana-dia-cabecalho {
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
    color: var(--cor-texto-suave);
}

.calendario-semana-dia-cabecalho.hoje {
    color: var(--cor-primaria);
    font-weight: 700;
}

.calendario-semana-corpo {
    display: grid;
    grid-template-columns: 50px repeat(7, 1fr);
    border: 1px solid var(--cor-borda);
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.calendario-semana-horas {
    display: flex;
    flex-direction: column;
}

.hora-label {
    font-size: 0.7rem;
    color: var(--cor-neutro);
    text-align: right;
    padding-right: 0.4rem;
    box-sizing: border-box;
    border-top: 1px solid var(--cor-borda);
}

.calendario-semana-coluna-dia {
    position: relative;
    border-left: 1px solid var(--cor-borda);
    background-image: repeating-linear-gradient(to bottom, var(--cor-borda) 0, var(--cor-borda) 1px, transparent 1px, transparent 48px);
}

.evento-bloco {
    position: absolute;
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--cor-superficie);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid var(--cor-superficie);
}

/* ===== Alertas (toast) ===== */
.toast-container {
    position: fixed;
    top: 84px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 380px;
}

.toast-alerta {
    background: var(--cor-superficie);
    border-left: 6px solid var(--cor-erro);
    box-shadow: 0 12px 32px rgba(20, 30, 60, 0.28);
    padding: 1rem 1.1rem;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    animation: toast-entrar 0.3s ease-out, toast-pulsar 1.8s ease-in-out 0.3s 2;
}

.toast-alerta-icone {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.toast-alerta-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.toast-alerta-corpo strong {
    font-size: 1.05rem;
    color: var(--cor-texto);
}

.toast-alerta-horario {
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
}

.toast-alerta-corpo ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
}

.toast-alerta-corpo ul li {
    margin-bottom: 0.15rem;
}

.toast-alerta-fechar {
    background: none;
    border: none;
    color: var(--cor-texto-suave);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.toast-alerta-fechar:hover {
    color: var(--cor-texto);
}

.toast-alerta.toast-sucesso {
    border-left-color: var(--cor-sucesso);
    animation: toast-entrar 0.3s ease-out;
}

.toast-alerta.toast-erro {
    border-left-color: var(--cor-erro);
    animation: toast-entrar 0.3s ease-out;
}

@keyframes toast-entrar {
    from { transform: translateX(32px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-pulsar {
    0%, 100% { box-shadow: 0 12px 32px rgba(20, 30, 60, 0.28); }
    50% { box-shadow: 0 12px 32px rgba(20, 30, 60, 0.28), 0 0 0 5px var(--cor-erro-clara); }
}

/* ===== Editor WYSIWYG ===== */
.rich-text-editor {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-radius: 6px;
}

.rich-text-editor.ql-container {
    min-height: var(--altura-editor, 220px);
    font-size: 0.95rem;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.ql-toolbar {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.descricao-atividade {
    background: var(--cor-fundo);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.descricao-atividade p:first-child {
    margin-top: 0;
}

.descricao-atividade p:last-child {
    margin-bottom: 0;
}

/* ===== Dashboard ===== */
.dashboard-atualizado {
    display: block;
    color: var(--cor-texto-suave);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0.75rem 0 2rem;
    font-size: 0.88rem;
    color: var(--cor-texto-suave);
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-card {
    background: var(--cor-superficie);
    border-radius: 10px;
    box-shadow: var(--sombra-card);
    padding: 1rem 1.25rem;
    text-align: center;
}

.dashboard-card .valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-card .rotulo {
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
    margin-top: 0.15rem;
}

.dashboard-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.dashboard-grafico-card {
    background: var(--cor-superficie);
    border-radius: 10px;
    box-shadow: var(--sombra-card);
    padding: 1.25rem;
}

.dashboard-grafico-card h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--cor-texto-suave);
}

.dashboard-grafico-card .grafico-wrap {
    position: relative;
    height: 240px;
}

/* ===== Responsividade ===== */

html, body {
    overflow-x: hidden;
}

.menu-toggle-checkbox {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    cursor: pointer;
}

.hamburger-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sidebar-overlay {
    display: none;
}

.app-sidebar-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-fechar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: var(--cor-texto-suave);
    cursor: pointer;
    font-size: 1.1rem;
}

@media (max-width: 960px) {
    .hamburger-btn {
        display: inline-flex;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 2100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
    }

    .sidebar-fechar {
        display: inline-flex;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 14, 25, 0.5);
        z-index: 2050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .menu-toggle-checkbox:checked ~ .app-layout .app-sidebar {
        transform: translateX(0);
    }

    .menu-toggle-checkbox:checked ~ .app-layout .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .app-main {
        padding: 1rem;
    }

    .app-topbar {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .topbar-usuario-info {
        display: none;
    }

    .topbar-dropdown-sino {
        width: min(320px, calc(100vw - 2.5rem));
    }

    .form-card {
        max-width: none;
        padding: 1.1rem;
    }

    .dialog-box {
        padding: 1.1rem;
        max-height: 92vh;
    }

    table.tabela-dados {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .calendario-semana-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .calendario-semana-cabecalho,
    .calendario-semana-corpo {
        min-width: 640px;
        grid-template-columns: 46px repeat(7, minmax(82px, 1fr));
    }

    .calendario-mes-celula {
        min-height: 70px;
        padding: 0.2rem;
    }

    .evento-chip {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .app-main {
        padding: 0.75rem;
    }

    .dialog-overlay {
        padding: 0;
    }

    .dialog-box {
        max-width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .login-box {
        padding: 1.75rem 1.25rem;
    }

    .dashboard-cards {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}
/* ===== Editor WYSIWYG: maior, fora de <label> (o label roubava o clique do botão "link") ===== */
.campo-editor {
    display: block;
    margin-bottom: 1rem;
}

.campo-editor-rotulo {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.rich-text-editor.ql-container {
    min-height: var(--altura-editor, 320px);
}

.rich-text-editor .ql-tooltip {
    z-index: 5;
}

.rich-text-editor .ql-tooltip input[type="text"] {
    display: inline-block;
    width: 170px;
    margin: 0;
    padding: 3px 5px;
}

.dialog-box.dialog-grande {
    max-width: 1000px;
}

.dialog-box.dialog-extra-grande {
    max-width: 1100px;
    width: 96vw;
}

.dialog-dados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.6rem 1.2rem;
    margin: 0.75rem 0;
}

.dialog-dados-grid dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
    margin: 0;
}

.dialog-dados-grid dd {
    margin: 0 0 0.2rem;
    font-weight: 600;
}

.dialog-secao-titulo {
    margin: 1.1rem 0 0.4rem;
    font-size: 1rem;
    color: var(--cor-primaria-escura);
}

.linha-do-tempo {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--cor-borda);
}

.linha-do-tempo li {
    position: relative;
    padding: 0.25rem 0 0.6rem 0.6rem;
}

.linha-do-tempo li::before {
    content: "";
    position: absolute;
    left: -1.42rem;
    top: 0.55rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cor-primaria);
}

.th-ordenavel {
    cursor: pointer;
    user-select: none;
}

.contador-grid {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
}

table.tabela-dados tr.linha-filtros th {
    background: var(--cor-superficie);
    padding: 0.3rem 0.5rem;
    text-transform: none;
}

table.tabela-dados tr.linha-filtros input {
    width: 100%;
    min-width: 70px;
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
}

/* ===== Dropdowns no modo escuro: as opções herdavam fundo transparente/branco ===== */
select option,
select optgroup {
    background: var(--cor-superficie);
    color: var(--cor-texto);
}

/* ===== Dropdown de seleção múltipla dentro de .form-card ===== */
.campo-filtro {
    display: block;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.campo-filtro .multi-select-btn {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: normal;
    color: var(--cor-texto);
    background: var(--cor-superficie);
}

.form-card .multi-select-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: normal;
}

.form-card .multi-select-item input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.multi-select-dropdown {
    min-width: 260px;
}

/* ===== Agenda do Dia: ações da linha e filtros em lista ===== */
.celula-acoes {
    white-space: nowrap;
    width: 1%;
}

.acoes-linha {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    align-items: center;
}

.acoes-linha .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    margin: 0;
}

/* ===== Filtro de coluna por chips (múltipla seleção — ex.: Status) ===== */
table.tabela-dados tr.linha-filtros .filtro-chips-wrap .multi-select-btn {
    width: 100%;
    min-width: 90px;
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    cursor: pointer;
    text-align: left;
}

.filtro-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-width: 260px;
    margin-top: 0.4rem;
}

.chip-filtro {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-texto-suave);
    cursor: pointer;
    white-space: nowrap;
    font-weight: normal;
}

.chip-filtro:hover {
    border-color: var(--cor-primaria, #3b6fd4);
}

.chip-filtro-ativo {
    background: var(--cor-primaria, #3b6fd4);
    border-color: var(--cor-primaria, #3b6fd4);
    color: #fff;
}

.chip-filtro-limpar {
    color: var(--cor-erro);
    border-style: dashed;
}

table.tabela-dados tr.linha-filtros select {
    width: 100%;
    min-width: 90px;
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
}

/* ===== WYSIWYG: a área editável ocupa toda a altura (clicar em qualquer ponto dá foco) ===== */
.rich-text-editor.ql-container {
    min-height: 0;
}

.rich-text-editor .ql-editor {
    min-height: var(--altura-editor, 320px);
    cursor: text;
}

/* ===== Legenda de cores (Minha Agenda) ===== */
.calendario-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--cor-texto-suave);
}

.calendario-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.legenda-cor {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.legenda-cor.status-pendente { background: var(--cor-neutro); }
.legenda-cor.status-emandamento { background: var(--cor-laranja); }
.legenda-cor.status-concluida { background: var(--cor-sucesso); }
.legenda-cor.status-atrasada { background: var(--cor-erro); }
.legenda-cor.status-entregue-atrasada { background: var(--cor-alerta); }
.legenda-cor.status-cancelada { background: var(--cor-neutro); opacity: 0.55; }

/* ===== Editor: barra no modo escuro + tabelas/imagens/formatações também na exibição ===== */
:root[data-theme="dark"] .ql-toolbar .ql-stroke { stroke: var(--cor-texto); }
:root[data-theme="dark"] .ql-toolbar .ql-fill { fill: var(--cor-texto); }
:root[data-theme="dark"] .ql-toolbar .ql-picker,
:root[data-theme="dark"] .ql-toolbar button { color: var(--cor-texto); }
:root[data-theme="dark"] .ql-toolbar .ql-picker-options { background: var(--cor-superficie); }

.rich-text-editor .ql-editor table,
.descricao-atividade table {
    border-collapse: collapse;
    margin: 0.5rem 0;
}

.rich-text-editor .ql-editor td,
.descricao-atividade td {
    border: 1px solid var(--cor-borda);
    padding: 4px 8px;
    min-width: 60px;
}

.rich-text-editor .ql-editor img,
.descricao-atividade img {
    max-width: 100%;
    height: auto;
}

.descricao-atividade .ql-align-center { text-align: center; }
.descricao-atividade .ql-align-right { text-align: right; }
.descricao-atividade .ql-align-justify { text-align: justify; }
.descricao-atividade .ql-size-small { font-size: 0.75em; }
.descricao-atividade .ql-size-large { font-size: 1.5em; }
.descricao-atividade .ql-size-huge { font-size: 2.5em; }
.descricao-atividade .ql-indent-1 { padding-left: 3em; }
.descricao-atividade .ql-indent-2 { padding-left: 6em; }
.descricao-atividade .ql-indent-3 { padding-left: 9em; }
.descricao-atividade blockquote { border-left: 4px solid var(--cor-borda); margin: 0.5rem 0; padding-left: 1rem; }
.descricao-atividade pre { background: var(--cor-superficie-alt); padding: 0.5rem; border-radius: 6px; overflow-x: auto; }

/* ===== Novidades (card compacto das dashboards) ===== */.dashboard-topo { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }.dashboard-topo .dashboard-cards { flex: 1 1 520px; min-width: 0; margin-bottom: 0; }.novidades-card { flex: 0 0 300px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 0.75rem 1rem; }.novidades-card h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }.novidades-lista { list-style: none; margin: 0; padding: 0; }.novidade-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.5rem; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--cor-borda); padding: 0.4rem 0; cursor: pointer; color: inherit; font: inherit; }.novidades-lista li:first-child .novidade-item { border-top: none; }.novidade-item:hover .novidade-titulo { text-decoration: underline; }.novidade-titulo { font-size: 0.88rem; font-weight: 600; }.novidade-data { color: var(--cor-texto-suave); font-size: 0.75rem; }.novidade-item .novidade-data { flex-basis: 100%; }
/* ===== Agenda pessoal (Minha Agenda) ===== */
:root { --cor-agenda-pessoal: #8e44ad; }

.evento-chip.status-agendapessoal,
.evento-bloco.status-agendapessoal {
    background: var(--cor-agenda-pessoal);
    color: #fff;
}

.legenda-cor.status-agendapessoal {
    background: var(--cor-agenda-pessoal);
}

.badge-agenda-pessoal {
    background: rgba(142, 68, 173, 0.15);
    color: var(--cor-agenda-pessoal);
}

.reagendar-check { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; margin-top: 1rem; }

/* Card "Novidades do sistema": sempre o inverso do tema (escuro no claro, claro no escuro) */
.novidades-card {
    --cor-texto: #e8ebf2;
    --cor-texto-suave: #a3adc2;
    --cor-borda: #3a4150;
    background: #1a1e28;
    color: #e8ebf2;
    border-color: #1a1e28;
}

:root[data-theme="dark"] .novidades-card {
    --cor-texto: #1c2430;
    --cor-texto-suave: #5a6474;
    --cor-borda: #dbe1ea;
    background: #ffffff;
    color: #1c2430;
    border-color: #ffffff;
}

.novidades-pagina { display: flex; flex-direction: column; gap: 0.5rem; }
.novidade-linha { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 0.75rem 1rem; cursor: pointer; color: inherit; font: inherit; }
.novidade-linha:hover { border-color: var(--cor-primaria, #3b6fd4); }
.novidade-linha .novidade-titulo { flex: 1; font-size: 0.95rem; }
.novidade-linha .novidade-data { font-size: 0.8rem; }
.novidades-ver-todas { float: right; font-size: 0.75rem; font-weight: normal; color: inherit; text-decoration: underline; }

/* ===== Indicador global de carregamento ===== */
.loading-barra { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 5000; background: linear-gradient(90deg, transparent, var(--cor-primaria, #3b6fd4), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: loading-corre 1s linear infinite; }
.loading-pilula { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5000; display: flex; align-items: center; gap: 0.5rem; background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
.loading-spinner { width: 14px; height: 14px; border: 2px solid var(--cor-borda); border-top-color: var(--cor-primaria, #3b6fd4); border-radius: 50%; animation: loading-gira 0.7s linear infinite; }
@keyframes loading-corre { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes loading-gira { to { transform: rotate(360deg); } }

/* Indicador de carregamento: grande e no centro da tela (não bloqueia cliques) */
.loading-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 25, 0.25); pointer-events: none; }
.loading-caixa { display: flex; flex-direction: column; align-items: center; gap: 1rem; background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); border-radius: 16px; padding: 2rem 3rem; font-size: 1.25rem; font-weight: 600; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.loading-caixa .loading-spinner { width: 56px; height: 56px; border-width: 5px; }

/* ===== Módulo Interno ===== */
.interno-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; width: 100%; }
.interno-cards > * { min-width: 0; }
@media (max-width: 1100px) { .interno-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .interno-cards { grid-template-columns: minmax(0, 1fr); } }
.interno-cards .interno-largo { grid-column: 1 / -1; }

.interno-lista { list-style: none; margin: 0; padding: 0; }
.interno-lista li { padding: 0.4rem 0; border-bottom: 1px solid var(--cor-borda); }
.interno-lista li:last-child { border-bottom: none; }
.interno-lista li.interno-hoje { font-weight: 600; }

/* Alerta de bloqueio (comunicados não lidos) */
.alerta-bloqueio-overlay { position: fixed; inset: 0; z-index: 6000; background: rgba(10, 14, 25, 0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.alerta-bloqueio-caixa { background: var(--cor-superficie); color: var(--cor-texto); border-radius: 16px; padding: 2rem 2.5rem; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.alerta-bloqueio-icone { font-size: 3rem; }
.alerta-bloqueio-caixa h3 { margin: 0.5rem 0; }
.alerta-bloqueio-caixa .btn { margin-top: 1rem; }

/* Comunicados */
.comunicado-card { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.comunicado-card.comunicado-pendente { border-left: 5px solid var(--cor-alerta, #e6a100); }
.comunicado-cabecalho { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.comunicado-cabecalho h3 { margin: 0; flex: 1; }
.comunicado-rodape { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; }

/* ===== Eventos e fotos ===== */
.eventos-filtro { margin-bottom: 1.25rem; }
.eventos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.evento-card { display: block; text-decoration: none; color: inherit; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 14px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.evento-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.evento-capa { position: relative; aspect-ratio: 4 / 3; background: var(--cor-superficie-alt); overflow: hidden; }
.evento-capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.evento-card:hover .evento-capa img { transform: scale(1.05); }
.evento-sem-capa { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: 0.4; }
.evento-contador { position: absolute; right: 0.6rem; bottom: 0.6rem; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; }
.evento-info { padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.evento-info small, .evento-data { color: var(--cor-texto-suave); }
.evento-data { margin-top: 0; margin-bottom: 1.25rem; }
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.foto-miniatura { padding: 0; border: none; background: var(--cor-superficie-alt); border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1 / 1; }
.foto-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.foto-miniatura:hover img { transform: scale(1.06); }
.fotos-edicao { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin-top: 0.5rem; }
.foto-edicao { display: flex; flex-direction: column; gap: 0.35rem; }
.foto-edicao img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.lightbox { position: fixed; inset: 0; z-index: 6500; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; outline: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; }
.lightbox-fechar { position: absolute; top: 1rem; right: 1.25rem; background: none; border: none; color: #fff; font-size: 1.75rem; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); border: none; color: #fff; font-size: 2.5rem; width: 3rem; height: 4rem; border-radius: 8px; cursor: pointer; }
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-anterior { left: 1rem; }
.lightbox-proxima { right: 1rem; }
.lightbox-legenda { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #ddd; font-size: 0.9rem; }

/* ===== Formulário impresso ===== */
.impressao-pagina { background: #e9ecf2; min-height: 100vh; padding: 1.5rem 1rem; }
.impressao-barra { max-width: 800px; margin: 0 auto 1rem; display: flex; gap: 0.5rem; }
.folha-formulario { background: #fff; color: #000; max-width: 800px; margin: 0 auto; padding: 3rem 3.5rem; font-family: Arial, Helvetica, sans-serif; font-size: 0.95rem; line-height: 1.45; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); }
.folha-formulario h2 { text-align: center; font-weight: normal; font-size: 1.35rem; color: #333; margin: 0 0 2rem; }
.folha-formulario .campo-rotulo { font-weight: bold; margin-bottom: 0.25rem; }
.folha-formulario .motivo { border-bottom: 1px solid #000; min-height: 1.5rem; padding-bottom: 0.25rem; margin-bottom: 1.25rem; white-space: pre-wrap; }
.folha-formulario .declaracao { text-align: justify; margin-bottom: 1.75rem; }
.folha-formulario .marcas { display: flex; gap: 4rem; margin-bottom: 2.5rem; }
.folha-formulario .marcas div { line-height: 1.3; }
.folha-formulario .marcas .opcoes { padding-left: 1rem; }
.folha-formulario .assinatura { border-top: 1px solid #000; margin-top: 3rem; padding-top: 0.25rem; min-width: 260px; }
.folha-formulario .assinaturas-linha { display: flex; gap: 2rem; flex-wrap: wrap; }
.folha-formulario .assinaturas-linha .assinatura { flex: 1; }
.folha-formulario .local-data { margin-top: 3rem; text-align: right; }

@media print {
    body { background: #fff !important; }
    .impressao-pagina { background: #fff; padding: 0; min-height: 0; }
    .impressao-barra, .toast-container, #blazor-error-ui { display: none !important; }
    .folha-formulario { box-shadow: none; max-width: none; margin: 0; padding: 1cm 1.2cm; }
    @page { size: A4; margin: 1cm; }
}

.botoes-tempo { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.btn-mini { padding: 0.15rem 0.55rem; font-size: 0.8rem; }

/* Foto de perfil */
.avatar-foto { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.avatar-foto-iniciais { display: inline-flex; align-items: center; justify-content: center; background: var(--cor-primaria, #3b6fd4); color: #fff; font-weight: 600; }

/* Faixa de erro do Blazor — global porque o estilo original é escopado ao MainLayout e os demais layouts
   (Interno, Restaurante, Impressão) a mostravam sempre. O Blazor a exibe por estilo inline só quando há erro de verdade. */
#blazor-error-ui {
    color-scheme: light only;
    color: #000;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 7000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Botão flutuante "voltar ao topo" */
.botao-topo { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 900; width: 3rem; height: 3rem; border-radius: 50%; border: none; background: var(--cor-primaria, #3b6fd4); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, opacity 0.15s ease; opacity: 0.9; }
.botao-topo:hover { transform: translateY(-3px); opacity: 1; }

/* Selects dentro de células de grid (ex.: Transf. Tarefas Usuários) */
.select-grid {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 2.1rem;
    margin: 0;
    padding: 0 2rem 0 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.2;
    color: var(--cor-texto);
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.select-grid:hover { border-color: var(--cor-primaria, #3b6fd4); }
.select-grid:focus { outline: none; border-color: var(--cor-primaria, #3b6fd4); box-shadow: 0 0 0 3px rgba(59, 111, 212, 0.2); }
.select-grid:disabled { opacity: 0.55; cursor: not-allowed; }

/* ===== Filtros em "pílula" (Dashboard, Agenda do Dia, Minha Agenda): dropdowns padronizados ===== */
.filtro-grupo {
    min-height: 2.5rem;
    max-width: 100%;
    box-sizing: border-box;
}

.filtro-grupo select {
    -webkit-appearance: none;
    appearance: none;
    /* seta própria: o controle nativo mudava de tamanho/aspecto entre navegadores e temas */
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6474' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 13px;
    padding: 0 1.4rem 0 0;
    width: auto;
    min-width: 6rem;
    /* nomes longos de usuário não alargam mais a pílula: cortam com reticências */
    max-width: min(240px, 55vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    height: 1.6rem;
}

:root[data-theme="dark"] .filtro-grupo select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3adc2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}

.filtro-grupo input[type="date"] {
    height: 1.6rem;
    line-height: 1.4;
}

.filtro-grupo select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}