/* Vølden CRM — consola del estudio.
   Layout: barra lateral fija con el logo + lienzo con cabecera "Ø" luminosa; vistas en rejillas de tarjetas tinta/crema. */
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  --bg:#14100D; --panel:#1C1714; --panel-2:#241E19; --fg:#F4EDE5; --muted:#A8998B; --line:#33291F;
  --accent:#F26A1B; --accent-hi:#FF8A45; --on-accent:#1A0F07; --glow:rgba(242,106,27,.28);
  --ok:#5FBF8A; --warn:#E8B44C; --bad:#E5654F;
  --f-d:"Unbounded","Arial Black",system-ui,sans-serif; --f-b:"Figtree",system-ui,-apple-system,sans-serif; --f-m:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:16px; color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#FBF7F2; --panel:#FFFFFF; --panel-2:#F3ECE3; --fg:#1E1A17; --muted:#6B6058; --line:#E6DACC;
  --accent:#F26A1B; --accent-hi:#B8470A; --on-accent:#FFFFFF; --glow:rgba(242,106,27,.18);
  --ok:#2F8F5B; --warn:#A87510; --bad:#C2412B; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#FBF7F2; --panel:#FFFFFF; --panel-2:#F3ECE3; --fg:#1E1A17; --muted:#6B6058; --line:#E6DACC;
  --accent:#F26A1B; --accent-hi:#B8470A; --on-accent:#FFFFFF; --glow:rgba(242,106,27,.18);
  --ok:#2F8F5B; --warn:#A87510; --bad:#C2412B; color-scheme:light}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--f-b);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.mono{font-family:var(--f-m);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.eyebrow{font:500 .72rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--f-d);margin:0;line-height:1.1;text-wrap:balance}

/* Estructura */
.app{position:relative;z-index:1;display:grid;grid-template-columns:248px 1fr;min-height:100%}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;padding:22px 16px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(8px)}
.side .logo{color:var(--fg);display:block;padding:4px 8px}
.side .logo svg{width:100%;height:auto;display:block}
.nav{display:grid;gap:2px}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:600}
.nav a:hover{color:var(--fg);background:var(--panel-2)}
.nav a[aria-current="page"]{color:var(--fg);background:var(--panel-2);box-shadow:inset 3px 0 0 var(--accent)}
.nav .count{font:600 .72rem var(--f-m);background:var(--accent);color:var(--on-accent);border-radius:99px;padding:1px 7px}
.side-foot{margin-top:auto;display:grid;gap:6px;font-size:.82rem}
.side-foot a{color:var(--muted);text-decoration:none}.side-foot a:hover{color:var(--accent)}
.main{min-width:0;padding:28px clamp(16px,3vw,44px) 60px;display:grid;gap:26px;align-content:start}
#view{display:grid;gap:16px;min-width:0}
.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.topbar h1{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn.menu-btn{display:none}

/* Controles */
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent);padding:9px 16px;border-radius:99px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--glow)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);box-shadow:none}
.btn.sm{padding:5px 12px;font-size:.85rem}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0;width:100%}
textarea{resize:vertical;min-height:90px}
.search{width:min(280px,100%)}

