/* Charts containers */
.chart-container {
  position: relative;
  height: 280px;
}

/* Status dots */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.status-dot.activo, .status-dot.pagado { background: var(--color-success); }
.status-dot.prospect, .status-dot.pendiente { background: var(--color-warning); }
.status-dot.cancelado, .status-dot.vencido { background: var(--color-error); }
.status-dot.borrador { background: var(--color-text-muted); }
.status-dot.emitida { background: var(--color-info); }

/* Cliente card (kanban) */
.cliente-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.cliente-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.cliente-card .empresa { font-weight: 600; font-size: 13px; }
.cliente-card .plan { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* Alert items */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  border: 1px solid transparent;
}
.alert-item.alta { background: #fde8e8; border-color: #f5b7b1; }
.alert-item.media { background: #fef5e7; border-color: #fad7a0; }
.alert-item.baja { background: #e8f4fd; border-color: #aed6f1; }

.alert-item .alert-icon { font-size: 20px; flex-shrink: 0; }
.alert-item .alert-text { flex: 1; }
.alert-item .alert-titulo { font-weight: 600; font-size: 13px; }
.alert-item .alert-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

/* QR Code container */
.qr-container {
  text-align: center;
  padding: 20px;
}
.qr-container img {
  max-width: 200px;
  border: 8px solid white;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}

/* Copy field */
.copy-field {
  display: flex;
  gap: 8px;
}
.copy-field input {
  flex: 1;
  background: var(--color-surface-alt);
}
.copy-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}
.copy-btn:hover { background: var(--color-surface-alt); }

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
}
.stat-cell {
  background: var(--color-surface);
  padding: 16px;
  text-align: center;
}
.stat-cell .value { font-size: 22px; font-weight: 700; color: var(--color-primary); }
.stat-cell .label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Sidebar toggle (mobile) */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--color-text);
  padding: 4px;
}

/* Tab navigation (for detail pages) */
.detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 20px;
}
.detail-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
}
.detail-tab:hover { color: var(--color-primary); }
.detail-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Detail panel */
.detail-panel { display: none; }
.detail-panel.active { display: block; }

/* Risk badge */
.risk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.risk-track {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.risk-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.risk-fill.low { background: var(--color-success); }
.risk-fill.medium { background: var(--color-warning); }
.risk-fill.high { background: var(--color-error); }

/* Factura preview */
.factura-header {
  background: var(--color-primary);
  color: white;
  padding: 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.factura-body { padding: 20px; }
.factura-tabla { width: 100%; margin-bottom: 20px; }
.factura-tabla th { background: var(--color-surface-alt); padding: 8px 10px; font-size: 11px; }
.factura-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.factura-totales { text-align: right; }
.factura-totales .total-row { display: flex; justify-content: flex-end; gap: 40px; padding: 4px 0; font-size: 13px; }
.factura-totales .total-final { font-size: 18px; font-weight: 700; color: var(--color-primary); border-top: 2px solid var(--color-border); padding-top: 8px; margin-top: 4px; }

/* 2FA codes */
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.recovery-code {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: monospace;
  font-size: 14px;
  text-align: center;
  letter-spacing: 2px;
}

/* Plan selector */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.plan-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.plan-card:hover { border-color: var(--color-primary); }
.plan-card.selected { border-color: var(--color-primary); background: #e8eef5; }
.plan-card .plan-name { font-weight: 700; font-size: 15px; color: var(--color-primary); }
.plan-card .plan-setup { font-size: 20px; font-weight: 700; margin: 8px 0 4px; }
.plan-card .plan-monthly { font-size: 12px; color: var(--color-text-muted); }