/* ════════════════════════════════════════════════════════════
   Vertiz Studio — Dashboard design system
   Tokens mirror the live site (styles.css): mono palette + Carmín,
   Inter, radius 2px, hairlines (no shadows), generous space.
   ════════════════════════════════════════════════════════════ */
:root{
  --ink:#141414; --charcoal:#2C2C2C; --stone:#5C5C5C; --silver:#ADADAD;
  --chalk:#F5F5F5; --mist:#FAFAFA; --white:#FFFFFF; --carmin:#E8102E;
  --line:rgba(20,20,20,.10); --line-soft:rgba(20,20,20,.06);
  --ok:#1A7F4B; --ok-bg:#E8F4ED; --warn:#9A6A00; --warn-bg:#FBF1DC;
  --danger:#C20E27; --danger-bg:#FBE7EA; --info:#2C2C2C; --info-bg:#EEE;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --radius:2px; --radius-lg:3px;
  --tr:220ms cubic-bezier(.2,.7,.2,1);
  --sidebar-w:248px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,h4,p,ul,ol,figure,table{margin:0;}
ul{padding:0;list-style:none;}
button{font-family:inherit;}
/* The [hidden] attribute must always win over component display rules
   (e.g. .boot{display:grid}), otherwise hidden panels stay visible. */
[hidden]{display:none !important;}

body{
  font-family:var(--font); font-weight:400; font-size:15px; line-height:1.6;
  color:var(--ink); background:var(--chalk);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--carmin); color:var(--white);}
a{color:inherit;}
.muted{color:var(--stone);}
.tnum{font-variant-numeric:tabular-nums;}

/* ── Boot splash ───────────────────────────────────────────── */
.boot{position:fixed; inset:0; display:grid; place-items:center; background:var(--chalk); z-index:9999;}
.boot__mark{
  width:44px; height:44px; display:block; object-fit:cover; border-radius:var(--radius);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ── Brand mark ────────────────────────────────────────────── */
.vmark{
  width:36px; height:36px; flex:0 0 auto; display:block;
  object-fit:cover; border-radius:var(--radius);
}

/* ════════════ AUTH ════════════ */
.auth{min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1.25rem; gap:1.5rem;}
.auth__panel{
  width:100%; max-width:404px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.75rem,5vw,2.75rem);
}
.auth__brand{display:flex; align-items:center; gap:.75rem; margin-bottom:2rem;}
.vname{font-weight:500; letter-spacing:-.01em; line-height:1.1;}
.vtag{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone);}
.auth__title{font-weight:300; font-size:1.7rem; letter-spacing:-.02em;}
.auth__sub{color:var(--stone); margin:.35rem 0 1.75rem; font-size:.92rem;}
.auth__divider{display:flex; align-items:center; gap:.85rem; margin:1.4rem 0; color:var(--silver); font-size:.75rem; letter-spacing:.04em;}
.auth__divider::before,.auth__divider::after{content:""; height:1px; flex:1; background:var(--line);}
.auth__form{display:grid; gap:1rem;}
.auth__error{color:var(--danger); font-size:.85rem; background:var(--danger-bg); border:1px solid rgba(194,14,39,.2); padding:.6rem .75rem; border-radius:var(--radius);}
.auth__links{display:flex; justify-content:space-between; margin-top:1.25rem;}
.auth__foot{color:var(--silver); font-size:.78rem;}

