@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --sidebar-w: 228px;
  --dark:      #272320;
  --brown:     #7A6F64;
  --taupe:     #B5A998;
  --beige:     #DED5C9;
  --light:     #F2EDE5;
  --off-white: #FAF9F7;
  --surface:   #ffffff;
  --border:    #E8E2DB;
  --bg:        #F5F1EC;
  --font:      'Montserrat', sans-serif;
  --r:         10px;
  --shadow:    0 1px 3px rgba(122,111,100,.08), 0 3px 8px rgba(122,111,100,.05);
  --shadow-md: 0 2px 8px rgba(122,111,100,.1), 0 8px 24px rgba(122,111,100,.07);
  --shadow-lg: 0 8px 32px rgba(122,111,100,.15), 0 2px 8px rgba(122,111,100,.08);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: var(--font); color: var(--dark); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
p { margin: 0; }
.hidden { display: none !important; }

/* ═══ LOGIN ═══════════════════════════════════════════════ */
.login-page { min-height: 100vh; background: linear-gradient(135deg, var(--beige), var(--off-white), var(--light)); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { background: var(--surface); border-radius: 20px; padding: 3rem 2.5rem; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); border: 1.5px solid var(--border); }
.login-brand { margin-bottom: 2.5rem; }
.login-logo { display: block; font-size: 1.8rem; font-weight: 300; letter-spacing: .06em; color: var(--dark); margin-bottom: .3rem; }
.login-tag { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }
.login-form .field { margin-bottom: 1.25rem; }
.field__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); margin-bottom: .5rem; }
.field__input { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--border); border-radius: var(--r); font-family: var(--font); font-size: 1rem; color: var(--dark); background: var(--off-white); outline: none; transition: border-color .2s, box-shadow .2s; }
.field__input:focus { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(122,111,100,.12); }
.field__error { font-size: .72rem; color: #c0392b; margin-top: .4rem; min-height: 1rem; }
.btn-login { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem; background: var(--brown); color: #fff; border: none; border-radius: var(--r); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .2s, transform .1s; margin-top: .25rem; }
.btn-login svg { width: 15px; height: 15px; }
.btn-login:hover { background: var(--dark); }
.btn-login:active { transform: scale(.98); }

/* ─── Password toggle ────────────────────────────────────── */
.field__input-wrap { position: relative; }
.field__input-wrap .field__input { padding-right: 2.75rem; }
.field__eye { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--taupe); padding: .3rem; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color .15s; }
.field__eye:hover { color: var(--dark); }
.field__eye svg { width: 16px; height: 16px; }

/* ═══ APP LAYOUT ══════════════════════════════════════════ */
.app { display: flex; min-height: 100vh; }

/* ─── Sidebar ─────────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); background: var(--light); border-right: 1.5px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 20; transition: transform .25s; }
.sidebar__brand { padding: 1.5rem 1.25rem 1.25rem; border-bottom: 1.5px solid var(--border); }
.sidebar__logo { display: block; font-size: 1.05rem; font-weight: 400; letter-spacing: .07em; color: var(--dark); margin-bottom: .2rem; }
.sidebar__version { font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
.sidebar__nav { flex: 1; padding: .75rem; display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border-radius: 8px; border: none; background: none; color: var(--dark); font-size: .76rem; font-weight: 500; text-align: left; width: 100%; transition: background .15s, color .15s; }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover { background: var(--beige); color: var(--dark); }
.nav-item.active { background: var(--beige); color: var(--dark); font-weight: 600; }

.sidebar__followup { display: flex; align-items: center; gap: .6rem; margin: .25rem .75rem .5rem; padding: .55rem .85rem; background: #fef3e8; border-radius: 8px; color: #c0712a; font-size: .7rem; font-weight: 600; cursor: default; border: 1px solid #f5d9b8; }
.sidebar__followup svg { width: 13px; height: 13px; flex-shrink: 0; }

.sidebar__footer { padding: .85rem 1rem 1.1rem; border-top: 1.5px solid var(--border); display: flex; align-items: center; gap: .75rem; }
.sidebar__user { flex: 1; display: flex; align-items: center; gap: .65rem; min-width: 0; }
.sidebar__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brown); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar__userinfo { min-width: 0; }
.sidebar__name { font-size: .76rem; font-weight: 600; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__role { font-size: .6rem; color: var(--brown); }
.sidebar__logout { background: none; border: none; border-radius: 6px; color: var(--taupe); padding: .4rem; display: flex; transition: all .2s; }
.sidebar__logout svg { width: 15px; height: 15px; }
.sidebar__logout:hover { color: var(--dark); background: var(--beige); }

/* ─── Mobile bar ──────────────────────────────────────── */
.mobile-bar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--light); border-bottom: 1.5px solid var(--border); z-index: 30; align-items: center; justify-content: space-between; padding: 0 1rem; }
.mobile-logo { font-size: 1rem; font-weight: 400; letter-spacing: .07em; color: var(--dark); }
.mobile-menu-btn, .mobile-export-btn { background: none; border: none; color: var(--brown); padding: .4rem; display: flex; }
.mobile-menu-btn svg, .mobile-export-btn svg { width: 18px; height: 18px; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(39,35,32,.35); z-index: 19; backdrop-filter: blur(2px); }
.sidebar-overlay.open { display: block; }

