/* =====================================================================
   CRM FINESTRA - TEMA PREMIUM (somente visual)
   tema-premium.css

   Camada de aparencia carregada DEPOIS do style.css e dos estilos das
   paginas. Nao altera HTML, PHP nem regras de funcionamento: so cores,
   tipografia, bordas, espacos e sombras.

   Para voltar ao visual antigo: remova a linha que carrega este arquivo
   no header.php (e no login.php).

   Os seletores comecam com "html body" de proposito: isso da mais peso
   que os estilos que ficam dentro de cada pagina, sem precisar de
   !important na maioria das regras.
   ===================================================================== */

:root {
    /* Tinta e superficies */
    --tp-ink: #17181C;
    --tp-ink-2: #4B4F58;
    --tp-ink-3: #82868F;
    --tp-ink-4: #A9ACB3;
    --tp-bg: #F6F5F2;
    --tp-surface: #FFFFFF;
    --tp-surface-2: #FAF9F7;
    --tp-line: #E7E5E0;
    --tp-line-2: #EFEEEA;
    --tp-hover: #F2F1ED;

    /* Destaque (uso contido) */
    --tp-accent: #2350D8;
    --tp-accent-soft: #EEF2FD;
    --tp-accent-ring: rgba(35, 80, 216, .16);

    /* Estados, em tons sobrios */
    --tp-ok: #1E7A4F;      --tp-ok-soft: #EDF6F0;      --tp-ok-line: #CFE6D8;
    --tp-warn: #9A5B0B;    --tp-warn-soft: #FBF4E6;    --tp-warn-line: #F0DDB6;
    --tp-bad: #B4332B;     --tp-bad-soft: #FBEFEE;     --tp-bad-line: #F1D0CD;
    --tp-info: #2350D8;    --tp-info-soft: #EEF2FD;    --tp-info-line: #D5DFFA;
    --tp-violet: #5B4BB7;  --tp-violet-soft: #F2F0FB;

    /* Barra lateral */
    --tp-side: #121316;
    --tp-side-2: #1B1C20;
    --tp-side-text: #9A9DA5;
    --tp-side-line: rgba(255, 255, 255, .07);

    /* Forma */
    --tp-r: 10px;
    --tp-r-sm: 7px;
    --tp-shadow: 0 1px 2px rgba(20, 20, 30, .04);
    --tp-shadow-pop: 0 12px 32px -8px rgba(20, 20, 30, .18), 0 2px 6px rgba(20, 20, 30, .06);

    --tp-font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tp-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Reaproveita as variaveis antigas do sistema com a nova paleta
       (tudo que ja usava var(--...) muda junto). */
    --primary-blue: var(--tp-accent);
    --primary-blue-dark: #1B3FB0;
    --primary-blue-light: #4D72E3;
    --black: var(--tp-ink);
    --gray-dark: var(--tp-ink-2);
    --gray-medium: var(--tp-ink-3);
    --gray-light: var(--tp-line);
    --gray-lighter: var(--tp-hover);
    --gray-lightest: var(--tp-bg);
    --success: var(--tp-ok);
    --warning: #B7791F;
    --error: var(--tp-bad);
    --info: var(--tp-accent);
    --shadow-sm: var(--tp-shadow);
    --shadow: var(--tp-shadow);
    --shadow-md: 0 2px 8px rgba(20, 20, 30, .06);
    --shadow-lg: var(--tp-shadow-pop);
    --sidebar-width: 248px;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
html body {
    font-family: var(--tp-font);
    color: var(--tp-ink);
    background: var(--tp-bg);
    font-feature-settings: 'ss01', 'cv11';
    letter-spacing: -0.005em;
}
html body input,
html body select,
html body textarea,
html body button {
    font-family: var(--tp-font);
}
html body h1, html body h2, html body h3, html body h4 {
    color: var(--tp-ink);
    letter-spacing: -0.018em;
}
html body a { color: inherit; }
html body ::selection { background: var(--tp-accent-soft); }

/* Numeros alinhados em tudo que e metrica ou tabela */
html body .stat-number, html body .stat-value, html body .stat-numero,
html body .ev-mcard .v, html body .ev-stat .v, html body .ev-kpi .v,
html body .funil-stat-valor, html body .col-count, html body .col-valor,
html body .table td, html body .card-valor, html body .ev-pstage .pc,
html body .neg-etapa-qtd, html body .op-meta .mi .v, html body .page-link {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Barra lateral
   --------------------------------------------------------------------- */
html body .sidebar {
    width: var(--sidebar-width);
    background: var(--tp-side);
    box-shadow: none;
    border-right: 1px solid #000;
}
html body .sidebar-header {
    padding: 22px 20px 20px;
    border-bottom: 1px solid var(--tp-side-line);
}
html body .sidebar-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #F4F4F5;
}
html body .sidebar-header h2::before {
    content: '';
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.95) 0 50%, rgba(255,255,255,.35) 50% 100%);
}
html body .sidebar-menu { padding: 14px 10px; }
html body .menu-item {
    gap: 12px;
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: 8px;
    color: var(--tp-side-text);
    font-size: 14px;
    font-weight: 500;
    border-right: 0;
    transition: background .15s, color .15s;
}
html body .menu-item svg { width: 18px; height: 18px; opacity: .85; }
html body .menu-item:hover { background: var(--tp-side-2); color: #E8E8EA; }
html body .menu-item.active {
    background: var(--tp-side-2);
    color: #FFFFFF;
    border-right: 0;
    box-shadow: inset 2px 0 0 #FFFFFF;
}
html body .menu-item.active svg { opacity: 1; }
html body .sidebar-footer {
    padding: 14px;
    border-top: 1px solid var(--tp-side-line);
}
html body .user-info { gap: 10px; margin-bottom: 10px; }
html body .user-avatar {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #2A2C31;
    color: #F4F4F5;
    font-size: 13px;
    font-weight: 600;
}
html body .user-name { color: #EDEDEF; font-size: 13px; font-weight: 500; }
html body .user-email { color: #7B7F87; font-size: 12px; }
html body .btn-logout {
    background: transparent;
    border: 1px solid var(--tp-side-line);
    color: var(--tp-side-text);
    font-size: 13px;
    border-radius: 8px;
    padding: 8px 12px;
}
html body .btn-logout:hover { background: var(--tp-side-2); color: #fff; }

/* ---------------------------------------------------------------------
   Area de conteudo
   --------------------------------------------------------------------- */
html body .main-content { margin-left: var(--sidebar-width); }
html body .content-wrapper { padding: 36px 40px 48px; max-width: 1440px; }
html body .footer {
    background: transparent;
    border-top: 1px solid var(--tp-line);
    color: var(--tp-ink-4);
    font-size: 12px;
}
html body .footer p { color: var(--tp-ink-4); font-size: 12px; }

html body .page-header { margin-bottom: 28px; }
html body .page-header h1,
html body .dashboard-header h1,
html body .neg-title,
html body .ev-page-head h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--tp-ink);
}
html body .page-header p,
html body .dashboard-header p,
html body .ev-page-head p {
    font-size: 14px;
    color: var(--tp-ink-3);
}

/* ---------------------------------------------------------------------
   Cards e superficies
   --------------------------------------------------------------------- */
html body .card,
html body .chart-card,
html body .stat-card,
html body .stat-card-large,
html body .ev-card,
html body .ev-mcard,
html body .ev-stat,
html body .ev-alerta,
html body .op-card,
html body .funil-bar,
html body .filtros-bar,
html body .section,
html body .cliente-header,
html body .ev-hero,
html body .insight-card,
html body .grafico-container {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r);
    box-shadow: var(--tp-shadow);
}
html body .card-header,
html body .ev-card-head,
html body .chart-header,
html body .section-header {
    border-bottom: 1px solid var(--tp-line-2);
}
html body .card-header h2,
html body .chart-title,
html body .section-title,
html body .ev-card-head,
html body .grafico-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--tp-ink);
    letter-spacing: -0.01em;
}
html body .stat-card:hover,
html body .ev-mcard:hover,
html body .op-card:hover,
html body .timeline-content:hover {
    transform: none;
    box-shadow: var(--tp-shadow);
    border-color: #D9D6CF;
}