/* ── Fields ────────────────────────────────────────────────── */
.field{display:grid; gap:.4rem;}
.field>span{font-size:.78rem; font-weight:500; letter-spacing:.02em; color:var(--charcoal);}
input,select,textarea{
  font-family:inherit; font-size:.95rem; color:var(--ink); width:100%;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:.62rem .7rem; transition:border-color var(--tr);
}
textarea{resize:vertical; min-height:80px; line-height:1.55;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ink);}
input::placeholder,textarea::placeholder{color:var(--silver);}
.field--inline{display:flex; align-items:center; gap:.55rem;}
.field--inline input[type=checkbox]{width:auto;}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.88rem; font-weight:500; letter-spacing:.01em; cursor:pointer;
  padding:.6rem 1.1rem; border:1px solid transparent; border-radius:var(--radius);
  transition:background-color var(--tr),color var(--tr),border-color var(--tr),opacity var(--tr);
  white-space:nowrap;
}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-primary{background:var(--ink); color:var(--white); border-color:var(--ink);}
.btn-primary:hover:not(:disabled){background:var(--charcoal); border-color:var(--charcoal);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover:not(:disabled){border-color:var(--ink);}
.btn-danger{background:transparent; color:var(--danger); border-color:rgba(194,14,39,.4);}
.btn-danger:hover:not(:disabled){background:var(--danger); color:var(--white); border-color:var(--danger);}
.btn-google{width:100%; background:var(--white); color:var(--ink); border-color:var(--line);}
.btn-google:hover{border-color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{padding:.4rem .7rem; font-size:.8rem;}
.linkbtn{background:none; border:0; color:var(--stone); cursor:pointer; font-size:.82rem; padding:0; transition:color var(--tr);}
.linkbtn:hover{color:var(--carmin);}
.iconbtn{background:none; border:0; cursor:pointer; color:var(--silver); padding:.25rem .4rem; border-radius:var(--radius); font-size:.95rem; transition:color var(--tr),background var(--tr);}
.iconbtn:hover{color:var(--ink); background:var(--chalk);}

/* ════════════ APP LAYOUT ════════════ */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100dvh;}
.sidebar{
  position:sticky; top:0; height:100dvh; background:var(--white); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:1.4rem 1rem;
}
.sidebar__brand{display:flex; align-items:center; gap:.65rem; padding:.25rem .4rem 1.4rem;}
.sidebar__name{font-weight:500; letter-spacing:-.01em;}
.nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.nav a{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius);
  color:var(--stone); font-size:.9rem; font-weight:500; text-decoration:none; transition:background var(--tr),color var(--tr);
}
.nav a .ic{width:18px; text-align:center; opacity:.85;}
.nav a:hover{background:var(--chalk); color:var(--ink);}
.nav a.is-active{background:var(--ink); color:var(--white);}
.sidebar__user{display:flex; align-items:center; gap:.6rem; padding-top:1rem; border-top:1px solid var(--line); margin-top:.5rem;}
.avatar{width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:var(--ink); color:var(--white); display:grid; place-items:center; font-size:.85rem; font-weight:500; background-size:cover; background-position:center;}
.sidebar__userinfo{flex:1; min-width:0;}
.sidebar__username{font-size:.85rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sidebar__role{font-size:.72rem; color:var(--silver); letter-spacing:.04em; text-transform:uppercase;}

.hamburger{display:none; position:fixed; top:.85rem; left:.85rem; z-index:40; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); width:40px; height:40px; font-size:1.1rem; cursor:pointer;}

.content{padding:clamp(1.4rem,3.5vw,2.75rem); max-width:1180px; width:100%;}

/* ── Page header ───────────────────────────────────────────── */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; flex-wrap:wrap;}
.page-head h1{font-weight:300; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em;}
.page-head .eyebrow{font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-bottom:.3rem;}
.page-actions{display:flex; gap:.6rem; flex-wrap:wrap;}

/* ── Cards ─────────────────────────────────────────────────── */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);}
.card--pad{padding:1.5rem;}
.grid{display:grid; gap:1rem;}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}

.stat{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.35rem 1.4rem;}
.stat__label{font-size:.74rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--stone);}
.stat__value{font-weight:300; font-size:2rem; letter-spacing:-.02em; margin-top:.45rem; line-height:1;}
.stat__sub{font-size:.82rem; color:var(--stone); margin-top:.5rem;}
.stat__sub b{color:var(--ink); font-weight:600;}

/* ── Progress (MRR goal) ───────────────────────────────────── */
.progress{height:8px; background:var(--chalk); border-radius:99px; overflow:hidden; margin-top:.9rem;}
.progress__bar{height:100%; background:var(--ink); border-radius:99px; transition:width 600ms cubic-bezier(.2,.7,.2,1);}
.progress__bar.is-goal{background:var(--carmin);}

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white);}
table.data{width:100%; border-collapse:collapse; font-size:.9rem;}
.data thead th{
  text-align:left; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--stone); padding:.85rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--mist);
}
.data tbody td{padding:.85rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.data tbody tr:last-child td{border-bottom:0;}
.data tbody tr{transition:background var(--tr);}
.data tbody tr:hover{background:var(--mist);}
.data .num{text-align:right; font-variant-numeric:tabular-nums;}
.data .actions{text-align:right; white-space:nowrap;}
.row-strong{font-weight:500;}
.row-link{cursor:pointer;}

/* ── Badges ────────────────────────────────────────────────── */
.badge{display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.03em; padding:.18rem .55rem; border-radius:99px; border:1px solid transparent;}
.badge--ok{color:var(--ok); background:var(--ok-bg);}
.badge--warn{color:var(--warn); background:var(--warn-bg);}
.badge--danger{color:var(--danger); background:var(--danger-bg);}
.badge--info{color:var(--charcoal); background:#ECECEC;}
.badge--muted{color:var(--stone); background:var(--chalk); border-color:var(--line);}
.pill{display:inline-block; font-size:.72rem; padding:.12rem .5rem; border-radius:99px; background:var(--chalk); border:1px solid var(--line); color:var(--stone);}

/* ── Empty state ───────────────────────────────────────────── */
.empty{text-align:center; padding:3.5rem 1.5rem; color:var(--stone);}
.empty__mark{font-size:1.6rem; opacity:.3; margin-bottom:.6rem;}
.empty h3{font-weight:400; color:var(--ink); margin-bottom:.35rem;}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay{position:fixed; inset:0; background:rgba(20,20,20,.42); backdrop-filter:blur(2px); display:grid; place-items:center; padding:1.25rem; z-index:100; opacity:0; transition:opacity 200ms ease;}
.modal-overlay.is-in{opacity:1;}
.modal{width:100%; max-width:520px; max-height:92dvh; overflow:auto; background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--line); transform:translateY(8px); transition:transform 200ms cubic-bezier(.2,.7,.2,1);}
.modal--wide{max-width:840px;}
.is-in .modal{transform:translateY(0);}
.modal__head{position:sticky; top:0; background:var(--white); display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--line); z-index:1;}
.modal__title{font-weight:400; font-size:1.2rem; letter-spacing:-.01em;}
.modal__x{background:none; border:0; font-size:1.5rem; line-height:1; color:var(--silver); cursor:pointer; transition:color var(--tr);}
.modal__x:hover{color:var(--ink);}
.modal__body{padding:1.5rem;}
.form-grid{display:grid; gap:1rem;}
.form-grid--2{grid-template-columns:1fr 1fr;}
.form-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line-soft);}

