:root{
  --bg:#F3F5F0;
  --surface:#FFFFFF;
  --surface-2:#FBFAF5;
  --border:rgba(27,36,33,0.12);
  --border-strong:rgba(27,36,33,0.22);
  --text:#1B2421;
  --text-muted:#5B6560;
  --text-faint:#8A938D;
  --primary:#1F6D5C;
  --primary-strong:#134539;
  --primary-tint:rgba(31,109,92,0.10);
  --accent:#C17A45;
  --accent-tint:rgba(193,122,69,0.14);
  --pending:#B25B33;
  --pending-tint:rgba(178,91,51,0.12);
  --danger:#A8402C;
  --danger-tint:rgba(168,64,44,0.10);
  --shadow-sm:0 1px 2px rgba(20,30,26,0.05);
  --shadow-md:0 10px 30px -14px rgba(20,30,26,0.22);
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1512;
    --surface:#161F1B;
    --surface-2:#1B2621;
    --border:rgba(233,239,235,0.10);
    --border-strong:rgba(233,239,235,0.20);
    --text:#EAEFEC;
    --text-muted:#9CA8A2;
    --text-faint:#6E7A74;
    --primary:#54BE99;
    --primary-strong:#84D8B9;
    --primary-tint:rgba(84,190,153,0.14);
    --accent:#E39B62;
    --accent-tint:rgba(227,155,98,0.16);
    --pending:#E28B5C;
    --pending-tint:rgba(226,139,92,0.16);
    --danger:#E2735A;
    --danger-tint:rgba(226,115,90,0.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:0 14px 34px -16px rgba(0,0,0,0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1512;
  --surface:#161F1B;
  --surface-2:#1B2621;
  --border:rgba(233,239,235,0.10);
  --border-strong:rgba(233,239,235,0.20);
  --text:#EAEFEC;
  --text-muted:#9CA8A2;
  --text-faint:#6E7A74;
  --primary:#54BE99;
  --primary-strong:#84D8B9;
  --primary-tint:rgba(84,190,153,0.14);
  --accent:#E39B62;
  --accent-tint:rgba(227,155,98,0.16);
  --pending:#E28B5C;
  --pending-tint:rgba(226,139,92,0.16);
  --danger:#E2735A;
  --danger-tint:rgba(226,115,90,0.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 14px 34px -16px rgba(0,0,0,0.55);
  color-scheme: dark;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#app{min-height:100vh;display:flex;flex-direction:column;}
img{max-width:100%;}
[hidden]{display:none !important;}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0;}
button{font-family:inherit; cursor:pointer;}
input{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--primary-tint);}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 28px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.topbar-brand{display:flex; flex-direction:column; gap:2px;}
.topbar-brand .eyebrow{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); font-weight:600;}
.topbar-brand h1{font-size:20px; font-weight:600; color:var(--text);}
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--text-muted);
  background:none; border:none; padding:8px 4px;
}
.back-link:hover{color:var(--primary);}

.main{flex:1; width:100%; max-width:960px; margin:0 auto; padding:32px 28px 96px;}

.stats-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:28px;}
.stat-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.stat-tile .num{font-family:var(--font-display); font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--primary);}
.stat-tile .label{font-size:12px; color:var(--text-muted); margin-top:2px;}

.section-label{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);font-weight:700;}

.dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.dash-head p{color:var(--text-muted); font-size:14px; max-width:46ch; margin:6px 0 0;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; border:1px solid transparent;
  padding:11px 20px; font-size:14px; font-weight:600;
  background:var(--primary); color:#fff;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--primary-strong); box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none;}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2); box-shadow:none;}
.btn-danger{background:var(--danger-tint); color:var(--danger); border-color:transparent;}
.btn-danger:hover{background:var(--danger); color:#fff;}
.btn-sm{padding:8px 14px; font-size:13px;}

.client-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.client-card{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow-sm); text-align:left; display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  width:100%;
}
.client-card:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px);}
.client-card .card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.client-card h3{font-size:19px; font-weight:600;}
.card-del{
  background:none; border:none; color:var(--text-faint); padding:4px; border-radius:8px; line-height:0; font-size:13px;
}
.card-del:hover{color:var(--danger); background:var(--danger-tint);}
.tag{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.01em; text-transform:uppercase;
  width:fit-content; white-space:nowrap; max-width:100%;
}
.tag-basica{background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border-strong);}
.tag-marketing{background:var(--accent-tint); color:var(--accent);}
.tag-avancada{background:var(--primary-tint); color:var(--primary);}
.tag-completa{background:var(--primary); color:#fff;}

.progress-row{display:flex; align-items:center; gap:10px;}
.progress-track{flex:1; height:7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden;}
.progress-fill{height:100%; border-radius:999px; background:var(--primary); transition:width .3s ease;}
.progress-label{font-size:12px; font-weight:700; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
.card-meta{font-size:12px; color:var(--text-faint);}

.empty-state{
  border:1.5px dashed var(--border-strong); border-radius:var(--radius-lg);
  padding:56px 24px; text-align:center; color:var(--text-muted);
}
.empty-state h3{color:var(--text); font-size:19px; margin-bottom:6px;}

.detail-head{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 28px; box-shadow:var(--shadow-sm); margin-bottom:24px;
}
.detail-head .tag{margin-bottom:12px;}
.detail-head h2{font-size:27px; font-weight:600; margin-bottom:4px;}
.detail-head .pkg-line{font-size:13px; color:var(--text-muted); margin-bottom:16px;}
.detail-progress{display:flex; align-items:center; gap:12px;}
.detail-progress .progress-track{height:9px;}
.detail-progress .progress-label{font-size:13px;}
.detail-head .value-done{font-size:13px;color:var(--text-muted);margin-top:8px;}
.detail-head .value-done strong{color:var(--primary);font-size:15px;}
.detail-head .pkg-blurb{font-size:14px;color:var(--text-muted);margin:4px 0 0;line-height:1.5;max-width:60ch;}
.detail-head .pkg-result{font-size:13px;color:var(--primary);font-weight:600;margin-top:18px;}
.detail-head .pkg-note{font-size:12.5px;color:var(--accent);background:var(--accent-tint);border-radius:var(--radius-sm);padding:9px 13px;margin-top:10px;line-height:1.5;}

.items{display:flex; flex-direction:column; gap:10px;}
.item-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.item-top{display:flex; align-items:flex-start; gap:12px;}
.item-toggle{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:2px solid var(--border-strong);
  background:var(--surface); display:flex; align-items:center; justify-content:center; margin-top:2px;
  transition:background .15s ease, border-color .15s ease;
}
.item-toggle svg{width:14px; height:14px; opacity:0; transition:opacity .15s ease; stroke:#fff;}
.item-card.is-done .item-toggle{background:var(--primary); border-color:var(--primary);}
.item-card.is-done .item-toggle svg{opacity:1;}
.item-text{flex:1; min-width:0;}
.item-text .title{font-weight:600; font-size:14.5px;}
.item-text .detail{font-size:13px; color:var(--text-muted); margin-top:2px;}
.item-value{margin-left:8px;font-weight:700;color:var(--primary);font-size:13px;}
.meeting-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-sm); margin-bottom:20px;}
.meeting-card .section-label{margin-bottom:8px;}
.meeting-card textarea{width:100%; min-height:90px; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); font-size:14px; font-family:inherit; resize:vertical; outline:none;}
.meeting-card textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint);}
.meeting-card .meeting-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.meeting-card .meeting-head input[type="date"]{padding:7px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-size:13px;font-family:inherit;outline:none;}
.dates-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-sm); margin-bottom:20px;}
.dates-card .dates-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:10px;}
.dates-card .date-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin-bottom:6px;}
.dates-card .date-field input[type="date"]{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-size:14px;font-family:inherit;outline:none;}
.dates-card .date-field input[type="date"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);}
.item-card.is-done .item-text .title{color:var(--text-muted); text-decoration:line-through; text-decoration-color:var(--border-strong); text-decoration-thickness:1.5px;}
.status-pill{flex-shrink:0; font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; border:none;}
.status-pill.done{background:var(--primary-tint); color:var(--primary);}
.status-pill.pending{background:var(--pending-tint); color:var(--pending);}

