/* ==========================================================================
   Penido Castro CRM — Penido Castro Advocacia
   Identidade: Navy (#2a3143) + Dourado (#d4af7a) + Creme (#f4f1ea)
   Tipografia: Playfair Display (títulos/números) + DM Sans (texto)
   ========================================================================== */

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

:root {
 --primary: #2a3143;
 --primary-light: #3b4a63;
 --primary-dark: #1a1f30;
 --primary-subtle: #e9ecf2;
 --accent-gold: #e5ba4a;
 --accent-gold-dark: #c9992e;
 --accent-gold-light: #f7efe1;
 --bg-main: #f4f1ea;
 --bg-sidebar: #1a1f30;
 --bg-card: #ffffff;
 --border-color: #e5e2da;
 --border-focus: #2a3143;
 --text-main: #2a3143;
 --text-muted: #6b7280;
 --text-light: #94a3b8;

 --color-novo: #2563eb;
 --color-contato: #7c3aed;
 --color-proposta: #d97706;
 --color-cliente: #2f9e6e;
 --color-perdido: #c0392b;
 --color-ativo: #2f9e6e;
 --color-encerrado: #475569;
 --color-arquivado: #94a3b8;
 --color-pendente: #d97706;
 --color-concluido: #2f9e6e;
 --color-pago: #2f9e6e;
 --color-atrasado: #c0392b;

 --shadow-sm: 0 1px 2px rgba(42, 49, 67, 0.05);
 --shadow-md:
  0 8px 20px rgba(42, 49, 67, 0.06), 0 2px 6px rgba(229, 186, 74, 0.08);
 --shadow-lg:
  0 20px 45px rgba(42, 49, 67, 0.14), 0 4px 12px rgba(229, 186, 74, 0.1);
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 14px;
 --transition: all 0.18s ease-in-out;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family:
  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 background-color: var(--bg-main);
 color: var(--text-main);
 font-size: 14px;
 line-height: 1.55;
 min-height: 100vh;
}

/* Tipografia de marca: serif nos títulos */
h1,
h2,
h3 {
 font-family: "Playfair Display", Georgia, serif;
 letter-spacing: 0.2px;
}

/* ==========================================================================
   Layout Principal
   ========================================================================== */
.app-layout {
 display: flex;
 min-height: 100vh;
}

/* Sidebar */
.sidebar {
 width: 260px;
 background: linear-gradient(180deg, #222b40 0%, var(--bg-sidebar) 100%);
 color: #fff;
 display: flex;
 flex-direction: column;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 z-index: 100;
 box-shadow: 2px 0 14px rgba(26, 31, 48, 0.25);
}

.brand-section {
 padding: 24px 20px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 display: flex;
 align-items: center;
 gap: 12px;
}

.brand-logo {
 width: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.brand-logo img {
 width: 100%;
 height: auto;
}

.brand-info h1 {
 font-family: "Playfair Display", Georgia, serif;
 font-size: 16px;
 font-weight: 600;
 color: #ffffff;
 letter-spacing: 0.4px;
 margin-bottom: 2px;
}

.brand-info p {
 font-size: 11px;
 color: var(--accent-gold);
 font-weight: 600;
 letter-spacing: 1.2px;
 text-transform: uppercase;
}

.nav-menu {
 list-style: none;
 padding: 18px 12px;
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 4px;
 overflow-y: auto;
 scrollbar-width: thin;
}

.nav-item a {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 11px 14px;
 color: #cbd1da;
 text-decoration: none;
 font-weight: 500;
 font-size: 13.5px;
 border-radius: 10px;
 transition: var(--transition);
}

.nav-item a svg {
 width: 18px;
 height: 18px;
 stroke-width: 2;
 opacity: 0.8;
}

.nav-item a:hover {
 background: rgba(255, 255, 255, 0.06);
 color: #ffffff;
}

.nav-item.active a {
 background: rgba(229, 186, 74, 0.16);
 color: #ffffff;
 border-left: 3px solid var(--accent-gold);
 font-weight: 600;
}

.nav-item.active a svg {
 color: var(--accent-gold);
 opacity: 1;
}

.sidebar-footer {
 padding: 16px 20px;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 font-size: 11px;
 color: #94a3b8;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.sidebar-footer .office-name {
 color: #e8e5da;
 font-weight: 600;
}

/* Main Content */
.main-wrapper {
 flex: 1;
 margin-left: 260px;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

.top-header {
 background: var(--bg-card);
 padding: 18px 32px;
 border-bottom: 1px solid var(--border-color);
 display: flex;
 align-items: center;
 justify-content: space-between;
 position: sticky;
 top: 0;
 z-index: 90;
}

.header-title h2 {
 font-size: 22px;
 font-weight: 600;
 color: var(--primary-dark);
}

.header-title p {
 font-size: 12.5px;
 color: var(--text-muted);
 margin-top: 2px;
}

.header-actions {
 display: flex;
 align-items: center;
 gap: 12px;
}

.content-container {
 padding: 28px 32px;
 flex: 1;
}

/* ==========================================================================
   Componentes de Interface
   ========================================================================== */

/* Cards de Métricas / Dashboard */
.metrics-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 18px;
 margin-bottom: 28px;
}

.metric-card {
 background: var(--bg-card);
 border-radius: var(--radius-md);
 padding: 20px;
 border: 1px solid var(--border-color);
 box-shadow: var(--shadow-sm);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 position: relative;
 overflow: hidden;
 transition: var(--transition);
}

.metric-card:hover {
 box-shadow: var(--shadow-md);
 transform: translateY(-2px);
}

.metric-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: var(--accent-gold);
}

.metric-card.gold::before {
 background: var(--accent-gold);
}
.metric-card.danger::before {
 background: var(--color-perdido);
}
.metric-card.warning::before {
 background: var(--color-pendente);
}
.metric-card.success::before {
 background: var(--color-cliente);
}
.metric-card.info::before {
 background: var(--color-novo);
}

.metric-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 10px;
}

