/*
 * Assinatura das empresas: telas de acesso (cadastro, senha, aviso) e
 * telas do painel (Minha assinatura, Pix, Assinaturas do admin, faixa de
 * aviso no topo). Carregado depois do painel.css, usa as cores --p-*.
 */

/* ------------------------------------------------------------------
 * Telas de acesso (mesmo molde do login)
 * ---------------------------------------------------------------- */
.sf-login-caixa.is-larga { max-width: 460px; }
.sf-login-campo label small { font-weight: 400; color: var(--p-suave); }
.sf-login-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sf-login-entrada select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--p-borda-forte);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b6577' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--p-texto);
    font: 16px var(--p-fonte);
    -webkit-appearance: none;
    appearance: none;
}
.sf-login-entrada select:hover { border-color: #c4bfcd; }
.sf-login-entrada select:focus { border-color: var(--p-roxo); outline: none; box-shadow: var(--p-foco); }
.sf-login-entrada select:disabled { background-color: var(--p-fundo); color: var(--p-fraco); }
.sf-login-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--p-roxo); font-size: 14px; font-weight: 600; text-decoration: none; }
.sf-login-link:hover { text-decoration: underline; }
.sf-login-nota { margin: 4px 0 18px; font-size: 13px; line-height: 1.5; color: var(--p-suave); }
.sf-login-aceite { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--p-texto-2); cursor: pointer; }
.sf-login-aceite input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--p-roxo); cursor: pointer; }
.sf-login-aceite a { color: var(--p-roxo); font-weight: 600; }
/* Armadilha para robôs do cadastro: invisível (recortada), sem sumir do formulário */
.sf-login-armadilha { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.sf-login-recado { text-align: center; }
.sf-login-recado > p { margin-bottom: 22px; }
.sf-login-recado .sf-login-botao { text-decoration: none; }
.sf-login-recado-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--p-azul-claro); color: var(--p-azul); }
.sf-login-recado-icone.is-ok { background: var(--p-verde-claro); color: var(--p-verde); }
.sf-login-recado-icone.is-erro { background: var(--p-vermelho-claro); color: var(--p-vermelho); }
.sf-login-recado-icone svg { width: 28px; height: 28px; }