.shots-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border);}
.shot-thumb{
  position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--border);
  background:var(--surface-2); padding:0;
}
.shot-thumb img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;}
.shot-remove{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(14,20,18,0.65); color:#fff; border:none; font-size:11px; line-height:1;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s ease;
}
.shot-thumb:hover .shot-remove{opacity:1;}
.shot-add{
  width:64px; height:64px; border-radius:10px; border:1.5px dashed var(--border-strong);
  background:none; color:var(--text-faint); display:flex; align-items:center; justify-content:center;
  font-size:22px; transition:border-color .15s ease, color .15s ease; margin:0;
}
.shot-add:hover{border-color:var(--primary); color:var(--primary);}

.detail-footer{margin-top:28px; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end;}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(14,20,18,0.5); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;
}
.modal{
  background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border);
  box-shadow:var(--shadow-md); width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  padding:26px;
}
.modal h2{font-size:21px; margin-bottom:4px;}
.modal .sub{font-size:13px; color:var(--text-muted); margin-bottom:18px; line-height:1.5;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:6px;}
.field input[type="text"]{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); font-size:14.5px; outline:none;
}
.field input[type="text"]:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint);}
.pkg-options{display:flex; flex-direction:column; gap:8px;}
.pkg-option{
  text-align:left; border:1.5px solid var(--border-strong); border-radius:var(--radius-md);
  padding:12px 14px; background:var(--surface-2); display:flex; flex-direction:column; gap:2px;
  transition:border-color .12s ease, background .12s ease; width:100%;
}
.pkg-option:hover{border-color:var(--primary);}
.pkg-option.selected{border-color:var(--primary); background:var(--primary-tint);}
.pkg-option .pkg-name{font-weight:700; font-size:14px; display:flex; justify-content:space-between; gap:8px;}
.pkg-option .pkg-price{color:var(--primary); font-variant-numeric:tabular-nums;}
.pkg-option .pkg-meta{font-size:12px; color:var(--text-muted);}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}

.lightbox{
  position:fixed; inset:0; background:rgba(8,12,10,0.86); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:32px;
}
.lightbox img{max-width:100%; max-height:80vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.5); pointer-events:none;}
.lightbox-actions{position:absolute; top:20px; right:20px; display:flex; gap:10px;}
.lightbox-actions button{
  width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,0.12);
  color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center;
}
.lightbox-actions button:hover{background:rgba(255,255,255,0.22);}

.save-indicator{
  position:fixed; bottom:20px; right:20px; z-index:150;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md);
  border-radius:999px; padding:9px 16px; font-size:12.5px; font-weight:600; color:var(--text-muted);
  display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.save-indicator.show{opacity:1; transform:translateY(0);}
.save-dot{width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex-shrink:0;}
.save-indicator.pending .save-dot{background:var(--accent); animation:save-pulse 1s infinite;}
.save-indicator.saved .save-dot{background:var(--primary);}
.save-indicator.local .save-dot{background:var(--accent);}
.save-indicator.error .save-dot{background:var(--danger);}
@keyframes save-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.banner{
  background:var(--accent-tint); color:var(--accent); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:11px 16px; font-size:13px; margin-bottom:20px; line-height:1.5;
}

@media (max-width:560px){
  .main{padding:24px 16px 96px;}
  .topbar{padding:14px 18px;}
  .detail-head{padding:20px;}
}