/* ============================================================
   GESTÃO DE OBRAS — ESTILOS CUSTOMIZADOS
   Tema: Industrial refinado. Sidebar escura, conteúdo limpo.
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   VARIÁVEIS
   ============================================================ */
:root {
    --cor-primaria:       #1a56db;
    --cor-primaria-hover: #1648c0;
    --cor-primaria-light: #e8f0fe;

    --cor-sidebar-bg:     #0f172a;
    --cor-sidebar-borda:  #1e293b;
    --cor-sidebar-texto:  #94a3b8;
    --cor-sidebar-hover:  #1e293b;
    --cor-sidebar-ativo:  #1a56db;
    --cor-sidebar-ativo-bg: rgba(26,86,219,0.15);

    --cor-topbar-bg:      #ffffff;
    --cor-topbar-borda:   #e2e8f0;

    --cor-fundo:          #f1f5f9;
    --cor-card-bg:        #ffffff;
    --cor-borda:          #e2e8f0;
    --cor-texto:          #1e293b;
    --cor-texto-muted:    #64748b;

    --cor-sucesso:        #16a34a;
    --cor-erro:           #dc2626;
    --cor-aviso:          #d97706;
    --cor-info:           #0284c7;

    --fonte-base:         'DM Sans', sans-serif;
    --fonte-mono:         'DM Mono', monospace;

    --sidebar-largura:    260px;
    --topbar-altura:      64px;
    --raio-borda:         10px;
    --raio-borda-sm:      6px;
    --sombra-card:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sombra-elevada:     0 4px 16px rgba(0,0,0,.08);
    --transicao:          all .2s ease;
}

/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--fonte-base);
    font-size: 14px;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { color: var(--cor-primaria-hover); }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.layout-wrapper {
    display: flex;
    min-height: 100vh;
}

/* -------- SIDEBAR -------- */
.sidebar {
    width: var(--sidebar-largura);
    background-color: var(--cor-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1040;
    transition: transform .3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--cor-sidebar-borda);
    text-decoration: none;
}

.sidebar-logo-icone {
    width: 36px;
    height: 36px;
    background: var(--cor-primaria);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-logo-icone svg { color: #fff; }

.sidebar-logo-texto {
    font-size: 15px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
}

.sidebar-logo-subtexto {
    font-size: 10px;
    font-weight: 400;
    color: var(--cor-sidebar-texto);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.sidebar-nav { padding: 12px 0; flex: 1; }

.sidebar-secao {
    padding: 16px 20px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #475569;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: var(--cor-sidebar-texto);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    transition: var(--transicao);
    position: relative;
    border-left: 3px solid transparent;
    margin: 1px 0;
}

.sidebar-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .75;
    transition: opacity .2s;
}

.sidebar-link:hover {
    color: #f1f5f9;
    background-color: var(--cor-sidebar-hover);
}

.sidebar-link:hover svg { opacity: 1; }

.sidebar-link.ativo {
    color: #ffffff;
    background-color: var(--cor-sidebar-ativo-bg);
    border-left-color: var(--cor-sidebar-ativo);
    font-weight: 500;
}

.sidebar-link.ativo svg { opacity: 1; color: var(--cor-sidebar-ativo); }

/* Submenu do "Cadastros" */
.sidebar-submenu { display: none; background: rgba(0,0,0,.2); }
.sidebar-submenu.aberto { display: block; }
.sidebar-submenu .sidebar-link { padding-left: 44px; font-size: 13px; }

.sidebar-link-toggle::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform .2s;
    opacity: .6;
}

.sidebar-link-toggle.aberto::after { transform: rotate(-135deg); }

/* -------- TOPBAR -------- */
.topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-largura);
    right: 0;
    height: var(--topbar-altura);
    background: var(--cor-topbar-bg);
    border-bottom: 1px solid var(--cor-topbar-borda);
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    transition: left .3s ease;
}

