/* ARQUIVO: assets/css/style_html.css
DESCRIÇÃO: Estilos centralizados para tutoriais e fluxogramas.
REVISÃO: Ajuste visual para "Quadrado Arredondado" (Match System UI)
IMPORTANTE: Adicione class="doc-page" na tag do seu HTML.
*/
/* --- VARIÁVEIS E ESCOPO --- */
.doc-page {
/* Paleta Slate */
--doc-bg-color: #f1f5f9;
--doc-text-headings: #0f172a;
--doc-text-primary: #334155;
--doc-text-secondary: #64748b;
/* Geometria do Sistema (Ajustado conforme imagem) */
--doc-radius: 4px; /* Cantos levemente arredondados, não redondos */
/* Cards */
--doc-card-bg: #ffffff;
--doc-card-border: #e2e8f0;
--doc-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
--doc-card-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1);
/* Cores Sólidas (Baseadas na sua imagem) */
--doc-primary: #3b82f6; /* Azul Padrão */
--doc-info: #00c0ef; /* Cyan (Botão Importado) */
--doc-warning: #f39c12; /* Amarelo/Laranja (Botão Parcial) */
--doc-danger: #dd4b39; /* Vermelho (Botão Não) */
--doc-success: #00a65a; /* Verde */
/* Segmentos de Negócio */
--doc-sdr: #7c3aed;
--doc-loja: #0ea5e9;
--doc-distribuidora: #047857;
--doc-campaign: #ea580c;
--doc-crm: #0d9488;
}
/* --- RESET E BODY --- */
body.doc-page {
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--doc-bg-color);
color: var(--doc-text-primary);
margin: 0;
padding: 40px 20px;
line-height: 1.6;
display: flex;
flex-direction: column;
align-items: center;
}
body.doc-page * { box-sizing: border-box; }
/* --- HEADER --- */
.doc-page .doc-header {
text-align: center;
margin-bottom: 50px;
max-width: 900px;
}
.doc-page .doc-header h1 {
font-size: 2.5rem;
font-weight: 800;
color: var(--doc-text-headings);
margin: 0 0 15px 0;
letter-spacing: -0.025em;
display: inline-block;
}
.doc-page .doc-header h1::after {
content: '';
display: block;
width: 60px;
height: 4px;
background-color: var(--doc-primary);
margin: 10px auto 0;
border-radius: var(--doc-radius); /* Ajustado */
}
.doc-page .doc-header p {
color: var(--doc-text-secondary);
font-size: 1.125rem;
}
/* --- CONTAINER --- */
.doc-page .content-container {
width: 100%;
max-width: 1100px;
display: flex;
flex-direction: column;
gap: 30px;
}
.doc-page .grid-container {
display: grid;
gap: 24px;
grid-template-columns: 1fr;
width: 100%;
}
@media (min-width: 768px) {
.doc-page .grid-container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
/* --- CARDS (.doc-card) --- */
.doc-page .doc-card {
background: var(--doc-card-bg);
border: 1px solid var(--doc-card-border);
border-radius: var(--doc-radius); /* Ajustado para 4px */
padding: 28px;
box-shadow: var(--doc-card-shadow);
transition: all 0.2s ease-in-out;
border-left: 4px solid var(--doc-primary);
display: flex;
flex-direction: column;
}
.doc-page .doc-card:hover {
transform: translateY(-2px);
box-shadow: var(--doc-card-shadow-hover);
}
.doc-page .doc-card h2,
.doc-page .doc-card h3 {
margin-top: 0;
display: flex;
align-items: center;
gap: 12px;
font-size: 1.15rem;
font-weight: 700;
color: var(--doc-text-headings);
border-bottom: 1px solid #f1f5f9;
padding-bottom: 12px;
margin-bottom: 20px;
}
/* Variantes de Cor dos Cards */
.doc-page .doc-card.sdr { border-left-color: var(--doc-sdr); }
.doc-page .doc-card.sdr h3 { color: var(--doc-sdr); }
.doc-page .doc-card.loja { border-left-color: var(--doc-loja); }
.doc-page .doc-card.loja h3 { color: var(--doc-loja); }
.doc-page .doc-card.distribuidora { border-left-color: var(--doc-distribuidora); }
.doc-page .doc-card.distribuidora h3 { color: var(--doc-distribuidora); }
.doc-page .doc-card.campaign { border-left-color: var(--doc-campaign); }
.doc-page .doc-card.campaign h3 { color: var(--doc-campaign); }
.doc-page .doc-card.origin { border-left-color: var(--doc-origin); }
.doc-page .doc-card.origin h3 { color: var(--doc-origin); }
.doc-page .doc-card.crm { border-left-color: var(--doc-crm); }
.doc-page .doc-card.crm h2 { color: var(--doc-crm); }
/* --- COMPONENTES VISUAIS (BADGES E TAGS) --- */
/* 1. Step Badge (Usado para títulos de passos) */
.doc-page .step-badge {
background-color: var(--doc-text-headings);
color: white;
padding: 8px 16px; /* Mais encorpado */
border-radius: var(--doc-radius); /* AGORA QUADRADO ARREDONDADO (4px) */
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 16px;
display: inline-block;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 2. Badge Padrão (Usado para status) */
.doc-page .badge {
display: inline-block;
padding: 6px 12px; /* Padding ajustado para parecer um botão */
border-radius: var(--doc-radius); /* AGORA QUADRADO ARREDONDADO (4px) */
font-size: 0.8rem; /* Fonte legível */
font-weight: 700;
text-transform: uppercase;
color: white;
margin-right: 6px;
background-color: var(--doc-text-secondary);
vertical-align: middle;
line-height: 1;
min-width: 80px; /* Largura mínima para uniformidade visual */
text-align: center;
}
/* Cores específicas baseadas na imagem */
.doc-page .badge.badge-info { background-color: var(--doc-info); } /* Cyan (Importado) */
.doc-page .badge.badge-warning { background-color: var(--doc-warning); } /* Amarelo (Parcial) */
.doc-page .badge.badge-danger { background-color: var(--doc-danger); } /* Vermelho (Não) */
.doc-page .badge.badge-success { background-color: var(--doc-success); } /* Verde */
/* Outros componentes */
.doc-page .doc-image-container {
text-align: center;
margin: 24px 0;
border-radius: var(--doc-radius);
overflow: hidden;
}
.doc-page .doc-image-container img {
max-width: 100%;
height: auto;
border-radius: var(--doc-radius);
border: 1px solid var(--doc-card-border);
}
.doc-page .field-group {
margin-bottom: 16px;
padding: 12px 16px;
background-color: #f8fafc;
border-radius: var(--doc-radius);
border: 1px solid #e2e8f0;
border-left: 3px solid #cbd5e1;
}
.doc-page .field-label {
display: block;
font-weight: 600;
color: var(--doc-text-secondary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.doc-page .field-value {
font-weight: 600;
color: var(--doc-text-headings);
font-size: 0.95rem;
}
.doc-page ul.field-list li {
background-color: #f8fafc;
margin-bottom: 8px;
padding: 12px;
border-radius: var(--doc-radius);
border: 1px solid #e2e8f0;
font-size: 0.9rem;
display: flex;
flex-direction: column;
}
.doc-page .alert {
background-color: #fffbeb;
color: #92400e;
padding: 16px;
border-radius: var(--doc-radius);
border: 1px solid #fcd34d;
text-align: center;
margin-top: 20px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* ========================================
FLUXOGRAMA (Ajustado para geometria quadrada)
========================================
*/
.doc-page .flowchart-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 20px;
}
.doc-page .flow-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
z-index: 2;
}
.doc-page .flow-item:not(.no-connector):not(:last-child)::after {
content: '';
width: 2px;
height: 30px;
background-color: #cbd5e1;
position: relative;
z-index: 1;
}
.doc-page .flow-item:not(.no-connector):not(:last-child)::before {
content: '';
width: 0; height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #cbd5e1;
order: 3; margin-bottom: 5px;
}
.doc-page .card.decision {
border-left-color: var(--doc-warning);
text-align: center;
background-color: #ffffff;
border-top: 4px solid transparent;
max-width: 500px;
border-radius: var(--doc-radius); /* Quadrado Arredondado */
}
.doc-page .card.decision h2 {
color: var(--doc-warning);
justify-content: center;
border-bottom: 1px dashed #e2e8f0;
}
.doc-page .decision-split-container {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
width: 100%;
margin-top: 30px;
position: relative;
}
.doc-page .success-path,
.doc-page .failure-path {
border-radius: var(--doc-radius); /* Quadrado Arredondado */
padding: 20px;
position: relative;
background: #fff;
box-shadow: var(--doc-card-shadow);
}
.doc-page .success-path { border: 1px solid var(--doc-success); border-top-width: 4px; }
.doc-page .failure-path { border: 1px solid var(--doc-danger); border-top-width: 4px; }
@media (min-width: 768px) {
.doc-page .decision-split-container { grid-template-columns: 1fr 1fr; gap: 40px; }
.doc-page .decision-split-container::before {
content: ''; position: absolute; top: -30px; left: 25%; right: 25%; height: 15px;
border-top: 2px solid #cbd5e1; border-left: 2px solid #cbd5e1; border-right: 2px solid #cbd5e1;
border-radius: var(--doc-radius) var(--doc-radius) 0 0; /* Arredondado padrão */
z-index: 0;
}
.doc-page .decision-split-container::after {
content: ''; position: absolute; top: -45px; left: 50%; height: 15px; width: 2px;
background-color: #cbd5e1; transform: translateX(-50%); z-index: 0;
}
.doc-page .success-path::before,
.doc-page .failure-path::before {
position: absolute; top: -42px; padding: 4px 12px;
border-radius: var(--doc-radius); /* Quadrado Arredondado nos Labels Sim/Não */
font-weight: 800; font-size: 0.75rem; color: white; z-index: 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.doc-page .success-path::before { content: 'SIM'; background: var(--doc-success); left: 50%; transform: translateX(-50%); }
.doc-page .failure-path::before { content: 'NÃO'; background: var(--doc-danger); left: 50%; transform: translateX(-50%); }
}
@media (max-width: 767px) {
.doc-page .decision-split-container::before, .doc-page .decision-split-container::after { display: none; }
.doc-page .success-path, .doc-page .failure-path {
margin-top: 15px; border-width: 1px; border-left-width: 6px; border-top-width: 1px;
}
.doc-page .success-path::after { content: 'Caminho: SIM'; display: block; color: var(--doc-success); font-weight: bold; margin-bottom: 10px; font-size: 0.8rem; text-transform: uppercase; }
.doc-page .failure-path::after { content: 'Caminho: NÃO'; display: block; color: var(--doc-danger); font-weight: bold; margin-bottom: 10px; font-size: 0.8rem; text-transform: uppercase; }
}
.doc-page .card.final-success { background-color: #f0fdf4; border-left-color: var(--doc-success); border-color: #bbf7d0; }
.doc-page .card.final-failure { background-color: #fef2f2; border-left-color: var(--doc-danger); border-color: #fecaca; }
.doc-page .end-card { text-align: center; border-left: 4px solid #94a3b8; background-color: #f8fafc; color: var(--doc-text-secondary); padding: 15px; margin-top: 20px; font-weight: 600; border-radius: var(--doc-radius); }