/* ---------------------------------------------------------------------
   KPIs (Dashboard)
   --------------------------------------------------------------------- */
html body .stat-card-large { padding: 20px 20px 18px; }
html body .stat-card-large::before { display: none; }
html body .stat-title,
html body .stat-label,
html body .ev-mcard .l,
html body .ev-stat .l,
html body .ev-kpi .l,
html body .funil-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--tp-ink-3);
    text-transform: none;
    letter-spacing: 0;
}
html body .stat-number,
html body .stat-value {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--tp-ink);
    line-height: 1.15;
}
html body .stat-subtitle { font-size: 12.5px; color: var(--tp-ink-3); }
html body .stat-icon-small,
html body .stat-icon {
    background: var(--tp-surface-2);
    border: 1px solid var(--tp-line-2);
    border-radius: 8px;
    color: var(--tp-ink-2);
}
html body .stat-icon-small svg,
html body .stat-icon svg { stroke: var(--tp-ink-2); fill: none; }
html body .stat-trend {
    background: var(--tp-hover);
    color: var(--tp-ink-2);
    border-radius: 6px;
    font-weight: 500;
}
html body .stat-trend.up { background: var(--tp-ok-soft); color: var(--tp-ok); }
html body .stat-trend.down { background: var(--tp-bad-soft); color: var(--tp-bad); }

