/* =============================================================================
   componentes.css — Botões, formulários, cards, tabelas, modais, notificações
   ============================================================================= */

/* ---- Botões --------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--raio);
    font-size: 0.93rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background var(--transicao),
        color var(--transicao),
        border-color var(--transicao),
        opacity var(--transicao);
    white-space: nowrap;
}

.botao:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variações */
.botao-primario {
    background: var(--cor-primaria);
    color: #fff;
}
.botao-primario:hover:not(:disabled) {
    background: var(--cor-primaria-hover);
}

.botao-secundario {
    background: var(--bg-card-hover);
    color: var(--texto-primario);
    border-color: var(--borda);
}
.botao-secundario:hover:not(:disabled) {
    background: var(--bg-input);
}

.botao-fantasma {
    background: transparent;
    color: var(--texto-secundario);
}
.botao-fantasma:hover:not(:disabled) {
    background: var(--bg-card-hover);
    color: var(--texto-primario);
}

.botao-perigo {
    background: var(--cor-erro-suave);
    color: var(--cor-erro);
    border-color: rgba(239, 68, 68, 0.2);
}
.botao-perigo:hover:not(:disabled) {
    background: var(--cor-erro);
    color: #fff;
}

.botao-sucesso {
    background: var(--cor-sucesso-suave);
    color: var(--cor-sucesso);
    border-color: rgba(34, 197, 94, 0.2);
}
.botao-sucesso:hover:not(:disabled) {
    background: var(--cor-sucesso);
    color: #fff;
}

/* Tamanhos */
.botao-sm { padding: 5px 12px; font-size: 0.857rem; }
.botao-lg { padding: 11px 22px; font-size: 1rem; }

/* Largura total */
.botao-bloco { width: 100%; }

/* Estado carregando */
.botao.carregando {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.botao.carregando::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

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

/* ---- Formulários ---------------------------------------------------------- */
.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo label {
    font-size: 0.857rem;
    font-weight: 500;
    color: var(--texto-secundario);
}

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

.campo-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto-primario);
    font-size: 0.93rem;
    transition: border-color var(--transicao), box-shadow var(--transicao);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    /* Garante que o browser não sobrescreva com o tema do sistema */
    color-scheme: inherit;
}

/* Neutraliza o fundo de autofill do browser (Chrome/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--texto-primario) !important;
    caret-color: var(--texto-primario);
}

input::placeholder,
textarea::placeholder {
    color: var(--texto-terciario);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--borda-foco);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

input.invalido,
select.invalido,
textarea.invalido {
    border-color: var(--cor-erro);
}

input.invalido:focus,
select.invalido:focus {
    box-shadow: 0 0 0 3px var(--cor-erro-suave);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b92a8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
    cursor: pointer;
}

/* No tema claro, a seta do select precisa de cor diferente */
[data-tema="claro"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b5168' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.campo-ajuda {
    font-size: 0.786rem;
    color: var(--texto-terciario);
}

.campo-erro-texto {
    font-size: 0.786rem;
    color: var(--cor-erro);
    display: none;
}

.campo.com-erro .campo-erro-texto {
    display: block;
}

/* ---- Alertas --------------------------------------------------------------- */
.alerta {
    padding: 10px 14px;
    border-radius: var(--raio);
    font-size: 0.893rem;
    line-height: 1.5;
}

.alerta-erro  { background: var(--cor-erro-suave);   color: var(--cor-erro);    border: 1px solid rgba(239, 68, 68, 0.2); }
.alerta-aviso { background: var(--cor-aviso-suave);   color: var(--cor-aviso);   border: 1px solid rgba(245, 158, 11, 0.2); }
.alerta-info  { background: var(--cor-info-suave);    color: var(--cor-info);    border: 1px solid rgba(56, 189, 248, 0.2); }
.alerta-ok    { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); border: 1px solid rgba(34, 197, 94, 0.2); }

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

.card-padding { padding: 20px; }

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

.card-header-titulo {
    font-size: 0.93rem;
    font-weight: 600;
}

.card-corpo {
    padding: 20px;
}

/* Cards de métrica */
.metrica-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
}

.metrica-valor {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.metrica-label {
    font-size: 0.857rem;
    color: var(--texto-secundario);
    margin-top: 4px;
}

.metrica-icone {
    width: 40px;
    height: 40px;
    border-radius: var(--raio);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Tabelas -------------------------------------------------------------- */
.tabela-container {
    overflow-x: auto;
    border-radius: var(--raio-lg);
    border: 1px solid var(--borda);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.893rem;
}

.tabela thead {
    background: var(--bg-card);
}

.tabela th {
    padding: 11px 16px;
    text-align: left;
    font-size: 0.786rem;
    font-weight: 600;
    color: var(--texto-terciario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 1px solid var(--borda);
}

.tabela td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

.tabela tbody tr:last-child td {
    border-bottom: none;
}

.tabela tbody tr {
    transition: background var(--transicao);
}

.tabela tbody tr:hover {
    background: var(--bg-card-hover);
}

.tabela .col-acoes {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ---- Paginação ------------------------------------------------------------ */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--borda);
}

.paginacao-info {
    font-size: 0.857rem;
    color: var(--texto-secundario);
}

.paginacao-botoes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagina-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--raio);
    font-size: 0.857rem;
    font-weight: 500;
    color: var(--texto-secundario);
    transition: background var(--transicao), color var(--transicao);
}