/* ─── Mobile nav ──────────────────────────────────────── */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--light); border-top: 1.5px solid var(--border); z-index: 30; padding: .5rem 0 env(safe-area-inset-bottom); }
.mobile-nav__btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; background: none; border: none; color: var(--taupe); font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .4rem 0; }
.mobile-nav__btn svg { width: 20px; height: 20px; }
.mobile-nav__btn.active { color: var(--dark); }

/* ─── Main ────────────────────────────────────────────── */
.main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* ─── Topbar ──────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.75rem 2rem 0; flex-wrap: wrap; gap: .75rem; }
.topbar__left { display: flex; align-items: baseline; gap: .65rem; }
.topbar__title { font-size: 1.4rem; font-weight: 600; letter-spacing: -.015em; color: var(--dark); }
.topbar__count { font-size: .72rem; font-weight: 500; color: var(--taupe); }
.topbar__right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.search-wrap { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); padding: .45rem .85rem; transition: border-color .2s, box-shadow .2s; }
.search-wrap:focus-within { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(122,111,100,.1); }
.search-wrap svg { width: 13px; height: 13px; color: var(--taupe); flex-shrink: 0; }
.search-input { border: none; outline: none; background: none; font-family: var(--font); font-size: .8rem; color: var(--dark); width: 220px; }
.search-input::placeholder { color: var(--taupe); }

.btn-export { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; background: var(--surface); color: var(--brown); border: 1.5px solid var(--border); border-radius: var(--r); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: all .15s; }
.btn-export svg { width: 13px; height: 13px; }
.btn-export:hover { border-color: var(--brown); background: var(--light); }

