/* ============================================================================ Jardins CRM — tema (claro/escuro alternável) + UI moderna O tema é definido por [data-theme="light"|"dark"] no . ============================================================================ */ :root, body[data-theme="dark"] { --bg: #0b1220; --bg2: #0f172a; --panel: #1e293b; --panel2: #273549; --line: #334155; --txt: #e2e8f0; --muted: #94a3b8; --soft: rgba(255,255,255,.03); --pri: #16a34a; --pri-d: #15803d; --pri-soft: rgba(22,163,74,.15); --danger: #dc2626; --danger-soft: rgba(220,38,38,.15); --warn: #d97706; --info: #2563eb; --shadow: 0 4px 20px rgba(0,0,0,.35); --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --radius: 12px; } body[data-theme="light"] { --bg: #eef1f6; --bg2: #f8fafc; --panel: #ffffff; --panel2: #f1f5f9; --line: #e2e8f0; --txt: #0f172a; --muted: #64748b; --soft: rgba(15,23,42,.02); --pri: #16a34a; --pri-d: #15803d; --pri-soft: rgba(22,163,74,.1); --danger: #dc2626; --danger-soft: rgba(220,38,38,.08); --warn: #d97706; --info: #2563eb; --shadow: 0 6px 24px rgba(15,23,42,.08); --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --radius: 12px; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--txt); font-size: 15px; transition: background .25s ease, color .25s ease; } a { color: var(--pri); } button { cursor: pointer; border: none; border-radius: 9px; padding: 9px 15px; background: var(--pri); color: #fff; font-size: 14px; font-weight: 600; transition: background .15s ease, transform .05s ease, box-shadow .15s ease; } button:hover { background: var(--pri-d); } button:active { transform: translateY(1px); } button.sec { background: var(--panel2); color: var(--txt); border: 1px solid var(--line); } button.sec:hover { background: var(--line); } button.danger { background: var(--danger); } button.danger:hover { filter: brightness(.9); } button.ghost { background: transparent; color: var(--muted); border: 1px solid transparent; } button.ghost:hover { background: var(--panel2); color: var(--txt); } button.small { padding: 5px 10px; font-size: 13px; } button:disabled { opacity: .5; cursor: not-allowed; } input, select, textarea { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); color: var(--txt); font-size: 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); } input[type="checkbox"] { width: auto; accent-color: var(--pri); cursor: pointer; } input[type="color"] { padding: 2px; height: 34px; } textarea { min-height: 90px; resize: vertical; } label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .grow { flex: 1; min-width: 120px; } .muted { color: var(--muted); } .spacer { flex: 1; } .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; } .err { color: #ef4444; font-size: 13px; margin-top: 8px; } .ok { color: var(--pri); font-size: 13px; margin-top: 8px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.ativo { background: var(--pri-soft); color: var(--pri); } .pill.inativo { background: var(--danger-soft); color: var(--danger); } /* Login */ .center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; width: 100%; max-width: 400px; box-shadow: var(--shadow); } .card h1 { margin: 0 0 4px; font-size: 22px; } .brand { color: var(--pri); } /* App shell */ header.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-sm); } header .logo { font-weight: 800; font-size: 18px; letter-spacing: -.3px; } nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; } nav.tabs button { background: transparent; color: var(--muted); border-radius: 9px; font-weight: 600; } nav.tabs button:hover { background: var(--panel2); color: var(--txt); } nav.tabs button.active { background: var(--pri-soft); color: var(--pri); } .theme-toggle { background: var(--panel2); border: 1px solid var(--line); color: var(--txt); border-radius: 999px; width: 38px; height: 38px; padding: 0; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--line); } main { padding: 22px; max-width: 1240px; margin: 0 auto; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } tbody tr { transition: background .1s ease; } tr:hover td { background: var(--soft); } tr.inativa td { opacity: .5; } tr.selecionada td { background: var(--pri-soft); } .counters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .counter { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; } .counter b { font-size: 18px; } /* Barra de ações em massa */ .bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--pri-soft); border: 1px solid var(--pri); border-radius: 10px; padding: 10px 14px; margin: 12px 0; } .bulkbar .count { font-weight: 700; color: var(--pri); } /* Avatar/iniciais coloridas por responsável */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; flex: none; } /* Modal */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; } .modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow); } .modal h2 { margin-top: 0; } .timeline { list-style: none; padding: 0; margin: 0; } .timeline li { border-left: 2px solid var(--line); padding: 6px 0 14px 14px; position: relative; } .timeline li::before { content: ''; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--pri); } .chip { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--panel2); color: var(--muted); font-weight: 600; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .chartbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); } .chartbox h3 { margin: 0 0 12px; font-size: 15px; } @media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } } .recovery { font-family: monospace; background: var(--panel2); padding: 12px; border-radius: 8px; columns: 2; } code.kbd { background: var(--panel2); padding: 2px 6px; border-radius: 6px; font-size: 13px; } /* ============================ AGENDA / CALENDÁRIO ============================ */ .cal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .cal-title { font-size: 18px; font-weight: 700; min-width: 190px; text-transform: capitalize; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 4px 0; } .cal-cell { min-height: 96px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .1s ease, transform .05s ease; } .cal-cell:hover { border-color: var(--pri); } .cal-cell.fora { opacity: .35; } .cal-cell.hoje { border-color: var(--pri); box-shadow: 0 0 0 1px var(--pri) inset; } .cal-daynum { font-size: 12px; font-weight: 700; color: var(--muted); } .cal-cell.hoje .cal-daynum { color: var(--pri); } .cal-ev { font-size: 11px; line-height: 1.25; padding: 3px 6px; border-radius: 6px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid rgba(255,255,255,.5); } .cal-ev.concl { opacity: .55; text-decoration: line-through; } .cal-more { font-size: 10px; color: var(--muted); font-weight: 600; } .legenda { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .legenda .item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .legenda .dot { width: 12px; height: 12px; border-radius: 50%; } @media (max-width: 640px) { .cal-cell { min-height: 70px; } .cal-ev { font-size: 10px; } }