Migracao | DS CANTA.

Visao Geral

O CantaSYS atualmente usa Bootstrap 4, Open Sans e Font Awesome. A migracao para o CANTA DS sera feita de forma progressiva, permitindo coexistencia temporaria dos dois sistemas. Cada etapa pode ser deployada independentemente.

De (atual)	Para (CANTA DS)
Bootstrap 4.x	CANTA DS (canta-ds.css)
Open Sans	Montserrat (titulos) + Inter (corpo)
Font Awesome 5/6	Material Symbols Rounded
Classes sem prefixo (.btn, .card)	Prefixo .canta- (.canta-btn, .canta-card)
MetisMenu (sidebar)	.canta-sidebar

Etapa 1: Coexistencia

Adicione o CSS do CANTA DS apos o Bootstrap no head_css.php. O prefixo .canta- evita conflitos. Ambos os sistemas funcionam simultaneamente.

<!-- Bootstrap (existente) -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/app.css">

<!-- CANTA DS (adicionar DEPOIS do Bootstrap) -->
<link rel="stylesheet" href="https://ds.cantasys.com.br/dist/css/canta-ds.min.css">

Com ambos carregados, voce pode comecar a substituir componentes gradualmente, tela por tela, sem afetar as que ainda nao foram migradas.

Etapa 2: Botoes

Substitua as classes de botoes Bootstrap pelas equivalentes CANTA DS. O mapeamento direto facilita find-and-replace.

Bootstrap	CANTA DS
`.btn .btn-primary`	`.canta-btn .canta-btn--primary`
`.btn .btn-secondary`	`.canta-btn .canta-btn--secondary`
`.btn .btn-danger`	`.canta-btn .canta-btn--danger`
`.btn .btn-success`	`.canta-btn .canta-btn--success`
`.btn .btn-warning`	`.canta-btn .canta-btn--warning`
`.btn .btn-info`	`.canta-btn .canta-btn--info`
`.btn .btn-outline-primary`	`.canta-btn .canta-btn--outline`
`.btn .btn-link`	`.canta-btn .canta-btn--link`
`.btn .btn-sm`	`.canta-btn .canta-btn--sm`
`.btn .btn-lg`	`.canta-btn .canta-btn--lg`
`.btn-block`	`.canta-btn--full-width`
`.btn-group`	`.canta-btn-group`

<button class="btn btn-primary btn-sm">
  <i class="fa fa-plus"></i> Novo
</button>

<button class="canta-btn canta-btn--primary canta-btn--sm">
  <span class="material-symbols-rounded">add</span> Novo
</button>

Etapa 3: Inputs de Formulario

Substitua os form controls e form groups do Bootstrap.

Bootstrap	CANTA DS
`.form-group`	`.canta-form-group`
`.form-control`	`.canta-input`
`.form-control-lg`	`.canta-input .canta-input--lg`
`.form-control-sm`	`.canta-input .canta-input--sm`
`.form-label` / `<label>`	`.canta-label`
`.form-text`	`.canta-form-hint`
`.is-invalid`	`.canta-input--error`
`.is-valid`	`.canta-input--success`
`.custom-select`	`.canta-select`
`.custom-checkbox`	`.canta-checkbox`
`.custom-radio`	`.canta-radio`

<div class="form-group">
  <label for="nome">Nome</label>
  <input type="text" class="form-control" id="nome" placeholder="Digite o nome">
  <small class="form-text text-muted">Nome completo do colaborador</small>
</div>

<div class="canta-form-group">
  <label class="canta-label" for="nome">Nome</label>
  <input type="text" class="canta-input" id="nome" placeholder="Digite o nome">
  <span class="canta-form-hint">Nome completo do colaborador</span>
</div>

Etapa 4: Alerts, Modals e Badges

Substitua os componentes de feedback e overlays.

Bootstrap	CANTA DS
`.alert .alert-success`	`.canta-alert .canta-alert--success`
`.alert .alert-danger`	`.canta-alert .canta-alert--error`
`.alert .alert-warning`	`.canta-alert .canta-alert--warning`
`.alert .alert-info`	`.canta-alert .canta-alert--info`
`.modal`	`.canta-modal`
`.modal-dialog`	`.canta-modal__dialog`
`.modal-header`	`.canta-modal__header`
`.modal-body`	`.canta-modal__body`
`.modal-footer`	`.canta-modal__footer`
`.badge .badge-primary`	`.canta-badge .canta-badge--primary`
`.badge .badge-danger`	`.canta-badge .canta-badge--error`
`.badge .badge-success`	`.canta-badge .canta-badge--success`
`.badge-pill`	`.canta-badge--pill`

Etapa 5: Sidebar / Navegacao

