/* ==========================================================================
   Dicofar CRM · Estilos de vista: Inicio (dashboard) y Reportes
   Solo tokens de crm.css. Prefijos: .dash-* (inicio) y .rep-* (reportes).
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* INICIO                                                                  */
/* ---------------------------------------------------------------------- */
.dash { display: flex; flex-direction: column; gap: var(--sp-5); }
.dash > .page-header { margin-bottom: 0; align-items: flex-end; }
.dash-head__date { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-3); }
.dash-head__actions { flex: none; }
.dash-scope > button { min-height: 32px; }
.dash-scope .icon { width: 14px; height: 14px; }
.dash-link { color: var(--text-2); font-weight: var(--fw-medium); }
.dash-link:hover { color: var(--link); }
.dash-card__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-card .card__title .count, .dash-alerts .card__title .count { margin-left: 2px; }

/* Alertas */
.dash-alerts__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.dash-sev--alta { --sev: var(--danger); --sev-soft: var(--danger-soft); --sev-text: var(--danger-text); }
.dash-sev--media { --sev: var(--warning); --sev-soft: var(--warning-soft); --sev-text: var(--warning-text); }
.dash-sev--info { --sev: var(--info); --sev-soft: var(--info-soft); --sev-text: var(--info-text); }
.dash-alerts__label {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--sev-text);
}
.dash-alerts__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sev); flex: none; }
.dash-alerts__n { color: var(--text-3); font-weight: var(--fw-medium); }
.dash-alerts__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--sp-2); }
.dash-alert {
  display: flex; align-items: center; gap: var(--sp-3); height: 100%; min-height: 56px; padding: 8px var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.dash-sev--alta .dash-alert { border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.dash-alert:hover { text-decoration: none; background: var(--hover); border-color: var(--border-strong); }
.dash-alert:focus-visible { outline-offset: 1px; }
.dash-alert__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--sev-soft); color: var(--sev-text); }
.dash-alert__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-alert__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 20px; }
.dash-alert__body { font-size: var(--fs-12); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-alert__cta { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--link); white-space: nowrap; }
.dash-alert__cta .icon { width: 14px; height: 14px; }
.dash-allclear { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.dash-allclear__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success-text); }
.dash-allclear__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-13); color: var(--text-2); line-height: var(--lh-loose); }
.dash-allclear__title { font-size: var(--fs-16); }
.dash-allclear .btn--link { font-size: inherit; display: inline; white-space: normal; text-align: left; line-height: inherit; }

/* KPI */
.dash-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dash-kpi { color: inherit; text-decoration: none !important; transition: background var(--dur-1) var(--ease); position: relative; }
.dash-kpi:hover { background: var(--hover); }
.dash-kpi:focus-visible { outline-offset: -3px; border-radius: 0; }
.dash-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.dash-kpi__row .kpi__value { white-space: nowrap; }
.dash-kpi__spark { flex: none; margin-bottom: 6px; line-height: 0; }
.dash-kpi__sub { font-size: var(--fs-12); color: var(--text-2); line-height: 18px; }
.dash-kpi__sub strong { color: var(--text); font-weight: var(--fw-semibold); }
.dash-kpi__slash { margin: 0 6px; color: var(--text-4); font-weight: var(--fw-regular); }
.dash-kpi .kpi__meta { margin-top: auto; }

/* Columnas */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

/* Tareas */
.dash-tasks__group + .dash-tasks__group { border-top: 1px solid var(--border); }
.dash-tasks__label {
  display: flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-4) 2px;
  font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.dash-tasks__group--overdue .dash-tasks__label { color: var(--danger-text); }
.dash-tasks__n { font-weight: var(--fw-medium); color: var(--text-3); letter-spacing: 0; }
.dash-task { display: flex; align-items: flex-start; gap: 2px; padding: 0 var(--sp-4) 0 6px; border-bottom: 1px solid var(--border); }
.dash-tasks__list .dash-task:last-child { border-bottom: 0; }
.dash-check { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius); margin-top: 2px; }
.dash-check:focus-visible { outline: none; }
.dash-check:focus-visible .dash-check__box { box-shadow: var(--focus-ring); }
.dash-check__box {
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--border-strong);
  background: var(--surface); color: transparent; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dash-check__box .icon { width: 12px; height: 12px; stroke-width: 3; }
