/* =========================================================================
   TIChip Connect — folha de estilos
   Escrita mobile-first: as regras base valem para telas pequenas; os
   breakpoints (min-width) apenas ampliam espaçamentos/tipografia em
   telas maiores. Cores da marca TIChip: azul-marinho profundo + acento
   ciano (extraídas do site institucional, tichip.com.br).
   ========================================================================= */

:root {
    --tichip-azul-950: #04101c;
    --tichip-azul-900: #061827;
    --tichip-azul-800: #0c2740;
    --tichip-azul-700: #123457;
    --tichip-ciano-500: #17b6c4;
    --tichip-ciano-400: #3fd1de;
    --tichip-verde-500: #22c55e;
    --tichip-verde-700: #12793e;
    --tichip-vermelho-500: #ef4444;
    --tichip-vermelho-700: #b42318;
    --tichip-fundo: #eef3f7;
    --tichip-texto: #10202f;
    --tichip-texto-suave: #51697c;
    --tichip-branco: #ffffff;
    --sombra-cartao: 0 20px 45px -22px rgba(6, 24, 39, 0.35);
    --sombra-cartao-hover: 0 28px 55px -20px rgba(6, 24, 39, 0.42);
    --raio: 16px;
    --raio-pequeno: 10px;
    --transicao: 0.18s ease;
}

/* ---------- reset mínimo ---------- */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(23, 182, 196, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(6, 24, 39, 0.06), transparent 55%),
        var(--tichip-fundo);
    color: var(--tichip-texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 18px;
}

/* ---------- topo ---------- */

.topo {
    background: linear-gradient(135deg, var(--tichip-azul-950), var(--tichip-azul-800));
    color: var(--tichip-branco);
    padding: 16px 0;
}

.topo__conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.marca {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
}

.marca__ti {
    color: var(--tichip-branco);
}

.marca__connect {
    color: var(--tichip-ciano-400);
}

.topo__selo {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(63, 209, 222, 0.4);
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--tichip-ciano-400);
    white-space: nowrap;
}

.topo__acoes {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topo__usuario {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- layout principal ---------- */

.principal {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 14px 48px;
}

.principal--estreito .cartao {
    max-width: 440px;
}

.cartao {
    background: var(--tichip-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: 26px 20px;
    width: 100%;
    max-width: 520px;
    transition: box-shadow var(--transicao);
}

.cartao--painel {
    max-width: 620px;
}

h1 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    color: var(--tichip-azul-900);
    letter-spacing: -0.2px;
}

.subtitulo {
    margin: 0 0 22px;
    color: var(--tichip-texto-suave);
    line-height: 1.55;
    font-size: 0.95rem;
}

/* ---------- formulários ---------- */

.form-codigo, .form-admin, .form-gerar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tichip-azul-900);
    margin-top: 6px;
}

input[type="text"],
input[type="password"] {
    padding: 14px 16px;
    border: 1.5px solid #d6e0e8;
    border-radius: var(--raio-pequeno);
    font-size: 16px; /* >=16px evita zoom automático no iOS */
    color: var(--tichip-texto);
    background: #fbfdfe;
    transition: border-color var(--transicao), box-shadow var(--transicao);
    min-height: 48px; /* alvo de toque confortável */
    width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--tichip-ciano-500);
    box-shadow: 0 0 0 3px rgba(23, 182, 196, 0.18);
}

.input-codigo {
    text-align: center;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 10px;
    text-indent: 10px; /* compensa o letter-spacing para centralizar melhor */
}

/* ---------- botões ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: var(--raio-pequeno);
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    min-height: 48px;
    transition: transform 0.1s ease, box-shadow var(--transicao), opacity var(--transicao), background var(--transicao);
}

.botao:active {
    transform: translateY(1px);
}

.botao:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.botao--primario {
    background: linear-gradient(135deg, var(--tichip-ciano-500), var(--tichip-azul-700));
    color: var(--tichip-branco);
    box-shadow: 0 10px 24px -10px rgba(23, 182, 196, 0.55);
}

.botao--primario:hover {
    opacity: 0.95;
}

.botao--bloco {
    width: 100%;
    margin-top: 4px;
}

.botao--fantasma {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: var(--tichip-branco);
}

.pagina-admin .cartao .botao--fantasma,
.pagina-cliente .cartao .botao--fantasma {
    border-color: #cfd9e0;
    color: var(--tichip-azul-900);
}

.botao--pequeno {
    padding: 8px 16px;
    min-height: 38px;
    font-size: 0.83rem;
}

.link-secundario {
    display: inline-block;
    margin-top: 16px;
    color: var(--tichip-texto-suave);
    text-decoration: none;
    font-size: 0.9rem;
}

.link-secundario:hover {
    color: var(--tichip-ciano-500);
    text-decoration: underline;
}

/* ---------- alertas / flash ---------- */