.metric-title {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: var(--text-muted);
}

.metric-icon {
 width: 34px;
 height: 34px;
 border-radius: 10px;
 background: var(--accent-gold-light);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--accent-gold-dark);
}

.metric-value {
 font-size: 30px;
 font-weight: 600;
 color: var(--primary-dark);
 line-height: 1.1;
 font-family: "Playfair Display", Georgia, serif;
}

.metric-subtext {
 font-size: 12px;
 color: var(--text-muted);
 margin-top: 6px;
 display: flex;
 align-items: center;
 gap: 6px;
}

/* Cards de Seção */
.card {
 background: var(--bg-card);
 border-radius: var(--radius-md);
 border: 1px solid var(--border-color);
 box-shadow: var(--shadow-sm);
 margin-bottom: 24px;
}

.card-header {
 padding: 16px 22px;
 border-bottom: 1px solid var(--border-color);
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.card-header h3 {
 font-size: 16px;
 font-weight: 600;
 color: var(--primary-dark);
 display: flex;
 align-items: center;
 gap: 8px;
}

.card-body {
 padding: 22px;
}

/* Botões */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 9px 16px;
 font-size: 13px;
 font-weight: 600;
 border-radius: 10px;
 border: 1px solid transparent;
 cursor: pointer;
 text-decoration: none;
 transition: var(--transition);
 line-height: 1.2;
}

.btn svg {
 width: 15px;
 height: 15px;
 stroke-width: 2.2;
}

.btn-primary {
 background: var(--primary);
 color: #fff;
 border-color: var(--primary);
}

.btn-primary:hover {
 background: var(--primary-light);
 border-color: var(--primary-light);
}

.btn-gold {
 background: linear-gradient(
  135deg,
  var(--accent-gold),
  var(--accent-gold-dark)
 );
 color: #1a1f30;
 border-color: var(--accent-gold);
 font-weight: 700;
}

.btn-gold:hover {
 filter: brightness(1.05);
}

.btn-secondary {
 background: var(--bg-main);
 color: var(--text-main);
 border-color: var(--border-color);
}

.btn-secondary:hover {
 background: #ece7dc;
}

.btn-outline {
 background: transparent;
 color: var(--primary);
 border-color: var(--primary);
}

.btn-outline:hover {
 background: var(--primary);
 color: #fff;
}

.btn-success {
 background: var(--color-cliente);
 color: #fff;
}

.btn-success:hover {
 background: #23855c;
}

.btn-danger {
 background: #fcecea;
 color: #a93226;
 border-color: #f3c9c4;
}

.btn-danger:hover {
 background: var(--color-perdido);
 color: #fff;
}

.btn-sm {
 padding: 6px 10px;
 font-size: 12px;
 border-radius: 8px;
}

.btn-icon {
 padding: 6px;
 width: 32px;
 height: 32px;
}

