/* ================================================================ BEGUEL REPRESENTAÇÕES — Folha de estilos compartilhada estilo.css v1.1 Inclua em todos os HTMLs com: v1.1 (v2.4.4): suporte a tema claro/escuro via html[data-theme="..."] - Padrão da folha continua sendo dark (compatibilidade com versões antigas). - .tema-light e body.form-page seguem funcionando para páginas que ainda usam. - html[data-theme="light"] força claro; html[data-theme="dark"] força escuro (este último vem do theme.css, carregado em paralelo com este arquivo). ================================================================ */ /* ── IMPORTAÇÃO DE FONTES ─────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap'); /* ── RESET ────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } /* ================================================================ TEMA DARK — Dashboard principal (etapa1-login-dashboard.html) ================================================================ */ :root { /* Backgrounds */ --bg: #0E0F11; --bg2: #16181C; --bg3: #1E2026; /* Bordas */ --border: #2A2D35; --border2: #353840; /* Textos */ --text: #F0EEE8; --text2: #9B9A95; --text3: #5C5B57; /* Dourado / Verde (identidade Beguel) */ --green: #C9A84C; --green-dim: #A07830; --green-bg: rgba(201,168,76,.10); --green-border: rgba(201,168,76,.25); /* Âmbar */ --amber: #F5A623; --amber-dim: #C07A0A; --amber-bg: rgba(245,166,35,.08); --amber-border: rgba(245,166,35,.20); /* Azul */ --blue: #4A9EFF; --blue-dim: #1259A8; --blue-bg: rgba(74,158,255,.08); --blue-border: rgba(74,158,255,.20); /* Coral / Vermelho */ --coral: #FF6B6B; --coral-dim: #C0392B; --coral-bg: rgba(255,107,107,.08); --coral-border: rgba(255,107,107,.20); /* Roxo */ --purple: #9B7FFF; --purple-dim: #6040C0; --purple-bg: rgba(155,127,255,.08); --purple-border: rgba(155,127,255,.20); /* Bordas radius */ --r: 10px; --r-lg: 16px; --r-xl: 20px; } /* ================================================================ TEMA LIGHT — Formulários de pedido Aplique a classe .tema-light no ou use html[data-theme="light"] ================================================================ */ html[data-theme="light"], .tema-light, body.form-page { --bg: #F7F6F3; --bg2: #EEECEA; --bg3: #E3E1DC; --border: #D9D5CE; --border2: #C8C4BE; --text: #0F1117; --text2: #2E3140; --text3: #5A5F72; /* Mantém as demais vars do dark */ --green: #C9A84C; --green-dim: #A07830; --green-bg: rgba(201,168,76,.10); --green-border: rgba(201,168,76,.30); --amber: #C07A0A; --amber-bg: #FEF3DC; --amber-border: #F5CC7A; --blue: #2563EB; --blue-bg: #DBEAFE; --blue-border: #93C5FD; --coral: #B52828; --coral-bg: #FDE8E8; --coral-border: #F2A0A0; } /* ── BASE ─────────────────────────────────────────────────────── */ body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ================================================================ HEADER PADRÃO BEGUEL ================================================================ */ .beguel-header { background: #0F1117; color: #F5F3EE; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(201,168,76,.15); } .beguel-logo { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; letter-spacing: .06em; color: #F5F3EE; } .beguel-logo span { color: #C9A84C; } .beguel-header-sub { font-family: 'Cinzel', serif; font-size: 11px; color: rgba(245,243,238,.5); letter-spacing: .08em; margin-top: 2px; text-transform: uppercase; } .beguel-header-back { padding: 8px 18px; border: 1px solid rgba(201,168,76,.3); border-radius: var(--r); background: transparent; color: #C9A84C; font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; cursor: pointer; text-decoration: none; transition: all .15s; } .beguel-header-back:hover { background: rgba(201,168,76,.10); border-color: rgba(201,168,76,.5); } /* ================================================================ TIPOGRAFIA ================================================================ */ .font-cinzel { font-family: 'Cinzel', serif; } .font-dm { font-family: 'DM Sans', sans-serif; } h1,h2,h3 { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .03em; } .section-title { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text3); margin-bottom: 14px; } /* ================================================================ CARTÕES / CARDS ================================================================ */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px; transition: border-color .15s; } .card:hover { border-color: var(--border2); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-title { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .10em; color: var(--text3); } .card-body { font-size: 13px; color: var(--text2); } /* Número de etapa */ .step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #0F1117; font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; margin-right: 8px; flex-shrink: 0; } /* ================================================================ FORMULÁRIOS — INPUTS, SELECTS, TEXTAREAS ================================================================ */ .form-field { margin-bottom: 14px; } .form-field label { display: block; font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; } .form-field input, .form-field select, .form-field textarea, input.field, select.field, textarea.field { width: 100%; padding: 10px 13px; font-family: 'DM Sans', sans-serif; font-size: 13px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); color: var(--text); outline: none; transition: border-color .15s; box-sizing: border-box; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus, input.field:focus, select.field:focus { border-color: var(--green); } .form-field input.invalid, .field.invalid { border-color: var(--coral) !important; background: var(--coral-bg); } .form-field input.valid, .field.valid { border-color: var(--green-border); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } /* ================================================================ BOTÕES ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; border-radius: var(--r); font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; border: none; transition: all .15s; text-decoration: none; } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; cursor: not-allowed; } /* Variantes */ .btn-gold { background: #C9A84C; color: #fff; } .btn-gold:hover { background: #A07830; } .btn-green { background: var(--green); color: #0F1117; } .btn-green:hover { opacity: .88; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text3); } .btn-outline:hover { border-color: var(--border2); color: var(--text); } .btn-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); } .btn-blue:hover { opacity: .85; } .btn-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } .btn-coral { background: var(--coral-bg); color: var(--coral); border: 1px solid var(--coral-border); } .btn-purple { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); } .btn-whats { background: #25D366; color: #fff; border: none; } .btn-whats:hover { background: #1EBE5D; } .btn-email { background: #2563EB; color: #fff; border: none; } .btn-email:hover { background: #1D4ED8; } /* Tamanhos */ .btn-sm { padding: 6px 14px; font-size: 10px; } .btn-lg { padding: 14px 28px; font-size: 13px; } /* ================================================================ BADGES / PÍLULAS ================================================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .badge-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } .badge-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); } .badge-coral { background: var(--coral-bg); color: var(--coral); border: 1px solid var(--coral-border); } .badge-purple { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); } /* ================================================================ ALERTAS ================================================================ */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 12px; } .alert-ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .alert-warn { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } .alert-err { background: var(--coral-bg); color: var(--coral); border: 1px solid var(--coral-border); } .alert-info { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); } .alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .alert-text strong { display: block; margin-bottom: 2px; } /* ================================================================ TABELAS ================================================================ */ .beguel-table { width: 100%; border-collapse: collapse; font-size: 13px; } .beguel-table thead th { padding: 10px 14px; text-align: left; font-family: 'Cinzel', serif; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); border-bottom: 2px solid var(--border); background: var(--bg3); } .beguel-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text2); } .beguel-table tbody tr:hover td { background: var(--bg3); } /* ================================================================ RESUMO DO PEDIDO (formulários) ================================================================ */ .resumo-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; gap: 10px; } .resumo-row:last-child { border-bottom: none; } .resumo-key { color: var(--text3); font-size: 12px; flex-shrink: 0; } .resumo-val { color: var(--text); font-weight: 500; text-align: right; } /* ================================================================ TOAST NOTIFICATION ================================================================ */ .beguel-toast { position: fixed; bottom: 28px; right: 28px; padding: 12px 20px; border-radius: var(--r); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; z-index: 9999; opacity: 0; transition: opacity .3s; pointer-events: none; max-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,.3); } .beguel-toast.ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .beguel-toast.err { background: var(--coral-bg); color: var(--coral); border: 1px solid var(--coral-border); } /* ================================================================ MODAIS ================================================================ */ .beguel-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 600; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; backdrop-filter: blur(4px); } .beguel-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-xl); width: 100%; max-width: 600px; margin: 20px auto; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .beguel-modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .beguel-modal-title { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600; letter-spacing: .03em; } .beguel-modal-close { background: var(--bg3); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--text3); transition: all .15s; } .beguel-modal-close:hover { border-color: var(--coral); color: var(--coral); } .beguel-modal-body { padding: 20px 22px; } .beguel-modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } /* ================================================================ BUSCA DE CLIENTE (formulários) ================================================================ */ .cliente-busca-wrap { margin-bottom: 16px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--green-border); border-radius: var(--r); } .cliente-busca-label { font-size: 11px; font-weight: 600; color: var(--green); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; } .cliente-busca-input { flex: 1; padding: 9px 12px; font-family: 'DM Sans', sans-serif; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); outline: none; } .cliente-busca-input:focus { border-color: var(--green); } .cliente-dropdown { margin-top: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; max-height: 180px; overflow-y: auto; } .cliente-badge { display: none; margin-top: 8px; padding: 8px 12px; background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--r); align-items: center; justify-content: space-between; gap: 10px; } .cliente-badge span { font-size: 12px; color: var(--green); } /* ================================================================ STATUS PILLS (kanban) ================================================================ */ .sp-0 { background: rgba(100,100,120,.15); color: #9B9A95; border: 1px solid rgba(100,100,120,.2); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .sp-1 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .sp-2 { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .sp-3 { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .sp-4 { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .sp-5 { background: rgba(255,140,0,.08); color: #FF8C00; border: 1px solid rgba(255,140,0,.2); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .sp-6 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } .sp-7 { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; } /* ================================================================ MÉTRICAS (dashboard) ================================================================ */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; } .metric-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; transition: border-color .15s; } .metric-card:hover { border-color: var(--border2); } .metric-card.green { border-left: 3px solid var(--green); } .metric-card.amber { border-left: 3px solid var(--amber); } .metric-card.blue { border-left: 3px solid var(--blue); } .metric-card.coral { border-left: 3px solid var(--coral); } .metric-label { font-size: 11px; color: var(--text3); margin-bottom: 6px; } .metric-value { font-family: 'Cinzel', serif; font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 4px; } .metric-value.green { color: var(--green); } .metric-value.amber { color: var(--amber); } .metric-value.blue { color: var(--blue); } .metric-value.coral { color: var(--coral); } .metric-sub { font-size: 11px; color: var(--text3); } /* ================================================================ UTILITÁRIOS ================================================================ */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .w-full { width: 100%; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .p-16 { padding: 16px; } .p-20 { padding: 20px; } .hidden { display: none !important; } .text-gold { color: var(--green); } .text-muted { color: var(--text3); } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .font-bold { font-weight: 600; } /* ================================================================ ANIMAÇÕES ================================================================ */ .fade-in { animation: fadeIn .3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .stagger > * { animation: fadeIn .3s ease both; } .stagger > *:nth-child(1) { animation-delay: .05s; } .stagger > *:nth-child(2) { animation-delay: .10s; } .stagger > *:nth-child(3) { animation-delay: .15s; } .stagger > *:nth-child(4) { animation-delay: .20s; } .stagger > *:nth-child(5) { animation-delay: .25s; } /* ================================================================ RESPONSIVO ================================================================ */ @media (max-width: 768px) { .beguel-header { padding: 12px 16px; } .metrics-grid { grid-template-columns: 1fr 1fr; } .form-grid { grid-template-columns: 1fr; } .beguel-modal { margin: 10px auto; border-radius: var(--r-lg); } } @media (max-width: 480px) { .metrics-grid { grid-template-columns: 1fr; } .btn { padding: 10px 16px; font-size: 11px; } } /* ================================================================ PRINT — PDF gerado pelo sistema ================================================================ */ @media print { .beguel-header-back, .btn-salvar, .btn-whats, .btn-email { display: none !important; } body { background: #fff; color: #000; } .card { border: 1px solid #ccc; box-shadow: none; } }