/*
 * report.css — Videy · Report Content
 *
 * A página reutiliza as classes do tema (bootstrap.css / main.css): contact-section,
 * section-title, form-floating, form-control, btn btn-primary btn--lg-2 rounded-55.
 * Aqui ficam apenas os complementos: erros, contador, honeypot, status e foco.
 *
 * Valores NÃO confirmados no tema (não tive acesso ao main.css): marcados com "(?)".
 */

:root {
    --report-accent: #0e549a;      /* destaque do site (mask-icon / TileColor) */
    --report-link: #1971b1;        /* cor de link definida no header.php */
    --report-text: #333333;        /* texto usado no telefone do help.php */
    --report-muted: #5b6670;       /* (?) texto secundário, contraste 5.9:1 sobre branco */
    --report-error: #b3261e;       /* (?) erro, contraste 6.5:1 sobre branco */
    --report-error-bg: #fdecea;    /* (?) */
    --report-success: #14532d;     /* (?) */
    --report-success-bg: #e8f5ec;  /* (?) */
    --report-radius: 8px;          /* (?) */
    --report-focus: var(--report-accent);
}

.report-page {
    color: var(--report-text);
}

/* Honeypot: oculto por CSS (fora da tela), não por type=hidden. */
.report-hp {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Mensagens por campo */
.report-error {
    margin: 0.35rem 0 0;
    color: var(--report-error);
    font-size: 0.875rem;
    line-height: 1.4;
}

.report-error:empty {
    display: none;
}

.report-form [aria-invalid="true"] {
    border-color: var(--report-error);
}

/* Contador de caracteres */
.report-counter {
    margin-top: 0.35rem;
    text-align: right;
    color: var(--report-muted);
    font-size: 0.875rem;
}

.report-counter.is-over {
    color: var(--report-error);
    font-weight: 600;
}

.report-textarea {
    height: 160px;
}

/* Status geral (aria-live): sucesso ou erro de envio */
.report-status {
    border-radius: var(--report-radius);
    outline: none;
}

.report-status:empty {
    display: none;
}

.report-status--error,
.report-status--success {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.report-status--error {
    background: var(--report-error-bg);
    border-color: var(--report-error);
    color: var(--report-error);
}

.report-status--success {
    background: var(--report-success-bg);
    border-color: var(--report-success);
    color: var(--report-success);
}

/* Foco visível */
.report-form .form-control:focus-visible,
.report-form .form-check-input:focus-visible,
.report-form button:focus-visible,
.report-page a:focus-visible {
    outline: 3px solid var(--report-focus);
    outline-offset: 2px;
}

.report-form button[disabled] {
    cursor: not-allowed;
    opacity: 0.75;
}

.report-form [hidden] {
    display: none !important;
}

/* Aviso de privacidade */
.report-privacy {
    color: var(--report-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.report-privacy a {
    color: var(--report-link);
}

/* Mobile-first: o reCAPTCHA v2 tem 304px; em telas muito estreitas, reduz sem cortar. */
@media (max-width: 360px) {
    .report-form .g-recaptcha {
        transform: scale(0.88);
        transform-origin: 0 0;
    }
}