/* ==========================================================================
   Ousgur · CRM — identidad visual de ousgur.com
   Fuentes: Geist / Fraunces / Geist Mono · Acento lime #C8FF3D
   ========================================================================== */

/* ---- Fuentes locales ---- */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/geist-400.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/geist-500.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/geist-600.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/geist-700.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/fraunces-500.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/fraunces-italic-500.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/geist-mono-400.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/geist-mono-500.woff2') format('woff2');}

/* ---- Tokens de marca ---- */
:root{
  --bg:#FAFAF7; --bg-2:#F2F2EC; --paper:#FFFFFF;
  --ink:#0A0A0A; --ink-2:#404040; --ink-3:#707070;
  --accent:#C8FF3D; --accent-dark:#9DD420; --accent-soft:rgba(200,255,61,0.15);
  --rule:rgba(10,10,10,0.10); --rule-soft:rgba(10,10,10,0.05);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --ok:#2E7D32; --ok-bg:rgba(46,125,50,0.10);
  --warn:#9A6700; --warn-bg:rgba(154,103,0,0.10);
  --err:#B42318; --err-bg:rgba(180,35,24,0.10);
  --shadow:0 1px 3px rgba(10,10,10,0.06); --shadow-lg:0 8px 24px rgba(10,10,10,0.08);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; margin:0;}

/* ---- Etiquetas mono (eyebrow) ---- */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3);
}

/* ---- Topbar ---- */
.topbar{background:var(--paper); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:20;}
.topbar-in{max-width:1120px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:28px;}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none;}
.brand-mark{font-family:var(--serif); font-size:22px; letter-spacing:-0.02em;}
.brand-mark.big{font-size:34px;}
.brand-tag{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  background:var(--accent); color:var(--ink); padding:3px 7px; border-radius:100px;}
.nav{display:flex; gap:4px; margin-right:auto;}
.nav a{font-size:14px; color:var(--ink-2); text-decoration:none; padding:7px 12px; border-radius:8px;}
.nav a:hover{background:var(--bg-2); color:var(--ink);}
.nav a.is-active{color:var(--ink); background:var(--bg-2); font-weight:500;}
.topbar-user{display:flex; align-items:center; gap:14px;}
.who{font-size:13px; color:var(--ink-2);}
.role{font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-dark); border:1px solid var(--accent-dark); border-radius:100px; padding:1px 6px; margin-left:4px;}

/* ---- Layout ---- */
.wrap{max-width:1120px; margin:0 auto; padding:32px 24px 48px;}
.foot{max-width:1120px; margin:0 auto; padding:24px; display:flex; justify-content:space-between; color:var(--ink-3); font-size:12.5px; border-top:1px solid var(--rule-soft);}
.foot-dot{font-family:var(--mono); letter-spacing:0.06em;}

/* ---- Botones (pill, estilo ousgur) ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:14.5px; font-weight:500; line-height:1;
  padding:13px 24px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .08s ease, background .15s ease, box-shadow .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-primary:hover{background:#000;}
.btn-accent{background:var(--accent); color:var(--ink); border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-dark); border-color:var(--accent-dark);}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--rule);}
.btn-ghost:hover{background:var(--bg-2);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%;}
.btn-danger{background:transparent; color:var(--err); border:1px solid var(--err);}
.btn-danger:hover{background:var(--err-bg);}

/* ---- Tarjetas / paneles ---- */
.card{background:var(--paper); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow);}
.card-pad{padding:22px 24px;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px;}
.page-head h1{font-size:34px; line-height:1.05;}
.page-head .sub{color:var(--ink-3); font-size:14px; margin-top:6px;}