.topbar-btn-menu {
    display: none;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--cor-texto);
    border-radius: var(--raio-borda-sm);
}

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

.topbar-titulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-texto);
    flex: 1;
}

.topbar-acoes { display: flex; align-items: center; gap: 8px; }

.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--cor-borda);
    transition: border-color .2s;
}

.topbar-avatar:hover { border-color: var(--cor-primaria); }

/* -------- CONTEÚDO PRINCIPAL -------- */
.conteudo-principal {
    margin-left: var(--sidebar-largura);
    margin-top: var(--topbar-altura);
    padding: 28px 28px 48px;
    flex: 1;
    min-width: 0;
    transition: margin-left .3s ease;
}

/* ============================================================
   COMPONENTES
   ============================================================ */

/* -------- CARDS -------- */
.card {
    background: var(--cor-card-bg);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-card);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cor-borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-header-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-texto);
    margin: 0;
}

.card-body { padding: 20px; }

/* -------- CARDS KPI (Dashboard) -------- */
.kpi-card {
    background: var(--cor-card-bg);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 20px;
    box-shadow: var(--sombra-card);
    transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--raio-borda);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(26,86,219,.04) 0%, transparent 60%);
}

.kpi-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.kpi-card:hover::after { opacity: 1; }

.kpi-icone {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: transform .2s ease;
}

.kpi-card:hover .kpi-icone { transform: scale(1.08); }

.kpi-valor {
    font-size: 26px;
    font-weight: 700;
    color: var(--cor-texto);
    line-height: 1.1;
    margin-bottom: 4px;
    font-family: var(--fonte-mono);
}

.kpi-label {
    font-size: 12.5px;
    color: var(--cor-texto-muted);
    font-weight: 500;
}

/* Indicador de tendência nos KPI cards */
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}
.kpi-trend.alta  { background: #fee2e2; color: #dc2626; }
.kpi-trend.baixa { background: #dcfce7; color: #16a34a; }
.kpi-trend.neutro { background: #f1f5f9; color: #64748b; }

/* -------- TABELAS -------- */
.tabela-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tabela thead th {
    background: #f8fafc;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cor-texto-muted);
    border-bottom: 2px solid var(--cor-borda);
    white-space: nowrap;
    text-align: left;
}

.tabela tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--cor-texto);
    vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: #f8fafc; }

.tabela-acoes {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* -------- BOTÕES -------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: var(--fonte-base);
    border-radius: var(--raio-borda-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Micro-interação: press feedback em todos os botões */
.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn-primario {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
    box-shadow: 0 1px 3px rgba(26,86,219,.3);
}
.btn-primario:hover {
    background: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26,86,219,.35);
    transform: translateY(-1px);
}
.btn-primario:active:not(:disabled) {
    transform: scale(0.97) translateY(0);
    box-shadow: 0 1px 3px rgba(26,86,219,.2);
}

.btn-secundario {
    background: #fff;
    color: var(--cor-texto);
    border-color: var(--cor-borda);
}
.btn-secundario:hover { background: var(--cor-fundo); color: var(--cor-texto); box-shadow: 0 2px 6px rgba(0,0,0,.06); transform: translateY(-1px); }
.btn-secundario:active:not(:disabled) { transform: scale(0.97) translateY(0); }

.btn-perigo { background: var(--cor-erro); color: #fff; border-color: var(--cor-erro); box-shadow: 0 1px 3px rgba(220,38,38,.25); }
.btn-perigo:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; box-shadow: 0 4px 10px rgba(220,38,38,.3); transform: translateY(-1px); }
.btn-perigo:active:not(:disabled) { transform: scale(0.97) translateY(0); }

.btn-icone {
    padding: 6px;
    background: none;
    border-color: transparent;
    color: var(--cor-texto-muted);
    border-radius: var(--raio-borda-sm);
}
.btn-icone:hover { background: var(--cor-fundo); color: var(--cor-texto); }
.btn-icone:active:not(:disabled) { transform: scale(0.90); }
.btn-icone svg { width: 16px; height: 16px; }

.btn-icone.editar:hover { color: var(--cor-primaria); background: var(--cor-primaria-light); }
.btn-icone.excluir:hover { color: var(--cor-erro); background: #fee2e2; }
.btn-icone.visualizar:hover { color: var(--cor-info); background: #e0f2fe; }

.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-sm svg { width: 13px; height: 13px; }

/* -------- FORMULÁRIOS -------- */
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-texto);
    margin-bottom: 5px;
    transition: color .15s;
}

.form-label .obrigatorio { color: var(--cor-erro); margin-left: 2px; }

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--fonte-base);
    color: var(--cor-texto);
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-sm);
    transition: border-color .18s, box-shadow .18s, background .18s;
    outline: none;
    appearance: none;
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: #94a3b8;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
    background: #fafbff;
}