/* Tabelas */
.table-responsive {
 width: 100%;
 overflow-x: auto;
}

.data-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 text-align: left;
}

.data-table th {
 background: #faf7f0;
 color: var(--text-muted);
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.8px;
 padding: 12px 16px;
 border-bottom: 1px solid var(--border-color);
}

.data-table td {
 padding: 14px 16px;
 border-bottom: 1px solid #f0ebe1;
 font-size: 13.5px;
 vertical-align: middle;
}

.data-table tr:last-child td {
 border-bottom: none;
}

.data-table tbody tr {
 transition: background 0.15s;
}

.data-table tbody tr:hover {
 background: #faf7f0;
}

.clickable-row {
 cursor: pointer;
}

.clickable-row:hover td {
 background: #f5f0e6 !important;
}

/* Badges / Etiquetas */
.badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 9px;
 border-radius: 20px;
 font-size: 11.5px;
 font-weight: 600;
 line-height: 1.2;
}

/* Status Badges */
.badge-novo {
 background: #e7efff;
 color: #1e40af;
}
.badge-contato {
 background: #efe9fe;
 color: #5b21b6;
}
.badge-proposta {
 background: #fef3c7;
 color: #92400e;
}
.badge-cliente {
 background: #e5f7ef;
 color: #166747;
}
.badge-perdido {
 background: #fcecea;
 color: #a93226;
}

.badge-ativo {
 background: #e5f7ef;
 color: #166747;
}
.badge-encerrado {
 background: #eef1f5;
 color: #475569;
}
.badge-arquivado {
 background: #e8ecef;
 color: #64748b;
}

.badge-pendente {
 background: #fff4e0;
 color: #92400e;
}
.badge-concluido {
 background: #e5f7ef;
 color: #166747;
}
.badge-pago {
 background: #e5f7ef;
 color: #166747;
}
.badge-atrasado {
 background: #fcecea;
 color: #a93226;
}

/* Novos status de leads */
.badge-analise_caso {
 background: #eff6ff;
 color: #1e40af;
}
.badge-judicial {
 background: #eef2ff;
 color: #3730a3;
}
.badge-administrativo {
 background: #f0fdf4;
 color: #15803d;
}
.badge-fase_pagamento {
 background: #fffbeb;
 color: #b45309;
}
.badge-finalizado {
 background: #f8fafc;
 color: #475569;
}

/* Indicador visual de célula editável */
.editable-cell {
 cursor: pointer;
 border-radius: 6px;
 transition: var(--transition);
}
.editable-cell:hover {
 background: rgba(229, 186, 74, 0.12);
 outline: 1px dashed var(--accent-gold);
 outline-offset: 2px;
}

/* Cabeçalho de tabela ordenável */
th.sortable {
 cursor: pointer;
 user-select: none;
 white-space: nowrap;
}
th.sortable:hover {
 color: var(--primary);
 background: #f3efe6;
}
th.sortable::after {
 content: "↕";
 margin-left: 6px;
 font-size: 10px;
 opacity: 0.35;
}
th.sortable.asc::after {
 content: "↑";
 opacity: 1;
 color: var(--accent-gold-dark);
}
th.sortable.desc::after {
 content: "↓";
 opacity: 1;
 color: var(--accent-gold-dark);
}

/* Area Badges */
.badge-area {
 background: #f2efe7;
 color: #4b5563;
 border: 1px solid #e5e2da;
}
.badge-area-imobiliario {
 background: #eaf7ef;
 color: #166534;
 border-color: #c8ecd6;
}
.badge-area-civil {
 background: #edf1fb;
 color: #1e40af;
 border-color: #cdd8fa;
}
.badge-area-previdenciario {
 background: #f6effb;
 color: #86198f;
 border-color: #e6cfef;
}
.badge-area-contencioso {
 background: #fdf3e7;
 color: #9a3412;
 border-color: #f5dbbf;
}
.badge-area-consumidor {
 background: #fdf8e1;
 color: #854d0e;
 border-color: #f4e6b6;
}
.badge-area-digital {
 background: #e8f9fb;
 color: #155e75;
 border-color: #c2ecf3;
}

/* Urgência de Prazos */
.urgency-badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-weight: 700;
 font-size: 12px;
}
.urgency-vencido {
 color: #c0392b;
}
.urgency-vencendo {
 color: #d97706;
}
.urgency-ok {
 color: #2f9e6e;
}