.dash-check:hover .dash-check__box { border-color: var(--success); color: var(--success); }
.dash-task.is-overdue .dash-check__box { border-color: color-mix(in srgb, var(--danger) 55%, var(--border-strong)); }
.dash-check[aria-checked="true"] .dash-check__box { background: var(--success); border-color: var(--success); color: #fff; }
.dash-task__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 0 10px; }
.dash-task__title { align-self: flex-start; max-width: 100%; text-align: left; font-weight: var(--fw-medium); color: var(--text); line-height: 20px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.dash-task__title:hover { color: var(--link); }
.dash-task.is-done .dash-task__title { text-decoration: line-through; color: var(--text-4); }
.dash-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-12); color: var(--text-3); }
.dash-task__meta .badge { height: 20px; }
.dash-task__meta .tag { height: 20px; }
.dash-task__type, .dash-due { display: inline-flex; align-items: center; gap: 4px; }
.dash-due { font-weight: var(--fw-medium); }
.dash-due--overdue { color: var(--danger-text); }
.dash-due--today { color: var(--warning-text); }
.dash-due--done { color: var(--success-text); }
.dash-task__owner { flex: none; padding-top: 12px; }

/* Reuniones y visitas */
.dash-event { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); min-width: 0; }
.dash-event:last-child { border-bottom: 0; }
.dash-event__date {
  width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 0; line-height: 1.15;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.dash-event__date span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.dash-event__date strong { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; }
.dash-event__date.is-today { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: var(--brand-soft); }
.dash-event__date.is-today span, .dash-event__date.is-today strong { color: var(--brand-text); }
.dash-event__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-event__title { align-self: flex-start; max-width: 100%; text-align: left; font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-sm); }
.dash-event__title:hover { color: var(--link); }
.dash-event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--text-3); }

/* Formularios */
.dash-form__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface-3); color: var(--text-3); }
.dash-form__icon.is-open { background: var(--blue-bg); color: var(--blue-fg); }
.dash-form .list-item__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-form.is-new, .dash-feed__item.is-new { animation: dash-flash 2.4s var(--ease-out); }
@keyframes dash-flash { from { background: var(--brand-soft-2); } to { background: transparent; } }

/* Embudo */
.dash-funnel { display: flex; flex-direction: column; gap: 2px; }
.dash-funnel__row { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-2); margin: 0 calc(var(--sp-2) * -1); border-radius: var(--radius); color: inherit; }
.dash-funnel__row:hover { background: var(--hover); text-decoration: none; }
.dash-funnel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.dash-funnel__label { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.dash-funnel__label .badge { min-width: 52px; justify-content: center; }
.dash-funnel__name { font-size: var(--fs-13); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-funnel__nums { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-12); color: var(--text-3); flex: none; }
.dash-funnel__nums strong { font-size: var(--fs-16); color: var(--text); font-weight: var(--fw-semibold); min-width: 20px; text-align: right; }
.dash-funnel__nums span { min-width: 72px; text-align: right; }
.dash-funnel__track { display: block; height: 8px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.dash-funnel__bar { display: block; height: 100%; border-radius: inherit; background: var(--fc); }
.dash-funnel__stages { font-size: var(--fs-12); color: var(--text-3); }

/* Notificaciones */
.dash-notifs .notif { border-bottom: 1px solid var(--border); }
.dash-notifs .notif:last-child { border-bottom: 0; }
.dash-notifs .notif__title { padding-right: var(--sp-4); }

/* Actividad */
.dash-feed { padding: var(--sp-1) 0; }
.dash-feed__item { position: relative; display: flex; gap: var(--sp-3); padding: 10px var(--sp-4); min-width: 0; }
.dash-feed__item:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--sp-4) + 13.5px); top: 40px; bottom: -8px; width: 1px; background: var(--border); }
.dash-feed__icon {
  position: relative; z-index: 1; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-3); color: var(--text-3); box-shadow: 0 0 0 3px var(--surface);
}
.dash-feed__icon--etapa { background: var(--mofu-soft); color: var(--mofu-text); }
.dash-feed__icon--formulario { background: var(--tofu-soft); color: var(--tofu-text); }
.dash-feed__icon--tarea { background: var(--green-bg); color: var(--green-fg); }
.dash-feed__icon--reunion { background: var(--purple-bg); color: var(--purple-fg); }
.dash-feed__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.dash-feed__text { font-size: var(--fs-13); line-height: 20px; color: var(--text-2); }
.dash-feed__text strong { color: var(--text); font-weight: var(--fw-semibold); }
.dash-feed__text .badge { vertical-align: 1px; }
.dash-feed__sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-12); color: var(--text-3); }
.dash-feed__sub time { flex: none; }