.form-control::placeholder { color: #94a3b8; }

textarea.form-control { min-height: 90px; resize: vertical; }

/* -------- MEDIDOR DE FORÇA DE SENHA -------- */
.senha-forca-wrap {
    margin-top: 8px;
}
.senha-forca-barra {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}
.senha-forca-seg {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: #e2e8f0;
    transition: background .3s ease;
}
.senha-forca-seg.fraca   { background: #ef4444; }
.senha-forca-seg.media   { background: #f59e0b; }
.senha-forca-seg.boa     { background: #10b981; }
.senha-forca-seg.forte   { background: #059669; }
.senha-forca-texto {
    font-size: 11.5px;
    color: var(--cor-texto-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.senha-forca-label { font-weight: 600; }
.senha-forca-label.fraca   { color: #ef4444; }
.senha-forca-label.media   { color: #f59e0b; }
.senha-forca-label.boa     { color: #10b981; }
.senha-forca-label.forte   { color: #059669; }

/* Checklist de requisitos de senha */
.senha-requisitos {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.senha-requisito {
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color .2s;
}
.senha-requisito::before {
    content: '○';
    font-size: 10px;
    transition: content .2s;
}
.senha-requisito.ok {
    color: #10b981;
}
.senha-requisito.ok::before { content: '●'; }

.form-texto-ajuda {
    font-size: 12px;
    color: var(--cor-texto-muted);
    margin-top: 4px;
}

.form-erro .form-control,
.form-erro .form-select { border-color: var(--cor-erro); }

.form-mensagem-erro {
    font-size: 12px;
    color: var(--cor-erro);
    margin-top: 4px;
}

/* Input com ícone */
.input-grupo { position: relative; }
.input-grupo .form-control { padding-left: 36px; }
.input-grupo .input-icone {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cor-texto-muted);
    pointer-events: none;
}
.input-grupo .input-icone svg { width: 16px; height: 16px; }

/* Upload */
.upload-area {
    border: 2px dashed var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transicao);
    background: #fafbfd;
}

.upload-area:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-light); }

.upload-area input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* -------- BADGES -------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 20px;
    letter-spacing: .2px;
}

.badge-primario   { background: var(--cor-primaria-light); color: var(--cor-primaria); }
.badge-sucesso    { background: #dcfce7; color: #15803d; }
.badge-erro       { background: #fee2e2; color: #b91c1c; }
.badge-aviso      { background: #fef9c3; color: #a16207; }
.badge-secundario { background: #f1f5f9; color: #475569; }
.badge-info       { background: #e0f2fe; color: #0369a1; }

/* -------- ALERTAS FLASH -------- */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--raio-borda-sm);
    font-size: 13.5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    animation: entrar-alerta .3s ease;
}

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

.alerta svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.alerta-sucesso { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alerta-erro    { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.alerta-aviso   { background: #fffbeb; border-color: #fed7aa; color: #b45309; }
.alerta-info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

.alerta-fechar {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    padding: 0 2px;
    line-height: 1;
    font-size: 16px;
}
.alerta-fechar:hover { opacity: 1; }

/* -------- PAGINAÇÃO -------- */
.paginacao {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 20px;
    border-top: 1px solid var(--cor-borda);
    flex-wrap: wrap;
}

.paginacao-info {
    font-size: 12.5px;
    color: var(--cor-texto-muted);
    flex: 1;
}

.paginacao-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-sm);
    font-size: 13px;
    color: var(--cor-texto);
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transicao);
}

.paginacao-botao:hover { background: var(--cor-fundo); color: var(--cor-texto); }
.paginacao-botao.ativo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.paginacao-botao:disabled,
.paginacao-botao.desabilitado { opacity: .4; cursor: not-allowed; }

/* -------- CABEÇALHO DA PÁGINA -------- */
.pagina-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pagina-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0;
}

.pagina-subtitulo {
    font-size: 13.5px;
    color: var(--cor-texto-muted);
    margin: 3px 0 0;
}

/* -------- BREADCRUMB -------- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--cor-texto-muted);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.breadcrumb a { color: var(--cor-texto-muted); }
.breadcrumb a:hover { color: var(--cor-primaria); }
.breadcrumb-separador { opacity: .4; }
.breadcrumb-atual { color: var(--cor-texto); font-weight: 500; }

/* -------- MODAL (Bootstrap override sutil) -------- */
.modal-content {
    border-radius: var(--raio-borda) !important;
    font-family: var(--fonte-base);
}
.modal-body { padding: 1.5rem !important; }

/* -------- TELA VAZIA -------- */
.tela-vazia {
    text-align: center;
    padding: 48px 24px;
    color: var(--cor-texto-muted);
}

.tela-vazia-icone {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    opacity: .25;
}

.tela-vazia-titulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 6px;
}

.tela-vazia-texto { font-size: 13.5px; margin-bottom: 20px; }

/* -------- GALERIA DE FOTOS -------- */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.galeria-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--raio-borda-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--cor-fundo);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.galeria-item:hover img { transform: scale(1.05); }

.galeria-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
    opacity: 0;
    transition: opacity .2s;
}

.galeria-item:hover .galeria-item-overlay { opacity: 1; }

.galeria-item-desc {
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ============================================================
   PÁGINA DE LOGIN
   ============================================================ */
.login-body {
    min-height: 100vh;
    background: var(--cor-sidebar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(26,86,219,.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(26,86,219,.08) 0%, transparent 40%);
}

.login-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 80px rgba(0,0,0,.3);
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.login-logo-icone {
    width: 44px;
    height: 44px;
    background: var(--cor-primaria);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.login-titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0 0 4px;
}

.login-subtitulo {
    font-size: 13px;
    color: var(--cor-texto-muted);
    margin: 0;
}

/* ============================================================
   RESPONSIVIDADE — MOBILE FIRST
   ============================================================ */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0,0,0,.3);
    }

    .sidebar.aberta {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1039;
    }

    .sidebar-backdrop.visivel { display: block; }

    .topbar { left: 0; }
    .topbar-btn-menu { display: flex; }

    .conteudo-principal {
        margin-left: 0;
        padding: 20px 16px 88px; /* espaço para o bottom nav */
    }

    /* Tabela vira cards no mobile */
    .tabela-responsiva thead { display: none; }
    .tabela-responsiva tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--cor-borda);
        border-radius: var(--raio-borda-sm);
        margin-bottom: 10px;
        padding: 12px 14px;
    }
    .tabela-responsiva tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        border: none;
        font-size: 13px;
    }
    .tabela-responsiva tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--cor-texto-muted);
        flex: 0 0 110px;
    }
    .tabela-responsiva td.td-acoes { justify-content: flex-end; }
    .tabela-responsiva td.td-acoes::before { display: none; }

    .pagina-cabecalho {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .pagina-cabecalho > div:first-child { flex: 1; min-width: 0; }
    .pagina-cabecalho .pagina-titulo { font-size: 17px; }
    .pagina-cabecalho .pagina-subtitulo { display: none; }

    .galeria-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

    /* Bottom nav visível no mobile */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--cor-sidebar-bg);
        border-top: 1px solid var(--cor-sidebar-borda);
        z-index: 1035;
        align-items: stretch;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone X+ */
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--cor-sidebar-texto);
        text-decoration: none;
        font-size: 10px;
        font-weight: 500;
        transition: color .15s;
        padding: 6px 2px;
        border-radius: 8px;
        margin: 4px 2px;
    }

    .bottom-nav-item svg { opacity: .7; }

    .bottom-nav-item:hover,
    .bottom-nav-item.ativo {
        color: #fff;
    }

    .bottom-nav-item.ativo svg { opacity: 1; color: var(--cor-primaria); }
    .bottom-nav-item.ativo span { color: var(--cor-primaria); }
}