/* Seletor de periodo */
html body .periodo-selector {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: 9px;
    padding: 3px;
    box-shadow: none;
    gap: 2px;
}
html body .periodo-btn {
    color: var(--tp-ink-2);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    padding: 6px 12px;
}
html body .periodo-btn:hover { background: var(--tp-hover); color: var(--tp-ink); }
html body .periodo-btn.active {
    background: var(--tp-ink);
    color: #fff;
    box-shadow: none;
}
html body .btn-atalho {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink-2);
    border-radius: 6px;
}
html body .btn-atalho:hover { background: var(--tp-hover); color: var(--tp-ink); border-color: var(--tp-line); }

/* Barrinhas da secao Negociacoes do Dashboard */
html body .neg-etapa-barra { background: var(--tp-line-2); }
html body .neg-etapa-barra span { background: var(--tp-ink); }
html body .dash-secao h2 { font-size: 17px; font-weight: 600; }

/* ---------------------------------------------------------------------
   Botoes
   --------------------------------------------------------------------- */
html body .btn {
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 14px;
    letter-spacing: -0.005em;
    box-shadow: none;
    transition: background .15s, border-color .15s, color .15s;
}
html body .btn-sm,
html body .btn.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
html body .btn-primary,
html body .btn-filtrar {
    background: var(--tp-ink);
    color: #fff;
    border: 1px solid var(--tp-ink);
}
html body .btn-primary:hover,
html body .btn-filtrar:hover { background: #000; border-color: #000; }
html body .btn-secondary,
html body .btn-ghost,
html body .btn-outline,
html body .btn-limpar-filtro,
html body .btn-back,
html body .btn-voltar-clientes,
html body .btn-quick {
    background: var(--tp-surface);
    color: var(--tp-ink);
    border: 1px solid var(--tp-line);
}
html body .btn-secondary:hover,
html body .btn-ghost:hover,
html body .btn-outline:hover,
html body .btn-limpar-filtro:hover,
html body .btn-back:hover,
html body .btn-voltar-clientes:hover,
html body .btn-quick:hover {
    background: var(--tp-hover);
    border-color: #D9D6CF;
    color: var(--tp-ink);
}
html body .btn-success,
html body .btn-ok {
    background: var(--tp-ok);
    border: 1px solid var(--tp-ok);
    color: #fff;
}
html body .btn-success:hover,
html body .btn-ok:hover { background: #17633F; }
html body .btn-danger {
    background: var(--tp-surface);
    color: var(--tp-bad);
    border: 1px solid var(--tp-bad-line);
}
html body .btn-danger:hover { background: var(--tp-bad-soft); }
html body .btn-whats {
    background: var(--tp-surface);
    color: var(--tp-ok);
    border: 1px solid var(--tp-line);
}
html body .btn-whats:hover { background: var(--tp-ok-soft); border-color: var(--tp-ok-line); }
html body .btn-wa {
    background: var(--tp-ok);
    border-radius: 7px;
}
/* Botoes com degrade (detalhes do cliente) viram solidos */
html body .btn-concluir-atendimento { background: var(--tp-ink); box-shadow: none; }
html body .btn-concluir-atendimento:hover { background: #000; box-shadow: none; transform: none; }
html body .btn-reabrir-atendimento { background: var(--tp-surface); color: var(--tp-ink); border: 1px solid var(--tp-line); box-shadow: none; }
html body .btn-reabrir-atendimento:hover { background: var(--tp-hover); transform: none; box-shadow: none; }
html body .btn-marcar-atendido { background: var(--tp-ok-soft); color: var(--tp-ok); border: 1px solid var(--tp-ok-line); box-shadow: none; }
html body .btn-reabrir-rapido { background: var(--tp-surface); color: var(--tp-ink-2); border: 1px solid var(--tp-line); box-shadow: none; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="date"],
html body input[type="datetime-local"],
html body input[type="search"],
html body select,
html body textarea,
html body .form-control {
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background-color: var(--tp-surface);
    color: var(--tp-ink);
    font-size: 14px;
    box-shadow: none;
}
html body input:focus,
html body select:focus,
html body textarea:focus,
html body .form-control:focus {
    outline: none;
    border-color: var(--tp-accent);
    box-shadow: 0 0 0 3px var(--tp-accent-ring);
}
html body input::placeholder,
html body textarea::placeholder { color: var(--tp-ink-4); }
html body .form-group label,
html body .filtro-group label,
html body .filter-item label,
html body .ev-filtro-group label,
html body .ev-form-row label,
html body .funil-bar label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tp-ink-2);
    letter-spacing: 0;
    text-transform: none;
}
html body input[type="checkbox"],
html body input[type="radio"] { accent-color: var(--tp-ink); }

/* ---------------------------------------------------------------------
   Tabelas
   --------------------------------------------------------------------- */
html body .table thead tr,
html body .table thead { background: var(--tp-surface-2); }
html body .table th,
html body .tabela-produtos-status th,
html body .compras-table th {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--tp-ink-3);
    text-transform: uppercase;
    letter-spacing: .045em;
    background: var(--tp-surface-2);
    border-bottom: 1px solid var(--tp-line);
}
html body .table td,
html body .tabela-produtos-status td,
html body .compras-table td {
    border-bottom: 1px solid var(--tp-line-2);
    color: var(--tp-ink);
    font-size: 13.5px;
}
html body .table tbody tr:hover,
html body .tabela-produtos-status tbody tr:hover,
html body .compras-table tr:hover { background: var(--tp-surface-2); }