/* ---- Métricas ---- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px;}
.stat{background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:18px;}
.stat .n{font-family:var(--serif); font-size:34px; line-height:1;}
.stat .l{margin-top:8px;}
.stat.accent{background:var(--accent-soft); border-color:transparent;}

/* ---- Filtros ---- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.chip{font-size:13px; color:var(--ink-2); text-decoration:none; padding:7px 14px; border:1px solid var(--rule); border-radius:100px; background:var(--paper);}
.chip:hover{border-color:var(--ink);}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink);}

/* ---- Tabla ---- */
.table-wrap{background:var(--paper); border:1px solid var(--rule); border-radius:12px; overflow:hidden;}
table{width:100%; border-collapse:collapse;}
th{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule);}
td{padding:14px 16px; border-bottom:1px solid var(--rule-soft); font-size:14px; vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.row-link:hover td{background:var(--bg-2); cursor:pointer;}
.t-name{font-weight:500;}
.t-sub{color:var(--ink-3); font-size:12.5px;}
.empty{text-align:center; padding:60px 20px; color:var(--ink-3);}

/* ---- Badges de estado/tipo ---- */
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.04em; padding:4px 10px; border-radius:100px; border:1px solid var(--rule);}
.badge.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.b-pendiente{color:var(--ink-3);}
.b-enviado{color:var(--ink); background:var(--bg-2);}
.b-respondido{color:var(--warn); background:var(--warn-bg); border-color:transparent;}
.b-reunion{color:var(--ink); background:var(--accent); border-color:transparent;}
.b-cliente{color:var(--ok); background:var(--ok-bg); border-color:transparent;}
.b-no_interesado{color:var(--err); background:var(--err-bg); border-color:transparent;}
.tipo-tag{font-family:var(--mono); font-size:11px; color:var(--ink-2);}

/* ---- Formularios ---- */
.form{display:flex; flex-direction:column; gap:16px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--ink-2);}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{
  font-family:var(--sans); font-size:14.5px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:8px; padding:11px 13px; width:100%;}
textarea{resize:vertical; min-height:64px;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-soft);}
.hint{font-weight:400; color:var(--ink-3); font-size:12px;}
.form-actions{display:flex; gap:10px; align-items:center; margin-top:6px;}

/* ---- Email generado ---- */
.email-box{background:var(--bg-2); border:1px solid var(--rule); border-radius:12px; overflow:hidden;}
.email-row{padding:14px 18px; border-bottom:1px solid var(--rule);}
.email-row:last-child{border-bottom:none;}
.email-label{font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center;}
.email-subject{font-weight:600; font-size:15px;}
.email-body{font-family:var(--mono); font-size:13px; line-height:1.65; white-space:pre-wrap; color:var(--ink); max-height:420px; overflow:auto;}
.copy-btn{font-family:var(--sans); font-size:12px; font-weight:500; cursor:pointer; background:var(--paper); border:1px solid var(--rule); border-radius:100px; padding:4px 12px; color:var(--ink);}
.copy-btn:hover{border-color:var(--ink);}
.copy-btn.done{background:var(--accent); border-color:var(--accent);}

/* ---- Detalle: dos columnas ---- */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
.col-title{font-family:var(--serif); font-size:22px; margin-bottom:14px;}

/* ---- Flash ---- */
.flash{padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:14px;}
.flash-ok{background:var(--accent-soft); color:var(--ink);}
.flash-error{background:var(--err-bg); color:var(--err);}

/* ---- Auth ---- */
.auth{min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;}
.auth-card{background:var(--paper); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow-lg); padding:36px 34px; width:100%; max-width:380px;}
.auth-brand{display:flex; align-items:center; gap:10px; justify-content:center;}
.auth-sub{text-align:center; color:var(--ink-3); font-size:13px; margin:10px 0 22px;}
.auth-note{font-family:var(--serif); font-style:italic; color:var(--ink-3);}

/* ---- Utilidades ---- */
.muted{color:var(--ink-3);}
.right{text-align:right;}
.mono{font-family:var(--mono);}
.mt{margin-top:18px;}
.divider{height:1px; background:var(--rule); margin:24px 0;}

