/* Embudo de ventas (ventas.js): tablero de columnas por etapa, tarjetas, panel de la oportunidad y ajustes. */

main.wide:has(section[data-view="sales"]:not([hidden])) { max-width: none; }
.sales-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sales-head h2 { margin: 0.5rem 0; }
.sales-head select { width: auto; margin: 0; }
.sales-head .ce-primary { margin-left: auto; }
.sales-tabs { display: flex; gap: 0.25rem; }
.sales-tabs button { padding: 0.35rem 0.8rem; border: 1px solid #8886; background: none; color: inherit; border-radius: 6px; }
.sales-tabs button.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.sales-summary { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0.75rem 0; }
.sales-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.sales-filters input { flex: 1 1 16rem; width: auto; margin: 0; }
.sales-filters select { flex: 0 1 13rem; width: auto; margin: 0; }
.sales-board { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.75rem; align-items: flex-start; scroll-snap-type: x proximity; }
.sales-column { flex: 0 0 17rem; max-height: calc(100vh - 16rem); display: flex; flex-direction: column; border: 1px solid #8884; border-radius: 10px; background: #8881; scroll-snap-align: start; }
.sales-column.is-over { outline: 2px dashed var(--brand); outline-offset: -2px; }
.sales-column.is-incoming { background: #9ca3af22; }
.sales-column > header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid #8884; }
.sales-column > header strong { flex: 1; }
.sales-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.sales-cards { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; overflow-y: auto; min-height: 4rem; }
.sales-empty { margin: 0.5rem; color: #8888; font-size: 0.85em; text-align: center; }
.sales-card { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem; border: 1px solid #8884; border-left: 4px solid transparent; border-radius: 8px; background: Canvas; cursor: grab; }
.sales-card:hover, .sales-card:focus-visible { border-color: var(--brand); }
.sales-card.is-stale { border-left-color: #dc2626; }
.sales-card.is-dragging { opacity: 0.5; }
.sales-card-foot { display: flex; align-items: center; gap: 0.5rem; }
.sales-value { font-weight: 700; margin-right: auto; }
.sales-tag { padding: 0 0.4rem; border-radius: 999px; font-size: 0.75em; background: color-mix(in oklch, currentColor 12%, transparent); }

.sales-panel { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: 1rem 1rem 1rem auto; border: 1px solid #8886; border-radius: 12px; padding: 1rem 1.25rem; }
.sales-panel::backdrop { background: #0005; }
.sales-panel h4 { margin: 1.25rem 0 0.4rem; }
.sales-stage-chip { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.85em; }
.sales-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 0.75rem; }
.sales-contact { display: flex; flex-direction: column; gap: 0.15rem; }
.sales-messages { display: flex; flex-direction: column; gap: 0.35rem; max-height: 16rem; overflow-y: auto; padding: 0.5rem; border-radius: 8px; background: #8881; }
.sales-msg { margin: 0; padding: 0.35rem 0.6rem; border-radius: 10px; max-width: 85%; font-size: 0.9em; }
.sales-msg.is-user { align-self: flex-start; background: #8882; }
.sales-msg.is-assistant, .sales-msg.is-human { align-self: flex-end; background: color-mix(in srgb, var(--brand) 13%, transparent); }
.sales-incoming { padding: 0.6rem 0.75rem; margin: 0.75rem 0; border-radius: 8px; background: #f59e0b22; }
.sales-incoming p { margin: 0 0 0.5rem; }
.sales-won { background: #16a34a; color: #fff; border: 0; border-radius: 6px; }
.sales-lost { background: #dc2626; color: #fff; border: 0; border-radius: 6px; }
.sales-events { padding-left: 1.1rem; font-size: 0.9em; }
.sales-danger { margin-top: 1.5rem; }
.sales-results { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; margin: 0.4rem 0; }
.sales-stage-row { padding: 0.5rem 0; border-bottom: 1px solid #8883; }
.sales-required { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; }
.sales-required label.check { margin: 0.2rem 0; }
.inbox-deal { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0.2rem 0; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--brand); background: none; color: inherit; font: inherit; font-size: 0.85em; cursor: pointer; }

@media (max-width: 720px) {
  .sales-column { flex-basis: 85vw; max-height: none; }
  .sales-panel { margin: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .sales-head .ce-primary { margin-left: 0; }
}

/* Reportes */
.sales-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0.5rem 0 1rem; }
.sales-kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem; border: 1px solid #8884; border-radius: 10px; }
.sales-kpi strong { font-size: 1.4em; }
.sales-funnel { display: flex; flex-direction: column; gap: 0.4rem; }
.sales-funnel-row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto 7rem; gap: 0.6rem; align-items: center; }
.sales-bar { display: block; height: 1rem; border-radius: 4px; background: #8882; overflow: hidden; }
.sales-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
@media (max-width: 720px) { .sales-funnel-row { grid-template-columns: 6rem minmax(0, 1fr) auto; } .sales-funnel-row > :last-child { display: none; } }