/* ============================================
   DIRECCIÓN 360 — dashboard.css
   Estilos específicos del dashboard ejecutivo
   ============================================ */

/* ---------- Header del dashboard con saludo ---------- */
.dashboard-greeting {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}

.dashboard-greeting__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.05); }
}

/* ---------- Mini barra de progreso para próximos vencimientos ---------- */
.deadline-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}
.deadline-item:last-child { border-bottom: none; }

.deadline-item__date {
  width: 56px;
  flex-shrink: 0;
  text-align: center;
  padding: 6px 0;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
}

.deadline-item__date-day {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.deadline-item__date-month {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  margin-top: 2px;
}

.deadline-item__body {
  flex: 1;
  min-width: 0;
}

.deadline-item__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deadline-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.deadline-item__owner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.deadline-item__owner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-faint);
}

/* Indicador de urgencia */
.deadline-item--urgent .deadline-item__date {
  background: var(--color-danger-soft);
  border-color: #FCA5A5;
}
.deadline-item--urgent .deadline-item__date-day,
.deadline-item--urgent .deadline-item__date-month {
  color: #B91C1C;
}

.deadline-item--soon .deadline-item__date {
  background: var(--color-warning-soft);
  border-color: #FCD34D;
}
.deadline-item--soon .deadline-item__date-day,
.deadline-item--soon .deadline-item__date-month {
  color: #B45309;
}

/* ---------- Mini-resumen lateral ---------- */
.summary-list {
  display: flex;
  flex-direction: column;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}
.summary-row:last-child { border-bottom: none; }

.summary-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-text-soft);
}

.summary-row__value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.summary-row__indicator {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.summary-row__indicator--primary { background: var(--color-primary); }
.summary-row__indicator--info    { background: var(--color-info); }
.summary-row__indicator--warning { background: var(--color-warning); }
.summary-row__indicator--danger  { background: var(--color-danger); }
.summary-row__indicator--success { background: var(--color-success); }

/* ---------- Headline KPI especial ---------- */
.headline-card {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.headline-card::after {
  content: "";
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(27, 94, 63, 0.45) 0%, transparent 70%);
  pointer-events: none;
}

.headline-card__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 2;
}

.headline-card__value {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 2;
}

.headline-card__sub {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 2;
}

/* ============================================
   AUDITORÍA — filtros
   ============================================ */
.audit-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: end;
}

.audit-filters__apply {
  align-self: end;
}

.audit-filters__apply .btn {
  width: 100%;
}

@media (max-width: 768px) {
  .audit-filters {
    grid-template-columns: 1fr 1fr;
  }
  .audit-filters__apply {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .audit-filters {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   DONADORES — filtros, formulario, ficha
   ============================================ */

.donors-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
}

.donors-filters__search { min-width: 0; }

.donors-search-wrap {
  position: relative;
}

.donors-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.donors-search-wrap input {
  padding-left: 38px;
}

.donors-filters__archived {
  display: flex;
  align-items: end;
}

@media (max-width: 1024px) {
  .donors-filters {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .donors-filters__search { grid-column: 1 / -1; }
  .donors-filters__archived { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .donors-filters {
    grid-template-columns: 1fr;
  }
}

/* Acciones por fila */
.donors-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.donors-row-actions .btn {
  padding-left: 6px;
  padding-right: 6px;
  height: 30px;
}

.donors-row-actions .btn svg {
  width: 14px;
  height: 14px;
}

/* Formulario donor */
.donor-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
}

.donor-form__col-2 { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .donor-form__grid {
    grid-template-columns: 1fr;
  }
}

/* Ficha de detalle */
.donor-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: var(--space-4);
}

.donor-detail__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.donor-detail__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-4) 0;
}

.donor-detail__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.donor-detail__row dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.donor-detail__row dd {
  font-size: var(--fs-base);
  color: var(--color-text);
  word-break: break-word;
}

@media (max-width: 600px) {
  .donor-detail__list {
    grid-template-columns: 1fr;
  }
}

.donor-detail__notes {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
}

.donor-detail__notes-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.donor-detail__notes-body {
  font-size: var(--fs-base);
  color: var(--color-text-soft);
  line-height: var(--lh-relaxed);
}

