/* GJ CRM · módulo de arquitetura: etapas, arquivos, 3D, obra, agenda, mensagens.
   Usa as variáveis do painel (--ink, --card, --line, --accent) e as das páginas públicas (--navy, --green) como reserva. */

:root { --gj-ink: var(--ink, var(--navy, #2e3528)); --gj-card: var(--card, #fff); --gj-line: var(--line, #e1e8e3); --gj-muted: var(--muted, #5d6d64); --gj-accent: var(--accent, var(--green, #8a6a3c)); --gj-gold: var(--gold, #bd9f7b); }

/* Abas e topo do projeto */
.proj-hero { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: center; }
.proj-hero:not(:has(.proj-cover)) { grid-template-columns: 1fr; }
.proj-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.proj-hero h2 { font-size: 1.5rem; margin: 6px 0; }
.proj-prog { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.proj-prog .progress { flex: 1; height: 8px; }
.proj-prog b { font-size: 14px; min-width: 38px; text-align: right; }
.stage-track--in { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; background: none; border: 0; }
.tabs { margin: 18px 0; }
.tabs a { display: inline-flex; gap: 6px; align-items: center; padding: 12px 14px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--gj-muted); white-space: nowrap; position: relative; }
.tabs a.is-active { color: var(--gj-ink); }
.tabs a.is-active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--gj-gold); border-radius: 2px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--gj-line); font-size: 14px; }
.kv--late b { color: var(--late, #dc2626); }
.chips-check { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--gj-line); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--gj-card); }
.chip-check input:checked + span { background: var(--gj-ink); color: var(--gj-card); border-color: var(--gj-ink); }
.chip-check input:focus-visible + span { outline: 2px solid var(--gj-gold); outline-offset: 2px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--gj-muted); }
.dropzone { border: 1.5px dashed var(--gj-line); border-radius: 12px; padding: 14px; background: var(--bg, transparent); }
.dropzone input[type=file] { width: 100%; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Etapas */
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.phase { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.phase::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--gj-line); }
.phase:last-child::before { display: none; }
.phase-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--gj-line); background: var(--gj-card); margin-top: 1px; z-index: 1; }
.phase--andamento .phase-dot { border-color: var(--gj-gold); background: var(--gj-gold); box-shadow: 0 0 0 4px rgba(189,159,123,.25); }
.phase--aprovacao .phase-dot { border-color: var(--warn, #d98e04); background: var(--warn-soft, #fff6e0); }
.phase--concluida .phase-dot { border-color: var(--gj-ink); background: var(--gj-ink); }
.phase--concluida .phase-dot::after { content: '✓'; display: block; color: var(--gj-card); font-size: 12px; line-height: 18px; text-align: center; font-weight: 700; }
.phase.is-late .phase-head strong { color: var(--late, #dc2626); }
.phase-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.phase-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.phase-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 4px; }
.approve-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--gj-line); border-radius: 12px; background: var(--bg, #f6f3ee); margin-top: 6px; }
.approve-box textarea { width: 100%; border: 1px solid var(--gj-line); border-radius: 10px; padding: 10px; background: var(--gj-card); color: var(--gj-ink); }

/* Arquivos e 3D */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.doc { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--gj-line); border-radius: 14px; background: var(--gj-card); padding: 10px; min-width: 0; }
.doc--pendente { border-color: var(--warn, #d98e04); }
.doc--aprovado { border-color: var(--ok, #1ab91e); }
.doc--ajustes { border-color: var(--late, #dc2626); }
.doc-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--bg, #f6f3ee); overflow: hidden; text-decoration: none; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-ic { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gj-muted); }
.doc-ic b { font-size: 12px; letter-spacing: .08em; }
.doc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-body strong { overflow-wrap: anywhere; font-size: 14px; }
.doc-body small { color: var(--gj-muted); font-size: 12.5px; }
.doc-3d summary, .inline-add summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gj-accent); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.doc-3d[open] summary { margin-bottom: 8px; }
.doc-tools { margin-top: auto; }
.mv { display: block; width: 100%; background: radial-gradient(circle at 50% 40%, #f3ede3, #d9cdb9); border-radius: 12px; --poster-color: transparent; }
.sub { margin: 18px 0 10px; font-size: 14px; }
.docs--all { margin-top: 12px; }

/* Galeria + lightbox */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gallery figure { margin: 0; }
.gallery a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg, #eee); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption { font-size: 12px; color: var(--gj-muted); margin-top: 4px; }
.lb { position: fixed; inset: 0; z-index: 9999; background: rgba(20,22,18,.94); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 18px; }
.lb img { max-width: 100%; max-height: 82vh; border-radius: 8px; }
.lb p { color: #f3ede3; font-size: 14px; margin-top: 10px; text-align: center; }
.lb button { position: absolute; top: 14px; right: 18px; border: 0; background: rgba(255,255,255,.14); color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 24px; cursor: pointer; }
.lb .lb-nav { top: 50%; transform: translateY(-50%); right: auto; left: 14px; }
.lb .lb-nav.lb-next { left: auto; right: 14px; }

/* Diário */
.diary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.diary li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; }
.diary-date { text-align: center; border: 1px solid var(--gj-line); border-radius: 12px; padding: 8px 0; height: fit-content; background: var(--gj-card); }
.diary-date b { display: block; font-size: 1.35rem; line-height: 1; }
.diary-date span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gj-muted); }
.diary-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.agenda-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; }
.agenda-list li.is-past { opacity: .6; }

/* Obras e fornecedores */
.obra-grid, .sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.obra-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.obra-card img, .obra-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg, #eee); display: flex; align-items: center; justify-content: center; color: var(--gj-muted); }
.obra-info { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.obra-meta { display: flex; justify-content: space-between; font-size: 13px; }
.stars { color: #8a6a3c; letter-spacing: 2px; }
.budget-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.budget-bar div { border: 1px solid var(--gj-line); border-radius: 12px; padding: 12px; }
.budget-bar span { display: block; font-size: 12px; color: var(--gj-muted); text-transform: uppercase; letter-spacing: .06em; }
.budget-bar b { font-size: 1.1rem; }
.budget-bar.is-over div:nth-child(2) b, .is-over { color: var(--late, #dc2626); }
.table--costs .table-row { grid-template-columns: 2fr 1.2fr 1fr 1fr 1.2fr; }

/* Agenda */
.cal-nav { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.cal-nav h2 { font-size: 1.15rem; min-width: 190px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--gj-line); border: 1px solid var(--gj-line); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.cal-h { background: var(--gj-card); padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--gj-muted); text-transform: uppercase; letter-spacing: .06em; }
.cal-d { background: var(--gj-card); min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-d--off { background: var(--bg, #f6f3ee); }
.cal-d.is-today { box-shadow: inset 0 0 0 2px var(--gj-gold); }
.cal-n { font-size: 12px; font-weight: 700; color: var(--gj-muted); }
.cal-e { font-size: 12px; border-radius: 6px; background: var(--accent-soft, #f1e8da); border-left: 3px solid var(--gj-gold); }
.cal-e summary { list-style: none; cursor: pointer; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gj-ink); }
.cal-e--visita, .cal-e--vistoria { border-left-color: #2f6b3a; }
.cal-e--entrega { border-left-color: #8a6a3c; }
.cal-pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 460px); max-height: 86vh; overflow: auto; background: var(--gj-card); border: 1px solid var(--gj-line); border-radius: 16px; padding: 20px; z-index: 60; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px; }

/* Mensagens */
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px; margin-bottom: 12px; }
.msg { max-width: 78%; align-self: flex-start; background: var(--bg, #f6f3ee); border: 1px solid var(--gj-line); border-radius: 16px 16px 16px 4px; padding: 10px 14px; }
.msg--me { align-self: flex-end; background: var(--gj-ink); color: var(--gj-card); border-radius: 16px 16px 4px 16px; border-color: var(--gj-ink); }
.msg small { display: block; opacity: .7; font-size: 11.5px; margin-top: 4px; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-form textarea { flex: 1; border: 1px solid var(--gj-line); border-radius: 12px; padding: 10px; background: var(--gj-card); color: var(--gj-ink); }

/* Imagem do card do cliente */
.cproject-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }

/* Relatório público */
.pub-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; }
.pub-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gj-muted); margin: 12px 0 8px; }
.pub .phases, .pub .diary { color: var(--gj-ink); }
.pub .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eee9df; color: #3b3326; }
.pub .pill--aberta { background: #e7edf3; color: #1f3a52; }
.pub .pill--enviada { background: #fff2cf; color: #6b4a00; }
.pub .pill--aceita { background: #e2f1e2; color: #1d5a22; }
.pub .progress { height: 6px; border-radius: 6px; background: #ece7dd; overflow: hidden; }
.pub .progress span { display: block; height: 100%; background: var(--gj-gold); }
.pub .badge { font-size: 12px; border: 1px solid var(--gj-line); border-radius: 999px; padding: 1px 8px; }
.pub .muted, .pub small.muted { color: var(--gj-muted); }
.pub-note { text-align: center; margin-top: 8px; }

@media (max-width: 760px) {
	.proj-hero { grid-template-columns: 1fr; }
	.budget-bar { grid-template-columns: 1fr; }
	.cal { display: block; border: 0; background: transparent; }
	.cal-h, .cal-d--off { display: none; }
	.cal-d { min-height: 0; border: 1px solid var(--gj-line); border-radius: 12px; margin-bottom: 8px; }
	.cal-d:not(:has(.cal-e)) { display: none; }
	.cal-d .cal-n::after { content: ' · dia'; font-weight: 400; }
	.cal-d.is-today { display: flex; }
	.table--costs .table-row { grid-template-columns: 1fr; }
	.diary li, .agenda-list li { grid-template-columns: 46px minmax(0, 1fr); }
	.msg { max-width: 92%; }
	.pub-kpis { grid-template-columns: repeat(2, 1fr) !important; }
	.pub-cols { grid-template-columns: 1fr !important; }
}
@media print {
	.no-print, .lb { display: none !important; }
	.pub-top { height: 60px; }
	.gallery { grid-template-columns: repeat(4, 1fr); }
	.mv { display: none; }
}

/* Área do cliente: menu do topo cabe no celular (rola de lado) */
.ctop-nav a { white-space: nowrap; color: #d9dccf; }
.ctop-brand span { color: #c9cdc0; border-left-color: #55604a; }
@media (max-width: 760px) {
	.ctop-inner { flex-wrap: wrap; row-gap: 8px; }
	.ctop-nav { width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
	.ctop-nav::-webkit-scrollbar { display: none; }
	.ctop-brand span { display: inline; }
}

/* Equipe */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.team-card { display: flex; flex-direction: column; gap: 10px; }
.team-top { display: flex; align-items: center; gap: 12px; }
.team-top > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.avatar--lg { width: 46px; height: 46px; font-size: 16px; }
.team-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-stats div { border: 1px solid var(--gj-line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; }
.team-stats b { font-size: 1.3rem; line-height: 1.1; }
.team-stats span { font-size: 12px; color: var(--gj-muted); }

/* ==========================================================
   Entrada (login, código, convite): foto de projeto em tela cheia
   ========================================================== */
.gj-auth { background: #f6f3ee; }
.auth { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.gj-auth .auth-side { position: relative; isolation: isolate; overflow: hidden; background: #232a1e url(brand/entrada-1.jpg) center / cover no-repeat; padding: 44px 56px; justify-content: space-between; }
.gj-auth .auth-side::after { display: none; }
.auth-slides { position: absolute; inset: 0; z-index: -2; }
.auth-slides i { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0; animation: gjSlide 27s infinite; }
.auth-slides i:nth-child(1) { background-image: url(brand/entrada-1.jpg); }
.auth-slides i:nth-child(2) { background-image: url(brand/entrada-2.jpg); animation-delay: 9s; }
.auth-slides i:nth-child(3) { background-image: url(brand/entrada-3.jpg); animation-delay: 18s; }
@keyframes gjSlide { 0% { opacity: 0; transform: scale(1); } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.08); } }
.auth-shade { position: absolute; inset: 0; z-index: -1; background:
	linear-gradient(180deg, rgba(35,42,30,.72) 0%, rgba(35,42,30,.18) 38%, rgba(35,42,30,.55) 70%, rgba(26,31,22,.94) 100%),
	repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 96px); }
.gj-auth .auth-logo { height: 48px; width: auto; }
.gj-auth .auth-side-text { max-width: 560px; }
.auth-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #e6cfa9; }
.auth-kicker::before { content: ''; width: 38px; height: 1px; background: #e6cfa9; }
.gj-auth .auth-side-text h2 { font-family: var(--head); font-weight: 300; text-transform: none; font-size: clamp(44px, 5.6vw, 84px); line-height: .98; letter-spacing: -.035em; margin: 18px 0 18px; color: #fff; }
.gj-auth .auth-side-text h2 em { font-style: normal; font-weight: 700; color: #e6cfa9; }
.gj-auth .auth-side-text p { color: #ece6d8; font-size: 17px; line-height: 1.6; max-width: 440px; }
.auth-steps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; gap: 0; }
.auth-steps li { display: flex; flex-direction: column; gap: 2px; padding: 0 26px; border-left: 1px solid rgba(230,207,169,.5); font-size: 14px; font-weight: 600; color: #fff; }
.auth-steps li:first-child { padding-left: 0; border-left: 0; }
.auth-steps b { font-size: 12px; letter-spacing: .14em; color: #e6cfa9; font-weight: 700; }
.gj-auth .auth-copy { color: #d8d3c4; font-size: 12.5px; letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.gj-auth .auth-main { background: #f6f3ee; padding: 48px 28px; position: relative; }
.gj-auth .auth-main::before { content: ''; position: absolute; top: 0; right: 0; width: 220px; height: 220px; background: radial-gradient(circle at 100% 0, rgba(189,159,123,.22), transparent 70%); pointer-events: none; }
.gj-auth .auth-form { width: min(430px, 100%); background: #fff; border: 1px solid #e6dfd2; border-radius: 24px; padding: 40px 38px 34px; box-shadow: 0 30px 60px -34px rgba(46,53,40,.35); gap: 15px; position: relative; }
.auth-mark { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; background: #2e3528; padding: 8px; margin-bottom: 4px; }
.gj-auth .auth-form h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: #2e3528; }
.gj-auth .auth-form > .muted { font-size: 14px; line-height: 1.55; }
.gj-auth .field input { min-height: 50px; border-radius: 12px; background: #fbf9f5; border-color: #ddd5c6; }
.gj-auth .field input:focus { border-color: #bd9f7b; box-shadow: 0 0 0 3px rgba(189,159,123,.25); outline: 0; background: #fff; }
.gj-auth .btn--block { min-height: 52px; border-radius: 14px; font-size: 15px; letter-spacing: .01em; background: #2e3528; border-color: #2e3528; }
.gj-auth .btn--block:hover { background: #8a6a3c; border-color: #8a6a3c; }
.auth-foot { text-align: center; font-size: 13px; color: #5c5c58; margin-top: 4px; }
.auth-foot a { color: #8a6a3c; font-weight: 600; }
@media (max-width: 900px) {
	.auth { grid-template-columns: 1fr; }
	.gj-auth .auth-side { min-height: 46vh; padding: 26px 22px 70px; gap: 18px; }
	.gj-auth .auth-logo { height: 38px; }
	.gj-auth .auth-side-text h2 { font-size: 42px; margin: 12px 0 10px; }
	.gj-auth .auth-side-text p, .auth-steps { display: none; }
	.gj-auth .auth-copy { display: none; }
	.gj-auth .auth-main { align-items: flex-start; padding: 0 16px 36px; margin-top: -48px; }
	.gj-auth .auth-form { padding: 30px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) { .auth-slides i { animation: none; } .auth-slides i:first-child { opacity: 1; } }