/* PETE CRM v2 — estilos (marca PETE, manual do logotipo v1.0) */

:root {
    --pete-blue: #0B3D5C;
    --pete-orange: #E85D24;
    --pete-sand: #F2ECDF;
    --ink: #0F1419;
    --carbon: #2C3338;
    --slate: #6B7480;
    --mist: #C8CDD3;
    --paper: #FAFAF8;
    --branco: #FFFFFF;

    /* Status do sistema (tons sóbrios, só para mensagens) */
    --ok: #2E6B4A;      --ok-fundo: #E8F1EB;
    --erro: #A23B2A;    --erro-fundo: #F8E9E6;
    --aviso: #7A5A12;   --aviso-fundo: #F7F0DC;

    --raio: 10px;
    --sombra: 0 1px 2px rgba(15, 20, 25, .05), 0 2px 8px rgba(15, 20, 25, .04);
    --lateral: 272px;
    --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* garante que "hidden" vença display:grid/flex das classes */
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
}
h1, h2, h3 { color: var(--pete-blue); line-height: 1.25; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
a { color: var(--pete-blue); }
p { margin: 0 0 .75em; }
img { max-width: 100%; }
.icone { flex-shrink: 0; }
.texto-secundario { color: var(--slate); font-size: .9rem; }

/* ------------------------------------------------------------ componentes */

.cartao {
    background: var(--branco);
    border: 1px solid var(--mist);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 500; font-size: .95rem;
    padding: 9px 16px;
    border-radius: var(--raio);
    border: 1px solid var(--mist);
    background: var(--branco);
    color: var(--carbon);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--slate); }
.btn:focus-visible, .campo input:focus-visible, .menu-item:focus-visible { outline: 3px solid rgba(11, 61, 92, .35); outline-offset: 2px; }
.btn-primario { background: var(--pete-orange); border-color: var(--pete-orange); color: var(--branco); font-weight: 600; }
.btn-primario:hover { background: #D4501B; border-color: #D4501B; }
.btn-ia { background: var(--pete-sand); border-color: var(--pete-blue); color: var(--pete-blue); }
.btn-ia:hover { background: #EAE2D0; border-color: var(--pete-blue); }
.btn-discreto { border-color: transparent; background: transparent; color: var(--slate); padding: 6px 10px; }
.btn-discreto:hover { background: var(--pete-sand); border-color: transparent; color: var(--pete-blue); }
.btn-largo { width: 100%; }

.campo { display: block; margin-bottom: 16px; }
.campo > span { display: block; font-size: .875rem; font-weight: 500; color: var(--carbon); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--mist);
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--pete-blue); outline: none; box-shadow: 0 0 0 3px rgba(11, 61, 92, .12); }

.flash {
    padding: 11px 14px;
    border-radius: var(--raio);
    margin-bottom: 16px;
    font-size: .925rem;
    border: 1px solid transparent;
    transition: opacity .4s;
}
.flash-sucesso { background: var(--ok-fundo); color: var(--ok); border-color: #CFE2D5; }
.flash-erro { background: var(--erro-fundo); color: var(--erro); border-color: #EFD3CD; }
.flash-aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: #EBDDB5; }

/* ------------------------------------------------------------ login */

.pagina-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login { width: 100%; max-width: 420px; padding: 0 16px 32px; display: flex; flex-direction: column; align-items: center; }
/* Área de proteção do logo: 24% da largura (220px → 53px) */
.login-logo { width: 220px; height: auto; margin: 53px; }
.login-form { width: 100%; }
.login-form h1 { font-size: 1.25rem; margin-bottom: 20px; }
.login-form .btn { margin-top: 4px; padding: 11px 16px; }
.login-rodape { margin-top: 24px; color: var(--slate); font-size: .825rem; text-align: center; }

/* ------------------------------------------------------------ layout interno */

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

.lateral {
    position: fixed; inset: 0 auto 0 0;
    width: var(--lateral);
    background: var(--pete-blue);
    color: var(--branco);
    display: flex; flex-direction: column;
    overflow-y: auto;
    z-index: 10;
}
/* Logo negativo 176px; área de proteção mínima de 44px em volta */
.lateral-logo { display: block; padding: 44px 48px; }
.lateral-logo img { display: block; width: 176px; height: auto; }

.menu { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 24px; }
.menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: var(--raio);
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-weight: 500;
}
.menu-item:hover { background: rgba(255, 255, 255, .08); color: var(--branco); }
.menu-item.ativo { background: rgba(255, 255, 255, .14); color: var(--branco); }
.menu-curto { display: none; }

.principal { flex: 1; min-width: 0; margin-left: var(--lateral); padding: 0 40px 48px; }

.topo {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 28px 0 24px;
}
.topo h1 { margin: 0; }
.topo-usuario { display: flex; align-items: center; gap: 12px; }
.topo-nome { text-align: right; font-weight: 500; font-size: .925rem; line-height: 1.3; color: var(--ink); text-decoration: none; }
.topo-nome:hover { color: var(--pete-blue); }
.topo-nome small { display: block; color: var(--slate); font-weight: 400; font-size: .8rem; }
.topo-usuario form { margin: 0; }

.conteudo { max-width: 1200px; }

.em-construcao { display: flex; gap: 20px; align-items: flex-start; max-width: 720px; }
.em-construcao-icone {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: var(--raio);
    background: var(--pete-sand);
    color: var(--pete-blue);
    display: flex; align-items: center; justify-content: center;
}
.em-construcao p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ celular */

@media (max-width: 860px) {
    .app { display: block; }

    /* Faixa azul no topo só com o logo (160px = tamanho mínimo; proteção 24% = 38px) */
    .lateral { position: static; width: auto; overflow: visible; }
    .lateral-logo { padding: 38px; display: flex; justify-content: center; }
    .lateral-logo img { width: 160px; }

    /* Menu vira barra fixa embaixo */
    .menu {
        position: fixed; inset: auto 0 0 0;
        flex-direction: row; gap: 0;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--pete-blue);
        box-shadow: 0 -2px 10px rgba(15, 20, 25, .12);
    }
    .menu-item { flex: 1; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: .7rem; text-align: center; }
    .menu-longo { display: none; }
    .menu-curto { display: block; white-space: nowrap; }

    .principal { margin-left: 0; padding: 0 16px 96px; }
    .topo { padding: 20px 0 16px; }
    .topo h1 { font-size: 1.3rem; }
    .topo-nome small { display: none; }
    .btn-discreto span { display: none; }
    .em-construcao { flex-direction: column; gap: 14px; padding: 20px; }
}