@media (max-width: 379px) {
    .sf-login-linha { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * Faixa de aviso no topo do conteúdo (painel da empresa)
 * ---------------------------------------------------------------- */
.sf-aviso-assinatura {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 10px 12px 10px 16px;
    border: 1px solid #f1d7a8;
    border-radius: var(--p-raio);
    background: var(--p-amarelo-claro);
    color: #6b3f00;
    font-size: 14px;
}
.sf-aviso-assinatura.is-info { border-color: var(--p-roxo-medio); background: var(--p-roxo-claro); color: var(--p-roxo-escuro); }
.sf-aviso-assinatura.is-perigo { border-color: #f3c4c4; background: var(--p-vermelho-claro); color: #8f1d1d; }
.sf-aviso-assinatura > .fa { flex: 0 0 auto; font-size: 18px; }
.sf-aviso-assinatura p { flex: 1 1 auto; margin: 0; }
.sf-aviso-assinatura .btn { flex: 0 0 auto; }

/* ------------------------------------------------------------------
 * Minha assinatura (empresa)
 * ---------------------------------------------------------------- */
.sf-boas-vindas { border-left: 4px solid var(--p-verde); }
.sf-boas-vindas h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.sf-boas-vindas h2 .fa { color: var(--p-verde); }
.sf-passos { margin: 10px 0 0; padding-left: 20px; }
.sf-passos li { margin-bottom: 6px; }

.sf-assinatura-situacao { border-top: 4px solid var(--p-borda-forte); }
.sf-assinatura-situacao.is-success { border-top-color: var(--p-verde); }
.sf-assinatura-situacao.is-info { border-top-color: var(--p-roxo); }
.sf-assinatura-situacao.is-warning { border-top-color: var(--p-laranja); }
.sf-assinatura-situacao.is-danger { border-top-color: var(--p-vermelho); }
.sf-assinatura-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sf-assinatura-topo h2 { margin: 10px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.sf-assinatura-topo p { max-width: 620px; margin: 0; color: var(--p-texto-2); }
.sf-assinatura-preco { flex: 0 0 auto; text-align: right; }
.sf-assinatura-preco b { display: block; font-size: 26px; font-weight: 750; line-height: 1.1; color: var(--p-roxo); }
.sf-assinatura-preco small { color: var(--p-suave); }
.sf-assinatura-pagar { margin: 20px 0 0; }
.sf-assinatura-pagar fieldset { margin: 0 0 16px; padding: 0; border: 0; }
.sf-assinatura-pagar legend { margin: 0 0 10px; padding: 0; border: 0; font-size: 15px; font-weight: 600; color: var(--p-texto); }
.sf-periodos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sf-periodo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--p-borda-forte);
    border-radius: var(--p-raio);
    background: #fff;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.sf-periodo:hover { border-color: var(--p-roxo-medio); }
.sf-periodo input { position: absolute; top: 14px; left: 14px; width: 18px; height: 18px; margin: 0; accent-color: var(--p-roxo); }
.sf-periodo:has(input:checked) { border-color: var(--p-roxo); background: var(--p-roxo-claro); }
.sf-periodo:has(input:focus-visible) { box-shadow: var(--p-foco); }
.sf-periodo-meses { font-weight: 700; color: var(--p-texto); }
.sf-periodo-total { font-size: 18px; font-weight: 750; color: var(--p-roxo); }
.sf-periodo small { color: var(--p-suave); }
.sf-pix-periodo { margin: 0 0 6px; font-weight: 600; color: var(--p-roxo); }
.sf-assinatura-termos { margin: -8px 0 16px; font-size: 13px; }
.sf-assinatura-termos a { color: var(--p-suave); }
.sf-assinatura-cancelar { margin: 8px 0 24px; }
.sf-assinatura-cancelar summary { display: inline-block; color: var(--p-suave); cursor: pointer; }
.sf-assinatura-cancelar form { max-width: 520px; margin-top: 12px; }

.sf-pix { max-width: 560px; }
.sf-pix h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.sf-pix-qr { display: block; width: 220px; height: 220px; margin: 16px 0; border: 1px solid var(--p-borda); border-radius: var(--p-raio); }
.sf-pix-status { display: flex; align-items: center; gap: 10px; color: var(--p-suave); }
.sf-pix-status .sf-girando { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--p-roxo-medio); border-top-color: var(--p-roxo); border-radius: 50%; animation: sf-girar .7s linear infinite; }

/* ------------------------------------------------------------------
 * Termos de uso no painel (admin_empresa/termos)
 * ---------------------------------------------------------------- */
.sf-termos-intro { margin: 6px 0 0; }
.sf-termos-caixa { max-height: 60vh; max-height: 60dvh; overflow-y: auto; padding: 4px 16px 4px 4px; overscroll-behavior: contain; }
.sf-termos-caixa.is-aberta { max-height: none; }
.sf-termos-caixa:focus-visible { outline: 2px solid var(--p-roxo); outline-offset: 2px; }
.sf-termos { max-width: 760px; line-height: 1.6; }
.sf-termos h2 { margin: 22px 0 6px; font-size: 17px; font-weight: 700; }
.sf-termos ul { padding-left: 20px; }
.sf-termos li { margin-bottom: 6px; }
.sf-termos-versao { color: var(--p-suave); }
.sf-termos-aceite label { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-weight: 600; cursor: pointer; }
.sf-termos-aceite input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p-roxo); }

/* ------------------------------------------------------------------
 * Assinaturas (admin)
 * ---------------------------------------------------------------- */
.sf-filtro-assinaturas { display: flex; flex-wrap: wrap; gap: 4px; }
.sf-filtro-assinaturas .badge { margin-left: 2px; }
.sf-assinatura-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* clearfix do Bootstrap (.box-body, .box-footer) viraria item do flex */
.sf-assinatura-cabecalho::before, .sf-assinatura-cabecalho::after,
.box-footer.sf-barra-acoes::before, .box-footer.sf-barra-acoes::after { display: none; }
.sf-assinatura-cabecalho h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.sf-assinatura-cabecalho p { margin: 0 0 6px; }
.sf-assinatura-dados { display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 0; }
.sf-assinatura-dados dt { font-weight: 500; color: var(--p-suave); }
.sf-assinatura-dados dd { margin: 0; font-weight: 600; text-align: right; }
.sf-acao-assinatura + .sf-acao-assinatura { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--p-borda); }
.sf-atalhos-venc { margin-top: 6px; }

@media (max-width: 767px) {
    .sf-aviso-assinatura { flex-wrap: wrap; margin: 10px 10px 0; }
    .sf-assinatura-topo { flex-direction: column; }
    .sf-assinatura-preco { text-align: left; }
    .sf-assinatura-pagar .btn { flex: 1 1 100%; }
    .box-header .sf-filtro-assinaturas { position: static; margin-top: 8px; }
}