/* =========================================================
   Chico Filiados — Estilos Frontend
   Formulário de cadastro + Painel do filiado
   ========================================================= */

/* ---------------------------------------------------------
   Variáveis de cor
   --------------------------------------------------------- */
:root {
    --chico-azul:        #1a3a5c;
    --chico-azul-medio:  #2e5e8e;
    --chico-azul-claro:  #2271b1;
    --chico-verde:       #46b450;
    --chico-amarelo:     #f0ad00;
    --chico-vermelho:    #dc3232;
    --chico-cinza:       #666666;
    --chico-cinza-claro: #f4f4f4;
    --chico-borda:       #e0e0e0;
    --chico-branco:      #ffffff;
    --chico-raio:        8px;
    --chico-sombra:      0 2px 12px rgba(0,0,0,0.08);
}

/* ---------------------------------------------------------
   Avisos e mensagens
   --------------------------------------------------------- */
.chico-aviso {
    padding: 14px 18px;
    border-radius: var(--chico-raio);
    margin: 16px 0;
    font-size: 15px;
    line-height: 1.6;
}

.chico-aviso--info {
    background: #e8f0fe;
    border-left: 4px solid var(--chico-azul-claro);
    color: #1a3a5c;
}

.chico-aviso--sucesso {
    background: #edfaee;
    border-left: 4px solid var(--chico-verde);
    color: #1e5c22;
}

.chico-aviso--erro {
    background: #fde8e8;
    border-left: 4px solid var(--chico-vermelho);
    color: #7a1a1a;
}

/* ---------------------------------------------------------
   Formulário geral
   --------------------------------------------------------- */
.chico-form {
    max-width: 680px;
    margin: 0 auto;
}

.chico-form-grupo {
    margin-bottom: 20px;
}

.chico-form-grupo label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--chico-azul);
    margin-bottom: 6px;
}

.chico-form-grupo input[type="text"],
.chico-form-grupo input[type="email"],
.chico-form-grupo input[type="tel"],
.chico-form-grupo input[type="number"],
.chico-form-grupo input[type="url"],
.chico-form-grupo select,
.chico-form-grupo textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--chico-borda);
    border-radius: var(--chico-raio);
    font-size: 15px;
    color: #333;
    background: var(--chico-branco);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.chico-form-grupo input:focus,
.chico-form-grupo select:focus,
.chico-form-grupo textarea:focus {
    outline: none;
    border-color: var(--chico-azul-claro);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.chico-form-grupo textarea {
    resize: vertical;
    min-height: 80px;
}

.chico-form-linha {
    display: flex;
    gap: 16px;
}

.chico-form-linha .chico-form-grupo {
    flex: 1;
}

.chico-form-grupo--grande { flex: 2 !important; }
.chico-form-grupo--pequeno { flex: 1 !important; }

/* Checkbox de termos */
.chico-form-grupo--termos {
    margin-bottom: 24px;
}

.chico-checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal !important;
    font-size: 14px;
    color: #444;
}

.chico-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--chico-azul-claro);
}

.chico-checkbox-label a {
    color: var(--chico-azul-claro);
    text-decoration: underline;
}

/* Rótulos auxiliares */
.chico-obrigatorio {
    color: var(--chico-vermelho);
    margin-left: 2px;
}

.chico-opcional {
    color: var(--chico-cinza);
    font-weight: normal;
    font-size: 12px;
}

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.chico-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--chico-raio);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    font-family: inherit;
    text-decoration: none;
}

.chico-btn:active {
    transform: scale(0.98);
}

.chico-btn--primario {
    background: var(--chico-azul);
    color: var(--chico-branco);
}

.chico-btn--primario:hover {
    background: var(--chico-azul-medio);
    box-shadow: 0 4px 12px rgba(26, 58, 92, 0.25);
}

.chico-btn--secundario {
    background: var(--chico-cinza-claro);
    color: var(--chico-azul);
    border: 1.5px solid var(--chico-borda);
}

.chico-btn--secundario:hover {
    background: #e8e8e8;
}

.chico-btn:disabled,
.chico-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ---------------------------------------------------------
   Página de Login personalizada
   --------------------------------------------------------- */
.chico-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 30px 16px;
}

.chico-login-box {
    background: var(--chico-branco);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    border: 1px solid var(--chico-borda);
    padding: 36px 40px;
    width: 100%;
    max-width: 420px;
}