/* ---------------------------------------------------------------------
   Selos (badges)
   --------------------------------------------------------------------- */
html body .badge,
html body .card-badge,
html body .status-badge,
html body .badge-estagio,
html body .ie-pill,
html body .badge-oferta,
html body .op-status {
    border-radius: 6px;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0;
    box-shadow: none;
}
html body .badge-success, html body .badge-ganho, html body .status-badge.success,
html body .op-status.conv, html body .ie-adiantado, html body .ie-noritmo {
    background: var(--tp-ok-soft); color: var(--tp-ok);
}
html body .badge-warning, html body .badge-days, html body .status-badge.warning,
html body .ie-atencao {
    background: var(--tp-warn-soft); color: var(--tp-warn);
}
html body .badge-error, html body .badge-perda, html body .status-badge.danger,
html body .op-status.perd, html body .ie-critico {
    background: var(--tp-bad-soft); color: var(--tp-bad);
}
html body .badge-info, html body .badge-andamento, html body .status-badge.info,
html body .op-status.neg {
    background: var(--tp-info-soft); color: var(--tp-info);
}
html body .badge-canceled, html body .status-badge.gray {
    background: var(--tp-hover); color: var(--tp-ink-2);
}
html body .badge-cart, html body .status-badge.purple {
    background: var(--tp-violet-soft); color: var(--tp-violet);
}
html body .badge-hotmart,
html body .badge-hubla {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink-2);
    border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Alertas
   --------------------------------------------------------------------- */
