/* =============================================================
   style.css — SaaS Imobiliário — Visual identity imobiliar.com.br
   Cores: #2940D6 (azul primário), #1f32aa (hover), #595959 (texto)
   ============================================================= */

/* --- Reset e base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #f4f6ff;
    background-attachment: fixed;
    min-height: 100vh;
    color: #595959;
    line-height: 1.6;
    padding: 2rem 1rem;
}

/* Fundo gradiente usado apenas na tela de login do painel admin */
.admin-login-bg {
    background: linear-gradient(160deg, #ffffff 0%, #dde2ff 50%, #2940d6 100%) !important;
    background-attachment: fixed !important;
}

/* --- Logo SVG inline --- */
.logo-imobiliar {
    display: block;
    margin: 0 auto 1.75rem;
    width: 176px;
    height: 43px;
}

/* --- Containers --- */
.container      { max-width: 640px;  margin: 0 auto; }
.container-wide { max-width: 1120px; margin: 0 auto; }

/* --- Card --- */
.card {
    background: #fff;
    border-radius: 12px;
    padding: 2.25rem 2.5rem;
    box-shadow: 0 4px 24px rgba(41,64,214,.15);
}

.card h1 {
    font-size: 1.45rem;
    color: #2940d6;
    margin-bottom: .25rem;
    font-weight: 700;
}

.subtitulo {
    color: #888;
    margin-bottom: 1.75rem;
    font-size: .95rem;
}

/* --- Formulário --- */
fieldset {
    border: 1px solid #e2e6ff;
    border-radius: 8px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
}

legend {
    font-weight: 600;
    font-size: .875rem;
    color: #2940d6;
    padding: 0 .4rem;
}

.campo {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.campo label {
    font-size: .875rem;
    font-weight: 500;
    color: #595959;
}

.campo small {
    font-size: .78rem;
    color: #a0aec0;
    display: block;
}

.campo input {
    border: 1px solid #c7ceff;
    border-radius: 6px;
    padding: .6rem .8rem;
    font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    color: #595959;
}

.campo input:focus {
    outline: none;
    border-color: #2940d6;
    box-shadow: 0 0 0 3px rgba(41,64,214,.15);
}

.obrig { color: #e53e3e; }

/* --- Botões --- */

/* Classe oficial do site imobiliar.com.br (usado com Bootstrap) */
.btn-inetsoft {
    background-color: #2940d6 !important;
    color: white !important;
    text-align: left;
}

.btn-inetsoft:hover {
    background-color: #1f32aa !important;
}

.btn-principal {
    width: 100%;
    background: #2940d6;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: .75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: .75rem;
    transition: background .15s;
    letter-spacing: .01em;
}

.btn-principal:hover { background: #1f32aa; }

.btn-log {
    font-size: .78rem;
    color: #2940d6;
    text-decoration: none;
    border: 1px solid #c7ceff;
    border-radius: 4px;
    padding: .2rem .5rem;
    white-space: nowrap;
    transition: background .15s;
}

.btn-log:hover { background: #eef0ff; }

.btn-logout {
    font-size: .875rem;
    color: #fff;
    background: rgba(255,255,255,.15);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 5px;
    padding: .35rem .85rem;
    transition: background .15s;
}

.btn-logout:hover { background: rgba(255,255,255,.25); }

.btn-voltar {
    font-size: .875rem;
    color: #2940d6;
    text-decoration: none;
    border: 1px solid #c7ceff;
    border-radius: 5px;
    padding: .35rem .75rem;
    transition: background .15s;
}

.btn-voltar:hover { background: #eef0ff; }

/* --- Alertas --- */
.alert {
    border-radius: 7px;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
}

.alert-erro    { background: #fff5f5; border-left: 4px solid #e53e3e; color: #c53030; }
.alert-sucesso { background: #f0fff4; border-left: 4px solid #38a169; color: #276749; }
.alert-info    { background: #eef0ff; border-left: 4px solid #2940d6; color: #1f32aa; }

/* --- Admin header --- */
.admin-header {
    background: #2940d6;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(41,64,214,.25);
}

.admin-header h1 {
    font-size: 1.25rem;
    color: #fff;
    font-weight: 700;
}

.admin-header h1 small {
    font-size: .85rem;
    color: rgba(255,255,255,.75);
    font-weight: 400;
    display: block;
    margin-top: .15rem;
}

/* Logo branca no header admin */
.admin-header .logo-header {
    height: 32px;
    filter: brightness(0) invert(1);
    margin-right: 1rem;
}

.admin-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* --- Dashboard de totais --- */
.dashboard {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .85rem 1.25rem;
    border-radius: 10px;
    text-decoration: none;
    min-width: 88px;
    border: 2px solid transparent;
    transition: box-shadow .15s, transform .1s;
}

.dashboard-card:hover {
    box-shadow: 0 4px 12px rgba(41,64,214,.18);
    transform: translateY(-1px);
}

.dashboard-num   { font-size: 1.7rem; font-weight: 700; }
.dashboard-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.dashboard-ativo       { background: #f0fff4; color: #276749; border-color: #9ae6b4; }
.dashboard-pendente    { background: #fffbeb; color: #975a16; border-color: #fbd38d; }
.dashboard-processando { background: #eef0ff; color: #2940d6; border-color: #a0aaff; }
.dashboard-erro        { background: #fff5f5; color: #c53030; border-color: #feb2b2; }
.dashboard-todos       { background: #f7fafc; color: #595959; border-color: #e2e8f0; }

/* --- Filtro ativo --- */
.filtro-ativo {
    font-size: .875rem;
    color: #888;
    margin-bottom: .75rem;
}

.filtro-ativo a { color: #2940d6; text-decoration: none; margin-left: .4rem; }

/* --- Tabela de clientes --- */
.tabela-wrapper {
    overflow-x: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(41,64,214,.08);
}

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

.tabela-clientes th {
    background: #f4f6ff;
    padding: .5rem .4rem;
    text-align: left;
    font-weight: 600;
    color: #2940d6;
    border-bottom: 2px solid #e2e6ff;
    white-space: nowrap;
}

.tabela-clientes td {
    padding: .4rem .4rem;
    border-bottom: 1px solid #f0f2ff;
    vertical-align: middle;
    color: #595959;
}

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

.tabela-clientes code {
    background: #f0f2ff;
    color: #2940d6;
    padding: .1rem .4rem;
    border-radius: 4px;
    font-size: .78rem;
}

.td-nowrap { white-space: nowrap; }
.td-nome   { min-width: 10rem; }

/* Detalhes e Log empilhados para economizar largura */
.td-acoes { width: 1%; }
.td-acoes .btn-log { display: block; width: 100%; text-align: center; margin: .1rem 0; padding: .1rem .4rem; }

.vazio {
    text-align: center;
    padding: 2.5rem !important;
    color: #a0aec0;
}

.td-armazenamento {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: .8rem;
    white-space: nowrap;
    color: #595959;
}

/* --- Badges de status --- */
.badge {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge-ativo       { background: #c6f6d5; color: #22543d; }
.badge-pendente    { background: #fefcbf; color: #744210; }
.badge-processando { background: #c7ceff; color: #1f32aa; }
.badge-erro        { background: #fed7d7; color: #742a2a; }
.badge-desativado  { background: #fed7d7; color: #822727; }
.badge-completo    { background: #c6f6d5; color: #22543d; }
.badge-consulta    { background: #fefcbf; color: #744210; }

/* --- Operações de serviço/modo consulta: Toggle Switch (Bootstrap .form-switch) ---
   Ligado/desligado na cor do estado; rótulo com texto escuro sobre fundo claro. */
.op-switch { margin: 0; }

.sw {
    --on-fundo: #c6f6d5;  --on-cor: #38a169;  --on-texto: #22543d;
    --off-fundo: #fed7d7; --off-cor: #e53e3e; --off-texto: #822727;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 0;
    margin: 0;
    padding-left: 0;          /* .form-switch reserva 2.5em para o input flutuante */
    white-space: nowrap;
}
.sw-on-verde     { --on-fundo: #c6f6d5;  --on-cor: #38a169;  --on-texto: #22543d; }
.sw-on-amarelo   { --on-fundo: #fefcbf;  --on-cor: #d69e2e;  --on-texto: #744210; }
.sw-off-verde    { --off-fundo: #c6f6d5; --off-cor: #38a169; --off-texto: #22543d; }
.sw-off-vermelho { --off-fundo: #fed7d7; --off-cor: #e53e3e; --off-texto: #822727; }
.sw-off-amarelo  { --off-fundo: #fefcbf; --off-cor: #d69e2e; --off-texto: #744210; }

/* Bolinha branca em ambos os estados; o trilho é que leva a cor */
.sw .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    float: none;
    flex: none;
    width: 2.4em;
    height: 1.3em;
    margin: 0;
    cursor: pointer;
    background-color: var(--off-cor);
    border-color: var(--off-cor);
}
.sw .form-check-input:checked { background-color: var(--on-cor); border-color: var(--on-cor); }
.sw .form-check-input:focus   { box-shadow: 0 0 0 .2rem rgba(41,64,214,.25); border-color: #2940d6; }
.sw .form-check-input:disabled { cursor: not-allowed; }
.sw .form-check-input:disabled ~ .form-check-label { cursor: not-allowed; opacity: .6; }

.sw .form-check-label { cursor: pointer; margin: 0; }
.sw-txt {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .1rem .45rem;
    border-radius: 999px;
}
.sw-txt-on  { display: none; background: var(--on-fundo);  color: var(--on-texto); }
.sw-txt-off { background: var(--off-fundo); color: var(--off-texto); }
.sw .form-check-input:checked ~ .form-check-label .sw-txt-on  { display: inline; }
.sw .form-check-input:checked ~ .form-check-label .sw-txt-off { display: none; }

.op-andamento, .op-erro { font-size: .72rem; margin-top: .15rem; }
.op-andamento { color: #1f32aa; }
.op-erro      { color: #c53030; cursor: help; }

/* --- Pagamento / badge futuro --- */
.badge-futuro {
    font-size: .7rem;
    background: #e9d8fd;
    color: #553c9a;
    border-radius: 999px;
    padding: .1rem .45rem;
    font-weight: 600;
    vertical-align: middle;
    margin-left: .4rem;
}

.info-pagamento {
    font-size: .875rem;
    color: #a0aec0;
    margin-top: .75rem;
    font-style: italic;
}

.hidden { display: none; }

/* --- Login card --- */
.card-login { max-width: 400px; margin: 3rem auto; }

/* --- Info cliente (log viewer) --- */
.info-cliente {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    padding: .75rem 1rem;
    box-shadow: 0 1px 4px rgba(41,64,214,.08);
}

/* --- Log viewer --- */
.log-seletor {
    background: #f4f6ff;
    border-radius: 7px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    border: 1px solid #e2e6ff;
}

.log-seletor ul { list-style: none; margin-top: .4rem; }
.log-seletor li { margin: .2rem 0; }
.log-seletor a  { color: #2940d6; text-decoration: none; }
.log-seletor a.ativo { font-weight: 700; color: #1a202c; }

.log-arquivo-nome {
    font-size: .78rem;
    color: #a0aec0;
    margin-bottom: .4rem;
}

.log-conteudo {
    background: #1a1f3c;
    color: #a0b0ff;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: .82rem;
    line-height: 1.6;
    padding: 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 200px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 2px 12px rgba(41,64,214,.2);
}

/* --- Rodapé do formulário --- */
.rodape-form {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .875rem;
    color: #888;
}

.rodape-form a { color: #2940d6; text-decoration: none; }
.rodape-form a:hover { color: #1f32aa; text-decoration: underline; }

/* --- Footer da página --- */
.page-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: .8rem;
    color: rgba(255,255,255,.6);
}

/* --- Uso do disco (faixa acima da tabela) --- */
.disco {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .45rem .8rem;
    margin-bottom: .75rem;
    border-radius: 8px;
    border: 1px solid;
    font-size: .8rem;
}
.disco-rotulo { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.disco-barra {
    flex: 0 1 220px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
    overflow: hidden;
}
.disco-barra > span { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.disco-ok      { background: #f0fff4; border-color: #9ae6b4; color: #22543d; }
.disco-alto    { background: #fffff0; border-color: #f6e05e; color: #744210; }
.disco-critico { background: #fff5f5; border-color: #feb2b2; color: #822727; }

/* --- Backup --- */
.badge-nunca { background: #edf2f7; color: #4a5568; }
.td-backup { white-space: nowrap; cursor: help; }
.td-backup-quando { font-size: .7rem; color: #8a94a3; margin-top: .1rem; }
