/* ============================================================================
 * IBEC Horizon — Design System (v7A.9.21.236)
 * ----------------------------------------------------------------------------
 * FONTE ÚNICA DE VERDADE do visual do painel/portais.
 *
 * Como usar (convenção):
 *   - Cor, borda, raio, sombra e tipografia vêm SEMPRE dos tokens (--hz-*).
 *     Nunca cravar hex/px de marca direto no componente.
 *   - Componentes reutilizáveis usam as classes .hz-* abaixo (botão, campo,
 *     card, modal, badge, tabela), em vez de estilo inline por tela.
 *   - `style="..."` inline só para layout pontual (grid/posição), nunca para
 *     identidade visual.
 *   - Componente novo? Estende este arquivo (não recria em cada módulo).
 *
 * Este arquivo é carregado ANTES dos demais CSS, então os tokens passam a
 * resolver todos os `var(--hz-*, fallback)` já espalhados no código — sem
 * mudar o visual atual, só centralizando o controle.
 * ========================================================================== */

:root {
    /* —— Marca —— */
    --hz-navy: #0B1F4D;
    --hz-blue: #163B8C;
    --hz-gold: #F2B705;
    --hz-white: #ffffff;

    /* —— Texto —— */
    --hz-ink: #0f1d33;     /* títulos / texto forte */
    --hz-body: #344054;    /* texto corrente */
    --hz-muted: #5c6d8f;   /* legendas / labels */

    /* —— Superfícies & linhas —— */
    --hz-bg: #f5f7fa;
    --hz-surface: #ffffff;
    --hz-line: #E4E8EF;
    --hz-line-strong: #cbd5e1;

    /* —— Status —— */
    --hz-success: #16a34a; --hz-success-bg: #f0fdf4; --hz-success-ink: #065f46;
    --hz-danger:  #dc2626; --hz-danger-bg:  #fff5f5; --hz-danger-ink:  #b91c1c;
    --hz-warning: #f59e0b; --hz-warning-bg: #fffbeb; --hz-warning-ink: #92400e;
    --hz-info:    #0369a1; --hz-info-bg:    #f0f9ff; --hz-info-ink:    #075985;

    /* —— Tipografia —— */
    --hz-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hz-font-display: var(--hz-font);

    /* —— Espaçamento (escala 4px) —— */
    --hz-sp-1: 4px; --hz-sp-2: 8px; --hz-sp-3: 12px;
    --hz-sp-4: 16px; --hz-sp-5: 24px; --hz-sp-6: 32px;

    /* —— Raio —— */
    --hz-radius-sm: 8px; --hz-radius: 10px; --hz-radius-lg: 14px; --hz-radius-pill: 999px;

    /* —— Sombra —— */
    --hz-shadow-sm: 0 2px 8px rgba(11, 31, 77, .06);
    --hz-shadow: 0 12px 30px rgba(11, 31, 77, .10);
    --hz-shadow-lg: 0 20px 80px rgba(0, 0, 0, .25);

    /* —— Foco & movimento —— */
    --hz-focus: 0 0 0 3px rgba(11, 31, 77, .14);
    --hz-duration: .18s;
}

/* ====================== Botões ====================== */
.hz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--hz-sp-2);
    padding: 10px 16px; border-radius: var(--hz-radius-lg);
    background: var(--hz-navy); color: #fff; border: 1px solid var(--hz-navy);
    font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; text-decoration: none;
    transition: filter var(--hz-duration), transform var(--hz-duration);
}
.hz-btn:hover { filter: brightness(1.08); color: #fff; }
.hz-btn:active { transform: translateY(1px); }
.hz-btn--light { background: #fff; color: var(--hz-navy); border-color: var(--hz-line-strong); }
.hz-btn--light:hover { background: #f1f5fb; filter: none; color: var(--hz-navy); }
.hz-btn--danger { background: #fff; color: var(--hz-danger-ink); border-color: #f3c0c0; }
.hz-btn--danger:hover { background: #fff5f5; filter: none; color: var(--hz-danger-ink); }
.hz-btn--sm { padding: 7px 12px; font-size: 13px; border-radius: var(--hz-radius); }
.hz-btn[disabled], .hz-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ====================== Campos ====================== */
.hz-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--hz-muted); margin-bottom: var(--hz-sp-1); }
.hz-field {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid var(--hz-line-strong); border-radius: var(--hz-radius);
    font-size: 14px; color: var(--hz-ink); background: #fff; font-family: inherit; line-height: 1.3;
}
.hz-field:focus { outline: none; border-color: var(--hz-navy); box-shadow: var(--hz-focus); }
.hz-field::placeholder { color: #94a3b8; }

/* ====================== Card ====================== */
.hz-card {
    background: var(--hz-surface); border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-lg); padding: var(--hz-sp-5); box-shadow: var(--hz-shadow-sm);
}

/* ====================== Modal ====================== */
.hz-modal {
    position: fixed; inset: 0; background: rgba(2, 8, 23, .55);
    display: none; align-items: flex-start; justify-content: center;
    z-index: 99999; padding: var(--hz-sp-5); overflow-y: auto;
}
.hz-modal.is-open { display: flex; }
.hz-modal__box {
    position: relative; background: #fff; border-radius: 18px; width: 100%; max-width: 900px;
    max-height: 88vh; overflow: auto; padding: var(--hz-sp-5); box-shadow: var(--hz-shadow-lg);
}
.hz-modal__close {
    position: sticky; top: 0; float: right; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--hz-radius-pill); background: #eef2f7;
    color: var(--hz-navy); text-decoration: none; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2;
}
.hz-modal__close:hover { background: #dbe3ee; }
/* Inputs nativos visíveis dentro de modais (alguns temas/Elementor zeram appearance). */
.hz-modal input[type="radio"], .hz-modal input[type="checkbox"] {
    -webkit-appearance: auto !important; appearance: auto !important;
    width: 17px !important; height: 17px !important; opacity: 1 !important;
    accent-color: var(--hz-navy); cursor: pointer;
}

/* ====================== Badge ====================== */
.hz-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--hz-radius-pill); background: #eaf1ff; color: var(--hz-blue); }
.hz-badge--success { background: var(--hz-success-bg); color: var(--hz-success-ink); }
.hz-badge--danger  { background: var(--hz-danger-bg);  color: var(--hz-danger-ink); }
.hz-badge--warning { background: var(--hz-warning-bg); color: var(--hz-warning-ink); }

/* ====================== Tabela ====================== */
.hz-table { width: 100%; border-collapse: collapse; }
.hz-table th, .hz-table td { border-bottom: 1px solid var(--hz-line); padding: 10px; text-align: left; vertical-align: top; }
.hz-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--hz-muted); font-weight: 700; }