.alerta {
    padding: 12px 16px;
    border-radius: var(--raio-pequeno);
    font-size: 0.9rem;
    margin-bottom: 18px;
    line-height: 1.45;
}

.alerta--erro {
    background: #fdecec;
    color: var(--tichip-vermelho-700);
    border: 1px solid #f5c2c0;
}

.alerta--sucesso {
    background: #e9f9ee;
    color: var(--tichip-verde-700);
    border: 1px solid #b7ecc7;
}

.bloco-sucesso {
    background: #f0fbf5;
    border: 1px solid #bdeccd;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.bloco-sucesso__titulo {
    font-weight: 700;
    color: var(--tichip-verde-700);
    margin: 0 0 8px;
}

/* ---------- passos (cliente) ---------- */

.passos {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e7edf1;
}

.passos__titulo {
    font-weight: 700;
    color: var(--tichip-azul-900);
    margin-bottom: 10px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.passos ol {
    margin: 0;
    padding-left: 20px;
    color: var(--tichip-texto-suave);
    line-height: 1.7;
    font-size: 0.92rem;
}

/* ---------- painel admin ---------- */

.painel-codigo {
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
    margin-bottom: 20px;
}

.painel-codigo--ativo {
    background: #eefaf9;
    border: 1px solid #bfe9e6;
}

.painel-codigo--inativo {
    background: #f5f7f9;
    border: 1px dashed #cfd9e0;
}

.painel-codigo__rotulo {
    margin: 0 0 6px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--tichip-texto-suave);
    font-weight: 700;
}

.painel-codigo__valor {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 8px;
    color: var(--tichip-azul-900);
    margin: 4px 0 14px;
    word-break: break-all;
}

.painel-codigo__contador {
    margin-top: 12px;
    color: var(--tichip-texto-suave);
    font-size: 0.88rem;
}

.painel-codigo__ajuda {
    color: var(--tichip-texto-suave);
    margin: 0;
}

.contagem {
    font-weight: 700;
    color: var(--tichip-azul-900);
    font-variant-numeric: tabular-nums;
}

.contagem.contagem--alerta {
    color: var(--tichip-vermelho-500);
}

.rodape-info {
    margin-top: 18px;
    font-size: 0.8rem;
    color: var(--tichip-texto-suave);
    text-align: center;
    line-height: 1.6;
}

.rodape-info__versao,
.rodape__versao {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: #93a5b3;
    letter-spacing: 0.3px;
}

/* ---------- rodapé geral ---------- */

.rodape {
    padding: 20px 0 26px;
    text-align: center;
    color: var(--tichip-texto-suave);
    font-size: 0.82rem;
}

.rodape p {
    margin: 2px 0;
}

/* ---------- breakpoints (mobile-first: só ampliam a partir daqui) ---------- */

@media (min-width: 480px) {
    .cartao {
        padding: 34px 32px;
    }

    h1 {
        font-size: 1.6rem;
    }

    .subtitulo {
        font-size: 1rem;
    }

    .input-codigo {
        font-size: 1.9rem;
        letter-spacing: 14px;
        text-indent: 14px;
    }

    .painel-codigo__valor {
        font-size: 2.4rem;
        letter-spacing: 10px;
    }
}

@media (min-width: 768px) {
    .principal {
        padding: 48px 20px;
    }

    .marca {
        font-size: 1.35rem;
    }

    .cartao:hover {
        box-shadow: var(--sombra-cartao-hover);
    }
}

/* ---------- utilidades ---------- */

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- passos pós-download (tela de sucesso do cliente) ---------- */

.passos-pos-download {
    text-align: left;
    margin: 18px 0;
    padding-left: 20px;
    color: var(--tichip-texto);
    line-height: 1.7;
    font-size: 0.92rem;
}

.rodape__link {
    color: var(--tichip-texto-suave);
    text-decoration: none;
}

.rodape__link:hover {
    color: var(--tichip-ciano-500);
    text-decoration: underline;
}

/* ---------- páginas de instalação (install.php) ---------- */

.tabela-checagem {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 22px;
    font-size: 0.88rem;
}

.tabela-checagem th,
.tabela-checagem td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid #e7edf1;
}

.status-ok { color: var(--tichip-verde-700); font-weight: 700; }
.status-erro { color: var(--tichip-vermelho-700); font-weight: 700; }
.status-alerta { color: #92610b; font-weight: 700; }

.caixa-chave {
    background: var(--tichip-azul-900);
    color: var(--tichip-branco);
    border-radius: var(--raio-pequeno);
    padding: 18px;
    text-align: center;
    margin: 18px 0;
}

.caixa-chave__valor {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--tichip-ciano-400);
    word-break: break-all;
    margin: 8px 0;
}