/* =============================================================================
   PIPELINE — kanban por estado + calendario mensual.
   ============================================================================= */

.pl-barra{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:16px;
}
.pl-barra .buscar{ flex:1; min-width:180px; max-width:320px; }
.pl-barra select, .pl-barra input{
  background:var(--card2); color:var(--ink);
  border:1px solid var(--line2); border-radius:var(--r-sm);
  padding:8px 11px; font:inherit; font-size:12px;
}
.pl-barra select:focus, .pl-barra input:focus{
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent);
}
.pl-tabs{ display:flex; gap:4px; background:var(--card2); border-radius:10px; padding:3px; }
.pl-tabs button{
  background:none; border:0; border-radius:8px; padding:7px 14px;
  color:var(--mut); font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  transition:.14s;
}
.pl-tabs button.on{ background:var(--card3); color:var(--ink); }

/* ------------------------------------------------------------------- kanban */
.kb{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.kb-col{
  background:var(--card2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; min-width:0;
  transition:background .14s, border-color .14s;
}
.kb-col.drop{ border-color:var(--acc); background:rgba(252,80,0,.09); }
.kb-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:4px; }
.kb-hd .t{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; }
.kb-hd .t i{ width:8px; height:8px; border-radius:50%; display:block; flex:none; }
.kb-hd .n{ font-family:var(--mono); font-size:11px; color:var(--mut); }
.kb-tot{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:700; margin-bottom:12px;
}
.kb-tot small{ font-family:var(--sans); font-size:10px; color:var(--faint); font-weight:600; }
.kb-lista{ display:flex; flex-direction:column; gap:8px; max-height:62vh; overflow-y:auto;
  overscroll-behavior:contain; padding-right:2px; }
.kb-lista::-webkit-scrollbar{ width:5px; }
.kb-lista::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:3px; }

.ev{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--mut);
  border-radius:var(--r-sm); padding:11px 12px; cursor:pointer;
  transition:border-color .14s, transform .08s;
}
.ev:hover{ border-color:var(--line2); border-left-color:var(--acc); }
.ev:active{ transform:scale(.995); }
.ev.dragging{ opacity:.4; }
.ev.presupuestado{ border-left-color:var(--amber); }
.ev.confirmado{ border-left-color:var(--green); }
.ev.realizado{ border-left-color:var(--blue); }
.ev .f{
  font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--dim);
  letter-spacing:.3px; text-transform:uppercase;
}
.ev .f.sin{ color:var(--faint); }
.ev .nm{ font-size:12.5px; font-weight:700; margin:4px 0 3px; line-height:1.3; }
.ev .mt{ font-size:10.5px; color:var(--mut); }
.ev .pie{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:8px; }
.ev .monto{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px; font-weight:700; }
.ev .cob{ font-size:9.5px; font-weight:700; letter-spacing:.4px; }

/* --------------------------------------------------------------- calendario */
.cal-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cal-hd .mes{ font-size:15px; font-weight:700; text-transform:capitalize; }
.cal-nav{ display:flex; gap:6px; }
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal .dow{
  font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--faint); text-align:center; padding-bottom:4px;
}
.cal .dia{
  background:var(--card2); border:1px solid var(--line); border-radius:9px;
  min-height:92px; padding:7px; display:flex; flex-direction:column; gap:4px;
}
.cal .dia.fuera{ opacity:.3; }
.cal .dia.hoy{ border-color:var(--acc); box-shadow:inset 0 0 0 1px rgba(252,80,0,.35); }
.cal .dnum{ font-family:var(--mono); font-size:10.5px; color:var(--mut); font-weight:700; }
.cal .dia.hoy .dnum{ color:var(--acc); }
.cal .cev{
  background:var(--card); border-left:2px solid var(--mut); border-radius:5px;
  padding:4px 6px; font-size:10px; line-height:1.3; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal .cev:hover{ background:var(--card3); }
.cal .cev.presupuestado{ border-left-color:var(--amber); }
.cal .cev.confirmado{ border-left-color:var(--green); }
.cal .cev.realizado{ border-left-color:var(--blue); }
.cal .cev b{ font-weight:700; }
.cal .mas{ font-size:9.5px; color:var(--faint); padding-left:2px; }

/* La ficha modal vive en base.css como .mdl: la comparten Pipeline, Clientes y
   Menús a través de CM.UI.modal(). */

/* =============================== TELÉFONO ================================== */
@media (max-width:900px){
  .kb{ grid-template-columns:1fr; }
  .kb-lista{ max-height:none; }
  .cal{ gap:3px; }
  .cal .dia{ min-height:64px; padding:4px; }
  .cal .cev{ font-size:9px; padding:3px 4px; }
  /* En una celda de ~45px la hora se come el nombre entero y quedan todas las
     casillas diciendo "20:...". El nombre del cliente identifica; la hora no. */
  .cal .cev b{ display:none; }
}