/* Hero del panel */
.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,40px);background:radial-gradient(120% 140% at 100% 0%,var(--glow),transparent 55%),var(--panel);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.hero h2{font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.01em}
.hero h2 em{font-style:normal;color:var(--accent)}
.hero p{max-width:46ch;margin:10px 0 0;color:var(--muted)}
.ring{--p:0;width:clamp(130px,16vw,190px);aspect-ratio:1;max-width:100%;border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--panel-2) 0);box-shadow:0 0 60px var(--glow);transition:--p 1s}
.ring::before{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--panel)}
.ring::after{content:"";position:absolute;width:122%;height:5%;background:var(--accent);transform:rotate(-38deg);border-radius:4px;opacity:.85}
.ring div{position:relative;z-index:1;text-align:center;background:var(--panel);border-radius:10px;padding:4px 8px}
.ring b{display:block;font:800 1.5rem var(--f-d)}
.ring span{font:500 .66rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--panel);display:grid;gap:4px}
.kpi b{font:600 1.5rem var(--f-m);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi small{color:var(--muted);font-size:.8rem}
.kpi.hot b{color:var(--accent)}

/* Tarjetas y rejillas */
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:18px;display:grid;gap:14px;align-content:start;min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:1rem}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font:10px var(--f-m)}
.legend{display:flex;gap:16px;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.list{display:grid}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:11px 2px;border-top:1px solid var(--line);cursor:pointer}
.item:first-child{border-top:0}
.item:hover .t{color:var(--accent)}
.item .t{font-weight:700}
.item .s{grid-column:1;color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;font-size:.9rem}

/* Píldoras de estado */
.pill{display:inline-block;align-self:start;justify-self:end;font:600 .7rem var(--f-m);letter-spacing:.04em;padding:3px 9px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.pill.ok{color:var(--ok)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}.pill.acc{color:var(--accent)}.pill.mut{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:4px}

/* Tablas */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{font:500 .7rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}tbody tr:hover{background:var(--panel-2)}
td.n,th.n{text-align:right;font-family:var(--f-m);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Kanban */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.lane{display:grid;gap:8px;align-content:start;background:var(--panel-2);border-radius:var(--r);padding:12px;min-height:140px}
.lane h4{margin:0 0 4px;font:600 .72rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;color:var(--muted)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:6px;cursor:pointer}
.tile:hover{border-color:var(--accent)}
.tile b{font-size:.95rem}.tile small{color:var(--muted)}

/* Productos */
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.prod{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--panel);display:grid;gap:10px;text-decoration:none;color:var(--fg)}
.prod::after{content:"Ø";position:absolute;right:-10px;bottom:-40px;font:800 9rem var(--f-d);color:var(--accent);opacity:.07;transition:opacity .3s,transform .3s}
.prod:hover::after{opacity:.16;transform:rotate(-8deg)}
.prod h3{font-size:1.15rem}
.prod .url{font:500 .75rem var(--f-m);color:var(--muted);overflow-wrap:anywhere}
.prod .stats{display:flex;gap:18px}
.prod .stats b{display:block;font:600 1.2rem var(--f-m)}

/* Notas */
.notes .card:first-child{max-height:calc(100vh - 170px);overflow-y:auto}
.notes{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:16px;align-items:start}
.note-body{line-height:1.7;overflow-wrap:anywhere}
.note-body h1,.note-body h2,.note-body h3{font-size:1.05rem;margin:18px 0 6px}
.note-body p{margin:0 0 10px}
.note-body code{font-family:var(--f-m);font-size:.85em;background:var(--panel-2);padding:1px 5px;border-radius:5px}
.note-body hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* Diálogo */
dialog{border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--fg);width:min(620px,94vw);padding:0;max-height:90vh}
dialog::backdrop{background:rgba(10,7,5,.6);backdrop-filter:blur(4px)}
dialog form{display:grid;gap:14px;padding:22px}
dialog h3{font-size:1.15rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields label{display:grid;gap:5px;font:600 .78rem var(--f-b);color:var(--muted)}
.fields .wide{grid-column:1/-1}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:5px 12px;color:var(--fg);font-weight:600;cursor:pointer}
.checks input{width:auto}
.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.actions .left{margin-right:auto}
.total{font:600 1.1rem var(--f-m);text-align:right}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:700;z-index:50}
.fade{animation:fade .45s ease both}
@keyframes fade{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}.btn,.prod::after{transition:none}}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:30;transform:translateX(-100%);transition:transform .25s;background:var(--panel);padding-top:calc(22px + env(safe-area-inset-top,0px))}
  .side.open{transform:none}
  .btn.menu-btn{display:inline-flex}
  .grid2,.notes{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
}