.pagina-btn:hover { background: var(--bg-card-hover); color: var(--texto-primario); }
.pagina-btn.ativa { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.pagina-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Filtros / Barra de ferramentas --------------------------------------- */
.barra-ferramentas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Barra de ferramentas dentro de um card — adiciona padding lateral e superior */
.card > .barra-ferramentas {
    padding: 16px 20px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 14px;
}

.campo-busca {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.campo-busca input {
    padding-left: 36px;
}

.campo-busca svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-terciario);
    pointer-events: none;
}

/* ---- Estado Vazio --------------------------------------------------------- */
.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    color: var(--texto-terciario);
}

.estado-vazio svg {
    opacity: 0.3;
}

.estado-vazio-titulo {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--texto-secundario);
}

.estado-vazio-subtitulo {
    font-size: 0.857rem;
}

/* ---- Skeleton (carregamento) ----------------------------------------------- */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--raio);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Modal --------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 20px;
    backdrop-filter: blur(2px);
    animation: fadeIn 150ms ease;
}

/* Garante que [hidden] sempre oculta, mesmo quando o elemento tem display:flex.
   Exceção: quando style.display for definido inline (maior especificidade), prevalece. */
:not([style*="display"])[hidden] { display: none !important; }

.modal {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-modal);
    width: 100%;
    max-width: 520px;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    animation: slideUp 200ms ease;
}

.modal-lg { max-width: 720px; }
.modal-sm { max-width: 380px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}

.modal-titulo {
    font-size: 1rem;
    font-weight: 600;
}

.modal-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.modal-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--borda);
    flex-shrink: 0;
}

.modal-rodape:empty { display: none; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---- Notificações Toast --------------------------------------------------- */
.notificacoes-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    pointer-events: none;
}

.notificacao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-dropdown);
    font-size: 0.893rem;
    max-width: 360px;
    pointer-events: auto;
    animation: slideNotif 250ms ease;
    border-left: 3px solid var(--borda);
}

.notificacao.saindo {
    animation: fadeOut 300ms ease forwards;
}

.notificacao-sucesso { border-left-color: var(--cor-sucesso); }
.notificacao-erro    { border-left-color: var(--cor-erro); }
.notificacao-aviso   { border-left-color: var(--cor-aviso); }
.notificacao-info    { border-left-color: var(--cor-info); }

.notificacao-texto {
    flex: 1;
    line-height: 1.5;
}

.notificacao-icone {
    flex-shrink: 0;
    margin-top: 1px;
}

@keyframes slideNotif { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut    { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }

/* =============================================================================
   Complementos — Fase 6
   ============================================================================= */

/* ── Modal: tamanho médio ────────────────────────────────────────────────────── */
.modal-md { max-width: 580px; }

/* ── Permissões: tabela de checkboxes ───────────────────────────────────────── */
.perm-check {
    accent-color: var(--cor-primaria);
    cursor: pointer;
}

/* ── Campo select inline (filtros na barra de ferramentas) ──────────────────── */
.campo-select {
    background: var(--bg-input);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto-primario);
    padding: 6px 32px 6px 10px;
    font-size: 0.857rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b92a8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color-scheme: inherit;
}

.campo-select:focus {
    outline: none;
    border-color: var(--borda-foco);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

/* ── Badge: status extra ─────────────────────────────────────────────────────── */
.badge-alocado { color: var(--cor-info);  background: var(--cor-info-suave); }

/* ── Hierarquia de locais (configurações) ─────────────────────────────────────── */
.local-unidade {
    border-bottom: 1px solid var(--borda);
}

.local-setor {
    background: var(--bg-card-hover);
    border-top: 1px solid var(--borda);
}

/* ── QR Code placeholder ─────────────────────────────────────────────────────── */
.qr-box {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Paginação ───────────────────────────────────────────────────────────────── */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 0.82rem;
}

.paginacao-info {
    color: var(--texto-terciario);
}

.paginacao-botoes {
    display: flex;
    gap: 3px;
    align-items: center;
}

.pagina-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--raio);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--texto-secundario);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transicao);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagina-btn:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--borda);
    color: var(--texto-primario);
}

.pagina-btn.ativa {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}

.pagina-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Seção de divisor com título ─────────────────────────────────────────────── */
.secao-titulo {
    font-size: 0.786rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-terciario);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--borda);
}

/* ── Inline loading ──────────────────────────────────────────────────────────── */
.carregando-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-terciario);
    font-size: 0.857rem;
}

.carregando-inline::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--borda);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* ── Inputs dentro de modal — força herança de color-scheme ──────────────────── */
.modal input,
.modal select,
.modal textarea {
    background-color: var(--bg-input);
    color: var(--texto-primario);
    border-color: var(--borda);
    color-scheme: inherit;
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

.modal input::placeholder,
.modal textarea::placeholder {
    color: var(--texto-terciario);
}

/* ── Paginação wrapper ───────────────────────────────────────────────────────── */
.paginacao-wrapper {
    padding: 10px 16px;
    border-top: 1px solid var(--borda);
}

/* ── Dashboard ───────────────────────────────────────────────────────────────── */
.dash-atalho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto-primario);
    text-decoration: none;
    transition: background var(--transicao), border-color var(--transicao);
}

.dash-atalho:hover {
    background: var(--bg-card-hover);
    border-color: var(--cor-primaria);
}

.dash-atalho-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
    border-radius: var(--raio);
    flex-shrink: 0;
}