/* ============================================================
   CRM v2 · capa visual sobre el CRM original (23 oct 2026)
   Login con roles · Mi día · Agendas estilo Calendly · Pipeline · Móvil
   ============================================================ */
:root{ --ok:#34D399; --warn:#FBBF24; --no:#71717A; --azul:#60A5FA; }

/* ---------- LOGIN (igual que nylo.tion) ---------- */
#loginV2{position:fixed;inset:0;z-index:500;background:radial-gradient(ellipse at 50% 40%,rgba(124,92,255,.06) 0%,transparent 60%) #08090D;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:32px;padding:20px;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}
#loginV2.oculto{display:none}
#loginV2::before,#loginV2::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.045);pointer-events:none}
#loginV2::before{width:560px;height:560px}
#loginV2::after{width:900px;height:900px;border-color:rgba(255,255,255,.03)}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:11px;position:relative;z-index:1;animation:rise .65s cubic-bezier(.2,.8,.2,1) both}
.login-logo-mark{width:54px;height:54px;background:linear-gradient(135deg,#7C5CFF 0%,#9B7EFF 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',system-ui,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:-1px;box-shadow:0 8px 36px rgba(124,92,255,.45)}
.login-logo-name{font-family:'Space Grotesk',system-ui,sans-serif;font-size:29px;font-weight:700;letter-spacing:-1.5px;color:#F4F4F5}
.login-logo-name span{color:#7C5CFF}
.login-box{position:relative;z-index:1;background:rgba(15,17,22,.9);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:32px;width:360px;max-width:100%;display:flex;flex-direction:column;gap:16px;backdrop-filter:blur(12px);animation:rise .65s cubic-bezier(.2,.8,.2,1) .08s both}
.login-box h2{font-size:18px;font-weight:600;color:#F4F4F5;letter-spacing:-.2px}
.login-box p{font-size:13px;color:#8B8D98;margin-top:-8px}
.login-box .inp{background:#0E1015;border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:10px 13px;color:#F4F4F5;font-size:14px;width:100%;transition:.15s;font-family:inherit;outline:none}
.login-box .inp:focus{border-color:#7C5CFF;box-shadow:0 0 0 3px rgba(124,92,255,.18)}
.login-box .btn-entrar{padding:11px 16px;border-radius:8px;font-size:13px;font-weight:500;background:#7C5CFF;color:#fff;border:none;cursor:pointer;box-shadow:0 2px 12px rgba(124,92,255,.25);transition:background .13s ease,box-shadow .18s ease,transform .13s ease;font-family:inherit}
.login-box .btn-entrar:hover{background:#8D71FF;box-shadow:0 4px 18px rgba(124,92,255,.35);transform:translateY(-1px)}
.login-err{color:#E05252;font-size:12px;min-height:14px;margin-top:-6px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ---------- TOPBAR: usuario ---------- */
.yo{display:flex;align-items:center;gap:10px;font-size:13px}
.yo .nombre{font-weight:700}
.yo .rol{font-size:11px;color:var(--texto-2);background:var(--gris-claro);padding:3px 9px;border-radius:999px}
.yo .salir{background:none;border:1px solid var(--borde);color:var(--texto-2);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer}
.yo .salir:hover{color:var(--negro);border-color:var(--negro)}

/* ---------- LISTA ESTILO CALENDLY ---------- */
.ag-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--borde)}
.ag-tabs{display:flex;gap:4px;background:var(--gris-claro);padding:4px;border-radius:999px}
.ag-tab{border:none;background:none;color:var(--texto-2);font-weight:650;font-size:13px;padding:7px 14px;border-radius:999px;cursor:pointer;font-family:inherit}
.ag-tab.on{background:var(--blanco);color:var(--negro);box-shadow:var(--shadow-sm)}
.ag-tab .n{font-size:11px;opacity:.7;margin-left:5px}
.ag-filtros{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.ag-filtros input[type=text]{min-width:220px}
.ag-rango{display:none;gap:8px;align-items:center;flex-wrap:wrap}
.ag-rango.on{display:flex}
.ag-lista{padding:4px 0 10px}
.ag-dia{padding:16px 18px 6px;font-size:13px;font-weight:750;color:var(--negro);display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--borde);background:var(--gris-claro);position:sticky;top:0;z-index:3}
.ag-dia.hoy{color:#fff}
.ag-dia .tag{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:var(--negro);color:#0A0A0C;padding:2px 8px;border-radius:999px}
.ag-row{display:grid;grid-template-columns:118px 14px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--borde);transition:background .15s}
.ag-row:hover{background:var(--rosa-soft)}
.ag-hora{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.ag-hora small{display:block;font-size:11px;color:var(--texto-2);font-weight:600}
.ag-dot{width:12px;height:12px;border-radius:50%;background:var(--azul)}
.ag-dot.ok{background:var(--ok)}.ag-dot.no{background:var(--no)}.ag-dot.warn{background:var(--warn)}.ag-dot.nuevo{background:var(--azul)}
.ag-main{min-width:0}
.ag-nombre{font-size:15px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-con{font-size:12.5px;color:var(--texto-2);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ag-con .chip{font-size:10.5px;padding:2px 8px}
.ag-acc{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ag-btn{border:1px solid var(--borde);background:var(--blanco);color:var(--negro);font-family:inherit;font-weight:650;font-size:12px;padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.ag-btn:hover{border-color:var(--negro)}
.ag-btn.sec{color:var(--texto-2)}
.ag-det{display:none;padding:6px 18px 18px 150px;border-bottom:1px solid var(--borde);background:#101013}
.ag-det.on{display:block}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px;margin-top:8px}
.ag-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--texto-2);font-weight:700}
.ag-v{font-size:13.5px;font-weight:600;margin-top:2px;word-break:break-word}
.ag-v a{color:var(--negro);text-decoration:underline;text-decoration-color:#3f3f46}
.ag-ctx{grid-column:1/-1;background:var(--blanco);border:1px solid var(--borde);border-radius:10px;padding:10px 12px;white-space:pre-wrap;font-size:13px;line-height:1.5}
.ag-rapido{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed var(--borde)}
.ag-rapido label{font-size:12px;color:var(--texto-2);font-weight:650}
.ag-vacio{padding:44px 18px;text-align:center;color:var(--texto-2)}
.ag-vacio .big{font-size:34px;margin-bottom:8px}

/* ---------- MI DÍA / EQUIPO ---------- */
.md-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.md-head h2{font-size:22px;font-weight:800;letter-spacing:-.3px}
.md-head .fecha{font-size:13px;color:var(--texto-2);font-weight:600}
.md-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.md-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.tareas{padding:6px 18px 12px}
.tarea{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--borde);cursor:pointer}
.tarea:last-child{border-bottom:none}
.tarea .chk{width:22px;height:22px;border-radius:7px;border:2px solid var(--borde);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s}
.tarea.ok .chk{background:var(--negro);border-color:var(--negro);color:#0A0A0C}
.tarea .t{font-size:14px;font-weight:600;line-height:1.35}
.tarea.ok .t{color:var(--texto-2);text-decoration:line-through}
.tareas-prog{height:6px;background:var(--gris-claro);border-radius:999px;margin:0 18px 10px;overflow:hidden}
.tareas-prog i{display:block;height:100%;background:var(--negro);border-radius:999px;transition:width .4s}
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.eq-card{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.eq-card .who{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.eq-card .av{width:36px;height:36px;border-radius:50%;background:var(--rosa-soft);border:1px solid var(--borde);display:flex;align-items:center;justify-content:center;font-weight:800}
.eq-card .nm{font-weight:750;font-size:15px}
.eq-card .rl{font-size:11px;color:var(--texto-2)}
.eq-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.eq-num{background:var(--gris-claro);border-radius:10px;padding:8px 10px}
.eq-num b{display:block;font-size:19px;font-weight:800}
.eq-num span{font-size:10.5px;color:var(--texto-2);font-weight:650;text-transform:uppercase;letter-spacing:.3px}
.eq-tareas{font-size:12.5px;color:var(--texto-2);display:flex;align-items:center;gap:8px}
.eq-tareas .bar-wrap{flex:1}
.eq-lista{margin-top:10px;border-top:1px solid var(--borde);padding-top:8px;font-size:12.5px}
.eq-lista div{display:flex;gap:8px;padding:4px 0;color:var(--texto-2)}
.eq-lista b{color:var(--negro);font-variant-numeric:tabular-nums;min-width:44px}
.usr-tabla td,.usr-tabla th{padding:9px 12px}
.usr-tabla input,.usr-tabla select{width:100%;min-width:0;padding:6px 9px;font-size:12.5px}
.tareas-editor textarea{width:100%;min-height:96px;font-family:inherit;font-size:13px;padding:10px 12px;border:1px solid var(--borde);border-radius:10px;background:var(--blanco);color:var(--negro);resize:vertical}
.aviso-v2{font-size:12px;color:var(--texto-2);background:var(--gris-claro);border:1px dashed var(--borde);border-radius:10px;padding:10px 12px;line-height:1.5}

/* ---------- PIPELINE ---------- */
.pipeline-board.v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;overflow:visible}
.pipeline-board.v2 .pipeline-col{flex:none;max-height:none}
.pipeline-board.v2 .pipeline-cards{max-height:60vh}
.pipeline-board.v2 .pipeline-col.vacia{grid-column:span 1;opacity:.6}
.pipeline-board.v2 .pipeline-col.vacia .pipeline-cards{display:none}
.pipeline-card .cuando{font-size:11.5px;color:var(--negro);font-weight:650;margin-bottom:4px;display:flex;gap:6px;align-items:center}
.pipeline-card .sig{font-size:11px;color:var(--texto-2);margin-top:6px;border-top:1px dashed var(--borde);padding-top:5px}
.pipe-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pipe-top input[type=text]{min-width:240px}

/* ---------- FORMULARIOS (setter / triaje) ---------- */
.grp-5 input{padding:10px 4px;font-size:15px}
.form-ayuda{font-size:12px;color:var(--texto-2);margin:-6px 0 12px;line-height:1.5}
.ocultar-col{display:none!important}

/* ---------- MÓVIL ---------- */
@media(max-width:640px){
  body{display:block;padding-bottom:68px}
  #sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:62px;width:100%;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px;border-right:none;border-top:1px solid var(--borde);z-index:60;overflow-x:auto;background:var(--blanco)}
  #sidebar .brand,#sidebar .sidebar-foot{display:none}
  #sidebar .navitem{flex:1 0 auto;flex-direction:column;gap:3px;padding:6px 8px;border-radius:10px;font-size:10px;min-width:62px;border-left:none}
  #sidebar .navitem.active{border-left:none;padding-left:8px}
  #sidebar .navitem .ico{font-size:18px;width:auto}
  #sidebar .navitem span.txt{display:block;white-space:nowrap}
  .topbar{padding:12px 14px}
  .topbar h1{font-size:16px}
  .yo .rol,.yo .nombre{display:none}
  .view{padding:14px 12px}
  .md-grid{grid-template-columns:1fr}
  .ag-row{grid-template-columns:70px 10px minmax(0,1fr);gap:10px;padding:12px 12px}
  .ag-acc{grid-column:1/-1;justify-content:flex-start;padding-left:0}
  .ag-det{padding:6px 12px 16px}
  .ag-grid{grid-template-columns:1fr 1fr}
  .ag-filtros{margin-left:0;width:100%}
  .ag-filtros input[type=text]{min-width:0;flex:1}
  .ag-tabs{width:100%;overflow-x:auto}
  .kpi-grid,.kpi-grid.g5{grid-template-columns:repeat(2,1fr)}
  .kpi .val{font-size:22px}
  .grp-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pipeline-board.v2{grid-template-columns:1fr}
  #view-cuotas>div{grid-template-columns:1fr!important}
  #view-home>div[style*="grid"]{grid-template-columns:1fr!important}
}