/* =====================================================================
   ClubeDeValor CMS — Painel Super Admin
   Conceito: "Sala de Redação / Selo de Imprensa"
   A plataforma gere jornais — o painel adota a linguagem de uma
   redação: mastro editorial, ficheiro de tenants como um arquivo de
   imprensa, e cada organização recebe um "selo" de estado como um
   carimbo de credencial de imprensa.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Cor ------------------------------------------------------------ */
    --tinta:        #14181F;
    --tinta-suave:  #1D232C;
    --papel:        #EDEAE1;
    --cartao:       #FBFAF6;
    --carvao:       #262A31;
    --carvao-suave: #5B6068;
    --linha:        #DCD7C9;
    --linha-forte:  #C6C0AF;

    --selo:         #A6382E;   /* carimbo / ação primária / perigo   */
    --selo-suave:   #F1E1DD;
    --verde:        #3F6B4F;   /* estado: ativo                      */
    --verde-suave:  #E1E9E1;
    --ambar:        #9B6A1F;   /* estado: suspenso                   */
    --ambar-suave:  #F0E6D2;
    --cinza-bloq:   #5B5F66;   /* estado: bloqueado                  */
    --cinza-suave:  #E7E5DE;

    --fonte-display: 'Fraunces', Georgia, serif;
    --fonte-corpo:   'IBM Plex Sans', -apple-system, sans-serif;
    --fonte-mono:    'IBM Plex Mono', 'Courier New', monospace;

    --raio: 3px;
    --sombra: 0 1px 2px rgba(20, 24, 31, 0.06), 0 8px 24px -12px rgba(20, 24, 31, 0.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    background: var(--papel);
    background-image:
        repeating-linear-gradient(0deg, rgba(20,24,31,0.018) 0px, rgba(20,24,31,0.018) 1px, transparent 1px, transparent 3px);
    color: var(--carvao);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--selo);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------
   ESTRUTURA
   --------------------------------------------------------------------- */

.sa-app {
    display: flex;
    min-height: 100vh;
}

/* Coluna lateral — mastro editorial ------------------------------------ */
.sa-mastro {
    width: 248px;
    flex-shrink: 0;
    background: var(--tinta);
    color: #E9E6DC;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sa-mastro__cabecalho {
    padding: 28px 24px 20px;
    border-bottom: 1px solid rgba(233, 230, 220, 0.12);
}

.sa-mastro__marca {
    font-family: var(--fonte-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #F5F3EB;
    margin: 0;
    line-height: 1.15;
}

.sa-mastro__sub {
    display: block;
    margin-top: 6px;
    font-family: var(--fonte-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8E93A0;
}

.sa-nav {
    flex: 1;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--raio);
    color: #C7C9D1;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sa-nav__item:hover {
    background: rgba(233, 230, 220, 0.06);
    color: #F5F3EB;
}

.sa-nav__item.esta-ativo {
    background: rgba(166, 56, 46, 0.16);
    border-left-color: var(--selo);
    color: #F5F3EB;
}

.sa-mastro__rodape {
    padding: 16px 24px 22px;
    border-top: 1px solid rgba(233, 230, 220, 0.12);
    font-family: var(--fonte-mono);
    font-size: 11px;
    color: #757A87;
}

.sa-mastro__sair {
    display: inline-block;
    margin-top: 8px;
    color: #C7C9D1;
    font-family: var(--fonte-corpo);
    font-size: 12.5px;
    text-decoration: none;
    border-bottom: 1px solid rgba(199, 201, 209, 0.35);
}
.sa-mastro__sair:hover { color: #F5F3EB; border-color: #F5F3EB; }

/* Conteúdo principal ---------------------------------------------------- */
.sa-conteudo {
    flex: 1;
    min-width: 0;
    padding: 36px 44px 60px;
}

.sa-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.sa-topo__eyebrow {
    font-family: var(--fonte-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--carvao-suave);
    margin: 0 0 6px;
}

.sa-topo__titulo {
    font-family: var(--fonte-display);
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    color: var(--tinta);
    letter-spacing: -0.01em;
}

.sa-topo__acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   BOTÕES
   --------------------------------------------------------------------- */

.sa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-corpo);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--raio);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.08s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.sa-btn:active { transform: translateY(1px); }