.donor-detail__meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

/* ============================================
   PROYECTOS — filtros, slider, ficha
   ============================================ */

.projects-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
}

.projects-filters__search { min-width: 0; }

.projects-filters__archived {
  display: flex;
  align-items: end;
}

@media (max-width: 1200px) {
  .projects-filters { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .projects-filters__search { grid-column: 1 / -1; }
  .projects-filters__archived { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .projects-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .projects-filters { grid-template-columns: 1fr; }
}

/* Slider de avance */
.project-progress-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border-soft);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}

.project-progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary), 0 2px 6px rgba(27, 94, 63, 0.25);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.project-progress-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.project-progress-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary), 0 2px 6px rgba(27, 94, 63, 0.25);
  cursor: pointer;
}

/* Barra de avance grande en ficha de detalle */
.project-detail__progress {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.project-detail__progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.project-detail__progress-bar {
  height: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.project-detail__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-pill);
  transition: width var(--transition-base);
}

/* ============================================
   DELEGACIONES — modal de detalle
   ============================================ */
.del-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.del-detail__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.del-detail__block-banner {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin-top: var(--space-3);
}

.del-detail__actions {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.del-detail__actions-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.del-detail__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}

.del-detail__history {
  margin-top: var(--space-5);
}

.del-detail__history-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Timeline del historial */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.timeline__item:last-child {
  border-bottom: none;
}

.timeline__body {
  flex: 1;
  min-width: 0;
}

.timeline__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
  font-size: var(--fs-sm);
}

.timeline__action {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  margin-bottom: 4px;
}

.timeline__comment {
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 4px;
  border-left: 3px solid var(--color-primary);
}

/* ============================================
   MIS DELEGACIONES — tarjetas
   ============================================ */

.my-del-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-4);
  align-items: end;
}

.my-del-filters__search { min-width: 0; }

@media (max-width: 900px) {
  .my-del-filters {
    grid-template-columns: 1fr 1fr;
  }
  .my-del-filters__search { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .my-del-filters {
    grid-template-columns: 1fr;
  }
}

/* Stats row */
.my-del-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.my-del-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

.my-del-stat__value {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.my-del-stat__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  margin-top: 4px;
}

/* Grid de tarjetas */
.my-del-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.my-del-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.my-del-card:hover {
  box-shadow: 0 4px 16px rgba(15, 42, 68, 0.08);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.my-del-card--overdue {
  border-left: 4px solid var(--color-danger);
}

.my-del-card--blocked {
  border-left: 4px solid var(--color-warning);
}

.my-del-card--overdue.my-del-card--blocked {
  border-left: 4px solid var(--color-danger);
  border-top: 1px solid var(--color-warning);
}

.my-del-card__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.my-del-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.my-del-card__date-row {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.my-del-card__deadline { font-weight: var(--fw-semibold); }
.my-del-card__deadline--danger  { color: var(--color-danger); }
.my-del-card__deadline--warning { color: var(--color-warning); }

.my-del-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0;
}

.my-del-card__project {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.my-del-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: var(--lh-base);
  margin: 0;
}

.my-del-card__block {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-xs);
  color: var(--color-text);
}

.my-del-card__progress { margin-top: auto; }

.my-del-card__progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}

.my-del-card__progress-bar {
  height: 8px;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.my-del-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-pill);
  transition: width var(--transition-base);
}

.my-del-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}

/* ============================================
   REUNIONES — ficha de detalle
   ============================================ */
.meeting-detail__date {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 200px;
}

.meeting-detail__date-icon {
  font-size: 24px;
  line-height: 1;
}

.meeting-detail__agreements {
  margin-top: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.meeting-detail__agreements-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.meeting-detail__agreements-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.meeting-detail__agreement-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.meeting-detail__agreement-text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-base);
  white-space: pre-wrap;
}

.meeting-detail__agreement-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .meeting-detail__agreement-item {
    flex-direction: column;
  }
  .meeting-detail__agreement-btn {
    align-self: flex-start;
  }
}

/* Banner "Reunión de origen" en el modal de creación de delegación desde acuerdo */
.from-agreement-banner {
  background: linear-gradient(135deg, rgba(27, 94, 63, 0.08) 0%, rgba(27, 94, 63, 0.03) 100%);
  border: 1px solid rgba(27, 94, 63, 0.20);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.from-agreement-banner__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: 2px;
}