html body .alert {
    border-radius: var(--tp-r);
    border: 1px solid var(--tp-line);
    box-shadow: none;
    font-size: 14px;
}
html body .alert-success { background: var(--tp-ok-soft); border-color: var(--tp-ok-line); color: #184F35; }
html body .alert-warning { background: var(--tp-warn-soft); border-color: var(--tp-warn-line); color: #6E420A; }
html body .alert-error,
html body .alert-danger { background: var(--tp-bad-soft); border-color: var(--tp-bad-line); color: #7F241F; }

/* ---------------------------------------------------------------------
   Paginacao
   --------------------------------------------------------------------- */
html body .page-link,
html body .ev-page-link {
    border: 1px solid var(--tp-line);
    border-radius: 7px;
    background: var(--tp-surface);
    color: var(--tp-ink-2);
    font-weight: 500;
}
html body .page-link:hover,
html body .ev-page-link:hover { background: var(--tp-hover); color: var(--tp-ink); }
html body .page-link.ativa,
html body .page-link.ativa:hover,
html body .ev-page-link.active {
    background: var(--tp-ink);
    border-color: var(--tp-ink);
    color: #fff;
}

/* ---------------------------------------------------------------------
   Negociacoes (Kanban)
   --------------------------------------------------------------------- */
html body .neg-tabs { border-bottom: 1px solid var(--tp-line); }
html body .neg-tab { color: var(--tp-ink-3); font-weight: 500; }
html body .neg-tab:hover { color: var(--tp-ink); }
html body .neg-tab.active { color: var(--tp-ink); border-bottom-color: var(--tp-ink); }
html body .kanban-col {
    background: #F0EFEB;
    border: 1px solid var(--tp-line);
    border-radius: 12px;
}
html body .kanban-col-header { border-bottom: 1px solid var(--tp-line); }
html body .kanban-col-title { font-weight: 600; font-size: 13.5px; color: var(--tp-ink); }
html body .col-count {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink-2);
    font-weight: 500;
    border-radius: 6px;
}
html body .col-valor { color: var(--tp-ok); font-weight: 500; }
html body .kanban-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: 9px;
    box-shadow: 0 1px 1px rgba(20, 20, 30, .03);
}
html body .kanban-card:hover { border-color: #D6D3CB; }
html body .kanban-card.resultado-ganho { border-left: 3px solid var(--tp-ok); }
html body .kanban-card.resultado-perda { border-left: 3px solid var(--tp-bad); }
html body .card-nome { font-weight: 600; color: var(--tp-ink); }
html body .card-tel-link { color: var(--tp-ok); }
html body .card-data { color: var(--tp-ink-4); }
html body .card-obs {
    background: var(--tp-surface-2);
    border: 1px solid var(--tp-line-2);
    color: var(--tp-ink-2);
    border-radius: 7px;
}
html body .card-btn,
html body .card-btn-mover {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    color: var(--tp-ink-2);
    border-radius: 6px;
}
html body .card-btn:hover,
html body .card-btn-mover:hover { background: var(--tp-hover); color: var(--tp-ink); border-color: #D6D3CB; }
html body .card-btn.btn-ganho:hover { background: var(--tp-ok-soft); color: var(--tp-ok); border-color: var(--tp-ok-line); }
html body .card-btn.btn-perda:hover,
html body .card-btn.btn-remove:hover { background: var(--tp-bad-soft); color: var(--tp-bad); border-color: var(--tp-bad-line); }
html body .card-btn.btn-edit:hover { background: var(--tp-hover); color: var(--tp-ink); border-color: #D6D3CB; }
html body .btn-add-card {
    border: 1px dashed #D6D3CB;
    color: var(--tp-ink-3);
    background: transparent;
    border-radius: 8px;
}
html body .btn-add-card:hover { background: var(--tp-surface); color: var(--tp-ink); border-color: var(--tp-ink-4); }
html body .card-mover-dropdown,
html body .dropdown-menu {
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    box-shadow: var(--tp-shadow-pop);
}
html body .card-mover-option:hover,
html body .dropdown-item:hover { background: var(--tp-hover); }
html body .funil-seg.seg-ganho { background: var(--tp-ok); }
html body .funil-seg.seg-perda { background: var(--tp-bad); }

/* ---------------------------------------------------------------------
   Modais e toasts
   --------------------------------------------------------------------- */
html body .modal-overlay,
html body .ev-modal-overlay { background: rgba(18, 19, 22, .42); backdrop-filter: blur(2px); }
html body .modal-box,
html body .ev-modal-box,
html body .modal-content-large {
    border-radius: 14px;
    border: 1px solid var(--tp-line);
    box-shadow: var(--tp-shadow-pop);
}
html body .modal-title,
html body .modal-header h3,
html body .ev-modal-box h3 { font-size: 16px; font-weight: 600; color: var(--tp-ink); }
html body .toast,
html body .ev-toast {
    border-radius: 10px;
    box-shadow: var(--tp-shadow-pop);
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------
   Evolucao de Alunos
   --------------------------------------------------------------------- */
html body .ev-subnav {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tp-line);
    border-radius: 0;
    padding: 0;
    gap: 4px;
    box-shadow: none;
}
html body .ev-subnav a {
    border-radius: 0;
    padding: 10px 12px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--tp-ink-3);
    font-weight: 500;
    background: transparent;
}
html body .ev-subnav a:hover { color: var(--tp-ink); background: transparent; }
html body .ev-subnav a.active {
    color: var(--tp-ink);
    background: transparent;
    border-bottom-color: var(--tp-ink);
    box-shadow: none;
}
html body .ev-sec-title { font-size: 14px; font-weight: 600; color: var(--tp-ink); }
html body .ev-mcard .v,
html body .ev-stat .v,
html body .ev-kpi .v { font-weight: 600; letter-spacing: -0.025em; }
html body .ev-bar,
html body .ev-pstage .ev-bar { background: var(--tp-line-2); }
html body .ev-alerta .ai { border-radius: 8px; }
html body .ev-segmented button,
html body .ev-chips .chip-btn,
html body .ev-stars .star-btn,
html body .ev-subtabs button {
    border: 1px solid var(--tp-line);
    background: var(--tp-surface);
    border-radius: 7px;
    color: var(--tp-ink-2);
}
html body .ev-chips .chip-btn.on,
html body .ev-segmented button.active,
html body .ev-subtabs button.active {
    background: var(--tp-ink);
    border-color: var(--tp-ink);
    color: #fff;
}
html body .ev-oferta-banner {
    background: var(--tp-accent-soft);
    border: 1px solid var(--tp-info-line);
    border-radius: var(--tp-r);
    color: #1B3FB0;
}

/* ---------------------------------------------------------------------
   Detalhes do cliente
   --------------------------------------------------------------------- */
html body .timeline::before { background: var(--tp-line); }
html body .timeline-marker { box-shadow: 0 0 0 4px var(--tp-bg); }
html body .timeline-marker.blue { background: var(--tp-accent); }
html body .timeline-marker.green { background: var(--tp-ok); }
html body .timeline-marker.orange { background: #B7791F; }
html body .timeline-marker.purple { background: var(--tp-violet); }
html body .timeline-content {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r);
    box-shadow: none;
}
html body .produto-item {
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-r);
    background: var(--tp-surface-2);
}
html body .toggle-switch input:checked + .toggle-slider { background: var(--tp-ok); }

/* ---------------------------------------------------------------------
   Webhook / Extensao
   --------------------------------------------------------------------- */
html body .webhook-input,
html body .webhook-url-display input { font-family: var(--tp-mono); font-size: 12.5px; }
html body .step-number,
html body .ext-passos li::before { background: var(--tp-ink); }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
html body.login-page {
    background:
        radial-gradient(1200px 600px at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
        var(--tp-bg);
}
html body .login-box {
    background: var(--tp-surface);
    border: 1px solid var(--tp-line);
    border-radius: 14px;
    box-shadow: var(--tp-shadow-pop);
    padding: 36px 32px 28px;
}
html body .login-header h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--tp-ink);
    letter-spacing: -0.02em;
}
html body .login-header h1::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 18px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--tp-ink) 0 50%, #5C5F68 50% 100%);
}
html body .login-header p { font-size: 13.5px; color: var(--tp-ink-3); }
/* Esconde a dica com usuario/senha de teste da tela de login */
html body .login-hint { display: none; }