Substitua o MetisMenu + sidebar customizada pela navegacao CANTA DS. Esta e a etapa com maior impacto visual e requer mais cuidado nos testes.

<div class="left-side-menu">
  <div class="slimscroll-menu">
    <div id="sidebar-menu">
      <ul class="metismenu side-nav">
        <li class="side-nav-item">
          <a href="/dashboard" class="side-nav-link">
            <i class="fa fa-home"></i> Dashboard
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<aside class="canta-sidebar">
  <div class="canta-sidebar__header">
    <a href="/" class="canta-sidebar__logo">CANTA<span>.</span></a>
  </div>
  <nav class="canta-sidebar__nav">
    <div class="canta-sidebar__section">
      <a href="/dashboard" class="canta-sidebar__link canta-sidebar__link--active">
        <span class="material-symbols-rounded">home</span> Dashboard
      </a>
    </div>
  </nav>
</aside>

Etapa 6: Tipografia

Substitua Open Sans por Montserrat (titulos) e Inter (corpo). Atualize os imports de fontes no head_css.php.

De	Para	Uso
Open Sans Regular	Inter 400	Corpo de texto
Open Sans Semi-Bold	Inter 600	Labels, destaques
Open Sans Bold	Montserrat 700	Titulos de secao
Open Sans Extra Bold	Montserrat 800	Headings principais

/* REMOVER: */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif; /* remover */
}

/* O CANTA DS ja aplica automaticamente: */
/* body { font-family: 'Inter', sans-serif; } */
/* h1-h6 { font-family: 'Montserrat', sans-serif; } */

Etapa 7: Icones

Substitua Font Awesome por Material Symbols Rounded. A mudanca principal e de <i class="fa fa-*"> para <span class="material-symbols-rounded">nome</span>.

Font Awesome	Material Symbols
`<i class="fa fa-home"></i>`	`<span class="material-symbols-rounded">home</span>`
`<i class="fa fa-plus"></i>`	`<span class="material-symbols-rounded">add</span>`
`<i class="fa fa-pencil"></i>`	`<span class="material-symbols-rounded">edit</span>`
`<i class="fa fa-trash"></i>`	`<span class="material-symbols-rounded">delete</span>`
`<i class="fa fa-search"></i>`	`<span class="material-symbols-rounded">search</span>`
`<i class="fa fa-cog"></i>`	`<span class="material-symbols-rounded">settings</span>`
`<i class="fa fa-check"></i>`	`<span class="material-symbols-rounded">check</span>`
`<i class="fa fa-times"></i>`	`<span class="material-symbols-rounded">close</span>`
`<i class="fa fa-download"></i>`	`<span class="material-symbols-rounded">download</span>`
`<i class="fa fa-upload"></i>`	`<span class="material-symbols-rounded">upload</span>`
`<i class="fa fa-user"></i>`	`<span class="material-symbols-rounded">person</span>`
`<i class="fa fa-envelope"></i>`	`<span class="material-symbols-rounded">mail</span>`
`<i class="fa fa-calendar"></i>`	`<span class="material-symbols-rounded">calendar_today</span>`
`<i class="fa fa-bell"></i>`	`<span class="material-symbols-rounded">notifications</span>`
`<i class="fa fa-chevron-right"></i>`	`<span class="material-symbols-rounded">chevron_right</span>`

Etapa 8: Remover Bootstrap

Apos migrar todas as telas, remova o Bootstrap, Font Awesome e MetisMenu. Valide cada tela antes de remover. Use a checklist abaixo.

<!-- REMOVER todas estas linhas: -->
<!-- <link rel="stylesheet" href="/assets/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="/assets/css/font-awesome.min.css"> -->
<!-- <link rel="stylesheet" href="/assets/css/metismenu.min.css"> -->
<!-- <link rel="stylesheet" href="/assets/css/app.css"> -->

<!-- MANTER apenas: -->
<link rel="stylesheet" href="https://ds.cantasys.com.br/dist/css/canta-ds.min.css">

1. Buscar por classes Bootstrap restantes:
   grep -r "btn-primary\|btn-danger\|btn-success" --include="*.php"
   grep -r "form-control\|form-group" --include="*.php"
   grep -r "alert-success\|alert-danger" --include="*.php"
   grep -r "modal-dialog\|modal-body" --include="*.php"

2. Buscar por Font Awesome restante:
   grep -r "fa fa-\|fas fa-\|far fa-\|fab fa-" --include="*.php"

3. Buscar por Open Sans restante:
   grep -r "Open Sans" --include="*.php" --include="*.css"

4. Testar todas as telas principais:
   - Dashboard, Financeiro, RH, TI, Servicos
   - Modais, formularios, tabelas
   - Mobile e desktop
   - Light e dark mode