.chico-login-logo {
    text-align: center;
    margin-bottom: 24px;
}

.chico-login-logo img {
    max-height: 60px;
    width: auto;
}

.chico-login-logo h2 {
    color: var(--chico-azul);
    margin: 0 0 4px;
    font-size: 24px;
}

.chico-login-subtitulo {
    color: var(--chico-cinza);
    font-size: 13px;
    margin: 0;
}

.chico-login-titulo {
    color: var(--chico-azul);
    font-size: 18px;
    text-align: center;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--chico-borda);
}

.chico-login-desc {
    color: var(--chico-cinza);
    font-size: 14px;
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.6;
}

/* Label com link "Esqueceu a senha?" alinhado à direita */
.chico-form-grupo label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chico-label-link {
    font-weight: normal;
    font-size: 12px;
    color: var(--chico-azul-claro);
    text-decoration: none;
}

.chico-label-link:hover {
    text-decoration: underline;
}

/* Campo de senha com botão olho */
.chico-input-senha {
    position: relative;
    display: flex;
    align-items: center;
}

.chico-input-senha input {
    width: 100%;
    padding-right: 44px !important;
}

.chico-toggle-senha {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.chico-toggle-senha:hover {
    opacity: 1;
}

.chico-login-rodape {
    text-align: center;
    font-size: 13px;
    color: var(--chico-cinza);
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--chico-borda);
}

.chico-login-rodape a {
    color: var(--chico-azul-claro);
    text-decoration: none;
    font-weight: 600;
}

.chico-login-rodape a:hover {
    text-decoration: underline;
}

.chico-login-link {
    color: var(--chico-azul-claro);
    text-decoration: none;
    font-size: 14px;
}

.chico-login-link:hover {
    text-decoration: underline;
}

@keyframes chicoShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-8px); }
    40%       { transform: translateX(8px); }
    60%       { transform: translateX(-5px); }
    80%       { transform: translateX(5px); }
}

.chico-shake {
    animation: chicoShake 0.4s ease;
}

@media (max-width: 480px) {
    .chico-login-box {
        padding: 24px 20px;
    }
}

/* ---------------------------------------------------------
   Formulário de cadastro
   --------------------------------------------------------- */
.chico-cadastro-wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 32px;
    background: var(--chico-branco);
    border-radius: 12px;
    box-shadow: var(--chico-sombra);
    border: 1px solid var(--chico-borda);
}

.chico-cadastro-intro {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--chico-borda);
}

.chico-cadastro-intro h2 {
    color: var(--chico-azul);
    margin: 0 0 8px;
    font-size: 22px;
}

.chico-cadastro-intro p {
    color: var(--chico-cinza);
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   Painel do filiado — wrapper geral
   --------------------------------------------------------- */
.chico-painel-wrap {
    max-width: 900px;
    margin: 0 auto;
}

/* Cabeçalho do painel */
.chico-painel-header {
    background: linear-gradient(135deg, var(--chico-azul) 0%, var(--chico-azul-medio) 100%);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: var(--chico-branco);
}

.chico-painel-header h2 {
    margin: 0 0 4px;
    font-size: 22px;
    color: var(--chico-branco);
}

.chico-painel-header p {
    margin: 0;
    opacity: 0.8;
    font-size: 14px;
}

/* ---------------------------------------------------------
   Cards de resumo
   --------------------------------------------------------- */
.chico-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.chico-card {
    background: var(--chico-branco);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--chico-sombra);
    border: 1px solid var(--chico-borda);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow 0.2s;
}

.chico-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.chico-card__icone {
    font-size: 28px;
    line-height: 1;
    padding-top: 2px;
}

.chico-card__conteudo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.chico-card__label {
    font-size: 12px;
    color: var(--chico-cinza);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chico-card__valor {
    font-size: 22px;
    font-weight: 700;
    color: var(--chico-azul);
    line-height: 1.2;
}

.chico-card__sub {
    font-size: 12px;
    color: var(--chico-cinza);
}

/* Card do cupom */
.chico-cupom-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chico-cupom-codigo {
    font-size: 18px;
    font-weight: 700;
    color: var(--chico-azul);
    letter-spacing: 2px;
    font-family: monospace;
}

.chico-btn-copiar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--chico-cinza-claro);
    border: 1px solid var(--chico-borda);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--chico-azul);
    font-weight: 600;
    transition: background 0.2s;
    font-family: inherit;
}