.from-agreement-banner__meeting {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.from-agreement-banner__date {
  font-size: var(--fs-sm);
  margin-top: 2px;
}

/* ============================================
   ARCHIVOS — Dropzone, asociación, iconos
   ============================================ */

.files-dropzone {
  position: relative;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
}

.files-dropzone:hover,
.files-dropzone--hover {
  border-color: var(--color-primary);
  background: rgba(27, 94, 63, 0.04);
}

.files-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.files-dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  pointer-events: none;
}

.files-dropzone__icon {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.files-dropzone__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.files-dropzone__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Asociaciones en la columna de tabla */
.files-assoc-icon {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 2px;
}

/* ============================================
   DASHBOARD EJECUTIVO (Bloque 9)
   ============================================ */

.dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinning { animation: spin 1s linear infinite; }

/* KPI grid */
.dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.kpi:hover {
  box-shadow: 0 4px 16px rgba(15, 42, 68, 0.08);
  transform: translateY(-2px);
}

.kpi__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-text-soft);
}

.kpi__icon svg { width: 22px; height: 22px; }

.kpi__body { flex: 1; min-width: 0; }

.kpi__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.kpi__value {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 4px;
}

.kpi__sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Variantes de color de icono */
.kpi--primary .kpi__icon { background: var(--color-primary-light); color: var(--color-primary); }
.kpi--success .kpi__icon { background: rgba(16, 185, 129, 0.10); color: var(--color-success); }
.kpi--info    .kpi__icon { background: rgba(59, 130, 246, 0.10); color: var(--color-info); }
.kpi--warning .kpi__icon { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.kpi--danger  .kpi__icon { background: rgba(220, 38, 38, 0.10); color: var(--color-danger); }
.kpi--neutral .kpi__icon { background: var(--color-bg); color: var(--color-text-soft); }

/* Dos columnas */
.dashboard__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (max-width: 1100px) {
  .dashboard__two-col { grid-template-columns: 1fr; }
}

/* Activity list (timeline plano) */
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.activity-item:last-child { border-bottom: none; }

.activity-item__body { flex: 1; min-width: 0; }

.activity-item__line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}

.activity-item__action {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-soft);
}

.activity-item__action--success  { background: rgba(16, 185, 129, 0.10); color: var(--color-success); }
.activity-item__action--danger   { background: rgba(220, 38, 38, 0.10); color: var(--color-danger); }
.activity-item__action--info     { background: rgba(59, 130, 246, 0.10); color: var(--color-info); }
.activity-item__action--primary  { background: var(--color-primary-light); color: var(--color-primary); }
.activity-item__action--neutral  { background: var(--color-bg); color: var(--color-text-soft); }

.activity-item__desc {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-base);
}

.activity-item__time {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Hover en filas clickables del dashboard */
.card__body--flush .table tbody tr:hover {
  background: var(--color-bg);
}

.dashboard__error {
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.20);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* ============================================
   REPORTES (Bloque 10)
   ============================================ */

.report-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.report-type-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-type-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(15, 42, 68, 0.06);
  transform: translateY(-2px);
}

.report-type-card--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.report-type-card__icon {
  font-size: 28px;
  line-height: 1;
}

.report-type-card__label {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.report-type-card__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

/* Filtros del reporte */
.report-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 600px) {
  .report-filters {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CONFIGURACIÓN (Bloque 11)
   ============================================ */

/* Tabs */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.settings-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  font-family: inherit;
}

.settings-tab:hover {
  color: var(--color-text);
}

.settings-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Catálogos */
.catalogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.catalog-card { margin: 0; }

.catalog-list {
  list-style: none;
  margin: 0 0 var(--space-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catalog-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.catalog-item__text {
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.catalog-item__remove {
  flex-shrink: 0;
  color: var(--color-danger);
  padding: 4px 6px;
}

.catalog-add {
  display: flex;
  gap: 6px;
  align-items: center;
}

.catalog-add__input {
  flex: 1;
}

.catalog-add__btn {
  flex-shrink: 0;
}