/* ---------------------------------------------------------------------
   Ajustes finos (Clientes, Detalhes, Perfil do aluno)
   --------------------------------------------------------------------- */
/* Botao de copiar telefone: discreto, verde so no texto */
html body .btn-telefone {
    background: var(--tp-ok-soft);
    color: var(--tp-ok);
    border: 1px solid var(--tp-ok-line);
    box-shadow: none;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
html body .btn-telefone:hover { background: #E2F0E7; color: #17633F; transform: none; box-shadow: none; }
html body .btn-telefone svg { stroke: currentColor; }
/* Linhas prioritarias (pendentes): mesmo significado, tom mais suave.
   A cor vem do proprio HTML, por isso o !important so aqui. */
html body .table tbody tr[style*="#FEF3C7"],
html body .table tbody tr[style*="254, 243, 199"] { background-color: #FBF6E9 !important; border-left-color: #D9A441 !important; box-shadow: none !important; }
html body .table tbody tr[style*="#FEF3C7"]:hover,
html body .table tbody tr[style*="254, 243, 199"]:hover { background-color: #F7EFDB !important; }
/* Quantidade de compras: numero neutro */
html body .table td .badge.badge-info { background: var(--tp-hover); color: var(--tp-ink-2); }
/* Reabrir: tom de atencao, sem laranja chapado */
html body .btn-reabrir,
html body .btn-atend-reabrir {
    background: var(--tp-warn-soft);
    color: var(--tp-warn);
    border: 1px solid var(--tp-warn-line);
    box-shadow: none;
}
html body .btn-reabrir:hover,
html body .btn-atend-reabrir:hover { background: #F6EACF; color: #7A470A; }
html body .btn-atend-ok { background: var(--tp-ok-soft); color: var(--tp-ok); border: 1px solid var(--tp-ok-line); }
/* Botao flutuante "Salvar diagnostico" */
html body .ev-fab-salvar {
    background: var(--tp-ink);
    box-shadow: var(--tp-shadow-pop);
    border-radius: 10px;
    font-family: var(--tp-font);
    font-weight: 500;
}
html body .ev-fab-salvar:hover { background: #000; box-shadow: var(--tp-shadow-pop); transform: none; }

/* ---------------------------------------------------------------------
   Rolagem
   --------------------------------------------------------------------- */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-thumb {
    background: #D6D3CB;
    border-radius: 999px;
    border: 3px solid var(--tp-bg);
}
html body ::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   Celular
   --------------------------------------------------------------------- */
html body .menu-toggle {
    background: var(--tp-ink);
    color: #fff;
    border-radius: 9px;
    box-shadow: var(--tp-shadow-pop);
}
@media (max-width: 768px) {
    /* espaco pro botao de menu nao ficar em cima do titulo */
    html body .content-wrapper { padding: 76px 16px 32px; }
    html body .main-content { margin-left: 0; }
    html body .dashboard-header > div { min-width: 0; max-width: 100%; }
    /* seletor de periodo rola dentro dele, sem estourar a tela */
    html body .periodo-selector {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    html body .periodo-btn { white-space: nowrap; flex: none; }
}