@media (max-width: 575.98px) {
    .conteudo-principal { padding: 14px 12px 84px; }
    .card-body { padding: 14px; }
    .kpi-valor { font-size: 22px; }
    .login-card { padding: 28px 20px; }
    .galeria-grid { grid-template-columns: repeat(2, 1fr); }

    /* Formulários mais confortáveis no mobile */
    .form-control,
    .form-select { padding: 10px 12px; font-size: 15px; }
    .btn { padding: 10px 16px; font-size: 14px; }
    .pagina-titulo { font-size: 16px; }
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.texto-muted     { color: var(--cor-texto-muted) !important; }
.texto-primario  { color: var(--cor-primaria) !important; }
.texto-sucesso   { color: var(--cor-sucesso) !important; }
.texto-erro      { color: var(--cor-erro) !important; }
.texto-mono      { font-family: var(--fonte-mono) !important; }
.fw-semibold     { font-weight: 600 !important; }
.sem-margem      { margin: 0 !important; }
.gap-2           { gap: 8px !important; }
.d-flex          { display: flex !important; }
.align-center    { align-items: center !important; }

/* ============================================================
   BOTTOM NAV — Navegação inferior (somente mobile)
   ============================================================ */
.bottom-nav {
    display: none; /* escondida no desktop */
}

/* ============================================================
   LOADING OVERLAY — Spinner global
   ============================================================ */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

#loading-overlay.visivel {
    opacity: 1;
    pointer-events: all;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

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

/* ============================================================
   BARRA DE PROGRESSO — Topo da página (navegação)
   ============================================================ */
#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--cor-primaria);
    z-index: 10000;
    transition: none;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(26,86,219,.6);
}