.sa-btn--primario {
    background: var(--selo);
    color: #FBF7F1;
    box-shadow: var(--sombra);
}
.sa-btn--primario:hover { background: #8F2F26; }

.sa-btn--secundario {
    background: var(--cartao);
    color: var(--tinta);
    border-color: var(--linha-forte);
}
.sa-btn--secundario:hover { border-color: var(--tinta); }

.sa-btn--fantasma {
    background: transparent;
    color: var(--carvao-suave);
    border-color: transparent;
    padding: 8px 12px;
}
.sa-btn--fantasma:hover { color: var(--tinta); text-decoration: underline; }

.sa-btn--perigo { color: var(--selo); }

.sa-btn--pequeno { padding: 6px 12px; font-size: 12.5px; }

/* ---------------------------------------------------------------------
   CARTÕES / MÉTRICAS
   --------------------------------------------------------------------- */

.sa-grelha-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.sa-metrica {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 18px 20px;
    box-shadow: var(--sombra);
}

.sa-metrica__rotulo {
    font-family: var(--fonte-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--carvao-suave);
    margin: 0 0 8px;
}

.sa-metrica__valor {
    font-family: var(--fonte-display);
    font-size: 30px;
    font-weight: 600;
    color: var(--tinta);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.sa-metrica__nota {
    font-size: 12px;
    color: var(--carvao-suave);
    margin-top: 4px;
}

.sa-painel {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 24px;
}

.sa-painel__cabecalho {
    padding: 16px 22px;
    border-bottom: 1px solid var(--linha);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sa-painel__titulo {
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.sa-painel__corpo { padding: 18px 22px; }

/* ---------------------------------------------------------------------
   TABELAS — "livro de registo"
   --------------------------------------------------------------------- */

.sa-tabela-wrap { overflow-x: auto; }

.sa-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.sa-tabela th {
    text-align: left;
    font-family: var(--fonte-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--carvao-suave);
    padding: 0 22px 10px;
    border-bottom: 1px solid var(--linha-forte);
    white-space: nowrap;
}

.sa-tabela td {
    padding: 14px 22px;
    border-bottom: 1px solid var(--linha);
    vertical-align: middle;
}

.sa-tabela tbody tr:hover { background: rgba(166, 56, 46, 0.035); }
.sa-tabela tbody tr:last-child td { border-bottom: none; }

.sa-tabela__principal { font-weight: 600; color: var(--tinta); }
.sa-tabela__meta {
    display: block;
    font-family: var(--fonte-mono);
    font-size: 11.5px;
    color: var(--carvao-suave);
    margin-top: 2px;
}

/* Selo de estado — elemento assinatura ---------------------------------- */
.sa-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fonte-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    transform: rotate(-1.2deg);
}
.sa-selo::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.sa-selo--ativo     { background: var(--verde-suave); color: var(--verde); border-color: rgba(63,107,79,0.3); }
.sa-selo--suspenso  { background: var(--ambar-suave); color: var(--ambar); border-color: rgba(155,106,31,0.3); }
.sa-selo--bloqueado { background: var(--cinza-suave); color: var(--cinza-bloq); border-color: rgba(91,95,102,0.3); }

.sa-vazio {
    text-align: center;
    padding: 48px 20px;
    color: var(--carvao-suave);
}
.sa-vazio__titulo {
    font-family: var(--fonte-display);
    font-size: 18px;
    color: var(--tinta);
    margin: 0 0 6px;
}

/* ---------------------------------------------------------------------
   FORMULÁRIOS
   --------------------------------------------------------------------- */

.sa-form { max-width: 640px; }

.sa-campo { margin-bottom: 18px; }

.sa-campo label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 6px;
}

.sa-campo .sa-dica {
    display: block;
    font-size: 11.5px;
    color: var(--carvao-suave);
    margin-top: 5px;
}

.sa-campo input[type="text"],
.sa-campo input[type="email"],
.sa-campo input[type="password"],
.sa-campo input[type="tel"],
.sa-campo input[type="number"],
.sa-campo input[type="date"],
.sa-campo select,
.sa-campo textarea {
    width: 100%;
    font-family: var(--fonte-corpo);
    font-size: 14px;
    padding: 10px 13px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: #fff;
    color: var(--carvao);
}

.sa-campo textarea { resize: vertical; min-height: 90px; font-family: var(--fonte-mono); font-size: 13px; }

.sa-campo input:focus,
.sa-campo select:focus,
.sa-campo textarea:focus {
    outline: none;
    border-color: var(--selo);
    box-shadow: 0 0 0 3px rgba(166, 56, 46, 0.12);
}

.sa-linha-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sa-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}
.sa-check input { width: 16px; height: 16px; }

.sa-form__acoes {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--linha);
}

/* ---------------------------------------------------------------------
   AVISOS / FLASH
   --------------------------------------------------------------------- */

.sa-aviso {
    padding: 12px 16px;
    border-radius: var(--raio);
    font-size: 13.5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sa-aviso--sucesso { background: var(--verde-suave); color: var(--verde); border-color: rgba(63,107,79,0.25); }
.sa-aviso--erro     { background: var(--selo-suave); color: var(--selo); border-color: rgba(166,56,46,0.25); }

/* ---------------------------------------------------------------------
   LOGIN
   --------------------------------------------------------------------- */

.sa-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tinta);
    background-image: radial-gradient(circle at 20% 15%, rgba(166,56,46,0.16), transparent 45%);
    padding: 24px;
}

.sa-login__cartao {
    width: 100%;
    max-width: 380px;
    background: var(--cartao);
    border-radius: 4px;
    padding: 40px 36px 32px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}

.sa-login__marca {
    font-family: var(--fonte-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--tinta);
    margin: 0 0 4px;
    text-align: center;
}

.sa-login__sub {
    text-align: center;
    font-family: var(--fonte-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--carvao-suave);
    margin: 0 0 28px;
}

.sa-login .sa-btn { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------------- */

@media (max-width: 860px) {
    .sa-app { flex-direction: column; }
    .sa-mastro { width: 100%; height: auto; position: relative; flex-direction: row; align-items: center; padding: 0; }
    .sa-mastro__cabecalho { border-bottom: none; padding: 16px 18px; }
    .sa-nav { flex-direction: row; padding: 8px; overflow-x: auto; }
    .sa-nav__item { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
    .sa-nav__item.esta-ativo { border-left-color: transparent; border-bottom-color: var(--selo); }
    .sa-mastro__rodape { display: none; }
    .sa-conteudo { padding: 24px 18px 40px; }
    .sa-linha-campos { grid-template-columns: 1fr; }
}