@media (max-width:760px){
  .grid-2,.cols{grid-template-columns:1fr;}
  .nav{display:none;}
  .page-head{flex-direction:column; align-items:flex-start;}
  .hide-sm{display:none;}
}

/* ---- Buscador ---- */
.searchbar{display:flex; gap:8px; margin-bottom:16px;}
.searchbar input{max-width:380px;}

/* ---- Timeline / historial ---- */
.timeline{display:flex; flex-direction:column;}
.tl-item{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--rule-soft); position:relative;}
.tl-item:first-child{border-top:none;}
.tl-dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:5px; background:var(--ink-3);}
.tl-email{background:var(--ink);} .tl-whatsapp{background:#25D366;} .tl-llamada{background:var(--accent-dark);} .tl-nota{background:var(--ink-3);}
.tl-body{flex:1; min-width:0;}
.tl-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.tl-tipo{font-weight:600; font-size:13px;}
.tl-meta{font-size:11px; color:var(--ink-3);}
.tl-subj{font-size:13px; color:var(--ink-2); margin-top:2px;}
.tl-note{font-size:13.5px; margin-top:5px; white-space:normal;}
.tl-det{margin-top:8px;}
.tl-det summary{font-size:12px; color:var(--ink-3); cursor:pointer; font-family:var(--mono);}
.tl-del{flex:0 0 auto; background:none; border:none; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; border-radius:6px;}
.tl-del:hover{color:var(--err); background:var(--err-bg);}
.inline-actions summary{list-style:none; display:inline-block;}
.inline-actions summary::-webkit-details-marker{display:none;}

/* ---- Kanban ---- */
.kanban{display:flex; gap:14px; overflow-x:auto; padding-bottom:12px;}
.kb-col{flex:0 0 230px; background:var(--bg-2); border:1px solid var(--rule); border-radius:12px; display:flex; flex-direction:column; min-height:120px;}
.kb-col.over{border-color:var(--accent-dark); background:var(--accent-soft);}
.kb-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--rule);}
.kb-dot{width:8px; height:8px; border-radius:50%; background:var(--ink-3);}
.kb-dot.b-pendiente{background:var(--ink-3)} .kb-dot.b-enviado{background:var(--ink)} .kb-dot.b-respondido{background:var(--warn)} .kb-dot.b-reunion{background:var(--accent-dark)} .kb-dot.b-cliente{background:var(--ok)} .kb-dot.b-no_interesado{background:var(--err)}
.kb-title{font-size:13px; font-weight:600; flex:1;}
.kb-count{font-family:var(--mono); font-size:12px; color:var(--ink-3); background:var(--paper); border-radius:100px; padding:1px 8px;}
.kb-list{padding:10px; display:flex; flex-direction:column; gap:9px; min-height:60px; flex:1;}
.kb-card{position:relative; background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:11px 12px; cursor:grab; box-shadow:var(--shadow);}
.kb-card:active{cursor:grabbing;}
.kb-card.drag{opacity:.5;}
.kb-card-name{font-size:13.5px; font-weight:500; padding-right:16px;}
.kb-card-meta{display:flex; gap:8px; align-items:center; margin-top:6px;}
.kb-mail{font-size:11px; color:var(--ink-3);}
.kb-seg{font-size:11px; color:var(--ink-3); margin-top:6px;}
.kb-seg.venc{color:var(--err); font-weight:600;}
.kb-open{position:absolute; top:8px; right:8px; color:var(--ink-3); text-decoration:none; font-size:13px;}
.kb-open:hover{color:var(--ink);}

