/* ═══════════════════════════════════════════════════════════════════
   DauPro Studio · línea gráfica aplicada al CRM
   Base: test.keoghand.io (sistema de Víctor García)
   Paleta del PDF de línea gráfica:
     Crema   #F7EAE2  (C3 M10 Y11 K0)
     Carbón  #29292D  (C75 M66 Y56 K70)
   Tipografía: Poppins
   Donde el sistema original usa dorado #c9a35a, aquí va el crema.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --crema:#F7EAE2;
  --crema-2:#EFDCD0;
  --carbon:#29292D;
  --ink:#1C1C1F;

  --bg:#0C0C0E;
  --surf:#141416;
  --surf-2:#1A1A1D;
  --surf-3:#212125;

  --line:rgba(247,234,226,.09);
  --line-2:rgba(247,234,226,.05);
  --crema-line:rgba(247,234,226,.34);
  --crema-soft:rgba(247,234,226,.08);

  --txt:#F2EAE4;
  --muted:#9A918A;
  --muted-2:#6C645E;

  --ok:#6FAE8A;
  --warn:#D6A763;
  --crit:#CF7A72;
  --info:#7FA3C4;
  --ok-soft:rgba(111,174,138,.13);
  --warn-soft:rgba(214,167,99,.13);
  --crit-soft:rgba(207,122,114,.13);
  --info-soft:rgba(127,163,196,.13);

  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.tnum{font-variant-numeric:tabular-nums}

/* ── Cabecera del mockup (fuera del CRM) ───────────────────────── */
.mk-top{border-bottom:1px solid var(--line);background:var(--ink)}
.mk-top-in{
  max-width:1500px;margin:0 auto;
  padding:18px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
}
.mk-id{display:flex;align-items:center;gap:13px;min-width:0}
.mk-mark{width:38px;height:38px;flex:none}
.mk-top h1{font-size:clamp(15px,2.2vw,19px)}
.mk-top h1 em{font-style:normal;font-weight:300;color:var(--muted)}
.mk-top .sub{margin-top:3px;font-size:11.5px;color:var(--muted-2);font-weight:300}
.mk-stamp{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--crema-line);border-radius:999px;padding:7px 15px;color:var(--crema);white-space:nowrap;
}

/* Nota explicativa del mockup */
.mk-note{
  max-width:1500px;margin:0 auto;
  padding:16px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
}
.mk-note-in{
  background:var(--warn-soft);border:1px solid rgba(214,167,99,.26);border-radius:11px;
  padding:13px 16px;font-size:12px;color:var(--warn);line-height:1.65;font-weight:300;
  display:flex;gap:11px;align-items:flex-start;
}
.mk-note-in svg{width:15px;height:15px;flex:none;margin-top:2px;stroke-width:2}
.mk-note-in b{color:var(--crema);font-weight:600}
.mk-note-in .nuevo{
  display:inline-block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:var(--crema);color:var(--carbon);border-radius:4px;padding:1px 6px;vertical-align:1px;
}

/* ── Marco de la app ───────────────────────────────────────────── */
.mk-frame{
  max-width:1500px;margin:0 auto;
  padding:18px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));
}
.app{
  background:radial-gradient(1100px 520px at 82% -8%,rgba(247,234,226,.05),transparent 62%),#101012;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:grid;grid-template-columns:214px 1fr;min-height:680px;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.side{background:#09090B;border-right:1px solid var(--line);padding:17px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.side-brand{display:flex;align-items:center;gap:10px;padding:0 8px 15px}
.side-brand svg{width:32px;height:32px;flex:none}
.side-brand b{font-size:13.5px;font-weight:700;display:block;letter-spacing:-.01em}
.side-brand span{display:block;font-size:7.5px;letter-spacing:.34em;color:var(--muted-2);font-weight:600}
.s-lbl{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);padding:14px 10px 6px;font-weight:700}
.nav{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 10px;border-radius:9px;font-size:12.5px;color:var(--muted);font-weight:500;
}
.nav:hover{background:rgba(247,234,226,.05);color:var(--txt)}
.nav.on{background:var(--crema-soft);color:var(--crema);border:1px solid var(--crema-line);padding:7px 9px}
.nav svg{width:16px;height:16px;flex:none;stroke-width:1.8}
.nav .cnt{margin-left:auto;font-size:10px;font-weight:700;background:rgba(247,234,226,.12);border-radius:20px;padding:1px 7px}
.nav .cnt.hot{background:var(--crema);color:var(--carbon)}
.side-foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line)}
.who{display:flex;align-items:center;gap:9px;padding:0 6px}
.who b{font-size:11.5px;display:block;font-weight:600}
.who span{font-size:9.5px;color:var(--muted-2)}
.av{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:linear-gradient(170deg,var(--crema),var(--crema-2));color:var(--carbon);
  display:grid;place-items:center;font-size:11px;font-weight:700;
}