/* ---------------------------------------------------------------------- */
/* REPORTES                                                                */
/* ---------------------------------------------------------------------- */
.rep-toolbar { display: flex; align-items: flex-end; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.rep-toolbar__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rep-toolbar__label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-3); }
.rep-period > button { min-height: 30px; }
.rep-owner { width: 220px; }
.rep-toolbar__note { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-12); color: var(--text-3); padding-bottom: 8px; }
.rep-tabs { margin-bottom: var(--sp-5); }
.rep-tabs .tab .icon { width: 16px; height: 16px; color: var(--text-4); }
.rep-tabs .tab[aria-selected="true"] .icon { color: var(--brand-text); }
.rep-panel:focus { outline: none; }
.rep-kpis { margin-bottom: var(--sp-5); }
.rep-kpis .kpi[tabindex]:focus-visible { outline-offset: -3px; border-radius: 0; }
.rep-kpi__aux { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text-3); }
.rep-note { margin-bottom: var(--sp-4); }

.rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }
.rep-card { display: flex; flex-direction: column; min-width: 0; }
.rep-card--wide { grid-column: 1 / -1; }
.rep-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.rep-card__titles { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rep-card__eyebrow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.rep-card__eyebrow .badge { text-transform: none; letter-spacing: 0; }
.rep-card__title { font-size: var(--fs-16); line-height: 22px; font-weight: var(--fw-semibold); color: var(--text); text-wrap: balance; }
.rep-card__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.rep-card__body { padding: var(--sp-2) var(--sp-4) var(--sp-4); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.rep-card__def { display: flex; align-items: flex-start; gap: 6px; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); margin-top: auto; }
.rep-card__def .icon { margin-top: 2px; color: var(--text-4); }
.rep-chart { min-width: 0; min-height: 60px; }
.rep-chart .chart { max-width: 100%; }
.rep-card .chart-legend { margin-top: 0; }
.rep-table { margin: 0 calc(var(--sp-4) * -1); border-top: 1px solid var(--border); }
.rep-card__body > .rep-table:first-child { border-top: 0; margin-top: calc(var(--sp-2) * -1); }
.rep-table .table tfoot td { border-top: 1px solid var(--border-strong); background: var(--surface-2); height: 36px; }
.rep-table .table tbody tr:last-child td { border-bottom: 0; }
.rep-table .person { max-width: 220px; }
.rep-donut { padding: var(--sp-2) 0; }
.rep-cycle { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-13); color: var(--text-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.rep-cycle .icon { margin-top: 2px; color: var(--text-3); }
.rep-cycle strong { color: var(--text); font-weight: var(--fw-semibold); }
.rep-sort { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rep-sort__label { font-size: var(--fs-12); color: var(--text-3); }
.rep-empty { padding: var(--sp-2) 0; }

/* ---------------------------------------------------------------------- */
/* RESPONSIVE                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .dash-cols { display: flex; flex-direction: column; align-items: stretch; }
  .dash-col { display: contents; }
  .dash-card--tasks { order: 1; } .dash-card--forms { order: 2; } .dash-card--events { order: 3; }
  .dash-card--funnel { order: 4; } .dash-card--notifs { order: 5; } .dash-card--feed { order: 6; }
  .rep-grid { grid-template-columns: minmax(0, 1fr); }
  .rep-toolbar__note { margin-left: 0; width: 100%; padding-bottom: 0; }
}
@media (max-width: 767px) {
  .dash { gap: var(--sp-4); }
  .dash-cols, .dash-col { gap: var(--sp-4); }
  .dash-head__actions { width: 100%; }
  .dash-scope { display: flex; width: 100%; }
  .dash-scope > button { flex: 1 1 0; min-height: 44px; }
  .dash-alerts__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: var(--sp-3); }
  .dash-alert { flex-wrap: wrap; row-gap: 4px; align-items: flex-start; padding: var(--sp-3); }
  .dash-alert__main { flex-basis: calc(100% - 44px); }
  .dash-alert__body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dash-alert__cta { margin-left: 44px; min-height: 24px; }
  .dash-allclear { padding: var(--sp-4); }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dash-kpi { padding: var(--sp-3); }
  .dash-kpi__spark svg { width: 56px; }
  .dash-task { padding-right: var(--sp-3); }
  .dash-task__main { padding: 0 0 10px; gap: 2px; }
  .dash-task__title { min-height: 44px; display: flex; align-items: center; padding: 2px 0; }
  .dash-task__meta { font-size: var(--fs-13); }
  .dash-event { padding: 8px var(--sp-4); }
  .dash-event__title { min-height: 44px; display: block; line-height: 44px; margin: -6px 0 -8px; }
  .dash .card__header .btn--sm, .rep .rep-card__actions .btn--sm { --btn-h: 44px; }
  .dash .card__footer { min-height: 52px; padding-block: 4px; }
  .dash .card__footer a, .dash .card__footer .btn--link { min-height: 44px; display: inline-flex; align-items: center; }
  .dash-alerts__more { margin-top: 2px; }
  .dash-form { flex-wrap: wrap; row-gap: 6px; }
  .dash-form .list-item__main { flex-basis: calc(100% - 44px); }
  .dash-form .list-item__side { margin-left: 44px; }
  .dash-funnel__row { padding: 10px var(--sp-2); }
  .dash-feed__sub .truncate { display: none; }
  .dash-feed__sub span[aria-hidden] { display: none; }

  .rep-toolbar { gap: var(--sp-3); }
  .rep-toolbar__field { width: 100%; }
  .rep-period { display: flex; width: 100%; }
  .rep-period > button { flex: 1 1 0; min-height: 44px; padding: 0 6px; }
  .rep-owner { width: 100%; }
  .rep-tabs { margin: 0 calc(var(--sp-4) * -1) var(--sp-4); padding: 0 var(--sp-4); }
  .rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-4); }
  .rep-kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rep-kpis .kpi { padding: var(--sp-3); }
  .rep-grid { gap: var(--sp-4); }
  .rep-card__head { flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  .rep-card__actions { margin-left: calc(var(--sp-2) * -1); }
  .rep-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .rep-card__def { padding: var(--sp-3); }
  .rep-table { margin: 0 calc(var(--sp-3) * -1); }
  .rep-table .table--cards tfoot { display: block; }
  .rep-table .table--cards tfoot tr { display: block; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); }
  .rep-table .table--cards tfoot td { display: flex; justify-content: space-between; gap: var(--sp-3); height: auto; padding: 2px 0; border: 0; background: none; }
  .rep-table .table--cards tfoot td::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-12); }
  .rep-table .table--cards tfoot td:first-child::before { content: none; }
  .rep-table .table--cards tfoot td:empty { display: none; }
  .rep-table .table--cards td[data-primary] .person { max-width: none; }
  .rep-table .table--cards td[data-primary] a { display: flex; align-items: center; min-height: 44px; }
  .rep-sort .chip { height: 44px; }
  .rep-table .table--cards td[data-primary] .badge { margin-top: 2px; }
}