@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --ink: #241b1d; --muted: #6e6265; --paper: #f7f4f4; --line: #e2d7da; --accent: #7b1e3a; --accent-dark: #4a1024; --rose-old: #b9828c; --rose-burned: #a95c68; --night: #35131f; --soft: #f0e5e7; --hero-start: rgba(53, 19, 31, .97); --hero-mid: rgba(53, 19, 31, .82); --hero-end: rgba(53, 19, 31, .26); --hero-light: #f0c6cb; --hero-muted: #e5d1d4; --hero-border: #d8aab2; --footer-text: #cdb9be; --on-accent: #fff; }
.theme-petroleo { --ink: #172625; --muted: #5f706e; --paper: #f3f7f5; --line: #d2e0dc; --accent: #176b68; --accent-dark: #0e4142; --rose-old: #76aaa1; --rose-burned: #398982; --night: #123d3e; --soft: #e2efeb; --hero-start: rgba(18, 61, 62, .97); --hero-mid: rgba(18, 61, 62, .82); --hero-end: rgba(18, 61, 62, .24); --hero-light: #b9e0d6; --hero-muted: #d1e6e1; --hero-border: #9bc8bd; --footer-text: #b8d1ca; }
.theme-azul { --ink: #182333; --muted: #627083; --paper: #f4f6fa; --line: #d6deeb; --accent: #245a91; --accent-dark: #17345b; --rose-old: #7897bb; --rose-burned: #4779ad; --night: #152f50; --soft: #e5edf7; --hero-start: rgba(21, 47, 80, .97); --hero-mid: rgba(21, 47, 80, .82); --hero-end: rgba(21, 47, 80, .24); --hero-light: #c1d8f2; --hero-muted: #d5e1ef; --hero-border: #a6c0dc; --footer-text: #becddd; }
.theme-esmeralda { --ink: #1b2922; --muted: #617268; --paper: #f4f7f3; --line: #d4e1d5; --accent: #28734f; --accent-dark: #174b39; --rose-old: #7faa8e; --rose-burned: #4b946c; --night: #1a4938; --soft: #e3efe5; --hero-start: rgba(26, 73, 56, .97); --hero-mid: rgba(26, 73, 56, .82); --hero-end: rgba(26, 73, 56, .24); --hero-light: #c0e3cc; --hero-muted: #d5e9da; --hero-border: #a5cfb2; --footer-text: #bdd5c4; }
.theme-terracota { --ink: #30201c; --muted: #78645d; --paper: #faf5f1; --line: #ead9d0; --accent: #ae573d; --accent-dark: #713526; --rose-old: #c78d76; --rose-burned: #b56a50; --night: #713526; --soft: #f3e3da; --hero-start: rgba(113, 53, 38, .97); --hero-mid: rgba(113, 53, 38, .82); --hero-end: rgba(113, 53, 38, .24); --hero-light: #f1c6b7; --hero-muted: #efdcd5; --hero-border: #d9a99a; --footer-text: #dec5bc; }
.theme-grafite { --ink: #24272a; --muted: #687075; --paper: #f5f6f6; --line: #dce0e2; --accent: #59636b; --accent-dark: #30383e; --rose-old: #919da4; --rose-burned: #727e86; --night: #30383e; --soft: #e8ebec; --hero-start: rgba(48, 56, 62, .97); --hero-mid: rgba(48, 56, 62, .82); --hero-end: rgba(48, 56, 62, .24); --hero-light: #d3dde1; --hero-muted: #dce2e5; --hero-border: #b5c2c7; --footer-text: #c4ced2; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header, main, .site-footer { max-width: 1180px; margin: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 30px; }
.brand { font: 700 28px 'Playfair Display', serif; letter-spacing: 0; }
.brand span { color: var(--accent); }
nav { display: flex; gap: 26px; align-items: center; font-size: 14px; }
.button { display: inline-block; border: 0; background: var(--accent); color: #fff; padding: 14px 22px; font: 700 14px 'DM Sans', sans-serif; cursor: pointer; }
.button-small { padding: 10px 15px; }
.hero { min-height: 580px; padding: 100px 10%; display: flex; justify-content: space-between; align-items: flex-end; background: var(--night); color: #f8f4ec; }
.hero > div:first-child { max-width: 670px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
h1, h2 { font-family: 'Playfair Display', serif; line-height: 1.05; letter-spacing: 0; }
h1 { margin: 22px 0; font-size: clamp(46px, 7vw, 88px); }
h2 { font-size: 40px; }
.lead { color: #cbd1d2; font-size: 18px; line-height: 1.6; max-width: 530px; margin: 0 0 32px; }
.hero-note { display: flex; gap: 14px; color: #b9c1c1; font-size: 13px; line-height: 1.5; }
.hero-note strong { color: var(--accent); font-size: 28px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 100px 10%; }
.intro-grid p:last-child { color: var(--muted); font-size: 19px; line-height: 1.7; }
.page-heading { padding: 75px 10% 45px; }
.page-heading h1 { max-width: 700px; font-size: clamp(48px, 7vw, 78px); }
.page-heading .lead { color: var(--muted); }
.area-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin: 0 10% 100px; }
.area-list article, .kanban-column { background: var(--paper); padding: 30px; min-height: 220px; }
.area-list span { color: var(--accent); font-weight: 700; }
.area-list h2 { font-size: 27px; margin: 50px 0 15px; }
.area-list p { color: var(--muted); line-height: 1.6; }
.contact-form { display: grid; gap: 20px; max-width: 580px; margin: 0 10% 100px; }
.contact-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
input, textarea { border: 1px solid var(--line); background: #fbfaf7; padding: 14px; font: inherit; color: var(--ink); }
.auth-panel { max-width: 580px; margin: 50px auto 100px; padding: 40px; background: #fbfaf7; }
.auth-panel .contact-form { margin: 30px 0 0; }
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 10% 100px; }
.kanban-column { border-top: 3px solid var(--accent); min-height: 300px; }
.kanban-column h2 { display: flex; justify-content: space-between; font: 700 17px 'DM Sans', sans-serif; }
.kanban-column h2 span { color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 25px 30px; color: var(--muted); font-size: 12px; }
.app-layout { --sidebar-width: 16.666667%; transition: all .25s ease; }
.app-sidebar { min-height: 100vh; flex: 0 0 var(--sidebar-width); max-width: var(--sidebar-width); background: linear-gradient(160deg, var(--accent-dark), var(--night) 75%); color: var(--on-accent); transition: all .25s ease; position: relative; }
.app-main { flex: 0 0 calc(100% - var(--sidebar-width)); max-width: calc(100% - var(--sidebar-width)); transition: all .25s ease; }
.sidebar-heading { position: relative; }
.sidebar-toggle { position: absolute; top: 0; right: 0; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--on-accent); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
.sidebar-toggle:hover { background: var(--rose-burned); }
.sidebar-label { transition: opacity .15s ease; }
.sidebar nav { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.sidebar a { color: var(--hero-muted); text-decoration: none; padding: 10px 15px; display: block; border-radius: 6px; margin-bottom: 5px; transition: background-color .2s ease, transform .2s ease, color .2s ease; }
.sidebar a:hover, .sidebar a.active { background-color: var(--rose-burned); color: var(--on-accent); transform: translateX(4px); }
.main-content { padding: 24px; background: var(--paper); }
.main-content > .d-flex:first-child { border-left: 4px solid var(--rose-burned); }
.app-layout.is-collapsed { --sidebar-width: 74px; }
.app-layout.is-collapsed .sidebar-label { opacity: 0; visibility: hidden; }
.app-layout.is-collapsed .sidebar-heading h4 { white-space: nowrap; overflow: hidden; }
.app-layout.is-collapsed .sidebar a { padding-left: 10px; padding-right: 10px; text-align: center; }
.app-layout.is-collapsed .sidebar a i { margin-right: 0 !important; }
.app-layout.is-collapsed .sidebar-toggle i { transform: rotate(180deg); display: inline-block; }
.card { border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 .35rem 1rem rgba(74, 16, 36, .07) !important; }
.card-header, .table-light { background-color: var(--soft) !important; color: var(--accent-dark); }
.btn-primary { --bs-btn-color: var(--on-accent); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--on-accent); --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-active-color: var(--on-accent); --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); --bs-btn-disabled-color: var(--on-accent); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled { background-color: var(--accent-dark) !important; border-color: var(--accent-dark) !important; color: var(--on-accent) !important; }
.btn-success { --bs-btn-bg: var(--rose-burned); --bs-btn-border-color: var(--rose-burned); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); }
.bg-primary { background-color: var(--accent) !important; }
.bg-dark { background-color: var(--night) !important; }
.text-primary { color: var(--accent) !important; }
.form-control:focus, .form-select:focus { border-color: var(--rose-old); box-shadow: 0 0 0 .2rem rgba(169, 92, 104, .18); }
.dataTables_wrapper { padding-top: .25rem; }
.dataTables_filter input { margin-left: .5rem !important; }
.whatsapp-button { color: #fff; background: #168c4b; border-color: #168c4b; }
.whatsapp-button:hover { color: #fff; background: #0f6b39; border-color: #0f6b39; }
.input-group .whatsapp-button { border-radius: 0 .375rem .375rem 0; }
.invalid-feedback { display: block; }
.dashboard-metric { border: 0; overflow: hidden; position: relative; color: #fff; animation: dashboard-rise .45s ease both; }
.dashboard-metric .metric-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .84; }
.dashboard-metric .metric-icon { font-size: 1.5rem; opacity: .7; }
.dashboard-metric h3 { font-size: 2rem; }
.dashboard-metric a { color: inherit; opacity: .82; }
.metric-burgundy { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.metric-rose { background: linear-gradient(135deg, var(--rose-burned), var(--accent)); }
.metric-soft { background: linear-gradient(135deg, var(--rose-old), var(--rose-burned)); }
.metric-dark { background: linear-gradient(135deg, var(--night), var(--accent-dark)); }
.dashboard-panel { overflow: hidden; }
.dashboard-panel .card-header { padding: 1rem 1.1rem; }
.dashboard-list { display: flex; gap: .75rem; align-items: center; border-color: var(--line); padding: .8rem 1rem; }
.dashboard-list strong, .dashboard-list small { display: block; }
.dashboard-list strong { color: var(--accent-dark); font-size: .9rem; }
.dashboard-list small { color: var(--muted); margin-top: .15rem; font-size: .76rem; }
.dashboard-list-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--soft); color: var(--accent); }
.dashboard-status { font-size: .68rem; }
.status-ativo { background: #4f7d5a; }
.status-suspenso { background: #b9828c; }
.status-concluido { background: #7b1e3a; }
.status-arquivado { background: #6e6265; }
.agenda-time { color: var(--accent); font-weight: 700; min-width: 42px; }
@keyframes dashboard-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.public-site { background: var(--paper); color: var(--ink); }
.public-site main { max-width: none; }
.public-site:has(.login-screen) { min-height: 100vh; display: flex; flex-direction: column; }
.public-site:has(.login-screen) main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.login-screen { width: 100%; flex: 0 0 auto; margin-top: 0 !important; padding: 3rem 1rem; }
.login-screen > .col-md-5 { width: min(100%, 520px); flex: 0 0 auto; }
.login-screen .card { height: auto; }
.public-navbar { background: color-mix(in srgb, var(--paper) 95%, transparent); border-bottom: 1px solid var(--line); padding: 1rem 0; position: relative; z-index: 10; }
.public-brand { color: var(--accent-dark) !important; font: 700 1.25rem 'Playfair Display', serif; letter-spacing: .01em; }
.public-logo-image { width: 42px; height: 42px; object-fit: contain; margin-right: .65rem; }
.public-brand em, .public-signature em { color: var(--rose-burned); font-style: normal; }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: .45rem; border: 1px solid var(--rose-old); border-radius: 50%; color: var(--accent); font-size: .9rem; }
.public-navbar .nav-link { color: var(--muted); font-size: .84rem; padding: .55rem .25rem !important; }
.public-navbar .nav-link:hover { color: var(--accent); }
.public-system-link { padding: .65rem 1rem; font-size: .8rem; }
.public-hero { min-height: 680px; display: flex; align-items: center; color: var(--on-accent); background: linear-gradient(90deg, var(--hero-start) 0%, var(--hero-mid) 44%, var(--hero-end) 100%), var(--hero-image, url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1900&q=85')) center/cover; }
.public-hero-grid { display: grid; grid-template-columns: minmax(0, 680px) 1fr; align-items: end; gap: 5rem; padding: 7rem 1rem; }
.public-hero-copy { animation: public-reveal .7s ease both; }
.public-eyebrow { color: var(--rose-burned); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.25rem; }
.public-hero .public-eyebrow { color: var(--hero-light); }
.public-hero h1 { max-width: 680px; margin: 0 0 1.5rem; color: var(--on-accent); font-size: clamp(3.4rem, 7vw, 6.8rem); line-height: .96; }
.public-hero-lead { max-width: 510px; margin-bottom: 2rem; color: var(--hero-muted); font-size: 1.08rem; line-height: 1.7; }
.public-hero-button { color: var(--accent-dark); border: 0; padding: .9rem 1.25rem; font-size: .85rem; }
.public-text-link { color: var(--on-accent); border-bottom: 1px solid var(--hero-border); padding-bottom: .25rem; font-size: .82rem; }
.public-hero-note { justify-self: end; display: flex; gap: .8rem; align-items: flex-start; color: var(--hero-muted); font-size: .74rem; line-height: 1.65; letter-spacing: .04em; text-transform: uppercase; }
.public-hero-number { color: var(--hero-light); font: 700 2.1rem 'Playfair Display', serif; line-height: 1; }
.public-introduction { background: var(--on-accent); }
.public-intro-grid, .public-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding: 7rem 1rem; }
.public-intro-grid h2, .public-practice-section h2, .public-contact-section h2 { max-width: 510px; margin: 0; color: var(--accent-dark); font-size: clamp(2.5rem, 4vw, 4rem); }
.public-intro-text { align-self: end; max-width: 500px; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.public-signature { color: var(--accent-dark); font: 700 1.2rem 'Playfair Display', serif; margin-top: 2rem; }
.public-practice-section { padding: 7rem 0; }
.public-section-aside { max-width: 280px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.public-practice-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.public-practice-grid--1 { grid-template-columns: 1fr; }
.public-practice-grid--2 { grid-template-columns: repeat(2, 1fr); }
.public-practice-grid--3 { grid-template-columns: repeat(3, 1fr); }
.public-practice-card { min-height: 310px; padding: 1.5rem 1.35rem; border-right: 1px solid var(--line); position: relative; transition: background-color .25s ease, transform .25s ease; }
.public-practice-card:last-child { border-right: 0; }
.public-practice-card:hover { background: var(--soft); transform: translateY(-5px); }
.public-practice-card > span { color: var(--rose-burned); font-size: .72rem; font-weight: 700; }
.public-practice-card > i { display: block; margin: 3rem 0 1.75rem; color: var(--accent); font-size: 2rem; }
.public-practice-card h3 { color: var(--accent-dark); font: 700 1.35rem 'Playfair Display', serif; }
.public-practice-card p { max-width: 190px; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.public-practice-card a { position: absolute; right: 1.35rem; bottom: 1.5rem; color: var(--accent); }
.public-statement { background: var(--accent-dark); color: var(--on-accent); }
.public-statement-inner { padding: 7rem 1rem; }
.public-statement .public-eyebrow { color: var(--hero-light); }
.public-statement blockquote { max-width: 850px; margin: 0 0 2rem; font: 600 clamp(2.25rem, 4.5vw, 4.4rem)/1.08 'Playfair Display', serif; }
.public-statement span { color: var(--hero-muted); font-size: .85rem; }
.public-contact-section { background: var(--soft); }
.public-contact-grid { align-items: end; }
.public-contact-grid > div > p:not(.public-eyebrow) { max-width: 490px; margin-top: 1.5rem; color: var(--muted); line-height: 1.7; }
.public-contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.public-contact-details a:not(.btn), .public-contact-details span { color: var(--accent-dark); font-size: .92rem; }
.public-contact-details a:not(.btn) i, .public-contact-details span i { width: 24px; color: var(--rose-burned); }
.public-contact-details .btn { margin-top: 1.25rem; }
.public-footer { background: var(--accent-dark); color: var(--footer-text); padding: 1.25rem 0; font-size: .75rem; }
.theme-option { display: grid; grid-template-columns: auto 1fr; gap: .2rem .5rem; align-items: center; min-height: 74px; padding: .65rem; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--paper); }
.theme-option input { grid-row: span 2; accent-color: var(--accent); }
.theme-option strong { font-size: .8rem; color: var(--accent-dark); }
.theme-option small { color: var(--muted); font-size: .7rem; }
.theme-swatch { display: inline-block; width: 2.5rem; height: .6rem; border-radius: 3px; grid-column: 2; }
.theme-option-borgonha .theme-swatch { background: linear-gradient(90deg, #7b1e3a, #a95c68); }
.theme-option-petroleo .theme-swatch { background: linear-gradient(90deg, #176b68, #398982); }
.theme-option-azul .theme-swatch { background: linear-gradient(90deg, #245a91, #4779ad); }
@keyframes public-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767.98px) { .app-sidebar { min-height: 0; flex-basis: 100%; max-width: 100%; } .app-main { flex-basis: 100%; max-width: 100%; } .main-content { padding: 16px; } .sidebar-heading h4 { margin-bottom: 0 !important; text-align: left !important; } .sidebar-toggle { right: 0; } .sidebar-nav { margin-top: 1rem; } .app-layout.is-collapsed .sidebar-nav, .app-layout.is-collapsed > .app-sidebar > hr { display: none; } .app-layout.is-collapsed .sidebar-label { opacity: 1; visibility: visible; } .app-layout.is-collapsed .app-sidebar { padding-top: 1rem !important; padding-bottom: 1rem !important; } .app-layout.is-collapsed .sidebar-toggle i { transform: rotate(90deg); } }
@media (max-width: 700px) { .site-header { padding: 20px; } .site-header nav a:not(.button) { display: none; } .hero { min-height: 560px; padding: 60px 25px; display: block; } .hero-note { margin-top: 70px; } .intro-grid, .area-list, .kanban { grid-template-columns: 1fr; } .intro-grid { gap: 15px; padding: 65px 25px; } .page-heading { padding: 60px 25px 30px; } .area-list, .kanban { margin: 0 25px 65px; } .contact-form { margin: 0 25px 65px; } .auth-panel { margin: 30px 25px 65px; padding: 25px; } .site-footer { margin: 0 25px; padding: 20px 0; display: block; } .site-footer span { display: block; margin: 5px 0; } .public-hero { min-height: 650px; } .public-hero-grid, .public-intro-grid, .public-contact-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 5rem 1rem; } .public-hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); } .public-hero-note { justify-self: start; } .public-practice-section, .public-statement-inner { padding: 5rem 0; } .public-practice-grid { grid-template-columns: 1fr 1fr; } .public-practice-grid--1 { grid-template-columns: 1fr; } .public-practice-card:nth-child(2) { border-right: 0; } .public-practice-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .public-practice-card { min-height: 280px; } }