/* Barra de Filtros / Busca */
.filter-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 20px;
 flex-wrap: wrap;
}

.search-box {
 position: relative;
 flex: 1;
 min-width: 240px;
}

.search-box svg {
 position: absolute;
 left: 12px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--text-muted);
 width: 16px;
 height: 16px;
}

.search-box input {
 width: 100%;
 padding: 9px 12px 9px 36px;
 border-radius: 10px;
 border: 1px solid var(--border-color);
 font-size: 13.5px;
 background: var(--bg-card);
 color: var(--text-main);
 outline: none;
 transition: var(--transition);
}

.search-box input:focus {
 border-color: var(--accent-gold);
 box-shadow: 0 0 0 3px rgba(229, 186, 74, 0.25);
}

.filter-group {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.select-filter {
 padding: 9px 12px;
 border-radius: 10px;
 border: 1px solid var(--border-color);
 background: var(--bg-card);
 color: var(--text-main);
 font-size: 13.5px;
 outline: none;
 cursor: pointer;
 transition: var(--transition);
}

.select-filter:focus {
 border-color: var(--accent-gold);
}

/* ==========================================================================
   Modais
   ========================================================================== */
.modal-backdrop {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(26, 31, 48, 0.55);
 backdrop-filter: blur(2px);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 1000;
 padding: 20px;
 opacity: 0;
 transition: opacity 0.2s ease;
}

.modal-backdrop.active {
 display: flex;
 opacity: 1;
}

.modal-container {
 background: #ffffff;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
 width: 100%;
 max-width: 580px;
 max-height: 90vh;
 display: flex;
 flex-direction: column;
 transform: translateY(12px);
 transition: transform 0.2s ease;
 overflow: hidden;
}

.modal-backdrop.active .modal-container {
 transform: translateY(0);
}

.modal-header {
 padding: 18px 24px;
 border-bottom: 1px solid var(--border-color);
 display: flex;
 align-items: center;
 justify-content: space-between;
 background: #faf7f0;
}

.modal-header h3 {
 font-size: 17px;
 font-weight: 600;
 color: var(--primary-dark);
}

.btn-close {
 background: none;
 border: none;
 font-size: 20px;
 color: var(--text-muted);
 cursor: pointer;
 padding: 4px 8px;
 border-radius: 8px;
 line-height: 1;
}

.btn-close:hover {
 background: #ece7dc;
 color: var(--text-main);
}

.modal-body {
 padding: 24px;
 overflow-y: auto;
 flex: 1;
 min-height: 0;
}

.modal-footer {
 padding: 16px 24px;
 border-top: 1px solid var(--border-color);
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 12px;
 background: #faf7f0;
}

/* Formulários */
.form-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
}

.form-group {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.form-group.col-span-2 {
 grid-column: span 2;
}

.form-label {
 font-size: 11px;
 font-weight: 700;
 color: #4b5563;
 text-transform: uppercase;
 letter-spacing: 0.6px;
}

.form-label .required {
 color: #c0392b;
}

.form-control {
 padding: 9px 12px;
 border-radius: 10px;
 border: 1px solid var(--border-color);
 font-size: 13.5px;
 color: var(--text-main);
 background: #ffffff;
 outline: none;
 transition: var(--transition);
 width: 100%;
}

.form-control:focus {
 border-color: var(--accent-gold);
 box-shadow: 0 0 0 3px rgba(229, 186, 74, 0.25);
}

textarea.form-control {
 min-height: 80px;
 resize: vertical;
}

/* ==========================================================================
   Painel de Detalhes do Caso (Bottom Panel / Drawer)
   ========================================================================== */
.detail-panel {
 display: none;
 background: #ffffff;
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 margin-top: 24px;
 box-shadow: var(--shadow-md);
 overflow: hidden;
}

.detail-panel.active {
 display: block;
}

.panel-header {
 padding: 18px 24px;
 background: linear-gradient(135deg, var(--bg-sidebar), var(--primary));
 color: #fff;
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
}

.panel-header h3 {
 font-size: 18px;
 font-weight: 600;
 color: #ffffff;
}

.panel-header p {
 font-size: 13px;
 color: #cbd1da;
 margin-top: 4px;
}

.panel-tabs {
 display: flex;
 background: #faf7f0;
 border-bottom: 1px solid var(--border-color);
 padding: 0 24px;
}

.tab-btn {
 padding: 12px 18px;
 background: none;
 border: none;
 border-bottom: 2px solid transparent;
 font-size: 13.5px;
 font-weight: 600;
 color: var(--text-muted);
 cursor: pointer;
 transition: var(--transition);
 display: flex;
 align-items: center;
 gap: 6px;
}

.tab-btn:hover {
 color: var(--primary);
}

.tab-btn.active {
 color: var(--primary);
 border-bottom-color: var(--accent-gold);
}

.tab-btn .tab-count {
 background: #ece7dc;
 padding: 1px 6px;
 border-radius: 10px;
 font-size: 11px;
}

.tab-content {
 padding: 24px;
}

.tab-pane {
 display: none;
}

.tab-pane.active {
 display: block;
}

.inline-form {
 background: #faf7f0;
 padding: 16px;
 border-radius: 10px;
 border: 1px solid var(--border-color);
 margin-bottom: 20px;
}

.inline-form-header {
 font-size: 13px;
 font-weight: 700;
 color: var(--primary);
 margin-bottom: 12px;
}

/* Lista de Atividades */
.timeline {
 display: flex;
 flex-direction: column;
 gap: 14px;
 position: relative;
}

.timeline-item {
 display: flex;
 gap: 14px;
 padding: 12px 16px;
 background: #fff;
 border: 1px solid var(--border-color);
 border-radius: 10px;
}

.timeline-icon {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--accent-gold-light);
 color: var(--accent-gold-dark);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-size: 12px;
}