.view-toggle { display: flex; background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.view-btn { padding: .38rem .6rem; border: none; background: none; border-radius: 5px; color: var(--taupe); display: flex; transition: all .15s; }
.view-btn svg { width: 14px; height: 14px; }
.view-btn:hover { color: var(--dark); }
.view-btn.active { background: var(--brown); color: #fff; }

/* ─── Stats ───────────────────────────────────────────── */
.stats-row { display: flex; gap: .75rem; padding: 1.25rem 2rem; overflow-x: auto; }
.stats-row::-webkit-scrollbar { height: 4px; }
.stats-row::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 2px; }

.stat { display: flex; align-items: center; gap: .9rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); padding: 1rem 1.25rem; flex: 1; min-width: 120px; box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat__icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat__icon svg { width: 16px; height: 16px; }
.stat--total    .stat__icon { background: var(--beige);  color: var(--brown); }
.stat--nuevo    .stat__icon { background: #ede8f5;        color: #7c5cbf; }
.stat--contacto .stat__icon { background: var(--light);   color: var(--brown); }
.stat--cerrado  .stat__icon { background: #e6f2ec;        color: #2e7d52; }
.stat--pipeline .stat__icon { background: var(--beige);   color: var(--brown); }
.stat__data { display: flex; flex-direction: column; }
.stat__num { font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--dark); letter-spacing: -.02em; }
.stat__label { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); margin-top: .2rem; }

/* ─── Toolbar ─────────────────────────────────────────── */
.toolbar { padding: 0 2rem .85rem; }
.filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter { font-family: var(--font); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brown); background: var(--surface); border: 1.5px solid var(--border); border-radius: 6px; padding: .38rem .85rem; transition: all .15s; display: inline-flex; align-items: center; gap: .35rem; }
.filter svg { width: 11px; height: 11px; }
.filter:hover { border-color: var(--brown); color: var(--dark); }
.filter.active { background: var(--brown); color: #fff; border-color: var(--brown); }
.filter--followup.active { background: #c0712a; border-color: #c0712a; }

/* ─── Tabla ───────────────────────────────────────────── */
.table-wrap { margin: 0 2rem 2rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table thead th { text-align: left; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); padding: .9rem 1.1rem; border-bottom: 1.5px solid var(--border); background: var(--light); white-space: nowrap; }
.table td { padding: .85rem 1.1rem; border-bottom: 1px solid #f0ece7; vertical-align: middle; }
.tr { cursor: pointer; transition: background .1s; }
.tr:last-child td { border-bottom: none; }
.tr:hover td { background: #faf7f4; }
.td-persona { display: flex; align-items: center; gap: .8rem; }
.td-nombre { font-size: .85rem; font-weight: 600; color: var(--dark); margin-bottom: .15rem; }
.td-email { font-size: .82rem; color: var(--brown); }
.td-email:hover { text-decoration: underline; }
.td-tel { font-size: .8rem; color: #4a4540; }
.td-msg { font-size: .78rem; color: var(--taupe); line-height: 1.5; max-width: 180px; }
.td-fecha { font-size: .75rem; color: var(--taupe); white-space: nowrap; }
.table__empty { text-align: center; padding: 4rem 1rem !important; color: var(--taupe); font-size: .85rem; }

.source-tag { display: inline-block; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.source-tag--formulario { background: var(--light); color: var(--brown); }
.source-tag--bot { background: #ede8f5; color: #7c5cbf; }

/* ─── Follow-up badges ────────────────────────────────── */
.fu-badge { display: inline-flex; align-items: center; font-size: .65rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.fu-badge--vencido { background: #fde8e8; color: #c0392b; }
.fu-badge--hoy     { background: #fef3e8; color: #c0712a; }
.fu-badge--pronto  { background: var(--light); color: var(--brown); }
.fu-badge--ok      { background: var(--beige); color: var(--brown); }
.fu-empty { color: var(--beige); }

/* ─── Avatar ──────────────────────────────────────────── */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ac, var(--brown)); color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar--sm { width: 28px; height: 28px; font-size: .6rem; }
.avatar--xl { width: 52px; height: 52px; font-size: 1rem; }

/* ─── Badges ──────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; color: var(--bc, var(--brown)); background: var(--bb, var(--light)); }
.inv-chip { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 600; color: var(--ic, var(--brown)); background: color-mix(in srgb, var(--ic, var(--brown)) 12%, transparent); padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.inv-chip--sm { font-size: .6rem; padding: 2px 7px; }

/* ─── Row actions ─────────────────────────────────────── */
.row-actions { display: flex; gap: .3rem; }
.icon-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--light); border: 1.5px solid var(--border); color: var(--taupe); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.icon-btn svg { width: 13px; height: 13px; }
.icon-btn:hover { border-color: var(--brown); color: var(--dark); }
.icon-btn--wa:hover { border-color: #2e7d52; color: #2e7d52; background: #e6f2ec; }

/* ═══ PIPELINE ════════════════════════════════════════════ */
.pipeline { display: flex; gap: 1rem; padding: 0 2rem 2rem; overflow-x: auto; align-items: flex-start; }
.pipeline::-webkit-scrollbar { height: 6px; }
.pipeline::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 3px; }
.k-col { flex: 0 0 255px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.k-col__header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1.5px solid var(--border); background: var(--light); border-top: 3px solid var(--kc, var(--beige)); }
.k-col__left { display: flex; align-items: center; gap: .45rem; }
.k-dot { width: 7px; height: 7px; border-radius: 50%; }
.k-col__name { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dark); }
.k-col__count { font-size: .65rem; font-weight: 700; background: var(--beige); color: var(--brown); padding: 2px 8px; border-radius: 20px; }
.k-col__valor { padding: .4rem 1rem; font-size: .68rem; font-weight: 700; color: var(--brown); background: var(--light); border-bottom: 1px solid var(--border); text-align: center; }
.k-col__cards { padding: .65rem; display: flex; flex-direction: column; gap: .5rem; min-height: 80px; }
.k-col__empty { text-align: center; padding: 2rem 0; font-size: .76rem; color: var(--taupe); }
.k-card { background: #fff; border: 1.5px solid var(--border); border-radius: 8px; padding: .85rem; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s; }
.k-card:hover { border-color: var(--beige); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.k-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.k-card__head-right { display: flex; align-items: center; gap: .4rem; }
.k-card__time { font-size: .62rem; color: var(--taupe); }
.k-card__name { font-size: .82rem; font-weight: 700; color: var(--dark); margin-bottom: .1rem; }
.k-card__email { font-size: .72rem; color: var(--taupe); margin-bottom: .45rem; }
.k-card__footer { margin-top: .35rem; }
.k-card__preview { font-size: .7rem; color: var(--taupe); line-height: 1.5; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }

/* ═══ MÉTRICAS ════════════════════════════════════════════ */
.metricas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 2rem 2rem; }
.m-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--shadow); }
.m-card__title { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); margin-bottom: 1.25rem; }
.chart-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.chart-row__label { font-size: .76rem; font-weight: 500; color: var(--dark); min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar-wrap { flex: 1; height: 8px; background: var(--light); border-radius: 4px; overflow: hidden; }
.chart-bar { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.chart-row__val { font-size: .78rem; font-weight: 700; color: var(--dark); min-width: 24px; text-align: right; }
.chart-empty { font-size: .8rem; color: var(--taupe); line-height: 1.7; }
.bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 120px; padding-top: 1.5rem; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; height: 100%; }
.bar-col__val { font-size: .65rem; font-weight: 700; color: var(--dark); }
.bar-col__bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar-col__bar { width: 100%; background: var(--brown); border-radius: 4px 4px 0 0; transition: height .6s cubic-bezier(.4,0,.2,1); min-height: 3px; }
.bar-col__label { font-size: .62rem; color: var(--taupe); font-weight: 600; }

/* ═══ DETAIL PANEL ════════════════════════════════════════ */
.overlay { position: fixed; inset: 0; background: rgba(39,35,32,.35); backdrop-filter: blur(3px); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s; }
.overlay.open { opacity: 1; pointer-events: all; }
.detail-panel { position: fixed; top: 0; right: 0; width: 500px; height: 100vh; background: var(--surface); box-shadow: -12px 0 48px rgba(122,111,100,.15); z-index: 50; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.detail-panel.open { transform: translateX(0); }
.detail-panel__inner { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.detail-panel__inner::-webkit-scrollbar { width: 4px; }
.detail-panel__inner::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 2px; }

.dp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1.5px solid var(--border); background: var(--light); position: sticky; top: 0; z-index: 1; }
.dp-close { background: none; border: 1.5px solid var(--border); border-radius: 7px; color: var(--taupe); padding: .4rem; display: flex; transition: all .15s; }
.dp-close svg { width: 13px; height: 13px; }
.dp-close:hover { border-color: var(--dark); color: var(--dark); }
.dp-topbar__actions { display: flex; gap: .5rem; }
.btn-icon-label { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; background: var(--surface); color: var(--dark); border: 1.5px solid var(--border); border-radius: 7px; font-family: var(--font); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: all .15s; }
.btn-icon-label svg { width: 12px; height: 12px; }
.btn-icon-label:hover { border-color: var(--brown); color: var(--brown); }
.btn-icon-label--wa { color: #2e7d52; }
.btn-icon-label--wa:hover { border-color: #2e7d52; background: #e6f2ec; }

.dp-hero { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1.5px solid var(--border); }
.dp-hero__info { flex: 1; }
.dp-name { font-size: 1.25rem; font-weight: 700; color: var(--dark); letter-spacing: -.01em; margin-bottom: .5rem; }
.dp-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.dp-body { flex: 1; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.dp-section__title { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); margin-bottom: .85rem; }
.dp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.dp-info-item { display: flex; flex-direction: column; gap: .3rem; }
.dp-info-item__label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.dp-info-item__val { font-size: .88rem; font-weight: 500; color: var(--dark); }
.dp-info-item__val--link { color: var(--brown); }
.dp-info-item__val--link:hover { text-decoration: underline; }
.dp-mensaje { font-size: .875rem; color: #3d3530; line-height: 1.75; background: var(--light); border: 1.5px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; }

.status-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.status-pill { font-family: var(--font); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .42rem .9rem; border-radius: 7px; border: 1.5px solid var(--border); background: none; color: var(--taupe); transition: all .15s; }
.status-pill:hover { border-color: var(--pc); color: var(--pc); background: var(--pb); }
.status-pill.active { background: var(--pb); color: var(--pc); border-color: var(--pc); }

.followup-wrap { display: flex; align-items: center; gap: .6rem; background: var(--light); border: 1.5px solid var(--border); border-radius: 8px; padding: .6rem .85rem; margin-bottom: .5rem; }
.followup-wrap svg { width: 14px; height: 14px; color: var(--taupe); flex-shrink: 0; }
.dp-date-input { border: none; background: none; outline: none; font-family: var(--font); font-size: .875rem; color: var(--dark); flex: 1; }
.btn-clear-date { background: none; border: none; color: var(--taupe); font-size: .8rem; padding: 0 .2rem; transition: color .15s; }
.btn-clear-date:hover { color: #c0392b; }
.followup-hint { font-size: .75rem; color: var(--taupe); }

.dp-notes { width: 100%; min-height: 100px; padding: .85rem 1rem; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: .875rem; color: var(--dark); background: var(--light); outline: none; resize: vertical; line-height: 1.6; transition: border-color .2s, box-shadow .2s; }
.dp-notes:focus { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(122,111,100,.1); }

.dp-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .5rem; border-top: 1.5px solid var(--border); }
.btn-save { padding: .65rem 1.75rem; background: var(--brown); color: #fff; border: none; border-radius: 8px; font-family: var(--font); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: background .2s; }
.btn-save:hover { background: var(--dark); }
.btn-danger { padding: .6rem 1.1rem; background: transparent; color: #c0392b; border: 1.5px solid #f5c6c6; border-radius: 8px; font-family: var(--font); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: all .2s; }
.btn-danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

/* ─── Timeline ────────────────────────────────────────── */
.dp-section--actividad { padding-bottom: .5rem; }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: .85rem; position: relative; padding-bottom: 1rem; }
.tl-item:not(.tl-item--last)::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 1.5px; background: var(--border); }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--border); }
.tl-dot--creado  { background: #2e7d52; }
.tl-dot--estado  { background: var(--brown); }
.tl-dot--nota    { background: #c0712a; }
.tl-dot--followup{ background: #7c5cbf; }
.tl-content { flex: 1; }
.tl-desc { font-size: .8rem; color: var(--dark); font-weight: 500; line-height: 1.4; }
.tl-time { font-size: .68rem; color: var(--taupe); margin-top: .15rem; display: block; }

/* ─── Papelera ────────────────────────────────────────── */
.nav-item--trash { margin-top: auto; opacity: .65; }
.nav-item--trash:hover, .nav-item--trash.active { opacity: 1; }
.trash-info { font-size: .75rem; color: var(--taupe); padding: .5rem 1.25rem 0; }
.days-badge { display: inline-block; padding: .2rem .55rem; border-radius: 20px; font-size: .68rem; font-weight: 700; background: #e2f0e8; color: #2e7d52; }
.days-badge--warn { background: #fef3c7; color: #c0712a; }
.icon-btn--restore { color: #2e7d52; }
.icon-btn--restore:hover { background: #e2f0e8; }
.icon-btn--perm { color: #c0392b; }
.icon-btn--perm:hover { background: #fee2e2; }

/* ─── Drag & drop pipeline ────────────────────────────── */
.k-card[draggable] { cursor: grab; }
.k-card[draggable]:active { cursor: grabbing; }
.k-card.dragging { opacity: .4; }
.k-col__cards.drag-over { background: rgba(122,111,100,.08); border-radius: 8px; outline: 2px dashed var(--brown); outline-offset: -4px; }

/* ─── Avatar foto de perfil ───────────────────────────── */
.sidebar__avatar { cursor: pointer; position: relative; overflow: hidden; transition: opacity .2s; }
.sidebar__avatar:hover { opacity: .8; }
.sidebar__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ═══ OBJETOS ═════════════════════════════════════════════ */
.btn-add { display: inline-flex; align-items: center; gap: .45rem; padding: .52rem 1.1rem; background: var(--brown); color: #fff; border: none; border-radius: var(--r); font-family: var(--font); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background .15s; }
.btn-add svg { width: 13px; height: 13px; }
.btn-add:hover { background: var(--dark); }

.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; padding: 0 2rem 2rem; }
.prod-empty { padding: 3rem 2rem; color: var(--taupe); font-size: .85rem; }

.prod-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: grab; transition: box-shadow .15s, transform .15s; box-shadow: var(--shadow); }
.prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.prod-card.dragging { opacity: 0.35; box-shadow: none; transform: none; }
.prod-card.drag-over { outline: 2px solid var(--brown); outline-offset: 2px; transform: none; }
.prod-card__img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(110deg, #ede8e1 30%, #f5f0ea 50%, #ede8e1 70%); background-size: 200% 100%; animation: img-shimmer 1.5s ease-in-out infinite; }
.prod-card__img.img-done { animation: none; background: var(--light); }
@keyframes img-shimmer { 0% { background-position: 100% center; } 100% { background-position: -100% center; } }
.prod-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, opacity .35s ease; opacity: 0; }
.prod-card__img img.img-loaded { opacity: 1; }
.prod-card:hover .prod-card__img img { transform: scale(1.03); }
.prod-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--beige); }
.prod-card__placeholder svg { width: 36px; height: 36px; }
.prod-card__cat { position: absolute; bottom: .5rem; left: .5rem; font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(39,35,32,.72); color: #fff; padding: 3px 8px; border-radius: 4px; }
.prod-card__star { position: absolute; top: .5rem; right: .5rem; font-size: .85rem; background: rgba(255,255,255,.92); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #f59e0b; }
.prod-card__body { padding: .85rem; }
.prod-card__name { font-size: .82rem; font-weight: 600; color: var(--dark); margin-bottom: .2rem; }
.prod-card__precio { font-size: .78rem; font-weight: 500; color: var(--brown); }
.prod-card__precio--consultar { color: var(--taupe); font-style: italic; }

.prod-upload { aspect-ratio: 3/4; border: 2px dashed var(--border); border-radius: var(--r); background: var(--light); cursor: pointer; overflow: hidden; transition: border-color .2s; margin-bottom: 1.25rem; position: relative; }
.prod-upload:hover { border-color: var(--brown); }
.prod-upload__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-upload__placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; color: var(--taupe); pointer-events: none; }
.prod-upload__placeholder svg { width: 34px; height: 34px; }
.prod-upload__placeholder span { font-size: .72rem; font-weight: 600; letter-spacing: .05em; }

.dp-form-input { width: 100%; padding: .58rem .85rem; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: .875rem; color: var(--dark); background: var(--off-white); outline: none; transition: border-color .2s, box-shadow .2s; }
.dp-form-input:focus { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(122,111,100,.1); }
select.dp-form-input { cursor: pointer; }

.dp-form-check { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .85rem; color: var(--dark); }
.dp-form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brown); cursor: pointer; flex-shrink: 0; }

.prod-card--oculto { opacity: .48; }
.prod-card--oculto:hover { opacity: .7; }
.prod-card__oculto { position: absolute; top: .5rem; left: .5rem; font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(239,68,68,.85); color: #fff; padding: 3px 8px; border-radius: 4px; }

/* ═══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-bar { display: flex; }
  .mobile-nav { display: flex; }
  .main { margin-left: 0; padding-top: 52px; padding-bottom: 64px; min-width: 0; }
  .topbar { padding: 1.25rem 1rem 0; }
  .stats-row { padding: .85rem 1rem; }
  .stat { min-width: 100px; padding: .85rem .9rem; }
  .stat__num { font-size: 1.2rem; }
  .toolbar { padding: 0 1rem .75rem; }
  .filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex-shrink: 0; }
  /* tabla-wrap: scroll interno si el contenido es muy ancho */
  .table-wrap { margin: 0 1rem 1.5rem; overflow-x: auto; }
  .pipeline { padding: 0 1rem 1.5rem; }
  .metricas-grid { grid-template-columns: 1fr; padding: 0 1rem 1.5rem; }
  .prod-grid { padding: 0 1rem 1.5rem; }
  .detail-panel { width: 100%; }
  .topbar__right .view-toggle { display: none; }
  /* Search se adapta al espacio disponible */
  .search-wrap { flex: 1; min-width: 0; max-width: 280px; }
  .search-input { width: 100%; min-width: 0; }
}

@media (max-width: 640px) {
  /* Topbar: search ocupa el espacio que queda */
  .topbar__right { flex: 1; justify-content: flex-end; gap: .5rem; }
  .topbar__right .btn-export span { display: none; }
  .search-wrap { max-width: none; }
  /* Stats: grilla 2×2 */
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  /* Tabla: deja visible solo Cliente(1), Estado(6), Acciones(9) */
  .table thead th:nth-child(2), .table td:nth-child(2),
  .table thead th:nth-child(3), .table td:nth-child(3),
  .table thead th:nth-child(4), .table td:nth-child(4),
  .table thead th:nth-child(5), .table td:nth-child(5),
  .table thead th:nth-child(7), .table td:nth-child(7),
  .table thead th:nth-child(8), .table td:nth-child(8) { display: none; }
  /* Layout fijo: el navegador respeta el ancho del contenedor */
  .table { table-layout: fixed; width: 100%; }
  .td-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Pipeline: columnas apiladas verticalmente */
  .pipeline { flex-direction: column; overflow-x: visible; gap: .75rem; }
  .k-col { flex: none; width: 100%; }
}