.chico-btn-copiar:hover {
    background: #e0e0e0;
}

.chico-btn-copiar--copiado {
    background: #edfaee;
    border-color: var(--chico-verde);
    color: var(--chico-verde);
}

/* ---------------------------------------------------------
   Abas de navegação
   --------------------------------------------------------- */
.chico-abas {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--chico-borda);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.chico-aba {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--chico-cinza);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    font-family: inherit;
    border-radius: 6px 6px 0 0;
}

.chico-aba:hover {
    color: var(--chico-azul);
    background: var(--chico-cinza-claro);
}

.chico-aba--ativa {
    color: var(--chico-azul);
    border-bottom-color: var(--chico-azul);
    background: transparent;
}

/* Conteúdo das abas */
.chico-aba-conteudo {
    display: none;
    animation: chicoFadeIn 0.2s ease;
}

.chico-aba-conteudo--ativa {
    display: block;
}

@keyframes chicoFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.chico-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.chico-tabela th {
    background: var(--chico-azul);
    color: var(--chico-branco);
    padding: 12px 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}

.chico-tabela td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--chico-borda);
    color: #333;
    vertical-align: middle;
}

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

.chico-tabela tbody tr:hover {
    background: #f8f9fa;
}

/* Badge de status */
.chico-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--chico-branco);
    white-space: nowrap;
}

/* Chave PIX */
.chico-chave-pix {
    font-family: monospace;
    font-size: 13px;
    background: var(--chico-cinza-claro);
    padding: 2px 6px;
    border-radius: 4px;
    color: #333;
}

/* ---------------------------------------------------------
   Estado vazio
   --------------------------------------------------------- */
.chico-vazio {
    text-align: center;
    padding: 48px 24px;
    color: var(--chico-cinza);
}