.timeline-body {
 flex: 1;
}

.timeline-meta {
 font-size: 11.5px;
 color: var(--text-muted);
 margin-bottom: 4px;
}

.timeline-text {
 font-size: 13px;
 color: var(--text-main);
}

/* ==========================================================================
   Toast / Notificações
   ========================================================================== */
.toast-container {
 position: fixed;
 bottom: 24px;
 right: 24px;
 z-index: 2000;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.toast {
 background: #1a1f30;
 color: #ffffff;
 padding: 12px 18px;
 border-radius: 10px;
 box-shadow: var(--shadow-lg);
 font-size: 13.5px;
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 280px;
 animation: toastIn 0.25s ease forwards;
 border-left: 4px solid var(--accent-gold);
}

.toast.success {
 border-left-color: var(--color-cliente);
}
.toast.error {
 border-left-color: var(--color-perdido);
}
.toast.warning {
 border-left-color: var(--color-proposta);
}

@keyframes toastIn {
 from {
  opacity: 0;
  transform: translateY(12px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

/* Estado Vazio */
.empty-state {
 text-align: center;
 padding: 48px 24px;
 color: var(--text-muted);
}

.empty-state svg {
 width: 48px;
 height: 48px;
 stroke-width: 1.5;
 color: #cbd1da;
 margin-bottom: 12px;
}

.empty-state h4 {
 font-size: 15px;
 font-weight: 700;
 color: var(--text-main);
 margin-bottom: 4px;
}

.empty-state p {
 font-size: 13px;
 max-width: 360px;
 margin: 0 auto 16px;
}

/* Utilitários */
.text-right {
 text-align: right;
}
.text-center {
 text-align: center;
}
.text-muted {
 color: var(--text-muted);
}
.font-mono {
 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.font-bold {
 font-weight: 700;
}
.nowrap {
 white-space: nowrap;
}
.flex-actions {
 display: flex;
 align-items: center;
 gap: 6px;
}

/* Responsividade */
@media (max-width: 900px) {
 .sidebar {
  width: 70px;
 }
 .brand-info,
 .sidebar-footer,
 .nav-item span {
  display: none;
 }
 .brand-section {
  justify-content: center;
  padding: 18px 0;
 }
 .nav-item a {
  justify-content: center;
  padding: 12px;
 }
 .main-wrapper {
  margin-left: 70px;
 }
 .content-container {
  padding: 20px;
 }
 .metrics-grid {
  grid-template-columns: 1fr 1fr;
 }
}

@media (max-width: 600px) {
 .form-grid {
  grid-template-columns: 1fr;
 }
 .form-group.col-span-2 {
  grid-column: span 1;
 }
 .metrics-grid {
  grid-template-columns: 1fr;
 }
 .top-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
 }
}

/* Badges de urgência de prazos (fallback estilo: vencido/vencendo) */
.badge-vencido {
 background: #fcecea;
 color: #a93226;
 border: 1px solid #f3c9c4;
}
.badge-vencendo {
 background: #fff4e0;
 color: #8a6d1a;
 border: 1px solid #f0dfa8;
}

/* ==========================================================================
   Mobile — modais viram bottom-sheet, botão Salvar sempre visível,
   campos sem o zoom automático do iOS
   ========================================================================== */
@media (max-width: 640px) {
 .modal-backdrop {
  padding: 0;
  align-items: flex-end;
 }

 .modal-container {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 18px 18px 0 0;
 }

 @supports (height: 1dvh) {
  .modal-container {
   max-height: 92dvh;
  }
 }

 .modal-header {
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 2;
 }

 .modal-body {
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Garantia de rolagem mesmo em iOS antigo, onde o flex falha */
  max-height: calc(92vh - 150px);
 }

 @supports (height: 1dvh) {
  .modal-body {
   max-height: calc(92dvh - 150px);
  }
 }

 .modal-footer {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 12px rgba(42, 49, 67, 0.08);
 }

 .modal-footer .btn {
  flex: 1;
 }

 /* iOS dá zoom em campo com fonte < 16px */
 .form-control,
 .select-filter,
 .search-box input {
  font-size: 16px;
 }

 textarea.form-control {
  min-height: 96px;
 }
}

/* Financeiro — parcelas agrupadas por caso (accordion) */
.parcela-grupo {
  cursor: pointer;
  background: var(--accent-gold-light);
}
.parcela-grupo:hover {
  background: #f3e8d0;
}
.parcela-filha {
  background: #fffdf8;
}
.seta-grupo {
  display: inline-block;
  width: 14px;
  color: var(--accent-gold-dark);
  font-weight: 700;
}

/* ========================================================================== 
   Perícias
   ========================================================================== */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pericias-page {
  --pericia-ink: oklch(29% 0.035 264);
  --pericia-muted: oklch(52% 0.025 264);
  --pericia-line: oklch(89% 0.012 86);
  --pericia-soft: oklch(97% 0.012 86);
  --pericia-gold: oklch(76% 0.13 86);
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

.pericia-api-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid oklch(82% 0.1 83);
  border-radius: var(--radius-md);
  background: oklch(96% 0.04 86);
  color: oklch(38% 0.07 69);
}

.pericia-api-alert div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.pericia-api-alert strong {
  font-size: 13px;
}

.pericia-api-alert span {
  font-size: 12.5px;
}

.pericia-api-alert .btn {
  margin-left: auto;
  white-space: nowrap;
}

.whatsapp-connect-panel {
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid oklch(82% 0.07 153);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.whatsapp-connect-content {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 34px;
}

.whatsapp-qr-wrap {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: oklch(97% 0.008 153);
}

.whatsapp-qr-wrap img {
  display: block;
  width: 256px;
  height: 256px;
  max-width: 100%;
  object-fit: contain;
}

.whatsapp-qr-wrap span {
  color: var(--pericia-muted);
  font-size: 12px;
  text-align: center;
}

.whatsapp-connect-steps strong {
  display: block;
  margin-bottom: 12px;
  color: oklch(38% 0.11 153);
  font-size: 15px;
}

.whatsapp-connect-steps ol {
  display: grid;
  gap: 9px;
  padding-left: 20px;
  color: var(--pericia-ink);
  font-size: 13px;
}

.whatsapp-connect-steps p {
  margin-top: 14px;
  color: var(--pericia-muted);
  font-size: 11.5px;
}

.pericia-form-panel,
.pericia-workspace {
  background: var(--bg-card);
  border: 1px solid var(--pericia-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.pericia-form-panel {
  margin-bottom: 22px;
  padding: 24px;
}

.pericia-section-heading,
.pericia-list-header,
.calendar-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.pericia-section-heading {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pericia-line);
}

.pericia-section-heading h3,
.pericia-list-header h3,
.calendar-detail-heading h3 {
  color: var(--pericia-ink);
  font-size: 19px;
}

.eyebrow {
  display: block;
  margin-bottom: 2px;
  color: oklch(49% 0.08 76);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.optional {
  color: var(--text-light);
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.pericia-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.reminder-fieldset {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--pericia-line);
  border-radius: var(--radius-md);
  background: var(--pericia-soft);
}

.reminder-fieldset legend {
  padding: 0 7px;
  color: var(--pericia-ink);
  font-weight: 700;
}

.reminder-fieldset > p {
  margin-bottom: 13px;
  color: var(--pericia-muted);
  font-size: 12.5px;
}

.reminder-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.reminder-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 66px;
  padding: 12px;
  border: 1px solid var(--pericia-line);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
}

.reminder-toggle:has(input:checked) {
  border-color: oklch(72% 0.11 85);
  background: oklch(97% 0.025 87);
}

.reminder-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent-gold-dark);
}

.reminder-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reminder-toggle strong {
  color: var(--pericia-ink);
  font-size: 12.5px;
}

.reminder-toggle small {
  color: var(--pericia-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.pericia-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.pericia-workspace {
  overflow: hidden;
}

.pericia-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pericia-line);
}

.view-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: oklch(94% 0.012 264);
}

.view-switch-btn {
  min-height: 36px;
  padding: 7px 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pericia-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.view-switch-btn.active {
  background: var(--bg-card);
  color: var(--pericia-ink);
  box-shadow: 0 1px 5px oklch(27% 0.03 264 / 0.12);
}

.pericia-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.pericia-search {
  position: relative;
  width: min(360px, 100%);
}

.pericia-search svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-light);
  transform: translateY(-50%);
}

.pericia-search input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--pericia-line);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--pericia-ink);
  font: inherit;
}