#loading-bar.progredindo {
    width: 75%;
    transition: width 1s ease;
}

#loading-bar.saindo {
    width: 100%;
    opacity: 0;
    transition: width .2s ease, opacity .3s ease .1s;
}

/* ============================================================
   GALERIA — estilos complementares
   ============================================================ */
.galeria-item {
    aspect-ratio: unset;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.galeria-item-link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--cor-fundo);
    border-radius: var(--raio-borda-sm) var(--raio-borda-sm) 0 0;
}

.galeria-item-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.galeria-item-link:hover img { transform: scale(1.05); }

.galeria-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}

.galeria-item-link:hover .galeria-overlay { opacity: 1; }

.galeria-info {
    padding: 8px 10px;
    background: var(--cor-card-bg);
    border: 1px solid var(--cor-borda);
    border-top: none;
    border-radius: 0 0 var(--raio-borda-sm) var(--raio-borda-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.galeria-descricao {
    font-size: 12px;
    font-weight: 500;
    color: var(--cor-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.galeria-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--cor-texto-muted);
}

.galeria-acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

/* ============================================================
   BADGES EXTRAS (aviso / warning)
   ============================================================ */
.badge-aviso {
    background: #fef9c3;
    color: #a16207;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--cor-texto-muted);
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--cor-primaria);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-separador { color: var(--cor-texto-muted); }
.breadcrumb-atual { color: var(--cor-texto); }

/* ============================================================
   FORMULÁRIO — textos de ajuda e campos obrigatórios
   ============================================================ */
.form-texto-ajuda {
    font-size: 11.5px;
    color: var(--cor-texto-muted);
    margin-top: 4px;
}

.obrigatorio { color: var(--cor-erro); }

/* ============================================================
   CARD HEADER padrão
   ============================================================ */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cor-borda);
    background: transparent;
}