.chico-vazio span {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.chico-vazio p {
    font-size: 15px;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   Gerador de links
   --------------------------------------------------------- */
.chico-links-intro {
    margin-bottom: 20px;
    padding: 16px;
    background: #e8f0fe;
    border-radius: var(--chico-raio);
    font-size: 14px;
    color: var(--chico-azul);
}

.chico-links-intro p {
    margin: 0;
}

.chico-busca-produto {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.chico-busca-produto input {
    flex: 1;
    padding: 11px 14px;
    border: 1.5px solid var(--chico-borda);
    border-radius: var(--chico-raio);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.chico-busca-produto input:focus {
    outline: none;
    border-color: var(--chico-azul-claro);
    box-shadow: 0 0 0 3px rgba(34,113,177,0.15);
}

/* Grid de produtos */
.chico-produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.chico-produto-card {
    background: var(--chico-branco);
    border: 1.5px solid var(--chico-borda);
    border-radius: var(--chico-raio);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.chico-produto-card:hover {
    border-color: var(--chico-azul-claro);
    box-shadow: 0 4px 16px rgba(34,113,177,0.15);
    transform: translateY(-2px);
}

.chico-produto-card--selecionado {
    border-color: var(--chico-azul);
    box-shadow: 0 0 0 3px rgba(26,58,92,0.15);
}

.chico-produto-card__img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: var(--chico-cinza-claro);
    display: block;
}

.chico-produto-card__info {
    padding: 10px 12px;
}

.chico-produto-card__nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--chico-azul);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chico-produto-card__preco {
    font-size: 13px;
    color: var(--chico-cinza);
}

.chico-produto-card__btn {
    display: block;
    width: 100%;
    padding: 8px;
    background: var(--chico-azul);
    color: var(--chico-branco);
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    text-align: center;
}

.chico-produto-card__btn:hover {
    background: var(--chico-azul-medio);
}

/* Link gerado */
.chico-link-gerado {
    background: #edfaee;
    border: 1.5px solid var(--chico-verde);
    border-radius: var(--chico-raio);
    padding: 20px;
    margin-top: 16px;
}

.chico-link-gerado p {
    margin: 0 0 10px;
    font-size: 14px;
    color: #1e5c22;
}

.chico-link-caixa {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chico-link-caixa input {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid var(--chico-borda);
    border-radius: var(--chico-raio);
    font-size: 13px;
    font-family: monospace;
    color: #333;
    background: var(--chico-branco);
}

.chico-link-dica {
    margin: 12px 0 0 !important;
    font-size: 13px !important;
    color: #1e5c22 !important;
}

.chico-carregando {
    text-align: center;
    padding: 30px;
    color: var(--chico-cinza);
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------
   Preview de valor do resgate
   --------------------------------------------------------- */
.chico-preview-resgate {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.chico-preview-item {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px;
    border: 2px solid var(--chico-borda);
    border-radius: var(--chico-raio);
    text-align: center;
    background: var(--chico-cinza-claro);
    transition: border-color 0.2s, background 0.2s;
}

.chico-preview-item--ativo {
    border-color: var(--chico-azul);
    background: #e8f0fe;
}

.chico-preview-icone {
    font-size: 28px;
    margin-bottom: 6px;
}

.chico-preview-label {
    font-size: 12px;
    color: var(--chico-cinza);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.chico-preview-valor {
    font-size: 24px;
    font-weight: 700;
    color: var(--chico-azul);
}

.chico-preview-valor--bonus {
    color: var(--chico-verde);
}

.chico-preview-bonus {
    display: inline-block;
    margin-top: 6px;
    background: var(--chico-verde);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

/* ---------------------------------------------------------
   Solicitação de resgate
   --------------------------------------------------------- */
.chico-opcoes-resgate {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.chico-opcao-card {
    flex: 1;
    min-width: 180px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    border: 2px solid var(--chico-borda);
    border-radius: var(--chico-raio);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    font-weight: normal !important;
    background: var(--chico-branco);
}

.chico-opcao-card input[type="radio"] {
    display: none;
}

.chico-opcao-card:hover {
    border-color: var(--chico-azul-claro);
    background: #f0f5ff;
}

.chico-opcao-card--ativa {
    border-color: var(--chico-azul) !important;
    background: #e8f0fe !important;
}

.chico-opcao-icone {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.chico-opcao-titulo {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--chico-azul);
    margin-bottom: 4px;
}

.chico-opcao-desc {
    display: block;
    font-size: 12px;
    color: var(--chico-cinza);
}

.chico-opcao-aviso {
    display: block;
    font-size: 11px;
    color: var(--chico-amarelo);
    font-weight: 600;
    margin-top: 4px;
}

/* Input com prefixo R$ */
.chico-input-prefix {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--chico-borda);
    border-radius: var(--chico-raio);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chico-input-prefix:focus-within {
    border-color: var(--chico-azul-claro);
    box-shadow: 0 0 0 3px rgba(34,113,177,0.15);
}

.chico-input-prefix span {
    padding: 11px 14px;
    background: var(--chico-cinza-claro);
    color: var(--chico-cinza);
    font-weight: 600;
    border-right: 1.5px solid var(--chico-borda);
    font-size: 15px;
    white-space: nowrap;
}

.chico-input-prefix input {
    flex: 1;
    padding: 11px 14px;
    border: none !important;
    box-shadow: none !important;
    font-size: 15px;
    font-family: inherit;
    color: #333;
}

.chico-input-prefix input:focus {
    outline: none;
}

.chico-form-grupo small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--chico-cinza);
}

.chico-label-info {
    font-weight: normal;
    font-size: 12px;
    color: var(--chico-cinza);
    margin-left: 6px;
}

/* ---------------------------------------------------------
   Responsivo — tablets e celulares
   --------------------------------------------------------- */
@media (max-width: 680px) {
    .chico-cadastro-wrap {
        padding: 20px 16px;
    }

    .chico-form-linha {
        flex-direction: column;
        gap: 0;
    }

    .chico-cards {
        grid-template-columns: 1fr;
    }

    .chico-abas {
        gap: 2px;
    }

    .chico-aba {
        padding: 8px 12px;
        font-size: 13px;
    }

    .chico-opcoes-resgate {
        flex-direction: column;
    }

    .chico-link-caixa {
        flex-direction: column;
    }

    .chico-link-caixa input {
        width: 100%;
    }

    .chico-busca-produto {
        flex-direction: column;
    }

    .chico-produtos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chico-painel-header {
        padding: 18px;
    }
}

@media (max-width: 400px) {
    .chico-produtos-grid {
        grid-template-columns: 1fr;
    }
}