/* ═══════════════════════════════════════════════════════
Gene Control 360 v3.0 — Estilos
Paleta: #1B3A34 · #2D5A50 · #4A8C7A · #E8A598
═══════════════════════════════════════════════════════ */
:root {
--dk: #1B3A34;
--mg: #2D5A50;
--lg: #4A8C7A;
--slm: #E8A598;
--slm2: #F0C4BA;
--bg: #F4F6F4;
--white: #FFFFFF;
--txt: #1A2E2B;
--gray: #64748B;
--lgray: #E2E8F0;
--red: #C0392B;
--org: #E67E22;
--grn: #27AE60;
--blu: #2980B9;
--gold: #B8860B;
--radius: 12px;
--shadow: 0 2px 12px rgba(0,0,0,.08);
}
/* ═══════════════════════════════════════════════════════
TEMA ESCURO (ativado por [data-theme="dark"] no )
═══════════════════════════════════════════════════════ */
[data-theme="dark"] {
--dk: #4A8C7A; /* verde mais claro vira destaque */
--mg: #6BA89A;
--lg: #8FBFB5;
--bg: #0F1A18; /* fundo escuro com sutil tom verde */
--white: #1A2A26; /* "branco" passa a ser dark card */
--txt: #E8EDE9; /* texto principal claro */
--gray: #9FAEB0;
--lgray: #2C3E3A; /* bordas/divisores escurecidos */
--shadow: 0 2px 14px rgba(0,0,0,.45);
}
[data-theme="dark"] body { background: var(--bg); color: var(--txt); }
[data-theme="dark"] .card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .compliance-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .req-table-wrap,
[data-theme="dark"] .form-input,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: var(--white);
color: var(--txt);
border-color: var(--lgray);
}
[data-theme="dark"] .topbar {
background: linear-gradient(180deg, #1A2A26 0%, #0F1A18 100%);
border-bottom: 1px solid var(--lgray);
}
[data-theme="dark"] .sidenav,
[data-theme="dark"] .side-nav,
[data-theme="dark"] .nav-tabs {
background: #15211E;
border-right: 1px solid var(--lgray);
}
[data-theme="dark"] .nav-tab:hover { background: rgba(74,140,122,.12); }
[data-theme="dark"] .nav-tab.active { background: rgba(74,140,122,.22); color: var(--dk); }
[data-theme="dark"] .req-table th { background: #1A2A26; color: var(--dk); }
[data-theme="dark"] .req-table tr { border-color: var(--lgray); }
[data-theme="dark"] .section-title {
background: linear-gradient(90deg, rgba(74,140,122,.15), transparent);
color: var(--dk);
}
[data-theme="dark"] .status-badge.conforme { background: rgba(39,174,96,.18); color: #6FD693; }
[data-theme="dark"] .status-badge.pendente { background: rgba(192,57,43,.18); color: #FF8377; }
[data-theme="dark"] .status-badge.vencendo { background: rgba(184,134,11,.18); color: #F0C95C; }
[data-theme="dark"] .status-badge.em_andamento { background: rgba(41,128,185,.18); color: #6FB5E0; }
[data-theme="dark"] .status-badge.nao_aplicavel { background: rgba(127,140,141,.18); color: #C0CACA; }
[data-theme="dark"] .btn-primary,
[data-theme="dark"] button[class*="btn-"]:not(.btn-edit):not(.btn-sm):not(.btn-docs) {
background: var(--dk); color: #fff;
}
[data-theme="dark"] .empty-state { color: var(--gray); }
[data-theme="dark"] .req-deadline.warn { background: rgba(184,134,11,.18); color: #F0C95C; }
[data-theme="dark"] .req-deadline.crit { background: rgba(192,57,43,.20); color: #FF8377; }
[data-theme="dark"] .req-deadline.ok { background: rgba(39,174,96,.15); color: #6FD693; }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }
[data-theme="dark"] .filter-select { background: var(--white); color: var(--txt); border-color: var(--lgray); }
[data-theme="dark"] .company-select { background: var(--white); color: var(--txt); }
[data-theme="dark"] .stats-grid > div { background: var(--white); border-color: var(--lgray); }
/* Destaque temporário de linha (deep-link, palette, agenda) — legível nos 2 temas */
.row-flash { background: #FFF7E6 !important; }
[data-theme="dark"] .row-flash { background: rgba(184, 134, 11, .30) !important; }
/* Item selecionado do Command Palette — legível nos 2 temas */
.cmd-item-sel { background: #E8F5F1; }
[data-theme="dark"] .cmd-item-sel { background: #D7EDE4; }
/* Elementos que nunca devem sair em impressão/PDF */
@media print {
.no-print,
.toast,
#toast,
.chat-fab,
#chat-fab,
#suggest-fab,
#chat-panel,
.topbar-bell-wrap,
#bulk-action-bar,
#breadcrumb-bar,
#app-content button,
.btn-report,
.btn-primary,
.btn-secondary,
.btn-sm,
.btn-edit,
.btn-docs { display: none !important; }
}
/* Mesma limpeza quando o "Exportar PDF" do dashboard ativa o printing-mode */
body.printing-mode #app-content button,
body.printing-mode #breadcrumb-bar,
body.printing-mode .toast,
body.printing-mode #toast { display: none !important; }
/* ═══════════════════════════════════════════════════════
MODO IMPRESSÃO / EXPORT PDF — usado pelo botão "Exportar PDF"
═══════════════════════════════════════════════════════ */
body.printing-mode .topbar,
body.printing-mode .nav-tabs,
body.printing-mode #theme-toggle-btn,
body.printing-mode #chat-bubble,
body.printing-mode #chat-fab,
body.printing-mode #suggest-fab,
body.printing-mode .chat-fab,
body.printing-mode .topbar-bell-wrap,
body.printing-mode .topbar-user-wrap,
body.printing-mode #bell-dropdown,
body.printing-mode #user-menu-dropdown,
body.printing-mode .btn-logout,
body.printing-mode .btn-add,
body.printing-mode .req-header .req-filters,
body.printing-mode .req-filters,
body.printing-mode #bookmarks-bar,
body.printing-mode #btn-save-bookmark,
body.printing-mode #status-chip,
body.printing-mode #undo-chip,
body.printing-mode #timer-chip,
body.printing-mode #stats-footer,
body.printing-mode #quick-filters-bar,
body.printing-mode #recent-filters-bar,
body.printing-mode .btn-report,
body.printing-mode .btn-edit { display: none !important; }
body.printing-mode #app-content { padding: 0 !important; max-width: 100% !important; }
body.printing-mode .compliance-pct { color: #1B3A34 !important; }
body.printing-mode .dash-panels,
body.printing-mode .stats-grid,
body.printing-mode .compliance-card { page-break-inside: avoid; }
body.printing-mode .pdf-header { display: block !important; }
.pdf-header { display: none; }
@media print {
@page { margin: 1.2cm; size: A4 portrait; }
body { background: white !important; }
/* Esconde TODA a interface não-documento ao imprimir/exportar PDF */
.topbar, .nav-tabs, #theme-toggle-btn, #chat-bubble, #chat-fab, #suggest-fab,
.chat-fab, .topbar-bell-wrap, .topbar-user-wrap, #bell-dropdown,
#user-menu-dropdown, .btn-logout, .btn-add, #bookmarks-bar, #btn-save-bookmark,
#status-chip, #undo-chip, #timer-chip, #stats-footer, #quick-filters-bar,
#recent-filters-bar, .req-filters, #notif-banner, #pwa-banner, #offline-banner,
.btn-report, button[onclick*="export"], button[onclick*="Export"],
button[onclick*="openPrintableTable"], button[onclick*="Modal"],
.btn-edit, .bulk-cb, #bulk-bar {
display: none !important;
}
.dash-panels, .stats-grid, .compliance-card { page-break-inside: avoid; }
.pdf-header { display: block !important; }
/* Garante conteúdo ocupa página inteira */
.app-content { padding: 0 !important; }
}
/* ═══════════════════════════════════════════════════════
MODO APRESENTAÇÃO (atalho "p" ou botão) — para demos a clientes
Esconde menus de admin/sensíveis, aumenta fontes, esconde topbar info
═══════════════════════════════════════════════════════ */
body.presentation-mode .topbar-user,
body.presentation-mode .topbar-avatar,
body.presentation-mode .btn-logout,
body.presentation-mode .topbar-bell-wrap,
body.presentation-mode .admin-only,
body.presentation-mode .nav-tab[data-view="metrics"],
body.presentation-mode .nav-tab[data-view="leads"],
body.presentation-mode .nav-tab[data-view="funnel"],
body.presentation-mode .nav-tab[data-view="catalog"],
body.presentation-mode .nav-tab[data-view="partners"],
body.presentation-mode .nav-tab[data-view="inbox"],
body.presentation-mode .nav-tab[data-view="history"] {
display: none !important;
}
body.presentation-mode .topbar { padding: 18px 28px; }
body.presentation-mode .topbar-brand-txt { font-size: 22px; font-weight: 700; }
body.presentation-mode .req-table { font-size: 15px; }
body.presentation-mode .req-table th { font-size: 13px; padding: 14px 16px; }
body.presentation-mode .req-table td { padding: 14px 16px; }
body.presentation-mode .req-name { font-size: 16px !important; font-weight: 600; }
body.presentation-mode .status-badge { font-size: 13px; padding: 5px 12px; }
body.presentation-mode .compliance-pct { font-size: 40px; }
body.presentation-mode .stats-grid > div { padding: 22px; }
body.presentation-mode .stats-grid > div > div:first-child { font-size: 36px; font-weight: 800; }
body.presentation-mode .section-title { font-size: 14px; padding: 8px 14px; font-weight: 700; }
/* Indicador no canto superior */
body.presentation-mode::before {
content: "🎤 MODO APRESENTAÇÃO — pressione P para sair";
position: fixed;
top: 8px;
left: 50%;
transform: translateX(-50%);
background: #1B3A34;
color: #fff;
padding: 5px 14px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* ═══════════════════════════════════════════════════════
MODO DENSO (atalho "d") — tabela compacta
═══════════════════════════════════════════════════════ */
body.dense-mode .req-table th,
body.dense-mode .req-table td { padding: 6px 10px !important; font-size: 12px !important; }
body.dense-mode .req-table .req-name { font-size: 13px !important; line-height: 1.3 !important; }
body.dense-mode .req-table .req-resp { font-size: 12px !important; }
body.dense-mode .req-table .section-title { padding: 4px 12px !important; font-size: 12px !important; }
body.dense-mode .status-badge { padding: 2px 8px !important; font-size: 11px !important; }
body.dense-mode .btn-edit,
body.dense-mode .btn-docs { padding: 3px 8px !important; font-size: 11px !important; }
body.dense-mode .req-header { padding: 12px 16px !important; }
body.dense-mode .req-deadline { font-size: 11px !important; padding: 2px 8px !important; }
/* Botão flutuante de troca de tema */
.theme-toggle-btn {
position: fixed;
bottom: 88px;
right: 22px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--lgray);
cursor: pointer;
font-size: 18px;
box-shadow: var(--shadow);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
transition: transform .2s, background .2s;
}
.theme-toggle-btn:hover { transform: scale(1.08); }
[data-theme="dark"] .theme-toggle-btn { background: #1A2A26; color: #F0C95C; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--txt);
min-height: 100vh;
overflow-x: hidden;
}
/* ══ SCREENS ═════════════════════════════════════════ */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }
/* ══ LOGIN ══════════════════════════════════════════ */
#screen-login { flex-direction: row; }
.login-left {
width: 54%;
background:
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74,140,122,.35) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 0% 100%, rgba(232,165,152,.12) 0%, transparent 55%),
linear-gradient(135deg, #1B3A34 0%, #2D5A50 60%, #1B3A34 100%);
display: flex;
flex-direction: column;
justify-content: center;
padding: 72px 80px;
position: relative;
overflow: hidden;
color: #fff;
}
/* Camada decorativa — folhas/curvas orgânicas em SVG inline */
.login-left::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 480px; height: 480px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
opacity: .55;
transform: rotate(15deg);
pointer-events: none;
}
.login-left::after {
content: '';
position: absolute;
bottom: -160px; left: -100px;
width: 420px; height: 420px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.login-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.08);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.18);
padding: 7px 16px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
color: #E8F4EE;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 38px;
width: fit-content;
position: relative;
z-index: 2;
}
.login-badge-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #7DD3A4;
box-shadow: 0 0 12px #7DD3A4;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px #7DD3A4; }
50% { opacity: .5; transform: scale(1.4); box-shadow: 0 0 20px #7DD3A4; }
}
/* Logo Gene Control 360 — destaque central */
.login-symbol {
width: 260px;
height: auto;
object-fit: contain;
margin-bottom: 14px;
filter: brightness(0) invert(1);
position: relative;
z-index: 2;
}
.login-brand-name {
display: block;
font-family: 'DM Serif Display', serif;
font-size: 36px;
color: #fff;
margin-bottom: 18px;
position: relative;
z-index: 2;
letter-spacing: -0.01em;
}
.login-tagline {
font-size: 15.5px;
line-height: 1.7;
color: rgba(255,255,255,.78);
max-width: 440px;
margin-bottom: 44px;
position: relative;
z-index: 2;
}
.login-features {
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
z-index: 2;
max-width: 440px;
}
.login-feature {
display: flex;
gap: 14px;
align-items: flex-start;
}
.login-feature-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(232,165,152,.18);
border: 1px solid rgba(232,165,152,.55);
color: #F0C4BA;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.login-feature-title {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
letter-spacing: -0.005em;
}
.login-feature-sub {
font-size: 12.5px;
color: rgba(255,255,255,.62);
line-height: 1.55;
}
/* ── Lado direito (formulário) ─────────────────────── */
.login-right {
width: 46%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 64px 72px;
background: var(--white);
position: relative;
}
/* Logo Gene Ambiental — lado direito (canto superior direito, discreto) */
.login-gc360-logo {
position: absolute;
top: 32px;
right: 40px;
height: 36px;
max-width: 150px;
object-fit: contain;
opacity: .75;
margin-bottom: 0;
}
/* CTA para calculadora pública (lado direito do login) */
.login-cta-calc {
margin-top: 28px;
}
.login-cta-divider {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 14px;
}
.login-cta-divider::before,
.login-cta-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--lgray);
}
.login-cta-divider span {
padding: 0 12px;
font-size: 11px;
font-weight: 600;
color: var(--gray);
text-transform: uppercase;
letter-spacing: .07em;
}
.login-cta-link {
display: block;
background: linear-gradient(135deg, #EAF4ED 0%, #F4F6F4 100%);
border: 2px solid var(--mg);
border-radius: 12px;
padding: 14px 18px;
text-decoration: none;
color: var(--dk);
text-align: center;
transition: all .15s;
cursor: pointer;
}
.login-cta-link:hover {
background: linear-gradient(135deg, var(--mg), var(--dk));
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(45,90,80,.25);
}
.login-cta-link strong {
font-size: 14px;
font-weight: 700;
display: block;
margin-bottom: 4px;
}
.login-cta-sub {
display: block;
font-size: 11.5px;
color: var(--gray);
font-weight: 500;
}
.login-cta-link:hover .login-cta-sub {
color: rgba(255,255,255,.85);
}
/* Suporte (substitui o hint de demo) */
.login-support {
margin-top: 20px;
font-size: 12px;
color: var(--gray);
text-align: center;
line-height: 1.7;
}
.login-support a {
color: var(--lg);
text-decoration: none;
font-weight: 600;
}
/* Símbolo na topbar (compacto, não cobre botões) */
.topbar-symbol {
height: 22px;
width: 22px;
object-fit: contain;
flex-shrink: 0;
display: block;
}
/* Marca na topbar — só texto, sem imagem */
.topbar-brand-txt {
font-family: 'DM Serif Display', serif;
font-size: 18px;
color: #ffffff;
white-space: nowrap;
letter-spacing: -0.01em;
}
.login-brand {
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--lg);
margin-bottom: 56px;
}
.login-card { width: 100%; max-width: 400px; }
.login-card-title {
font-family: 'DM Serif Display', serif;
font-size: 34px;
color: var(--dk);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.login-card-sub { font-size: 14px; color: var(--gray); margin-bottom: 36px; line-height: 1.55; }
.login-error {
display: none;
color: var(--red);
font-size: 13px;
padding: 11px 14px;
background: #FDEDEC;
border-left: 3px solid var(--red);
border-radius: 8px;
margin-bottom: 20px;
}
.login-error.show { display: block; }
.form-group { margin-bottom: 18px; }
.form-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--dk);
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 7px;
}
.form-input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--lgray);
border-radius: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: var(--txt);
background: var(--bg);
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
border-color: var(--lg);
background: var(--white);
box-shadow: 0 0 0 4px rgba(74,140,122,.1);
}
.form-input::placeholder { color: #aaa; }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 90px; }
.btn-login {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, var(--dk) 0%, var(--mg) 100%);
color: var(--white);
border: none;
border-radius: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 14.5px;
font-weight: 700;
cursor: pointer;
margin-top: 14px;
text-align: center;
line-height: 1;
letter-spacing: .02em;
box-shadow: 0 4px 14px rgba(27,58,52,.22);
transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(27,58,52,.3); filter: brightness(1.06); }
.btn-login:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(27,58,52,.22); }
.btn-login:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.login-hint {
margin-top: 18px;
padding: 11px 14px;
background: rgba(74,140,122,.08);
border-radius: 8px;
border-left: 3px solid var(--lg);
font-size: 12px;
color: var(--gray);
line-height: 1.6;
}
.login-hint strong { color: var(--mg); }
.login-footer {
position: absolute;
bottom: 24px;
font-size: 11px;
color: var(--lgray);
}
/* ══ PLATAFORMA ══════════════════════════════════════ */
#screen-app { flex-direction: column; background: var(--bg); }
/* — Topbar — */
.topbar {
height: 62px;
min-height: 62px;
max-height: 62px;
background: var(--dk);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 4px 24px rgba(0,0,0,.22);
gap: 16px;
overflow: hidden;
}
.topbar-left {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.topbar-brand {
font-family: 'DM Serif Display', serif;
font-size: 20px;
color: var(--white);
white-space: nowrap;
}
.topbar-brand span { color: var(--slm); }
.topbar-center { flex: 1; display: flex; justify-content: center; }
.company-select {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
color: var(--white);
border-radius: 8px;
padding: 7px 14px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
outline: none;
min-width: 220px;
}
.company-select option { background: var(--dk); color: var(--white); }
.company-label {
color: rgba(255,255,255,.7);
font-size: 13px;
font-weight: 600;
}
.topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.topbar-user { text-align: right; }
.topbar-user-name { font-size: 13px; font-weight: 600; color: var(--white); }
.topbar-user-role { font-size: 11px; color: rgba(255,255,255,.4); text-transform: capitalize; }
.topbar-avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--lg);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: var(--white);
flex-shrink: 0;
}
.btn-logout {
padding: 6px 14px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
border-radius: 8px;
color: var(--white);
font-size: 12px;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
transition: background .15s;
white-space: nowrap;
}
.btn-logout:hover { background: rgba(255,255,255,.18); }
/* — Nav tabs — */
.nav-tabs {
background: var(--mg);
display: flex;
padding: 0 28px;
gap: 2px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-tab {
padding: 13px 18px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,.5);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all .2s;
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
flex-shrink: 0;
}
.nav-tab:hover { color: rgba(255,255,255,.85); }
.nav-tab.active { color: var(--white); border-bottom-color: var(--slm); }
.admin-only { display: none; }
/* — Content area — */
.app-content { flex: 1; padding: 28px; overflow-y: auto; max-width: 1400px; margin: 0 auto; width: 100%; }
/* — Loading — */
.loading-wrap { display: flex; justify-content: center; align-items: center; height: 200px; }
.spinner {
width: 36px; height: 36px;
border: 3px solid var(--lgray);
border-top-color: var(--lg);
border-radius: 50%;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ══ DASHBOARD ═══════════════════════════════════════ */
.dash-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
gap: 16px;
flex-wrap: wrap;
}
.dash-title { font-family: 'DM Serif Display', serif; font-size: 26px; color: var(--dk); }
.dash-sub { font-size: 14px; color: var(--gray); margin-top: 4px; }
/* Botão Relatório Mensal */
.btn-report {
padding: 10px 18px;
background: var(--white);
border: 1.5px solid var(--lg);
border-radius: 10px;
color: var(--dk);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: all .15s;
flex-shrink: 0;
}
.btn-report:hover {
background: var(--dk);
border-color: var(--dk);
color: var(--white);
}
/* Barra de consultora (visão cliente) */
.client-consultant-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(74,140,122,.07);
border: 1px solid rgba(74,140,122,.2);
border-radius: 10px;
padding: 10px 18px;
margin-bottom: 20px;
font-size: 12px;
color: var(--mg);
flex-wrap: wrap;
gap: 8px;
}
.client-consultant-info {
font-weight: 700;
display: flex;
align-items: center;
}
.client-consultant-resp strong { color: var(--dk); }
.client-consultant-period strong { color: var(--dk); }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.stat-card {
background: var(--white);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
border-left: 4px solid var(--lgray);
transition: transform .15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card.s-conforme { border-left-color: var(--grn); }
.stat-card.s-em_andamento { border-left-color: var(--blu); }
.stat-card.s-pendente { border-left-color: var(--red); }
.stat-card.s-vencendo { border-left-color: var(--gold); }
.stat-card.s-nao_aplicavel{ border-left-color: var(--gray); }
.stat-card.s-total { border-left-color: var(--dk); }
.stat-val {
font-family: 'DM Serif Display', serif;
font-size: 40px;
line-height: 1;
color: var(--dk);
}
.stat-lbl {
font-size: 12px;
font-weight: 600;
color: var(--gray);
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 6px;
}
.stat-pct {
font-size: 11px;
color: var(--gray);
margin-top: 4px;
}
/* Compliance bar */
.compliance-card {
background: var(--white);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
margin-bottom: 24px;
}
.compliance-label {
font-size: 13px;
font-weight: 600;
color: var(--dk);
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.compliance-pct {
font-family: 'DM Serif Display', serif;
font-size: 28px;
color: var(--lg);
}
.bar-track {
height: 12px;
background: var(--lgray);
border-radius: 100px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--mg), var(--lg));
border-radius: 100px;
transition: width .6s ease;
}
/* Upcoming deadlines */
.dash-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .dash-panels { grid-template-columns: 1fr; } }
.panel-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.panel-head {
padding: 16px 20px;
border-bottom: 1px solid var(--lgray);
font-size: 13px;
font-weight: 700;
color: var(--dk);
display: flex;
align-items: center;
gap: 8px;
}
.deadline-list { padding: 0; }
.deadline-item {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 20px;
border-bottom: 1px solid var(--lgray);
font-size: 13px;
}
.deadline-item:last-child { border-bottom: none; }
.deadline-cat {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--gray);
min-width: 0;
flex-shrink: 0;
}
.deadline-name { flex: 1; color: var(--txt); min-width: 0; }
.deadline-date {
font-size: 12px;
font-weight: 600;
color: var(--red);
white-space: nowrap;
flex-shrink: 0;
}
.deadline-date.soon { color: var(--gold); }
/* Admin companies list on dashboard */
.companies-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.company-dash-card {
background: var(--white);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
cursor: pointer;
transition: transform .15s, box-shadow .15s;
}
.company-dash-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.company-dash-name { font-size: 15px; font-weight: 700; color: var(--dk); margin-bottom: 4px; }
.company-dash-sector{ font-size: 12px; color: var(--gray); margin-bottom: 14px; }
.mini-bar-track { height: 7px; background: var(--lgray); border-radius: 100px; overflow: hidden; margin-bottom: 8px; }
.mini-bar-fill { height: 100%; background: linear-gradient(90deg, var(--mg), var(--lg)); border-radius: 100px; }
.company-dash-pct { font-size: 12px; color: var(--gray); }
.company-dash-pct strong { color: var(--lg); }
/* ══ TABELA DE REQUISITOS ════════════════════════════ */
.req-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.req-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-select {
padding: 8px 12px;
border: 1.5px solid var(--lgray);
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: var(--txt);
background: var(--white);
cursor: pointer;
outline: none;
}
.filter-select:focus { border-color: var(--lg); }
.section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--lg);
padding: 12px 16px 8px;
background: rgba(74,140,122,.06);
border-radius: 8px 8px 0 0;
border-left: 3px solid var(--lg);
margin-top: 16px;
}
.section-title:first-of-type { margin-top: 0; }
.req-table-wrap {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.req-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.req-table th {
background: var(--dk);
color: rgba(255,255,255,.7);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
padding: 12px 16px;
text-align: left;
white-space: nowrap;
}
.req-table td {
padding: 13px 16px;
border-bottom: 1px solid var(--lgray);
vertical-align: middle;
}
.req-table tr:last-child td { border-bottom: none; }
.req-table tr:hover td { background: rgba(74,140,122,.04); }
.req-name { font-weight: 500; color: var(--txt); }
.req-resp { color: var(--gray); font-size: 12px; }
.req-deadline{
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.req-deadline.urgent { color: var(--red); }
.req-deadline.soon { color: var(--gold); }
.req-deadline.ok { color: var(--gray); }
.req-deadline.none { color: var(--lgray); }
/* Status badge */
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: opacity .15s;
}
.status-badge:hover { opacity: .8; }
.status-badge.conforme { background: #EAFAF1; color: #1E8449; }
.status-badge.em_andamento { background: #EBF5FB; color: #1A5276; }
.status-badge.pendente { background: #FDEDEC; color: #922B21; }
.status-badge.vencendo { background: #FEF9E7; color: #7D6608; }
.status-badge.nao_aplicavel{ background: var(--lgray); color: var(--gray); }
.btn-edit {
padding: 5px 10px;
background: var(--bg);
border: 1.5px solid var(--lgray);
border-radius: 7px;
font-size: 12px;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
color: var(--gray);
transition: all .15s;
}
.btn-edit:hover {
border-color: var(--lg);
color: var(--dk);
background: rgba(74,140,122,.06);
}
/* ══ EMPRESAS ════════════════════════════════════════ */
.admin-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.admin-title {
font-family: 'DM Serif Display', serif;
font-size: 24px;
color: var(--dk);
}
.btn-primary {
padding: 10px 20px;
background: var(--dk);
color: var(--white);
border: none;
border-radius: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
}
.btn-primary:hover { background: var(--mg); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-secondary {
padding: 10px 20px;
background: var(--white);
color: var(--dk);
border: 1.5px solid var(--lgray);
border-radius: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.btn-secondary:hover { border-color: var(--lg); }
.admin-table-wrap {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
background: var(--dk);
color: rgba(255,255,255,.7);
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
padding: 12px 16px; text-align: left;
}
.admin-table td {
padding: 13px 16px;
border-bottom: 1px solid var(--lgray);
vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(74,140,122,.04); }
.role-badge {
display: inline-block;
padding: 3px 9px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
}
.role-badge.admin { background: #E8F0FE; color: #1a56db; }
.role-badge.manager { background: rgba(74,140,122,.12); color: var(--mg); }
.role-badge.viewer { background: var(--lgray); color: var(--gray); }
.compliance-mini { font-size: 12px; }
.compliance-mini strong { color: var(--grn); }
.btn-sm {
padding: 5px 10px;
border-radius: 7px;
font-size: 12px;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
border: 1.5px solid var(--lgray);
background: var(--white);
color: var(--gray);
transition: all .15s;
}
.btn-sm:hover { border-color: var(--red); color: var(--red); }
.btn-sm.active-toggle { border-color: var(--grn); color: var(--grn); }
.btn-sm.active-toggle:hover { border-color: var(--red); color: var(--red); }
/* ══ MODAL ═══════════════════════════════════════════ */
.modal-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 200;
justify-content: center;
align-items: center;
padding: 20px;
backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal-box {
background: var(--white);
border-radius: 16px;
width: 100%;
max-width: 700px;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 64px rgba(0,0,0,.25);
overflow: hidden;
animation: slide-up .2s ease;
}
@keyframes slide-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--lgray);
flex-shrink: 0;
}
.modal-title { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--dk); }
.modal-close {
background: none;
border: none;
font-size: 18px;
color: var(--gray);
cursor: pointer;
line-height: 1;
padding: 4px;
border-radius: 6px;
transition: background .15s;
}
.modal-close:hover { background: var(--lgray); }
.modal-body { padding: 24px; overflow-y: auto; flex: 1 1 auto; }
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid var(--lgray);
background: var(--bg);
flex-shrink: 0;
}
.req-label {
font-size: 13px;
font-weight: 600;
color: var(--dk);
margin-bottom: 16px;
line-height: 1.5;
}
/* ══ TOAST (canto inferior esquerdo, fora da área do chat IA + lâmpada) ═══ */
.toast {
position: fixed;
bottom: 28px; left: 28px;
background: var(--dk);
color: var(--white);
padding: 13px 20px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0,0,0,.3);
transform: translateY(80px);
opacity: 0;
transition: all .25s ease;
z-index: 10000;
max-width: 360px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: var(--grn); }
.toast.error { background: var(--red); }
/* ══ ALERTAS ═════════════════════════════════════════ */
.btn-alerts {
padding: 10px 18px;
background: #FEF9E7;
border: 1.5px solid #F39C12;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
color: #7D6608;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
transition: all .15s;
white-space: nowrap;
}
.btn-alerts:hover { background: #FCF3CF; border-color: #E67E22; color: #5D4E07; }
.btn-alerts:disabled { opacity: .6; cursor: default; }
/* ══ DOCUMENTOS ══════════════════════════════════════ */
.btn-docs {
padding: 4px 9px;
background: var(--bg);
border: 1.5px solid var(--lgray);
border-radius: 7px;
font-size: 12px;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
color: var(--gray);
transition: all .15s;
white-space: nowrap;
}
.btn-docs:hover { border-color: var(--lg); color: var(--dk); background: rgba(74,140,122,.06); }
.btn-docs.has-docs { border-color: var(--lg); color: var(--mg); background: rgba(74,140,122,.09); font-weight: 700; }
.docs-loading { display: flex; justify-content: center; padding: 32px; }
.docs-list { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg);
border: 1px solid var(--lgray);
border-radius: 10px;
}
.doc-icon { font-size: 22px; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 13px; font-weight: 600; color: var(--dk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: 11px; color: var(--gray); margin-top: 2px; }
.doc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-doc-dl {
padding: 5px 10px;
background: var(--dk);
color: var(--white);
border-radius: 7px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition: background .15s;
}
.btn-doc-dl:hover { background: var(--mg); }
.btn-doc-del {
padding: 5px 9px;
background: #FDEDEC;
border: none;
border-radius: 7px;
font-size: 13px;
cursor: pointer;
transition: background .15s;
}
.btn-doc-del:hover { background: #F5B7B1; }
.doc-empty {
text-align: center;
padding: 20px;
color: var(--gray);
font-size: 13px;
background: var(--bg);
border-radius: 10px;
margin-bottom: 16px;
}
.doc-upload-area {
border: 2px dashed var(--lgray);
border-radius: 12px;
padding: 20px;
text-align: center;
background: #FAFCFA;
}
.doc-upload-label { font-size: 13px; font-weight: 700; color: var(--dk); margin-bottom: 4px; }
.doc-upload-hint { font-size: 11px; color: var(--gray); margin-bottom: 14px; }
.doc-file-btn {
display: inline-block;
padding: 8px 18px;
background: var(--white);
border: 1.5px solid var(--lgray);
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: var(--dk);
cursor: pointer;
transition: all .15s;
font-family: 'DM Sans', sans-serif;
}
.doc-file-btn:hover { border-color: var(--lg); background: rgba(74,140,122,.06); }
.doc-file-name {
font-size: 11px;
color: var(--mg);
margin: 8px 0 12px;
min-height: 16px;
font-weight: 600;
}
.btn-doc-upload {
padding: 8px 20px;
background: var(--dk);
color: var(--white);
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
font-family: 'DM Sans', sans-serif;
}
.btn-doc-upload:hover:not(:disabled) { background: var(--mg); }
.btn-doc-upload:disabled { opacity: .4; cursor: not-allowed; }
/* ══ EMPTY STATE ═════════════════════════════════════ */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--gray);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-msg { font-size: 15px; }
/* ══ PRINT / PDF ═════════════════════════════════════ */
@media print {
/* Ocultar tudo exceto o conteúdo do modal */
#screen-login,
.topbar,
.nav-tabs,
.modal-header,
.modal-footer,
.modal-overlay::before { display: none !important; }
/* Modal vira página inteira */
.modal-overlay {
position: static !important;
background: none !important;
display: block !important;
}
.modal-box {
box-shadow: none !important;
border-radius: 0 !important;
max-width: 100% !important;
width: 100% !important;
animation: none !important;
}
.modal-body {
padding: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/* Garantir que tabelas não quebrem linha */
table { page-break-inside: auto; }
tr { page-break-inside: avoid; }
}
/* ══ RESPONSIVE ══════════════════════════════════════ */
/* Barra de resumo no rodapé dos Requisitos: só no celular
(no computador essas infos já estão no Dashboard) */
#stats-footer { display: none !important; }
@media (max-width: 768px) { #stats-footer { display: flex !important; } }
@media (max-width: 768px) {
/* ── Login ── */
#screen-login { flex-direction: column; }
.login-left { width: 100%; padding: 40px 28px 60px; min-height: auto; }
.login-right { width: 100%; padding: 56px 28px 40px; }
.login-symbol { width: 180px; }
.login-brand-name { font-size: 28px; }
.login-gc360-logo { position: absolute; top: 16px; right: 20px; height: 30px; }
.login-card-title { font-size: 28px; }
/* ── Topbar enxuta ── */
.topbar { padding: 0 12px; gap: 8px; }
.topbar-brand-txt { display: none; }
.topbar-right { gap: 8px; }
.topbar-user-role { display: none; }
.topbar-user-name { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-select { min-width: 0; max-width: 44vw; padding: 7px 10px; }
/* ── Abas: rolagem horizontal (nenhuma aba fica inacessível) ── */
.nav-tabs { padding: 0 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab { padding: 12px 12px; font-size: 12.5px; }
/* ── Conteúdo ── */
.app-content { padding: 16px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
/* ── Tabelas: rolam na horizontal em vez de cortar colunas ── */
.req-table-wrap, .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#app-content table, #modal-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.req-table th:nth-child(3),
.req-table td:nth-child(3) { display: none; }
/* ── Dropdowns do topo cabem na tela ── */
#bell-dropdown, #user-menu-dropdown { left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; max-height: 70vh; overflow-y: auto; }
/* ── Modal quase tela cheia ── */
.modal-overlay { padding: 10px; }
.modal-box { max-width: 100%; max-height: 94vh; }
.modal-header { padding: 16px 18px 12px; }
.modal-title { font-size: 18px; }
.modal-body { padding: 18px; }
.modal-footer { padding: 12px 18px; }
/* ── Imagens não estouram (sem mexer em alturas fixas, ex.: logo 18px) ── */
#app-content img, #modal-body img { max-width: 100%; }
}
/* Celular em pé / telas bem estreitas */
@media (max-width: 520px) {
/* grids escritos no conteúdo viram 1 coluna (nada fica espremido) */
#app-content [style*="grid-template-columns"],
#modal-body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
/* linhas horizontais quebram em vez de vazar pra fora da tela */
#app-content [style*="display:flex"], #app-content [style*="display: flex"],
#modal-body [style*="display:flex"], #modal-body [style*="display: flex"] { flex-wrap: wrap; }
/* quebra palavras muito longas (links, normas) */
#app-content, #modal-body { overflow-wrap: break-word; word-break: break-word; }
}
/* ══ CHAT IA DE SUPORTE ════════════════════════════════ */
.chat-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #1B3A34, #2D5A50);
color: #fff;
border: none;
font-size: 26px;
cursor: pointer;
box-shadow: 0 8px 24px rgba(27,58,52,.4);
z-index: 9998;
transition: transform .15s, box-shadow .15s;
display: flex;
align-items: center;
justify-content: center;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px rgba(27,58,52,.5); }
.chat-fab.hidden { display: none; }
.chat-panel {
position: fixed;
bottom: 96px;
right: 24px;
width: 380px;
max-width: calc(100vw - 32px);
height: 560px;
max-height: calc(100vh - 130px);
background: #fff;
border-radius: 18px;
box-shadow: 0 24px 64px rgba(27,58,52,.35);
z-index: 9999;
display: flex;
flex-direction: column;
overflow: hidden;
animation: chatFadeIn .25s ease-out;
}
.chat-panel.hidden { display: none; }
@keyframes chatFadeIn {
from { opacity: 0; transform: translateY(20px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-header {
background: linear-gradient(135deg, #1B3A34, #2D5A50);
color: #fff;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.chat-title { display: flex; align-items: center; gap: 10px; }
.chat-avatar { font-size: 28px; }
.chat-title-name { font-weight: 700; font-size: 14px; }
.chat-title-sub { font-size: 11.5px; color: rgba(255,255,255,.72); margin-top: 1px; }
.chat-close {
background: rgba(255,255,255,.15);
border: none;
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
transition: background .15s;
}
.chat-close:hover { background: rgba(255,255,255,.3); }
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 18px 16px;
background: #F4F6F4;
display: flex;
flex-direction: column;
gap: 12px;
}
.chat-msg {
display: flex;
max-width: 85%;
animation: msgFadeIn .2s ease-out;
}
@keyframes msgFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg-bot { align-self: flex-start; }
.chat-msg-user { align-self: flex-end; }
.chat-bubble {
padding: 11px 14px;
border-radius: 14px;
font-size: 13.5px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.chat-msg-bot .chat-bubble { background: #fff; color: #1A2E2B; border: 1px solid #E2E8F0; border-bottom-left-radius: 4px; }
.chat-msg-user .chat-bubble { background: linear-gradient(135deg, #1B3A34, #2D5A50); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-bot .chat-bubble strong { color: #1B3A34; }
.chat-msg-bot .chat-bubble a { color: #2D5A50; }
.chat-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; animation: typingPulse 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingPulse { 0%,80%,100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.chat-form {
display: flex;
gap: 8px;
padding: 12px;
border-top: 1px solid #E2E8F0;
background: #fff;
flex-shrink: 0;
}
.chat-input {
flex: 1;
padding: 11px 14px;
border: 1.5px solid #E2E8F0;
border-radius: 22px;
font-family: 'DM Sans', sans-serif;
font-size: 13.5px;
background: #F4F6F4;
outline: none;
transition: border .15s, background .15s;
}
.chat-input:focus { border-color: #4A8C7A; background: #fff; }
.chat-send {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #1B3A34, #2D5A50);
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
font-weight: 700;
flex-shrink: 0;
transition: transform .15s, filter .15s;
}
.chat-send:hover { transform: scale(1.05); filter: brightness(1.1); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.chat-footer { padding: 8px 16px; font-size: 11px; color: #94A3B8; text-align: center; background: #fff; border-top: 1px solid #F4F6F4; flex-shrink: 0; }
.chat-footer a { color: #2D5A50; font-weight: 600; text-decoration: none; }
@media (max-width: 480px) {
.chat-panel { right: 8px; bottom: 80px; width: calc(100vw - 16px); height: calc(100vh - 110px); }
.chat-fab { bottom: 16px; right: 16px; }
}