/* ── Panel ─────────────────────────────────────────────────────── */
.panel{min-width:0;display:flex;flex-direction:column}
.bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.bar h2{font-size:16.5px}
.bar .sub{margin-top:2px;font-size:11.5px;color:var(--muted-2);font-weight:300}
.bar-acts{display:flex;gap:8px;flex-wrap:wrap}
.body{padding:19px 22px 26px;display:grid;gap:16px;align-content:start}

/* ── Controles ─────────────────────────────────────────────────── */
.btn{border:1px solid var(--line);background:var(--surf);border-radius:9px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--muted)}
.btn:hover{border-color:var(--crema-line);color:var(--txt)}
.btn-f{background:linear-gradient(180deg,var(--crema),var(--crema-2));color:var(--carbon);border-color:transparent;font-weight:700}
.btn-sm{padding:6px 11px;font-size:11px}
.chip{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.chip.on{color:var(--carbon);background:linear-gradient(180deg,var(--crema),var(--crema-2));border-color:transparent}
.tab{font-size:12px;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:10px;border:1px solid var(--line)}
.tab.on{color:var(--crema);background:var(--crema-soft);border-color:var(--crema-line)}
.input{
  display:flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--line);
  border-radius:10px;padding:9px 13px;font-size:12px;color:var(--muted-2);font-weight:300;
}
.input svg{width:14px;height:14px;flex:none;stroke-width:2}

/* ── Tarjetas ──────────────────────────────────────────────────── */
.card{background:linear-gradient(180deg,#19191C,#131315);border:1px solid var(--line);border-radius:14px;padding:17px;min-width:0}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-h h3{font-size:13px}
.card-h .hint{font-size:10.5px;color:var(--muted-2);font-weight:300}
.eyebrow{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:700}

.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}

.kpi{background:linear-gradient(180deg,#19191C,#131315);border:1px solid var(--line);border-radius:14px;padding:15px}
.kpi .eyebrow{display:block;margin-bottom:9px}
.kpi b{font-size:24px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1;color:var(--crema)}
.kpi small{font-size:10.5px;color:var(--muted);display:block;margin-top:7px;font-weight:300}
.up{color:var(--ok);font-weight:600}
.dn{color:var(--crit);font-weight:600}

/* ── Pills ─────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-crit{background:var(--crit-soft);color:var(--crit)}
.p-info{background:var(--info-soft);color:var(--info)}
.p-mute{background:rgba(247,234,226,.06);color:var(--muted)}
.p-crema{background:var(--crema);color:var(--carbon)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.src{font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--muted-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.nuevo-tag{
  font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:var(--crema);color:var(--carbon);border-radius:4px;padding:2px 6px;
}

/* ── Tablas ────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700;padding:0 10px 9px}
td{padding:11px 10px;border-top:1px solid var(--line-2);vertical-align:middle}
td b{font-weight:600}
.t-wrap{overflow-x:auto}
.money{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;color:var(--crema)}
.r{text-align:right}

/* ── Notas dentro del panel ────────────────────────────────────── */
.note{
  font-size:11.5px;background:var(--warn-soft);color:var(--warn);border-radius:10px;
  padding:11px 14px;font-weight:300;display:flex;gap:10px;align-items:flex-start;line-height:1.6;
}
.note svg{width:14px;height:14px;flex:none;margin-top:2px;stroke-width:2}
.note b{color:var(--crema);font-weight:600}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.info{background:var(--info-soft);color:var(--info)}

/* ── Reglas sí/no ──────────────────────────────────────────────── */
.rule{display:grid;gap:10px}
.rule-r{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--muted);font-weight:300;line-height:1.55}
.rule-r svg{width:14px;height:14px;flex:none;margin-top:2px;stroke-width:2.2}
.rule-r b{color:var(--txt);font-weight:600}
.yes{color:var(--ok)}
.no{color:var(--crit)}

/* ── Pie ───────────────────────────────────────────────────────── */
.mk-foot{
  max-width:1500px;margin:0 auto;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 38px max(16px,env(safe-area-inset-left,0px));
}
.mk-foot-in{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
.sw-row{display:flex;gap:13px;flex-wrap:wrap}
.sw-i{display:flex;align-items:center;gap:9px;font-size:9.5px;color:var(--muted-2);font-weight:300}
.sw-i i{width:25px;height:25px;border-radius:7px;border:1px solid var(--line);flex:none}
.sw-i b{display:block;color:var(--txt);font-size:10.5px;font-weight:600;letter-spacing:.02em}
.mk-foot p{font-size:10.5px;color:var(--muted-2);max-width:46ch;font-weight:300;line-height:1.65}
.mk-nav{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.mk-nav a{
  font-size:10.5px;color:var(--muted);text-decoration:none;border:1px solid var(--line);
  border-radius:7px;padding:5px 10px;font-weight:500;
}
.mk-nav a:hover{border-color:var(--crema-line);color:var(--crema)}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:12px}
  .s-lbl,.side-foot{display:none}
  .side-brand{padding:0 10px 0 4px}
  .nav{width:auto}
  .split{grid-template-columns:1fr}
}
@media (max-width:880px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .body{padding:15px}
  .bar{padding:14px 15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--crema);outline-offset:2px;border-radius:5px}