/* ── Line-item editor ──────────────────────────────────────── */
.items{display:grid; gap:.6rem; margin-top:.4rem;}
.item-row{display:grid; grid-template-columns:1fr 70px 110px 110px 32px; gap:.5rem; align-items:center;}
.item-row__total{font-variant-numeric:tabular-nums; text-align:right; color:var(--stone); font-size:.9rem;}
.item-head{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--silver); font-weight:600;}
.totals{margin-top:1.1rem; margin-left:auto; width:min(280px,100%); display:grid; gap:.45rem;}
.totals__row{display:flex; justify-content:space-between; font-size:.92rem;}
.totals__row--grand{font-size:1.15rem; font-weight:500; padding-top:.55rem; border-top:1px solid var(--line);}

/* ── Toasts ────────────────────────────────────────────────── */
.toast-host{position:fixed; bottom:1.25rem; right:1.25rem; display:grid; gap:.5rem; z-index:200;}
.toast{background:var(--ink); color:var(--white); padding:.7rem 1rem; border-radius:var(--radius); font-size:.88rem; opacity:0; transform:translateY(8px); transition:opacity 220ms,transform 220ms; max-width:340px;}
.toast.is-in{opacity:1; transform:translateY(0);}
.toast--err{background:var(--danger);}
.toast--warn{background:var(--warn);}

/* ── Detail rows (drawer/view) ─────────────────────────────── */
.kv{display:grid; grid-template-columns:140px 1fr; gap:.4rem 1rem; font-size:.92rem;}
.kv dt{color:var(--stone);}
.kv dd{margin:0;}
.section-gap{margin-top:1.75rem;}
.divider{height:1px; background:var(--line); margin:1.5rem 0;}

/* ── Growth (crecimiento del cliente) ──────────────────────── */
.growth-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.growth-card{border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.1rem 1.2rem;}
.growth-card__head{display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
.growth-card__name{font-size:.78rem; font-weight:500; letter-spacing:.03em; color:var(--stone); text-transform:uppercase;}
.growth-card__value{font-weight:300; font-size:1.9rem; letter-spacing:-.02em; line-height:1.1; margin-top:.4rem; font-variant-numeric:tabular-nums;}
.growth-card__from{font-size:.78rem; color:var(--silver); margin-bottom:.4rem;}
.delta{font-size:.74rem; font-weight:600; padding:.1rem .4rem; border-radius:99px;}
.delta--up{color:var(--ok); background:var(--ok-bg);}
.delta--down{color:var(--danger); background:var(--danger-bg);}
.delta--flat{color:var(--stone); background:var(--chalk);}
.chart{width:100%; height:auto; display:block; margin-top:.4rem;}
.chart-empty{font-size:.8rem; color:var(--silver); padding:.6rem 0;}
.growth-note{margin-top:1.4rem; padding:1rem 1.2rem; background:var(--mist); border:1px solid var(--line-soft); border-radius:var(--radius); font-size:.92rem;}

.timeline{position:relative; margin-left:.4rem;}
.timeline__item{position:relative; padding:0 0 1.3rem 1.6rem; border-left:1px solid var(--line);}
.timeline__item:last-child{border-left-color:transparent; padding-bottom:0;}
.timeline__dot{position:absolute; left:-4.5px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--carmin);}
.timeline__date{font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--silver);}
.timeline__title{font-weight:500; margin-top:.1rem;}

/* ── Demo banner ───────────────────────────────────────────── */
.demo-bar{background:var(--ink); color:var(--white); text-align:center; font-size:.8rem; padding:.45rem 1rem; letter-spacing:.02em;}
.demo-bar b{color:var(--carmin);}
.demo-choices{display:grid; gap:.7rem; margin-top:.5rem;}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:860px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%); transition:transform var(--tr); width:84vw; max-width:300px;}
  .app.nav-open .sidebar{transform:translateX(0);}
  .hamburger{display:block;}
  .content{padding-top:4.5rem;}
  .form-grid--2{grid-template-columns:1fr;}
  .item-row{grid-template-columns:1fr 56px 90px 90px 28px;}
}