.card-header-titulo {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--cor-texto);
}

/* ============================================================
   CARD — hover com elevação sutil
   ============================================================ */
.card {
    transition: box-shadow .2s ease;
}

/* ============================================================
   SKELETON LOADING — shimmer para conteúdo em carregamento
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        #f1f5f9 25%,
        #e2e8f0 50%,
        #f1f5f9 75%
    );
    background-size: 800px 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: var(--raio-borda-sm);
    display: block;
}

.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; margin-bottom: 12px; width: 60%; }
.skeleton-kpi   { height: 30px; margin-bottom: 6px; width: 80%; }
.skeleton-badge { height: 22px; width: 70px; border-radius: 20px; }
.skeleton-img   { aspect-ratio: 1; border-radius: var(--raio-borda-sm); }
.skeleton-linha { height: 14px; margin-bottom: 10px; border-radius: 4px; }
.skeleton-linha:last-child { width: 70%; }

/* Card de skeleton KPI */
.kpi-card-skeleton {
    background: var(--cor-card-bg);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 20px;
    box-shadow: var(--sombra-card);
}

/* ============================================================
   GALERIA — GLightbox custom style override
   ============================================================ */
.glightbox-clean .gslide-description { display: none; }

/* Botão "Ver foto" na galeria (ícone lupa) */
.galeria-btn-ver {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
    color: var(--cor-texto);
}
.galeria-btn-ver:hover {
    background: #fff;
    transform: scale(1.1);
}

/* ============================================================
   MICRO-INTERAÇÕES — Links de navegação da sidebar
   ============================================================ */
.sidebar-link {
    position: relative;
    overflow: hidden;
}
.sidebar-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .15s;
}
.sidebar-link:active::before {
    background: rgba(255,255,255,.05);
}

/* ============================================================
   MICRO-INTERAÇÕES — Badges com pulse no status ativo
   ============================================================ */
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
    50%       { box-shadow: 0 0 0 4px rgba(22,163,74,.0); }
}
.badge-sucesso.pulsante {
    animation: pulse-badge 2s ease-in-out infinite;
}

/* ============================================================
   TABELA — row hover mais suave
   ============================================================ */
.tabela tbody tr {
    transition: background .12s ease;
}

/* ============================================================
   MODAL CONTENT — sombra mais expressiva
   ============================================================ */
.modal-content {
    box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
}

/* ============================================================
   PAGINAÇÃO — micro-interação
   ============================================================ */
.paginacao-botao {
    transition: background .15s, border-color .15s, transform .1s, color .15s;
}
.paginacao-botao:active:not(.desabilitado) {
    transform: scale(0.92);
}

/* ============================================================
   UPLOAD AREA — drag over state
   ============================================================ */
.upload-area.drag-over {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-light);
    transform: scale(1.01);
    transition: transform .15s ease, border-color .15s, background .15s;
}

/* ============================================================
   ANIMAÇÃO DE ENTRADA — cards e KPI cards
   ============================================================ */
/* Estado inicial via JS: opacity:0, translateY(12px) */
.animavel.animado {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================================
   TOGGLE SENHA — botão mostrar/ocultar senha
   ============================================================ */
.input-senha-wrap {
    position: relative;
}
.input-senha-wrap .form-control {
    padding-right: 40px;
}
.btn-toggle-senha {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cor-texto-muted);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
    line-height: 1;
}
.btn-toggle-senha:hover { color: var(--cor-texto); }