.pericia-status-filter {
  width: 190px;
  min-height: 40px;
}

.pericia-view {
  padding: 22px;
}

.pericia-list-header {
  margin-bottom: 15px;
}

.pericia-count {
  color: var(--pericia-muted);
  font-size: 12px;
  font-weight: 600;
}

.pericia-list {
  display: flex;
  flex-direction: column;
}

.pericia-loading {
  padding: 36px;
  color: var(--pericia-muted);
  text-align: center;
}

.pericia-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--pericia-line);
}

.pericia-item:last-child {
  border-bottom: 0;
}

.pericia-item.compact {
  grid-template-columns: 68px minmax(0, 1fr) auto;
  padding-inline: 0;
}

.pericia-date-block {
  align-self: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: 11px;
  background: oklch(95% 0.017 264);
  color: var(--pericia-ink);
}

.pericia-date-block strong {
  grid-row: 2;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  line-height: 1;
}

.pericia-date-block > span:not(.pericia-weekday) {
  grid-row: 2;
  align-self: end;
  color: var(--pericia-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.pericia-date-block .pericia-weekday {
  grid-column: 1 / -1;
  color: var(--pericia-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.pericia-date-block small {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: oklch(42% 0.07 76);
  font-size: 11px;
  font-weight: 700;
}

.pericia-main {
  min-width: 0;
}

.pericia-title-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.pericia-title-line h4 {
  color: var(--pericia-ink);
  font-size: 15px;
  line-height: 1.35;
}

.pericia-phone {
  color: var(--pericia-muted);
  font-size: 11.5px;
}

.pericia-state-group {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pericia-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

.pericia-status-agendada {
  background: oklch(93% 0.035 254);
  color: oklch(39% 0.11 257);
}

.pericia-status-realizada {
  background: oklch(93% 0.045 156);
  color: oklch(38% 0.09 158);
}

.pericia-status-cancelada {
  background: oklch(94% 0.035 25);
  color: oklch(43% 0.12 26);
}

.pericia-relative {
  color: var(--pericia-muted);
  font-size: 11px;
}

.pericia-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pericia-meta span {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--pericia-soft);
  color: var(--pericia-muted);
  font-size: 10.5px;
}

.pericia-notes {
  max-width: 72ch;
  margin-top: 9px;
  color: var(--pericia-muted);
  font-size: 12px;
}

.pericia-reminders {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.reminder-pill {
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
}

.reminder-pill.enabled {
  border-color: oklch(82% 0.08 85);
  background: oklch(97% 0.025 87);
  color: oklch(45% 0.08 72);
}

.reminder-pill.sent {
  border-color: oklch(80% 0.07 157);
  background: oklch(96% 0.025 157);
  color: oklch(39% 0.09 158);
}

.reminder-pill.disabled {
  border-color: oklch(89% 0.008 264);
  background: oklch(97% 0.008 264);
  color: oklch(61% 0.015 264);
}

.pericia-actions {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 104px;
}

.pericia-action {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid var(--pericia-line);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--pericia-ink);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.pericia-action:hover {
  border-color: oklch(72% 0.05 264);
  background: var(--pericia-soft);
}

.pericia-action.whatsapp {
  border-color: oklch(75% 0.1 153);
  background: oklch(95% 0.04 153);
  color: oklch(38% 0.11 153);
}

.pericia-action.danger,
.pericia-action.subtle-danger {
  color: oklch(46% 0.14 28);
}

.pericia-action.subtle-danger {
  border-color: transparent;
  background: transparent;
}

.pericia-empty {
  padding: 58px 20px;
  text-align: center;
}

.pericia-empty svg {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  color: oklch(66% 0.04 264);
}

.pericia-empty h4 {
  color: var(--pericia-ink);
  font-size: 15px;
}

.pericia-empty p {
  max-width: 430px;
  margin: 5px auto 16px;
  color: var(--pericia-muted);
  font-size: 12.5px;
}

.calendar-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-header h3 {
  color: var(--pericia-ink);
  font-size: 20px;
  text-align: center;
  text-transform: capitalize;
}

.calendar-nav {
  width: 40px;
  height: 40px;
  border: 1px solid var(--pericia-line);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--pericia-ink);
  font-size: 25px;
  cursor: pointer;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays span {
  padding: 8px;
  color: var(--pericia-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid {
  overflow: hidden;
  border: 1px solid var(--pericia-line);
  border-radius: 11px;
}

.calendar-day {
  min-width: 0;
  min-height: 112px;
  padding: 8px;
  border: 0;
  border-right: 1px solid var(--pericia-line);
  border-bottom: 1px solid var(--pericia-line);
  background: var(--bg-card);
  color: var(--pericia-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day:nth-last-child(-n + 7) {
  border-bottom: 0;
}

.calendar-day:hover,
.calendar-day:focus-visible {
  background: oklch(97% 0.018 86);
}

.calendar-day.outside {
  background: oklch(97% 0.006 264);
  color: oklch(67% 0.015 264);
}

.calendar-day.today .calendar-day-number {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pericia-ink);
  color: oklch(97% 0.01 86);
}

.calendar-day-number {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
}

.calendar-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-event {
  overflow: hidden;
  padding: 4px 5px;
  border-radius: 5px;
  background: oklch(94% 0.03 254);
  color: oklch(36% 0.08 258);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event.realizada {
  background: oklch(94% 0.035 156);
  color: oklch(36% 0.08 158);
}

.calendar-event.cancelada {
  background: oklch(95% 0.025 25);
  color: oklch(45% 0.1 26);
  text-decoration: line-through;
}

.calendar-events small {
  color: var(--pericia-muted);
  font-size: 9px;
}

.calendar-day-detail {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--pericia-line);
}

.calendar-no-events {
  padding: 28px 0;
  color: var(--pericia-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .pericia-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .pericia-filters,
  .pericia-search {
    width: 100%;
  }

  .pericia-item,
  .pericia-item.compact {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .pericia-actions {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .calendar-day {
    min-height: 88px;
    padding: 5px;
  }

  .calendar-event {
    padding: 3px;
  }
}

@media (max-width: 640px) {
  .pericia-api-alert,
  .whatsapp-connect-content {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .pericia-api-alert {
    flex-direction: column;
  }

  .pericia-api-alert .btn {
    width: 100%;
    margin-left: 0;
  }

  .whatsapp-connect-panel {
    padding: 16px;
  }

  .pericia-form-panel,
  .pericia-view {
    padding: 16px;
  }

  .pericia-form-grid,
  .reminder-options {
    grid-template-columns: 1fr;
  }

  .pericia-toolbar {
    padding: 14px;
  }

  .pericia-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .pericia-status-filter {
    width: 100%;
  }

  .pericia-title-line,
  .pericia-section-heading,
  .calendar-detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .pericia-state-group {
    white-space: normal;
  }

  .pericia-item,
  .pericia-item.compact {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 11px;
  }

  .pericia-date-block {
    padding: 8px;
  }

  .pericia-date-block strong {
    font-size: 23px;
  }

  .pericia-actions {
    grid-column: 1 / -1;
  }

  .pericia-action {
    flex: 1 1 auto;
    min-height: 40px;
  }

  .calendar-weekdays span {
    padding-inline: 2px;
    font-size: 8.5px;
  }

  .calendar-day {
    min-height: 62px;
  }

  .calendar-event {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    color: transparent;
  }

  .calendar-event b {
    display: none;
  }

  .calendar-events {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .calendar-events small {
    width: 100%;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pericias-page *,
  .pericias-page *::before,
  .pericias-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}