/* ---- Gráficas ---- */
.charts{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.chart-wide{grid-column:1 / -1;}
.chart-title{font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:12px;}
.chart-box{position:relative; height:260px;}

/* ---- Metas ---- */
.goals{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.goal-card{background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:20px; box-shadow:var(--shadow);}
.goal-card.done{background:var(--accent-soft); border-color:transparent;}
.goal-period{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.goal-metric{font-size:13px; color:var(--ink-2); margin-top:4px;}
.goal-fig{margin:12px 0 10px; font-family:var(--serif);}
.goal-now{font-size:42px; line-height:1;}
.goal-of{font-size:18px; color:var(--ink-3); margin-left:6px;}
.goal-bar{height:8px; background:var(--bg-2); border-radius:100px; overflow:hidden;}
.goal-bar span{display:block; height:100%; background:var(--accent-dark); border-radius:100px; transition:width .4s ease;}
.goal-card.done .goal-bar span{background:var(--ok);}
.goal-foot{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12px;}

@media (max-width:760px){
  .charts{grid-template-columns:1fr;}
  .goals{grid-template-columns:1fr;}
}

/* ---- Estado rechazado (rojo) ---- */
.b-rechazado{color:var(--err); background:var(--err-bg); border-color:transparent;}
.kb-dot.b-rechazado{background:var(--err);}
.kb-col[data-estado="rechazado"] .kb-card{border-left:3px solid var(--err);}
.kb-col[data-estado="rechazado"] .kb-title{color:var(--err);}

/* ---- Tabla de permisos ---- */
.perm-table{width:100%; border-collapse:collapse; font-size:13px;}
.perm-table th{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding:8px 8px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:bottom;}
.perm-table td{padding:9px 8px; border-bottom:1px solid var(--rule-soft); vertical-align:middle;}
.perm-table td.center{text-align:center;}
.perm-table select{padding:6px 8px; font-size:13px;}
.perm-table input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent-dark); cursor:pointer;}
.perm-actions td{padding-top:0; border-bottom:1px solid var(--rule);}
.perm-actions details summary{font-size:12px; color:var(--ink-3); cursor:pointer; list-style:none;}
.perm-actions details summary::-webkit-details-marker{display:none;}
.perm-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px;}
.perm-check{display:flex; align-items:center; gap:8px; font-weight:400; font-size:13px; color:var(--ink-2);}
.perm-check input{width:16px; height:16px; accent-color:var(--accent-dark);}
@media (max-width:760px){ .perm-grid{grid-template-columns:1fr;} }

/* ---- 2FA ---- */
.tfa-setup{display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; margin-top:14px;}
.tfa-qr{background:#fff; border:1px solid var(--rule); border-radius:12px; padding:14px; line-height:0;}
.tfa-manual{flex:1; min-width:240px;}
.tfa-key{font-size:16px; letter-spacing:.06em; background:var(--bg-2); border-radius:8px; padding:10px 12px; margin-top:6px;}
.recovery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px; margin-top:10px; font-size:14px;}
.recovery-grid span{background:rgba(255,255,255,.6); border-radius:6px; padding:4px 8px;}
@media (max-width:600px){ .recovery-grid{grid-template-columns:1fr;} }

/* ---- Aviso de posible duplicado ---- */
.dup-aviso{background:#FFF8E6; border:1px solid var(--warn); border-radius:12px; padding:16px 18px; margin-bottom:18px; max-width:720px;}
.dup-title{font-weight:600; color:var(--warn); margin-bottom:8px;}
.dup-list{margin:0 0 8px; padding-left:18px; font-size:14px; line-height:1.7;}
.dup-list a{color:var(--ink);}
.dup-help{font-size:13px; color:var(--ink-2); margin:0;}

/* ---- Investigación con IA ---- */
.ai-steps{margin:0 0 14px; padding-left:20px; font-size:13.5px; color:var(--ink-2); line-height:1.6;}
.ai-prompt{background:var(--bg-2); border:1px solid var(--rule); border-radius:10px; padding:12px 14px; font-family:var(--mono); font-size:12px; line-height:1.5; white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto; margin:6px 0 0;}
.ai-resumen{background:var(--accent-soft); border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.6; margin-bottom:14px; white-space:normal;}