/* Panel de KPIs · tema Kavak 2026 (Cream & Plum) */
:root{
  --cream:#faf7f2; --cream2:#f1eae0; --paper:#ffffff; --line:#e7e0d6; --line2:#d9d0c3;
  --ink:#1c1917; --mut:#57534e; --mut2:#8a827a;
  --plum:#5b2a86; --plum2:#7a3fae; --plum-soft:rgba(91,42,134,.10);
  --ok:#1f7a4d; --ok-soft:rgba(31,122,77,.12); --warn:#b45309; --warn-soft:rgba(180,83,9,.14);
  --err:#b91c1c; --err-soft:rgba(185,28,28,.12);
  --meta:#1877f2; --google:#ea4335;
  --r:12px; --e1:0 1px 2px rgba(28,25,23,.06),0 1px 8px rgba(28,25,23,.05);
  --fs:.875rem; --fs-sm:.8rem; --fs-xs:.72rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{font-family:'Sora',system-ui,sans-serif;background:var(--cream);color:var(--ink);font-size:var(--fs);
  -webkit-font-smoothing:antialiased;line-height:1.45}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:where(a,button,input,select,textarea,[tabindex],[contenteditable]):focus-visible{outline:2px solid var(--plum);outline-offset:2px}
h1{font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.05rem;font-weight:600}
.sub{color:var(--mut);margin-top:.15rem}
.tiny{font-size:var(--fs-xs);color:var(--mut2)}
.center{text-align:center}
code{background:var(--cream2);padding:1px 5px;border-radius:4px;font-size:.85em}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(16px,3vw,32px);
  background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:.02em}
.brand .mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--plum);color:#fff;font-weight:800}
.nav{display:flex;align-items:center;gap:.9rem;font-size:var(--fs-sm)}
.nav a:hover{color:var(--plum)}
.who{color:var(--mut)}

.wrap{max-width:1600px;margin:0 auto;padding:1.4rem clamp(16px,3vw,32px) 4rem}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.2rem}
.crumb{font-size:var(--fs-xs);color:var(--mut2);margin-bottom:.3rem}
.crumb a:hover{color:var(--plum)}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.month-nav{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.2rem .4rem}
.month-nav span{min-width:9rem;text-align:center;font-weight:600;font-size:var(--fs-sm)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--plum);color:#fff;
  border-radius:999px;padding:.55rem 1.1rem;font-weight:600;font-size:var(--fs-sm);transition:background .15s}
.btn:hover{background:var(--plum2)}
.btn:disabled{opacity:.6;cursor:default}
.btn-ghost{display:inline-flex;align-items:center;border-radius:999px;padding:.4rem .8rem;font-size:var(--fs-sm);
  border:1px solid var(--line2);background:var(--paper);color:var(--ink)}
.btn-ghost:hover{border-color:var(--plum);color:var(--plum)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--e1)}
.card + .card{margin-top:1rem}
.card h2{margin-bottom:.7rem}

/* portada */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.client-card{display:flex;flex-direction:column;gap:.8rem;transition:transform .15s,border-color .15s}
.client-card:hover{transform:translateY(-2px);border-color:var(--plum)}
.cc-head{display:flex;align-items:center;gap:.5rem}
.cc-head h2{flex:1}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.dot.verde{background:var(--ok)} .dot.ambar{background:var(--warn)} .dot.rojo{background:var(--err)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .8rem}
.kpis > div{display:flex;flex-direction:column}
.kpis .lbl{font-size:var(--fs-xs);color:var(--mut2);text-transform:uppercase;letter-spacing:.04em}
.kpis b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.cc-foot{display:flex;gap:.4rem;flex-wrap:wrap}

.badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;padding:.15rem .6rem;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.gray{background:var(--cream2);color:var(--mut)}
.badge.plum{background:var(--plum-soft);color:var(--plum)}

/* resultados del mes */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:.8rem}
.res{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.7rem .9rem;display:flex;flex-direction:column;gap:.1rem}
.res .lbl{font-size:var(--fs-xs);color:var(--mut2);text-transform:uppercase;letter-spacing:.04em}
.res b{font-size:1.3rem;font-variant-numeric:tabular-nums}
.res b.mm[contenteditable]{border-bottom:1px dashed var(--line2);cursor:text}
.budgets{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.8rem}

/* tabla */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--e1);max-height:78vh}
table.kpi{border-collapse:separate;border-spacing:0;min-width:1900px;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
table.kpi th,table.kpi td{padding:.45rem .55rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;vertical-align:top}
table.kpi thead th{position:sticky;top:0;background:var(--cream2);z-index:3;font-weight:600;text-align:left}
table.kpi thead tr.grp th{top:0;text-align:center;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em}
table.kpi thead tr:nth-child(2) th{top:31px}
th.g-meta{background:rgba(24,119,242,.12)!important} th.g-google{background:rgba(234,67,53,.12)!important}
th.g-neg{background:var(--plum-soft)!important} th.g-seg{background:var(--cream2)!important}
table.kpi .sticky{position:sticky;left:0;background:var(--paper);z-index:2}
table.kpi thead .sticky{z-index:4;background:var(--cream2)}
td.n{text-align:right}
td.b{font-weight:700}
td.neg{color:var(--err);font-weight:600}
td.err{color:var(--err);font-style:italic}
td.na{color:var(--mut2);text-align:center}
td.date{font-weight:600}
tr.row-mismatch td{background:rgba(180,83,9,.05)}
tr.row-partial td{background:rgba(87,83,78,.05)}
tfoot tr.tot td{background:var(--cream2);font-weight:600;border-top:2px solid var(--line2)}
td.rec{max-width:260px;white-space:normal}
td.rec .nota{display:block;margin-top:.2rem;min-width:120px;font-size:var(--fs-xs);color:var(--mut);min-height:1em}
[data-can-edit="false"] td.rec .nota:empty{display:none}
.ed{background:#fffaf0}
[data-can-edit="true"] .ed{cursor:text}
[data-can-edit="true"] .ed:hover{outline:1px solid var(--line2)}
.ed.text{white-space:normal;min-width:180px;max-width:260px}
.ed.saving{opacity:.6}
.ed.saved{animation:flash 1.2s ease-out}
.ed.error{outline:2px solid var(--err)}
@keyframes flash{0%{background:var(--ok-soft)}100%{background:#fffaf0}}
.foot-note{margin-top:.6rem}

/* listas */
table.list{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.list th,table.list td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.list th{color:var(--mut);font-weight:600}
.form-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start}
input,select{font:inherit;padding:.5rem .7rem;border:1px solid var(--line2);border-radius:8px;background:var(--paper);color:var(--ink)}

/* login */
.login-body{display:grid;place-items:center;min-height:100vh;padding:1rem}
.login-card{width:min(420px,100%);background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:2rem;box-shadow:var(--e1);display:flex;flex-direction:column;gap:.6rem}
.login-card h1{margin-top:.6rem}
.login-card form{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem}
.login-card label{font-size:var(--fs-xs);color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-top:.4rem}
.login-card .btn{margin-top:.8rem}
.login-err{display:none;background:var(--err-soft);color:var(--err);border-radius:8px;padding:.5rem .7rem;font-size:var(--fs-sm)}
.login-err.show{display:block}

.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;
  padding:.6rem 1rem;border-radius:999px;font-size:var(--fs-sm);transition:.2s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--err)}
@media (max-width:700px){h1{font-size:1.25rem}.wrap{padding-inline:16px}.results{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}